CASE STUDY:
Supper Chef
Supper Chef is a fictitious cooking school catering to all skill levels. From novices to seasoned cooks, participants create a three-course meal in each hands-on class, guided by expert chefs. For this self-initiated project, I designed a Supper Chef website that allows users to browse and sign up for their favourite cooking classes.
CHALLENGE
Available class sign-up websites have cluttered designs, inefficient systems for browsing classes, and lack enough information for users to feel confident in their decision-making.
GOAL
Design a user-friendly website by providing clear navigation, ample browsing options, and a straightforward checkout process.
RESPONSIBILITIES
-
Paper and digital wireframing
-
Low- & high-fidelity prototyping
-
Conducting usability studies
-
Iterating on designs
UNDERSTANDING THE USER
User Research
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat recreational classes as a fun activity when they want to learn something new or jump outside of their comfort zone. However, many class sign-up websites are confusing to navigate and lack details on each class which frustrated many target users. This caused a normally exciting experience to become challenging for them, deterring users from successfully signing up for classes.
SUMMARY OF PAIN POINTS:
1.
Navigation — Recreational class websites are often cluttered and overwhelming, leading to confusion in navigation.
2.
Interaction — Locating call-to-action items can be challenging, resulting in users making errors such as selecting the wrong buttons or, worse, leaving the website in frustration due to difficulty finding what they need.
3.
Experience — Insufficient photos and information create uncertainty about class expectations, diminishing confidence in decision-making and depriving users of an immersive browsing experience.
STARTING THE DESIGN
Sitemap & Wireframes
After finalizing the sitemap, I created several screen iterations using pen and paper. From these preliminary sketches, I selected my favorite concepts to develop into digital wireframes. Transitioning from paper to digital allowed for a clearer understanding of how the redesign could address user pain points and enhance the user experience. I incorporated imagery to captivate users' attention and ensured that information, like class details, was consistently presented to foster familiarity as users navigate the screens.
REFINING THE DESIGN
Usability Study
I converted the digital wireframes into a low-fidelity prototype to conduct usability tests. The participants in the test included both individuals with prior experience booking a class or activity online, and those without. This diverse group was essential to validate the app's primary user flow to ensure it is intuitive and understandable for both experienced and inexperienced users.
STUDY TYPE: Moderated
LOCATION: Canada, remote
PARTICIPANTS: 8, ages 20-45 years-old
LENGTH: 20 minutes
The usability testing yielded three key insights, leading to the following refinements in the website's design:
Text
Verbiage that was intended to convey a warm and inviting tone was actually confusing to some users. For example, ‘How many chefs?’ and ‘Our Story’ sounded ambiguous.
Icons
The icons used to convey class difficulty were not intuitive for all users.
Typography
When viewing the Class Details and Order Summary pages, it was challenging to spot key information from a glance.
Simplified verbiage to ‘How many participants?’ and ‘About us’.
Replaced icons with simple verbiage (i.e. ‘Beginner’, ‘Intermediate’, and ‘Advanced’).
Implemented a greater variety in typography and font amongst headers, paragraphs, and buttons.
Final Design
In my high-fidelity prototype, I aimed to incorporate insights from the usability tests to enhance the overall site interface and visual design. The prototype enables users to easily access the Class Schedule, navigate classes through the Filter and Sort functions, and seamlessly follow the primary user flow for booking a class. This includes steps such as submitting payment details and receiving a confirmation message.
Reflections
Throughout this project learned that imagery and icons can be useful tools in enticing users to engage with content and explore a website further. However I mustn’t rely on imagery and icons to guide the user flow. Being consistent with the typography and font used for different forms of information is key in building familiarity and confidence in users.
Design System
