Title.png

Project Overview

This past semester, 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:

  • How can we increase conversions and reduce abandoned cart rates?

  • How can we improve the class registration process on the website?

Group 2.png

key insights

  1. Mobile Responsiveness

    Several pages were unwieldy to view on mobile, especially in regards to lengthy scrolling and class browsing.

  2. Visual Design

    The contrast of colors made some parts of the site more difficult to read, such as the checkout screen.

  3. Navigation

    Users had trouble navigating when asked to find certain pages.

  4. Information Hierarchy

    Typography and layout on class information pages can be more effective.

  5. Wording

    Some wording used in the UI was confusing, such as calling classes “out of stock.”

PHASE 2: IDEATION

We began the ideation portion of the project by creating two user flows of a user finding an adult jewelry class.

current checkout flow

current checkout flow

ideal checkout flow

ideal checkout flow

This flow was created with our key 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 checkout flow, which contains many unnecessary sub-pages that don’t give any additional information and increase the time needed to find a class.

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 mid-fidelity prototype with colors and pictures, 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 visual design, including color palette and typography, as well as the user flow.

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.

FINAL DELIVERABLES

We further iterated on our design based on user testing feedback. We finalized the visual design and iterated on some of the pages.

sTYLE GUIDE

 

MAJOR SCREENS

final deliverable.png