Martha’s Country Bakery is a local bakery known for their classic desserts baked daily from scratch.
Ordering pickup and delivery service worry free




The Challenge

Own their relationship with customers.

While Martha’s currently offers third party online ordering for some of their locations, the services leave more to be desired in terms of branding image and fees. Due to the pandemic, they are looking to quickly update their responsive website to ramp up their own direct to consumer services.
Pre-covid, the lines wrapped around their display counters for their take out service, and the indoor tables were filled in their cozy sit down service area.
The lines extend to wrap outside as customers social distancingly queue up. With no seating or designated waiting area outside, it’s become a bit of a mess.

The Approach

Design a responsive online ordering platform

Martha’s had a huge loyal following. You could see all the love from their customers from the magnitude of positive Yelp reviews, Instagram and Facebook entries.

These are the high level goals and objectives:
  • Create a new branding and logo to evolve with Martha’s as they expanded with new modern looks in their newest branch locations.
  • Feature online ordering with pickup and delivery service as the main feature of a new responsive website for desktop and mobile.

The Process

My role: Product Designer
Tools: Figma, Photoshop, Illustrator, Miro, Flowmapp, Optimalsort
Timeline: 3 weeks (Oct 2020)

Martha’s Country Bakery really does have great desserts. This redesign project was completed as part of Designlab’s UX Academy program.


Discovery & immersion

How essential in our lives is dessert?

In order to design a responsive website that gave the customers what they came to Martha’s for, I needed to understand what was behind their behaviors and frustrations, not just for how they ordered delivery, but also their habits and needs for dessert in their everyday lives.
Food delivery domain market research
Since eating out at a restaurant, or sitting at a bar was no longer an option for many, curbside pick-ups and home delivery became a staple for the majority of the population. Food delivery quickly turned from a luxury service to an essential way of living.
Primary interviews findings and conclusions
Seven loyal customers of Martha's Country Bakery were interviewed. They liked the ambience, quality and taste of the cakes and pastries, feel of the local neighborhood. They were frustrated by the crowded long lines during peak times.



Ordering desserts their way

It became clear after the interviews with the seven participants that we had materialized two user persona identities. One that enjoyed dessert socially and only ordered desserts for special occasions, preferring to pick up. A second persona that enjoyed dessert regularly and is a habitual delivery orderer, not liking to step out into the stores.
I developed the two separate user personas to summarize all my research findings in a human-centered way to better relate to our users and their problems .
With our two target personas in place, I put myself in their shoes and created Customer Journey Maps to focus on their user experiences in a single scenario with a single goal.  Plotting the persona's sentiment with emoticons under their journey map, so that we can see how their emotional experience changes with each touchpoint. In this way we can view opportunities within rapid drops and positive peaks while ordering delivery or curbside pickup.
From the Customer Journey Mapping we could see that the user that preferred to pick up for special occasions chose to pick up themselves as they liked to see the desserts in person to choose, and also didn't trust the delivery service to deliver their dessert order safely. With the pandemic lockdown, they might be forced to step outside of their comfort zone and place a delivery order. My task at hand would be to design a safe pick up, while also making the option of the delivery as comfortable as possible for them.

And the desert lovers that preferred to place delivery orders? Their frustrations came from not finding what they wanted to order easily enough, and they wondered where their orders were once it was placed. My goal would be to be make the order on demand process as communicative as possible for them.
Redefining the problem space
Organizing my findings from the phase together, I asked myself a series of who, what, where and why questions to articulate the design problem and provide a clear cut objective to work towards.

Dessert, in essence, is not essential. For a user to want to have dessert most likely meant that they hoped to return to a life they remembered. If only just to taste a moment of normalcy away from the chaos.
How might I relieve their worries and return a sense of normalcy in getting our users their desserts in today’s chaotic times?
With our north star in place, I wanted to also plot out the business side on a service blueprint to understand what procedures and costs would need to be implemented for the new venture. Indoor dining had been banned due to the pandemic,  so overhead charges were lowered with less hands needed for table service and cleaning. This could potentially fund the new in-house delivery driver costs. In addition, existing inventory management would only have to be on a larger scale than what they were already doing with third party delivery and wait-in-line services.


Interaction Design

Formulation of an experience strategy and vision

I ideated on how to build a site that answered our two users needs for getting desserts. Since my users preferred to either pickup or get their dessert delivered, I created two task flows of an ideal path a user would take to purchase desserts on the Martha’s site.
I continued my navigation exploration within an user flow to illustrate the alternative paths, key user actions, and decision points our users might face. When would they be faced with deciding if they would pick up or order delivery? Should they have to select a location before viewing a menu? Knowing Martha's branches were well stocked and rarely ran out of product, I decided to allow the users to browse the product menus prior to location selection at shopping bag stage. There, all decisions would be made before proceeding to checkout, and any scheduling or out of stock items would also be marked.
Then a site map built upon a feature roadmap made by competitor research and based on the existing current Martha's Country Bakery website while also keeping an eye on my open cardsort results.
I then laid my mind to paper, sketching low fidelity wireframes to explore content strategy from what I learnt about my users needs. Desserts shown big and clear in a digital bakery screen window. I ideated a white glove delivery add on service that would carefully hand deliver precious special occasion cake orders. A contact your driver CTA button for tracking on deliveries.
Selecting the best sections from my hand drawn sketches, I created digital mid fidelity wireframes where concepts were continued to flesh out, and an animated prototype to test the flow from landing to selection of delivery or pickup was completed.


User interface design

Bringing it all to life

Martha’s had an existing branded atmosphere of warm, friendly, rustic classic country the customers recognized and enjoyed. I wanted to build upon this, evolving it into a modern farmhouse with an emphasis on digital sleekness intermixed with human handcrafted touches. With warm tones for wood, wheat and kraft paper, mixed with urban steel colors and handwritten chalkboard writings. Laced with dessert evoking colors of whipped cream and caramel sauces.
Modern. Farmhouse. Authentic. Friendly.
I honed in on the branding evolution exploration with a moodboard and brainstormed to identify logo ideas, typographic and color choices in a style tile.
Continuing to work off the existing branding image, I ultimately encompassed the new and the old in its entirety, utilizing cleaned up product images from Martha’s own social media posts in the site’s user interface for desktop.
And then because on- the- go ordering is important to our users, I designed responsive mobile wireframes.

Prototype & Iteration

Design execution, validation & refinement

I moderated a usability test in person and remotely for three participants utilizing an animated high fidelity prototype to test the delivery and pick up ordering flow.

The goal was to determine if users could:
  • find their desserts and navigate the site to checkout
  • selecting their method of preference to receive their orders
Tested Pick Up Flow Prototype
100% of the users were able to place their orders
All three participants enjoyed browsing the site and liked seeing the familiar product presented in their new digital platform. Our participants successfully navigated and validated the online ordering flows, with two users choosing to pick up their orders, and one selecting the delivery option.
I distilled the actionable insights and communicated findings with potential solutions and next steps. Prioritizing feedback to focus on concepts to iterate and refine prototype to test and validate it all over again.
Homepage evolution and iterations
Users felt the play on different fonts were strange on the header. They also felt the description on the product was not necessary to be displayed. The pencil icon to edit was confusing to them.
I consolidated the fonts and hid the description of the product within a dropdown tab. Changed the pencil icon to a customize button.
Category page evolution and iterations
Participants felt it was not intuitive the full size cakes were within product detail pages.
I added full size cakes listings on category page.
Product detail page evolution and iterations
It was confusing for them to see other images within one size selection. They also found the wording for storage strange. They didn’t know to scroll down since they couldn't see all the links past the fold.
I removed the excess images to only show images of the selected. Included the word instructions within storage instructions detail. Moved everything up past the fold.
Location page evolution and iterations
Users felt the play on different fonts were strange on the header. They also felt the description on the product was not necessary to be displayed. The pencil icon to edit was confusing to them.
I simplied the flow by removing the extraneous submit button. Users could simply just click their desired location to highlight their choice circled on the map.
Shopping bag & Order process evolution and iterations
Within the shopping bag, participants wanted all fees and tipping within immediate access. For a user to want to have dessert most likely meant that they hoped to return to a life they remembered, if just to taste a moment of normalcy, away from the chaos.
I displayed applicable fees and moved tipping option forward in flow into shopping bag. Added timestamps on the order confirmations and ETA of delivery and pickups. Added additional copy to inform the users the receipts were emailed to them.
Iterated Delivery Flow Prototype

Wrap up

Next steps and Thank you’s

Test, iterate and repeat.

Communicate with Martha’s on the latest iterations and obtain their feedback. Continue to work on tablet prototypes to reflect iterations from desktop and mobile website. Test, iterate and repeat all platforms until launch.

Key Learnings and Takeaways

Data analysis to understanding the user's needs of why and how they preferred to order take out and delivery was instrumental in deciding product strategy. Exploring why businesses hadn't fleshed out an in-house ordering and delivery system was another consideration I had to seriously research into and empathize to make assumptions as to how this could benefit them in the longer run instead of just continuing to do 3rd party delivery systems.

Thank you for reading!

A big thank you to all the participants and to my mentor, Chris Key, Head of Strategy at Rubberduckers, for giving me all their insight on this delivery exploration.  

Leave a note and say hi!  I'd love to hear from you!
Back Top
return to top
© 2022 LauraLau.Design