Dandelion Chocolate

Overview

Dandelion Chocolate is a bean-to-bar chocolate maker originally from San Francisco. They are sommeliers of chocolate, only making single-origin chocolate bars with two ingredients: cocoa beans & organic sugar. Dandelion makes most of it's profits selling in-person products so in order to survive the market my team was in charge of building our online experience and redesigning the entire website.

My role

Lead UX Designer & Researcher
I wore many hats within the web team, for this particular design sprint I was also the main Front-end developer, QA manager and Release manager post-design process.

My Partners

  • Chief Experience Officer (CXO)
  • Digital Associate
  • Creative Manager

The Problem

As the pandemic of 2020 forced several small businesses to close their doors, guests needed to be provided a new personalized experience to stay connected to our services and products.

Foundational Research

In order to help improve the online experience. I conducted a competitive audit of Dandelion’s direct and indirect competitors, I noted down their features and identified our competitive edge.

Ritual Chocolate black logoSolstice Chocolate Logo
Hu Chocolate logo

I also conducted a naturalistic observation session where I observed 20+ guests, tracking patterns in behavior to identify existing pain points. This included:

Screen shot of Dandelion Chocolate page tracking user mouse movements with green lines

Afterwards, I created a report, presented it to stakeholders with key observations and next steps.

Only 5 of the 20 observed users made a purchase.

Most users left after scrolling to bottom of store page.

Observed long duration of hovering over navigation bar.

Understanding Users

All the information gathered informed the personas I built such as this one for Peder.

Dandelion Chocolate person with user (Peder's) image on the left and motivations and frustrations on the right

Based on the key observations gathered, I was requested to create a user flow chart that solely focused on the check out process to evaluate our existing process.

User flow chart of Dandelion's user checkout process

Prototyping

Keeping our observations and users in mind, I went ahead a facilitated a 'How Might we?' brainstorm session to come up with potential solutions that address our users' needs. Those ideas guided the layout of the wireframes I built in Figma.

After a feedback session with the web team and with guidance of the design system. I went ahead and built a working prototype.

Validation testing

While finalizing the prototypes, I wrote up a research plan and a usability testing script to prep for usability testing. Collaboratively we went ahead and recruited 5 participants for 45 min virtual sessions. We conducted 'within subject' testing and had users compare the prototype to our existing site. I moderated all sessions and compiled our notes into a 2x2 matrix affinity map where I gathered related notes to highlight any patterns.

Key Insights

After synthesizing and analyzing all our notes, I wrote up a research report that I presented to stakeholders with these key insights:

User research feedback grouped into 4 categories (nav bar feedback, location tab feedback, site footer feedback, and user's emotions during testing)

Accessibility

My entire process is led by insights, one the biggest being around areas to improve for accessibility.

Coding HTML/CSS

We went ahead and implemented all the actionable items onto our site. Since adding a sitemap footer was a priority and actionable UI component to add to our site, I was tasked with designing it on Figma and building a responsive version on our site using HTML /CSS and basic Javascript. I also lead a card sorting session to better determine the organization of the information.

screenshot of footer html and css code
Screenshot of site map footer of Dandelion Chocolate with links to site page on top and links to contact for help on the bottom

Challenges

Throughout my process I faced a few challenges

Impact

We A/B tested all the new UI components and observed that the new features positively impacts users' experiences.

After two cycles of design sprints such as this one, we increased our online sales by 300% in the year 2020.

We broke our monthly online sales record and made $1 million revenue in December 2020.

Before

view of former dandelion chocolate homescreen

After

screen shot of redesigned dandelion chocolate homepage
VIEW DANDELION

Moving forward

There is no 'one size fits all' design process

Although I learned about every method under design thinking, I had to focus on what was relevant and build a process that fitted the company's and users' needs.

Listening is part of communicating

In listening to the business needs I was able to better communicate our user needs. Rather than using 'design lingo', I used language that stakeholders and other departments knew to communicate insights and bring the vision together.

Solo designing & developing an end-to-end process

From defining the user needs to Release Management, I was involved in the entire process. This allowed me not only to build features that met user needs but also understand the teams' constraints and what was feasible; this lead to creative solutions.