During the semester of Fall 2018, my team and I worked with The Crucible, the largest industrial arts education facility in the United States, to redesign part of their website. The initial goals for the project were to increase conversions and reduce the abandoned cart rate on the website.
Phase 1: User Research
We set out with two questions that our client brought to us:
How might we increase conversions and reduce abandoned cart rates?
How might we improve the class registration process?
In order to gain insights into the problem space, we conducted the following research methods to better understand user behaviors and current pain points.
Patterns + Initial Insights
Navigation issues make finding the right classes more difficult
Users had trouble navigating when asked to find certain pages. For example, some buttons with similar labels, such as “View All Classes” and “View Classes”, actually directed to different pages and made the experience confusing.
Another issue with navigation was the excessive scrolling on several key pages, which leads to difficulty finding and locating information.
Unclear information hierarchy hinders quick and clear access to information
Layout and information hierarchy on class information pages can be more effective. Users reported the feeling of a lack of knowledge after reading through the description, which prevented them from registering for the class immediately.
Visual design problems undermine readability and professionalism
The contrast of colors made some parts of the site more difficult to read, such as the checkout screen with the thin green texts on a black background. Other places of improvements pointed out included the inconsistency in styles of link and buttons that made the call of action less clear to the user.
Mobile responsiveness is unwieldy
In addition to desktop testing, we also conducted testing on mobile devices. Several pages were unwieldy to view on mobile, especially in regards to lengthy scrolling and class browsing.
Wording lacks an accurate reflection of the offering at The Crucible
Some wording used on the website was confusing, such as calling classes “out of stock” and referring to classes as “products”, and users reported a feeling of doubt after seeing those texts.
Phase 2: Synthesis + Ideation
After synthesizing our research findings and interview results, we realized that there were no obvious obstacles in terms of the checkout process itself — it was pretty standard across the board. On the other hand, pain points were identified in the process of looking for classes and learning about classes, and these pain points hindered customers from making their final purchasing decision even after adding them to the shopping cart. Therefore, we reframed our question.
How might we improve the class navigation experience and increase access to information on the website in order to promote purchasing behavior?
Modifying the User Flow
After redefining the problem space, we took a deeper look into the current user flow of the website and then mapping out two different example user flows of finding an adult jewelry class.
This flow was created in response to our research findings. We decided to remove some intermediate pages, to provide useful information more quickly, and add easier options to find and add classes to check out.
This flow demonstrates the current flow from finding a class to checking out, which contains many unnecessary sub-pages that don’t give any additional information and increase the time needed to find a class. The red pages shown above are two main areas where users experienced difficulty navigating to other parts of the website.
Filter + Sort
In order to streamline and optimize the process of finding classes, we also looked into the existing filter function on the class search page. We discovered that the filter function does not allow multiple selection, and that the categories under some filters had overlap, which made the filtering overall a difficult process.
We also found out that there was no sorting function on the class search page, which made it difficult to navigate classes in more specific orders.
Incentivizing Purchase Behavior
In addition to optimizing the user flow for class browsing, we also ideated about ways to incentivize users’ purchasing behaviors on the website. Those included adding a message about number of spots left when it was less than 5 on the class detail page, as well as adding a pop-up confirmation that directs the user to check-out after adding a class to the shopping cart.
Low & mid-fidelity prototypes
We focused on redesigning the major pages in the ideal checkout flow, which included the class search, class detail, departments, and department detail pages, to address the identified key insights of improving visual design and information hierarchy.
Phase 3: Iteration + User Testing
After iterating on our design and creating a higher fidelity prototype, we went out for another round of user testing. We did user testing with two methods: online testing through usertesting.com, where we hoped to test our prototype with a wider demographic range, and in-person testing, through which we would observe users’ actions and get more detailed feedback.
In total, we conducted 6 online testing trials and 3 in-person testing trials. Our major objective was to test our user flow, the information presented on each page, as well as visual design decisions.
The testing feedback was in accordance with the ease of use of our user flow. Some issues in terms of visual design were brought up during the testing sessions. For instance, the color of the dots on the Membership page caused confusion to one user, and we fixed that by changing the gradient colors to one color to indicate that the benefits for different membership types are consistent.
After further iterating on the design based on user testing feedback, we finalized the visual design and moved on to the final mock-up.
The initial problem space targeted at a quite concrete and practical issue of increasing conversion rate. However, after we looked more into the current website and interviewed both current and prospective users, we realized that the key underlying issue did not lie in the check-out process itself but instead is hidden inside the structure of the website. The looping user flow and lack of proper information hierarchy obstructed users from easily browsing and finding classes that they were genuinely interested in taking, hence impacting the conversion rate. If we were given more time, we would like to further delve into the structure of the website, especially the navigation bar, to further optimize the organization and usability of the website experience.