For two months, I served as the project manager and lead designer for the website redesign. I designed the personas, information architecture, and the style guide for the whole website. I collaborated with our UX Researcher and Web Developer along the process.
The background
The quality of Gage’s art programs is among the best in Seattle area, but the current website did not reflect the caliber or vibrance of the classes, programs and events at the school. This presented barriers to drawing in new customers. Our challenge for this project was to create an enjoyable and intuitive online user experience that embraces a growing business and diversifying user base.
The research
At the outset of the project, we didn’t have a clear mission or specific goals for the new web experience due to the lack of pre-existing insights into our user base. To define the specific goals for this project, I partnered with our data analyst Elena to explore users’ primary needs. We solicited feedback on content and functional priorities from our core user groups via targeted email surveys, interviews, and competitor analysis.
We sent out a questionnaire to the current students. The data indicated improvements were wanted in the following aspects of the existing website: navigation structure, search function, mobile experience, login and registration processes.
“ I prefer the catalog as I find I will pick it up and explore it more thoroughly than the website.”
the research
To find out the answers to the above question, we tested our existing website with 6 participants who had no prior knowledge of Gage. Our goals were to understand the challenges potential customers faced and workarounds they employed browsing the existing website.
"The courses are categorized in a very odd way. If I hadn't been conducting multiple searches, it would have been hard to see all the courses."
"The search functions seemed a little difficult. I had to find my course by using the instructors' name because it didn't show up in other types of searches."
“It’s hard to understand when courses are offered and what level of skill one needs"
It was obvious that potential customers are mostly frustrated with the search function and navigation structure of the existing website.
The research
To have better insights into our users’ expectation on the website experience in context, I went to our competitors’ websites to evaluate our existing website.
deeper insights
To tailor the navigation structure to our users’ needs, I hypothesized that users’ motivations for taking an art program differed, hinting at different requirements. Through careful analysis of our current customers, we identified behavioral variables to segment our users.
Design decisions
To further categorize the tasks into behavioral affinities and align content and features, I performed an affinity mapping exercise with staff across departments. This enabled me to visualize what existing functionality and content would be useful, what tasks needed supporting and also what could be discarded from the current website.Afterwards, I entered all the ideas into a spreadsheet and prioritized them against our personas, tech feasibility, and business objectives. This formed our strategy for the new website:
Deeper insight
Knowing exactly who I was designing for allowed me to ask myself how the web fits into users’ complete experience with the school. We utilized user journey mapping techniques to identify the key decision-making points and underly context of students: how they engage with the website to obtain information. This allowed us to represent user pain-points and discover the opportunities to innovate.
Design decisions
The results highlighted that we needed to prioritize Atelier content and that art media was a familiar tool for customers to browse content. Also, as a nonprofit, we need to make Membership and Donate information more prominent. I combined these concepts to design the new browsing experience.
Design decisions
Optimizing conversion rate was key to attracting new customers to sign up for programs online. Building on customer data and insights, I designed a custom flow with the ability to quickly see instructor information for any program.
Contrary to casual art learners, our serious art pursuers are more focused on in-depth information about our programs. One of my challenges was to convert long-scrolling text into digestible chunks. To solve that, I built up a strong information hierarchy by using color blocks and highlighting key points of each information section. Combined with the fact that these users are more likely to enroll after visiting the school in person, I designed a clearer layout to attract our users to visit the school.
Final design
I transformed Gage’s dissimilar color palette into two that are focused and effective. This lead me to the creation of a detailed style guide, defining a system for the user interface components for a unified visual language across the entire website.
Design decisions
Looking at the research, it was clear that a lot of the users were having a hard time finding their favorite classes and workshops. Also, it was apparent that our customers were surprisingly loyal to specific instructors. We arrived at a tab based navigation UI, highlighting this information.
Before vS after
In addition to navigation, I designed alternative ways to get to the content that people need. Based on our personas, we introduced filters and sorting as secondary devices to facilitate the main navigation. Specific and unambiguous properties such as Category and Schedule were used as filters.
.gif)
Before
After