Petunia Bakeshop is a small, family-owned, bakery and coffeeshop that opened its doors in Denver, CO in 2022. They are highly rated and reviewed in their neighborhood and can only continue to grow. Though their website is functional and responsive, there were opportunities for improvement and a more fluid user experience.
Responsive Web Design
B
A
K
E
S
H
O
P
P
E
T
U
N
I
A
Role
Branding
UI Designer
UX Designer
UX Researcher
Skills
UX Research & Interviews
Rebranding and Logo Design
Wireframing (LoFi, MidFi, HiFi)
Prototyping
Usability Testing
Responsive Design
12 weeks
Timeline
The Problem
Petunia Bakeshop is a fabulous local spot to get coffee, sandwiches, and baked goods, but its website is in need of a redesign. Challenges with the current site include a confusing ordering system, poor navigation, and difficult to read typography. The goal was to redesign the site to provide a seamless and efficient experience whether the customer is accessing the site on-the-go from their cell phone or at home on their desktop.
Research and Discovery
My journey towards understanding Petunia Bakeshop began by conducting a heuristic evaluation of the existing website to identify pain points. Through my initial analysis of the site, I discovered one key frustration that was later validated by users during interviews: the “Order Ahead” feature would keep reappearing whenever I scrolled back to the top of the screen, making my user experience less than ideal. A seemingly helpful feature was causing major friction. Streamlining this process became my main focus.
Based on the user interviews, I developed three personas of people who would be interested in discovering more about Petunia Bakeshop. However, I could have consolidated the personas down to two people as many of the pain points and needs overlapped. I kept all three personas in mind while rebranding and developing the responsive site, but Remote Rhea, the remote worker felt like a good person to highlight as she is someone who is constantly on-the-go and would potentially benefit the most from an easily navigable and interactive mobile and desktop site.
User Interviews
Heuristic Evaluation
User Personas
Every user was asked to peruse Petunia Bakeshop’s original site and note any moments of frustration. 100% of users were frustrated by the “order ahead” pop up window that would appear every time they returned to the top of the screen and many noted they did not like the layout of the food and drinks menu, hoping for a little more consistency.
While most users discussed the physical space and feel of a coffeeshop, my primary insights came from hearing their thoughts on the key features they would want to see on a shop’s site. Users mentioned that they wanted easy navigation, readily visible store hours and location, easy-to-find menu and prices, and potentially, sustainability practices if pertinent.
Key Insights from User Interviews:
Conducting User Interviews gave me the most insight into how people use coffeeshop websites and helped to validate my predictions about the biggest challenge users would face using Petunia Bakeshop’s current website.
I interviewed 5 participants who all frequent their local coffeeshops on a regular basis. These participants go to coffeeshops for a variety of reasons spanning from the atmosphere or “vibe”, to work remotely, and because of its convenient location.
Affinity Map
Referring to the User Interviews, I was able to create an affinity map grouping users’ primary interests. Again, this mapping reinforced the idea that many users would be on-the-go so having access to a high quality site on their phone would only enhance their in-person experience.
Given that all users mentioned the importance of knowing store hours, location, and general contact information, I decided to prioritize two things in this responsive design:
Easy navigation to the shop’s contact information.
Enhancing the Order Ahead experience so that it is more integrated with the menu, rather than a forced action upon the user.
Prioritization
Knowing that I wanted to focus on prioritizing access to Petunia Bakeshop’s contact information and enhancing the Order Ahead process meant structuring the site so that users had an easier time with each task. I focused on creating a sitemap to gain clarity on layout and fleshing out two user task flows.
Reworking the Order Ahead feature felt like an easy decision for Petunia Bakeshop as it was the initial pain point all users. Based on user interviews, the next most logical choice for a user flow to explore was Contacting the Store. Both of these flows are crucial pieces to a user’s experience on Petunia’s website. Either, the user would feel frustrated by the Order Ahead feature from the existing design, or the flow could integrate seamlessly into the site’s menu creating a stress-free browsing experience. I aim to make it the latter.
Creating the feature roadmap was the first step in being able to visualize what needed to be included on the site. Relying on user interviews, secondary research, and competitor analysis, I was able to outline what was most needed as well as what might be welcomed additions to the site. Users mentioned mostly using a site to locate the store’s hours and contact information as well as clearly stating menu items and prices. Those became clear priorities for Petunia Bakeshop’s redesign.
Feature Roadmap
User Flows
Branding
Rebranding Petunia Bakeshop’s logos and color palette felt like an essential part of this process. Users had complained about difficulty-to-read and dated typography as well as retro colors that didn’t quite fit the vibe that users thought Petunia Bakeshop should be putting off.
NB: Unfortunately for this Case Study, Petunia Bakeshop ended up changing their color palette and site before I could take screenshots of the original site. The only evidence I have from the original site are their old logo, which they are still using, and some lettering.
Keeping in line with the bakeshop’s name, Petunia, it felt appropriate to stick with natural and floral tones. These soften the overall feel of the shop, which is vastly different from the contrasting bright blue, white, and black that Petunia Bakeshop had been using before. The blue below is an approximation to what they used before rebranding:
Rebranding for Petunia Bakeshop was a joy to do. I considered the two main elements of their original logos and lettering that caused users to bristle the most: complicated and busy logo and young-looking typography. I wanted to elevate the logo by considering the dual function of the bakeshop; it’s both a coffeeshop and bakery. The new logo elicits both facets of the shop by showcasing flowery latte art in a cup of coffee viewed from above, yet the image is also reminiscent of a rolling pin; thus combining two key ingredients of the bakeshop. I also chose to alter the lettering to be more sleek and elegant yet still warm and welcoming by using warmer tones. The overall effect is more sleek and polished.
FFFFFF
391C0C
Neutrals
FFFFFF
000000
51CADC
Original Colors
457170
Primary
063651
ECB759
Accent
CDAA8E
Secondary
Color Palette
Logos
Original Logo and Lettering
After Rebranding
Desktop Logos
Mobile/Tablet Logos
P
B
B
A
K
E
S
H
O
P
P
E
T
U
N
I
A
B
A
K
E
S
H
O
P
P
E
T
U
N
I
A
P
B
Wireframes & Usability Testing
Leaning on the User Personas and User Flows to inform my decisions, I created LoFi, MidFi, and HiFi wireframes conducting testing after each stage in order to ensure all appropriate changes and refinements were made at each step of the process.
LoFi & MidFi Wireframes
HiFi Wireframes
The final versions of Petunia Bakeshop’s HiFi wireframes are a result of multiple rounds of usability testing both formally and informally. Consistent feedback helped to guide me to create designs that were responsive, intuitive, and familiar to users.
Designing the LoFi wireframes for Petunia Bakeshop, I tried to keep the users’ needs in mind. I placed Contact Information and Store Hours in “muscle memory” locations towards the bottom of the page as well as tucked in the hamburger menu to reduce users’ cognitive load. I also aimed to create a menu that would double as online ordering so users would have the ability to peruse the menu and see prices, but wouldn’t feel forced to order something the way that they did on the current site.
Testers were generally pleased with the LoFi wireframes, offering few suggestions for changes, however, it was helpful
Designing mobile-first proved to be a bit of a challenge for me. I found myself leaning in towards adaptive design rather than mobile first. I’m curious how the process would have been for me if I had begun desktop-first and scaled down rather than scaling up.
By the time I built the desktop MidFi wireframes I’d already decided on a few changes based on early user testing to flesh out the designs. For example, the Contact Us page became a more developed page, including more information that users said they would find helpful like a map, store hours and location, as well as a contact form.
Usability Testing
I conducted Usability Testing with 5 participants all of whom are similar patrons of coffee shops to those interviewed for user interviews. Fortunately, because there had been a number of informal opportunities for feedback throughout the LoFi to MidFi to HiFi wireframes, the majority of participant feedback pertained to small changes and consistencies between the UI on the Desktop wireframes and the Mobile wireframes.
For example, users generally agreed that the basket initially used for checkout made more sense as a shopping cart, and that the checkout process should include a tip option since people often forget to add tip in person.
Though there were not major site changes, this usability test was critical to the overall polishing of the site. Feedback received from users during testing suggested small adjustments that had an overall, big impact.
Results & Conclusion
Though I’m very happy with my final product, this project presented several challenges for me as a young designer. I faced a mid-project shift in subjects (I had completed a bunch of work on an existing project and then had to scrap it all and move on to another project), I experienced some major creative blocks, and I needed to revisit the fundamentals of design to reframe how I viewed the work. This project was a good reminder for me that simplicity is best. A simple design is a strong design.
Part of the challenge was thinking about scaling up from mobile to desktop. If I were to do this different next time, I would have designed desktop first because I believe it would have been easier for me to wrap my mind around scaling down rather than scaling up. Once I was able to visualize how to scale up, however, and was reminded of basic design principles, I overcame the creative block and completed a design of which I am both proud and which provided a seamless user experience where 100% of users tested said they found the responsive design to feel intuitive and easy to complete.
Reflections