Dandelion Chocolate

Business 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 business 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.

Challenges

Throughout my process I faced a few challenges

Building a design system from scratch. Dandelion did not have any consistent UI components or best practices and redesigns meant building and styling these components from scratch.
Limited engineering skills. As that sole designer and front-end developer I could only brainstorm solutions that I would be able to build. The solutions were limited to my own coding skillset but led to simplified creative problem solving.

Foundational user 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.

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

Device Type
User Journey (starting & exiting pages)
Number of clicks & pages visited
Duration of visit
Other user behaviors

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

Only 25% of 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.

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.

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.

Usability 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:

All participants used the site map footer in the prototype to complete core tasks
Most participants spend longer trying to read through small text on original homepage
Existing categories on navigation bar confused most participants

Accessibility

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

During usability testing sessions, I made sure to recruit first time tech users to collect equitable feedback around how to best support folks with low tech literacy skills.
I tested and tracked tab navigation to ensure our store was complaint with key board navigation.

Building the front-end via HTML/CSS

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

Impact

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

300% increase

in sales after two cycles of design sprints such as this one.

$1 million revenue

reached following this redesign work, setting a new business record for online revenue in a month!

Before & After

view of former dandelion chocolate homescreen

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.