While interning at Friends of the Web, I worked a team with 2 other designers and reconceptualized and redesigned the website for QLab, an industry standard theatre software. The redesign directly addressed issues of the current site, including complexity of information, clutter of content, and banality of branding to present a more intuitive and captivating web experience.
Roles: UI prototype, client survey, visual system design, information analysis, client communication
The Design Challenge and Process
Upon research of the company and analysis of the current site, I oriented the redesign around these questions.
The process of the redesign involved surveying clients, establishing an information architecture, prototyping user-interfaces, and redirecting its visual style.
Gaining Insights From Client Surveys
One of the initial steps of this project was to interview QLab employees to understand the product and gain a better sense of the needs of their website. Along with other designers, I devised interview questions that probes into the user experience of QLab.
Here are a few examples from the questions we asked:
● Describe Figure 53 in three words.
● Is there a new audience or customer-base that Figure 53 is trying to appeal to? Who?
● Who are Figure 53's users/customers?
● Why do you believe Figure 53 customers chose your products over alternatives?
● What aspects of the current site are you most and least proud of? Why?
After the survey, I learned that the compnay wants to expand their lighting feature user base and reach out to new audiences, including students and hobbyists. I incorporated this new information in my designs.
Problem: too much close reading was needed to understand the licensing and pricing on the orignal site
The pricing/licensing page should allow users to:
1. Understand the difference between each license types (free, rent-to-own, perpetual)
2. Understand the differences between feature packs (video, audio, and lighting)
3. Obtain pricing information for each license
4. Choose the most suitable license type
The original download page and version announcements are messily scattered across the site
The download page is rated the highest in importance by Qlab employees from our surveys. The hero of the site highlights the newest Qlab release and displays large screenshots of the application for viewers to quickly contextualize the product.
QLab tutorials are hosted on a hard-to-navigate grid and resembles anything but theatre performances
The original “QLab Cookbook” is a series of QLab tutorials hosted independently on a wordpress site. The new design incorporates this section on QLab's main site under the heading of "Made with QLab".
The new account page perpetuates simple access of license activation and purchase history
The account page allows registered users to activate licenses and review their order. I divided the page into two major sections based on functions. The left section showcases license and order information, while the right section displays user metadata and links to support. For license overview, upgrade discounts, and order history, I designed a chart that captures the most important licensing information, such as name, date, and type, while leaving out frivolous details to avoid sensory overload. I also used prominent call to action buttons to indicate the major activities a user can perform on this page.
My favorite moment of the project was when QLab employees joined our company for a meeting to review our designs in person. As a designer, I felt delighted seeing our client respond highly positively to our design solutions. The live site is due to launch winter of 2018. Here are some of my takeaways from this project.
● Communication with client is crucial. In addition to our initial survey with the client, I remained an open line of communication through slack. I constantly drop in questions about activating licenses, upgrading licenses, or opening up a new account in our shared Slack channel.
● This project also taught me how to establish a hierarchy of importance for different information. I learned to notice what data is more relevant to the user and and how to display them effectively on a screen.