Miley Hu
MyOrg
The Crucible@2x-100.jpg

The Crucible

This is a fun project!

 
Cover..
 
 

Project Overview

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.

The project was done through Berkeley Innovation and was completed together with Heidi Dong, Sona Dolasia, and Marissa Wu. We were mentored by Jessica Liu.


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 research using the following methods to better understand user behaviors and current pain points.

Group 2.png

In our research, a recurring comment was about the pricing of classes, which ranged from 75 to up to 1450 dollars and was considered a big purchase by many people that we interviewed and tested with. While pricing was not something within our scope of investigation, it helped us learn more about users’ emotions in the process and the kind of information that would motivate them to make the purchasing decision.

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 easy 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.

The current class detail page shows a lack of clear information hierarchy and has a limited amount of information presented.

The current class detail page shows a lack of clear information hierarchy and has a limited amount of information presented.

  • 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 Class Navigation 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.

current checkout flow

current checkout flow

ideal checkout flow

ideal checkout flow

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.

Class Search

Class Search

Class Detail

Class Detail

Class Detail - Added to Cart Confirmation

Class Detail - Added to Cart Confirmation

Department

Department

Department Quick View

Department Quick View


Phase 3: Iteration + User Testing

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.


Final Deliverables

After further iterating on the design based on user testing feedback, we finalized the visual design and moved on to the final mock-up.

STYLE GUIDE

 

MAJOR SCREENS

final deliverable.png

Reflection

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.