Magnolia Bakery
My Role
UX Designer | User Researcher
User Interviews, Persona, Customer Journey, Prototyping, Visual Mockups, Usability testing
Project
Platform: Website Type: E-commerce
Background
Magnolia Bakery is an international bakery, with a mom-and-pop feel and southern, vintage style. Known for their banana pudding, they have daily cupcakes, themed bakery items, and they offer classes. They also cater events and customers can place orders for delivery. I love bakeries, baked goods, and baking, so when my friend and subsequent client mentioned some issues their customers have with their website, I was hungry to get into the research and redesign for this company.
They've experimented with having an app for the bakery, but found they didn't have a real need for one, which is refreshing, given the state of the country's health. An interesting aspect of working with this client is that they are not interested in employing any dark patterns, or encouraging customers to do or spend more than they need to, which was also refreshing, especially for an e-commerce site.
Social impact: Magnolia Bakery has worked with schools and organizations in local communities and numerous programs that support children and families. After all, I first met this client at an annual fundraiser for NYC's Project Renewal.
The Problem
From stakeholder interviews, I learned that most customers contacting the bakery were reporting or experiencing a similar problem:
Local website visitors believe they need to order through “Nationwide Shipping,” costing them a lot more than a simple local delivery order.
User Research
To get a vision of a typical user’s experience with placing online orders for food, I recruited people who fit similar goals to the customers the stakeholders described to me at Magnolia Bakery.
Target online audience
People placing online orders for friends, family, and colleagues, such as office managers.
User Interviews
Goals:
I conducted user interviews on 5 target users to learn:
Why people use websites to order food
When people use websites to order food
In what environment users place orders online, and
What technologies users employ to order food online
Persona
From the user interviews, I was able to determine why people placed orders online for food, how they chose the vendors, as well as their likes and dislikes from ordering food online. I created a persona based on those user interviews.
Existing homepage
From an early heuristic review, I was able to determine reasons for the Magnolia Bakery’s website’s biggest problem. The note for local deliveries is below the fold in plain text. This hypothesis might seem instantly recognizable, but it was still essential to test the site on target users and see what insights I could gain.
Usability Testing
"This is New York City. I'm trying to get a cookie. I just want to get a cookie."
From talking to the client and examining the existing website, I had a good idea of the reason for the customers' confusion. To be sure and provide concrete examples for the client, however, I had to put users in front of the website and observe their actions.
Even with my understanding of people and how we use websites today, I was a little surprised to find that none of the users I tested bothered to scroll down the home page. I recruited 4 users who were willing to give me their time in exchange for the Bakery’s signature Banana Pudding. After all, they would be completing an entire order process. I had them go through an ordering process on the Magnolia Bakery website and noted what took place. Since the current frustration for most of the client’s customers was from the ordering platform, in addition to having users navigate the site as their instincts told them to, the main task was to see how a user would
Order a medium cup of banana pudding.
The proof was in the pudding.
KEY FINDINGS:
No user found the note to call for local delivery orders
Too many repetitive steps
Long ordering process
Signing up to place orders felt like an unnecessary interruption to users
Customer Journey
Based on the usability tests from the existing website, I made a chart of a typical user’s journey to show the ups and downs of the ordering process. I added opportunities for Magnolia Bakery for certain low points. As we know from Jared Spool, one of these opportunities is having a "Guest checkout" option.
Sketching / Layouts
I took to paper (and cutouts) to try out different layouts for all of the content on the existing homepage. To condense the process to one that is as seamless as possible, I wrote out what steps are involved now and deciphered which ones are necessary.
First prototype
Focusing on functionality, I wanted to get a greyscale prototype in front of users to test out the redesign for the new ordering process, so I created a low-fidelity prototype. As my tests on the existing website showed people like images of food, I placed a video hero on the homepage and to solve the order choice problem, one "Order" button that, upon choosing type of delivery and then location, will send users to the appropriate ordering page.
Solution: Everything in one location
Nationwide Shipping + Local Delivery = Order
Initial Prototype Usability Tests Highlights
I tested the first prototype on 4 new users to see what opportunities there were when designing the final deliverable. The main problem was solved as each user knew to start with the "Order" button to place an order for nationwide or local delivery. I still uncovered other hiccups in the ordering process with the prototype that would allow me to design a simpler flow. Recycled the "Add to order" button that is on the existing website, but when I realized some users did not think to hit both the plus sign and the "Add to order" button, I understood that this feature was not important. Also, with the shopping cart visible throughout the process, it added unnecessary time to ordering.
KEY FINDINGS:
Missed the “add to order” button
Want to see bakery items immediately
Want confirmation of order
Want contact info for bakery they order from
Initial order page redesign
From this page, the user will be directed to the appropriate ordering portal (local or third party site for nationwide shipping).
This solution is a long term one since Magnolia Bakery currently does not have the option to order for local delivery online, but will soon!
Locations page
I wanted to add a quicker way for users to find the bakery closest to them. From my testing, I learned that not all users are familiar enough with New York City to look at an address and know its proximity to them. To ease this confusion, I added the ability to search by zip code. I kept the neighborhood titles from the existing website and paired them over location images. Doing so adds to the aesthetic of the page and decreases the time spent reading it. I included the address for each location that would appear when users hover over an image for a particular neighborhood.
Simplifying the flow
I removed the "Add to order" buttons, leaving the “+” / “-” buttons to instantly place or remove items in user’s cart, making an easier flow of banana pudding to user's taste buds.
Order Page
-This iteration of the first page in the ordering process includes a simplified, action-based note for users to call the bakery for local deliveries
-The same page will automatically send users to the appropriate site for nationwide shipping
Next Steps (or Dessert)
To continue building a deliverable the Magnolia Bakery team can visualize, I combined my redesign for functionality with their southern, vintage theme. More usability testing, especially with more insights on online spending habits, will help me make a page that meets the client's business needs that works with its users.
Features like maps and direction options with locations and a breadcrumbs progress bar will save time, add more functionality and control for the user.
To really put myself in the user's shoes, I would next test out the ordering process, by placing an order for a large cup of their banana pudding…and eating it.