DOLLY DONUTS - REBRAND & WEB DESIGN
Role - UX, UI, branding (Lead designer at Blame Brandon)
Tools - Figma, Adobe Illustrator, Adobe Photoshop, Adobe Dimension
Duration: 4 weeks
Research methods - Secondary and primary research, user interviews, competitor analysis, usability testing
Problem
Dolly Donuts (name has been changed due to client confidentiality) is a specialty small donut bakery in Oslo with an owner, Dolly, who has a big personality and a talent for baking amazing sweet creations. Dolly came to Blame Brandon because she felt that her branding was a little disjointed and she wanted to improve her web traffic and conversions.
Initial web data showed:
-
Data showed that 50% of Dolly Donuts users didn't make it past the home page
-
65% of users who placed an order in their cart did not purchase
The hypothesis was that the original homepage only had one large image without any other entry points to the main parts of the page. Also, the checkout process required login, which was believed to turn potential buyers away.
Solution
A cohesive rebrand and a simple, clean web.
-
Rebrand that emphasizes the owner's bubbly personality
-
Homepage that emphasizes what Dolly Donuts has to offer
-
Guest checkout process
Design Process:
1. Empathize
B. COMPETITIVE ANALYSIS
Once the problem was defined, I conducted a competitive analysis of the other speciality donut shops in the city. I also took a look at one indirect competitor to see how their website experience was.
Talormade
A specialty bakery and coffee roaster in Oslo, specializing in donuts.
Strengths
-
Nice branding, friendly tone that is inviting
-
Clean web
-
Easy to use web and checkout process
Weaknesses
-
No access to the actual menu
-
Cannot see allergens
-
Not much imagery on their web of their actual donuts
-
No option to use other payment option other than card
My Ugly Baby
A donut/coffee shop that sells handmade donuts.
Strengths
-
Language selection
-
Clear about their locations
Weaknesses
-
No access to the actual menu
-
Cannot see allergens
-
Not much imagery on their web of their actual donuts
-
No option to use other payment option other than card
The Cupcake & Pie Co.
Makes fresh cupcakes, pies and donuts.
Strengths
-
Easy ordering process
-
Clear menu
-
Option for order customizations
Weaknesses
-
Too much text
-
Navigation is in an odd place and not at the top where you expect
-
No option to use other payment option other than card
Krispy Kreme
A large donut chain in US that makes a lot of donuts fast.
Strengths
-
Easy to use web
-
Clear CTAs, nice color contrast
-
Easy to use navigation
Weaknesses
-
Too many things going on in the web design
-
Once you enter the ordering process you can no longer see the main navigation
Indirect competitors:
Direct competitors:
I interviewed the owner to understand her current brand and what she envisioned for the new design.
Key takeaways:
-
Her current target audience are locals in Oslo between the ages of 16-40. Majority of them find her through Instagram or by recommendations by someone else.
-
Dolly has a very warm and bubbly personality that her customers are drawn to. The brand really needs to reflect her personality. It should be playful, colorful, and happy.
-
Dolly felt that her current brand was a bit inconsistent across various surfaces.
-
She loves to hand write messages for each of her customers, but this takes too much time so she needs a different solution.
-
She thought her current web could use some improvements, especially on the home page and with the shopping experience.
A. STAKEHOLDER INTERVIEW
C. USER INTERVIEWS & ANALYSIS
In order to better understand who is the target audience, 4 interviews were conducted. Users were male and female between the ages of 18-40, living in Oslo and tend to eat out and/or order food online.
From the interviews I learned:
-
All participants said that they look at reviews before trying a new food place in the city
-
3 out of 4 participants said they look for new cool places to eat via Instagram, and food imagery plays a big role in persuading them to visit the restaurant.
-
3 out of 4 participants said that they get frustrated when they have to create an account when ordering food online
-
2 out of 4 participants said that when browsing through a menu, they often look for allergy listings
-
3 out of 4 participants said it is convenient when they have several options to pay, such as by card, Vipps, or Apple Pay
2. Define
A. PERSONA
B. HOW MIGHT WE?
3. Ideate
A. SOLUTION
C. USER FLOW
In this part of the design process, I created a persona, and created my problem statement.
Meet Linn. She lives in Oslo, currently studying pharmacy at the university. She loves exploring the city with her friends and finding cool new places to eat.
After the research phase, I deduced that users need to see a consistent brand experience across all touchpoints and have an easy user experiences on the web when purchasing a product.
-
How might we create a fun and consistent brand experience across all customer touchpoints?
-
How might we help users feel more confident about their purchase?
-
How might we inform web visitors better about offerings on the home page?
-
How might we create better, easier options at checkout?
In this part of the design process I came up with solutions, created a site map, and a user flow for the checkout process. After that, I worked on the new brand identity first before I started on the web. Then, I created wireframes for my web ideas, created a mid-fidelity prototype, conducted usability testing, and created the visuals for the web.
-
A new brand identity that is bright and colorful
-
New clean and simple web design
-
Easy guest checkout process
-
Include credit card and Vipps as payment options
-
Include reviews on product pages
B. SITE MAP
I focused on 1 main user flow: the guest checkout process.
D. WIREFRAMES
Mid fidelity wireframes and a mid-fidelity prototype were created.
E. USABILITY TESTING
I conducted usability testing with 5 participants over zoom, each lasting about 30 minutes.
Objectives from the test:
-
Observe if users can complete the specified task.
-
Identify areas for improvement based off of users' feedback.
Results:
-
Users were generally able to complete purchasing a product with ease.
-
They enjoyed that the checkout process was broken down into several steps.
-
Users wanted a progress bar at the top of the checkout process (this iteration is shown in the above wireframes).
F. REBRAND AND VISUALS
The rebrand was inspired by Dolly's warm and playful personality. Many of the design elements were inspired by her hand-written notes that she leaves for her customers inside their donut boxes. I designed a logo that represents the joy that Dolly finds in her baking and meeting her customers. The mark is a design that could easily be reproduced by hand, allowing her to be able to quickly draw it anywhere. The typography is a mixture of a handwritten typeface inspired by Dolly's handwriting, and a clean modern serif that can be used for larger areas of text. I also created custom illustrations that can be used as a pattern and applied on packaging and other merchandise.
View Figma prototype here.
View Figma prototype here.
-
4 users participated in the high-fidelity prototype usability testing
-
1 iteration to the design to fix user problems (i.e. contrast issues, ability to move forward and back as expected, interactions, etc.)
4. Prototype & Test
5. Reflection
Key takeaways:
-
Unfortunately this client ended up not using our design due to a conflict with a previous agreement with another designer.
-
The competitive analysis was very important in this project because the client wanted to stand out from her competition. Therefore it was important to analyze the existing brands of her competitors.
-
Because this client had such a small budget, not a lot of resources could be spent on user research, so this is something I would like to focus on more next time.
-
More time needs to be spent on conveying the client's shop concept because she doesn't have a physical store that customers can visit, only pickup up made to order items. This concept needs to be better explained on the web. An about page and FAQs were added for this reason, but even better solutions need to be explored.