Portfolio
Magnolia-Bakery-banana-pudding-Classic-3-1-850x567.jpg

Magnolia Bakery

Magnolia Bakery

 
MagnoliaBakeryLogo.png

My Role

Project owner
User Interviews, Persona, Customer Journey, Prototyping, Visual Mockups, Usability testing

Project

Platform: WebsiteType: E-commerceLength: 3 weeks


 

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

  • Local website visitors believe they need to order through “Nationwide Shipping,” costing them a lot more than a simple local delivery order.

  • The note for local deliveries is below the fold in plain text. Many users were not scrolling at all to see this information.

Target online audience

 
 

People placing online orders for friends, family, and colleagues, such as office managers.

 

Persona

I created a persona based on my upfront user interviews. From those 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.

Alice_MB Persona .png

Existing homepage

Mac-Screen-MB-home.png
MB_Home with annotation.png

The note for local deliveries is below the fold in plain text. It seemed that, before any testing was conducted, many users were not scrolling at all to see this information.


Testing the existing site

"This is New York City. I'm trying to get a cookie. I just want to get a cookie."

"This is New York City. I'm trying to get a cookie. I just want to get a cookie."

From talking to my 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 had 4 users go through an ordering process on the website and noted what took place. The proof is in the pudding.

KEY FINDINGS:

  • No user found the note to call for local delivery orders

  • Too many repetitive steps

  • Long ordering process

  • Disliked having to sign up to place order


MB_CustomerJourney.png

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

Screen Shot 2018-07-24 at 1.41.24 PM.png

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

MB_port_true_Landing_page.png

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

 
MB_port_Landing_page.png

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.

 
MB_port_locationb4after.png

Simplifying the flow

MB_port_straight_to_cart.png

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.


MB_port_both Order pages.png

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

Final new MB.png

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'd then test out the ordering process, by placing an order for a large cup of their banana pudding. Then, I'd eat it.