overview
The Swiss Bakery & Pastry Shop is a well loved local bakery committed to providing authentic Swiss German goods to American consumers. Based on their quaint, strip mall presence, you would never guess they run a cafe, a bakery, and a national distribution store for imported Swiss German goods.
The bakery and cafe share a website, while the import store has its own. Both websites are outdated, not responsive and contain many of the same products.
the problems
After reaching out to the company to learn their business goals, I determined the following problems to be solved:
- Create greater efficiency by consolidating both websites into one
- Make the interface more attractive and accessible to customers by creating a modern and responsive design
- Determine a solution for offering grocery items and distanced options for pickup and delivery in order to build pandemic era business
Previous Bakery/Cafe Landing Page
Previous Swiss Store Landing Page
New Combined Landing Page
THE PROCESS
Secondary research
Exploring the competitors
I wanted to see what modern, 4 star+ bakeries looked like online, and what styles, patterns, and features they had that I might recreate for Swiss Bakery, so I began with secondary research to learn about competitors. The styles that stood out the most used a lot of white space, Instagram worthy photos, great visual hierarchy and prominent Covid information.
Primary Research
Interviewing customers
I needed to make sure the re-design was user-centered so I went to the bakery in Springfield, VA and approached customers to see if they would grant me a 10 minute interview. Since the interviews were taking place during the pandemic, I chose to visit during an Octoberfest celebration. Customers were in good spirits and easily agreed to speak with me but it occurred to me later that my sample might not have represented the regular customer but rather a special occasion customer.
DEfine
Making sense of the interviews
With an empathy map, I uncovered patterns among the responses and arranged them to find the consensus. These are the insights:
Customers shop for their family
Customers are motivated to shop by nice looking displays
Customers won't purchase a baked good if it's too expensive
Customers appreciate the uniqueness of the products offered
So who am I designing for?
Evelyn was created as a synthesis of all my interview subjects, a super customer, and served as my North Star when making design decisions.
These are the design problems:
I converted the customer insights into How Might We questions so I could clarify the problems for which to generate solutions. At this point, however, I became concerned that my interviews were based on the physical experiences of the customers rather than the digital ones. Even though the insights told me much about the customer, I felt I should have chosen my interview participants based on their use of the current website. I figured solving these physical problems digitally would prove challenging.
How might we make it easy to show Evelyn a variety of options to purchase for her family?
How might we showcase the product in a way that looks nice enough for Evelyn to make a purchase?
How might we make it easier for Evelyn to see the pricing so she can find affordable options?
How might we highlight the uniqueness of the products so Evelyn can feel like her purchase is one-of-a-kind?
Tackling the Information Architecture
The Swiss Bakery and Pastry Shop has three outlets: a bakery, a cafe, and an import shop, in which they are national distributors of imported Swiss, and fresh baked goods. Currently, they use two sites to run their business: one for the cafe & bakery and another for the import shop, but I propose they can simplify to just one with the proper design and technical considerations. Here's how I would lay it out:
Charting Evelyn's path
I created a user flow for two reasons: to make sure the page layout and user actions were efficient and intuitive, respectively, and to illustrate the process of finding and purchasing a cake to developers & stakeholders.
Interaction design
I wanted to ensure the efficiency of the design from finding a product through checkout, so I created these flows.
User flow
Meeting needs through design
With three goals in mind - a modern look, simple architecture and meeting user needs - I set out to iterate ideas that aligned with my visions.
Wireframe Sketches
For the landing page, I began to sketch thinking I would follow a traditional Z-pattern under a hero image but, after exploring more modern sites, the style seemed outdated.
Responsive Mid-Fidelity Wireframes
This style was more modern and the architecture simplified but, unfortunately, I realized my decisions didn't solve the design problems based on customer needs.
High-Fidelity (Landing & Bakery pages)
This is the final design which balanced a modern look, organized architecture and customer needs.
Checkout flow for a pickup order
Testing on users
I tested the mid-fidelity prototype on users in order to gain qualitative feedback before finalizing the design.
Final prototype(Order a carrot cake for pick-up)
3/5
Stayed on the menu screen to place their orders
3/5
Expected to see photos of the items on the menu screen
For the final iteration, I implemented the following recommendations:
1. Eliminate redundancy by allowing the customer to order from the ‘Menu’ section
2. Add photos next to items in the menu to make it easier for users to see what they’re purchasing
Next Steps
• Use the Bakery template to build additional outlet pages
• Use the Cakes template to build other category sub-pages
• Test the new prototypes, implement any changes, test again
• Handoff to developers
Reflection
If I had this to do over again, I would make sure to begin the ideation process already knowing the brand attributes and having a library of site inspiration based on them. I felt like I lost valuable time thinking through and working through essentially three different designs. Overall, however, I think the template styles created are efficient, scalable and attractive.
