Client:

Melt Chocolate Inc.

Melt Chocolate

Client

Melt Chocolate Inc.

Year

2024

Scope of Work

UX/UI

Location

Los Angeles

Melt Chocolate is a premium chocolate brand bringing "a bit of luxury" into everyday lives of sweets lovers.

The Problem

Available premium chocolate websites have cluttered design, inefficient systems through browsing though products, and confusing checkout processes.

The Goal

Design Melt Chocolate e-commerce website o be user-friendly by providing clear navigation and offering a fast checkout process.

My Responsibilities

Conducting user research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating an designs and responsive design.

Research

Competitive Analysis

To kick-start my design process I analyzed Melt's main competitors in the premium chocolate sector. These are the main companies I identified to be the direct competitors: Ferrero Rocher, Godiva Chocolate and Ghirardelli. Below are some of the key findings I was able to draw from my research.

‍

Key Findings

Primarily appeals to adults between ages 25 and 55
Largest percentage of web traffic coming from 45 to 55 year old users
60% of buyers are female particularly affluent, educated and urban, value social and environmental stewardship
Experimentation and trying new chocolates was found to be essential in chocolate consumption
Upper-middle and upper-class consumers
Couples
Segment products in terms of quality based upon usage occasion rather than cost
Use search attributes such as segmentation, price, availability, and packaging as quality determinants
Desire to trust the brand, look for certifications of sustainability, etc.
Chocolate as a gift seeked to experience joy or nostalgia

‍

User Personas: Lidia

Problem statement: Lidia is a VP in Marketing residing in Los Angeles at a bigger corporation. She is married and has a teenage daughter. Linda invests a lot of time and money into her health and looks working out three times a week and aiming to follow a nutritional diet. Considering all these efforts, Linda wants to make sure that whenever she does allow to treat herself to a bit of luxury - it is worth it. That is why she needs premium chocolate options over mass market ones.

‍

User Personas: Armineh

Problem statement: Armineh is a 35 year old real estate agent residing in Glendale, California with her family. The most important thing to Armineh is her family and their connection. Armineh needs a way to order an elegant, with a touch of luxury gift, for her mother-in-law to show her appreciation on Mother's day.

‍

UserJourney Map

I created a user journey map of Lidia's and Armineh's experience using the site to help identify pain points and improvement opportunities.

Ideation

Site Map

My goal while creating website architecture was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Wireframes

Next, I sketched out paper wireframes for the screens in Melt webite, keeping the user points about navigation, browsing and checkout flow in mind.

The home screen on the right focuses on optimizing the browsing experience for users.

Wireframes: Screen Variations

Because the museum’s visitors access the site on various different devices, I started to work on designs for additional screen sizes to make sure the website would be fully responsive.

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button locations and emphasising the “Currently on View” section on the home page was a key part of my strategy.

Digital Wireframes: Mobile

For the mobile version of the site I adjusted the layout of the pages with the limited screen real estate in mind. I rearranged the hero sections elements on "Our Story" and "Shop" pages in a responsive order placing the image on top instead of the right side. For the footer I have also adapted a vertical instead of the horizontal stacking. I have also substituted the navigation bar menu with the hamburger menu option.

Low Fidelity Prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.

‍

At this point, I had also received feedback (since user research is not a linear process) about things like placement of buttons and page organization. I made sure to listen to the feedback, and I implemented several suggestions in places that addressed user pain points.

‍

Usability Study: parameters

I decided to go with the unmoderated study type due to the time constraint. Selecting this type of study allowed me to complete this phase of the research in just a couple of days.

‍

Usability Study: findings

One of the major findings that I was able to discover during this process is that when a participant would be adding an item to the cart the starting quantity would not be zero but you could go as low as -1, -2, -3, etc. This was a P0 insight that needed top be addressed right away for the product to be usable.

‍

Participants were also not able to edit the quantity of items in the cart, which became another P0 insight; and some users made comments about the text looking cluttered over the hero image on the homepage which became an accessibility issue. I had to replace the image with something less overwhelming.

Mockups: Desktop

Based on the insights from the usability study, I made changes to improve the site’s user flow. I addressed every single P0 insight before all else and then moved on to P1 and P2. I adjusted the initial quantity on the product page to be zero and now users were able to adjust the number of items in the cart. As can seen above I have also replaced the homepage hero image with a smoother option and I added a background blur effect and dropped opacity lower for more readability.