Optimizing Online Orderding: Toasted Bagelry & Deli
Case Study — E-Commerce

This week at Ironhack we studied good and bad values associated with having an e-commerce website. We worked in teams of two having a design challenge to identify a local business and explore the opportunities forimprovement that could utilize the UX process and best practices in order to improve their customers’ experience. My partner Oleksandr Rubik and I wanted to work with a business which operates in the food industry.

We came across Toasted Bagelry & Deli that was founded in 2013; owned and operated by two brothers having two locations in South Florida. The cafe has a wide selection of homemade delicious bagels and sandwiches for breakfast and lunch. Their website offered the capability to order food online with the option of picking it up in store or having it delivered using a third-party solution such as Grubhub or UberEats. We had the privilege of speaking to one of their employees who discussed with us the services they offered and explained us the mental model of their customers that walk through their doors. Here are some high-level topics we have discussed with them.
1. How often are orders messed up during the delivery process?
“Efficiency is key for us; our managers encourage us to do each task in their best ability. So, no many of our orders are really accurate.”2. Do you use 3rd party delivery systems or do you have in-house drivers?
“We actually have both options, 3 drivers to be specific”3. When you lose sales, what are the most common reasons and problems?
Well we are a very busy cafe, we actually had over 400 orders come in this past Saturday and Sunday before 1pm. So, I guess I would say people are waiting for their food.4. Do you get more online sales or more walk-in through the door?
“A lot of sales are happening online, but we highly recommend for our customers to call us in if they would like to really customize their food.”5. What problems do you currently see on your website?
“I have never seen our website, so I can’t really answer this question.”6. How do you guys stand out compared to your competitors?
“We are different because we provide the freshest ingredients that are organic, and our iced coffee has actual iced coffee cubes so that the drink doesn’t dilute.

Asking these questions, we wanted to truly understand where the frustration lies both from the business and their users. We began our business analysis using the Lean UX Canvas to truly breakout their business problems and understand how we can find opportunities and outcomes to satisfy the need of their users. Using this method, we recognized which business problems we should focus on throughout the discovery stage and how these would impact their business results, whether it would result in increase in online revenue, task competition, or repeated transactions.
We proceeded with the competitor feature analysis against other local café shops and online retailers. The team found a few opportunities for design, such as the fact that the current website did not have a clear layout resulting in its users to hardly navigate on a mobile device. They also had unclear images for their menu items, and missed a live chat assistance action which made it rather difficult for the users to understand how to contact them if there is a need. Assessing them with the Market Positioning Map, we were able to set a goal for Toasted Bagelry & Deli to move towards a blue ocean in the market. In our case The “Blue Ocean” is where the highest organic and fresh food standards are provided with convenient order and delivery process where other companies are not currently competing.

To truly understand our users and their frustration we began to do our secondary research and see what users are saying in their public reviews on either on Yelp or Google Reviews. Here are some examples I have picked:



Continuing to gather more qualitative data, we interviewed 6 users, and these are the top insights we learned:
“I have allergies, I love when menus have clear description of what is included!”
“I love when menus have well-defined images, it helps me with portion sizes!”
“It really annoys when I can’t auto fill the delivery info, I had previous saved.”
Gathering this information, we proceeded with the Affinity Map tool. We grouped the data into 4 sections based on their demographics, habits, pains and gains. This technique assisted us to establish the base foundation for creating our User Persona and User Journey Map.



We have created a primary user persona, “Hungry Holly” that helped us to better find pain-points and really understand the mental model of our users after gathering all of the insights from our user research.
By breaking down our users’ steps using the Journey Map and Task Analysis, we were able to find opportunities to better understand the tasks Holly needs to accomplish to order food online and receive the delivery. We noticed a lot of repetitiveness and cluster after breaking down the website and assessing it’s Site Map to visualize the taxonomy. After that, we have conducted a heuristic analysis of the current site, which showed us main pages or features that required improvements.

After all the analysis and assessment we asked ourselves the following three questions:
- How Might We help Holly track her order easily?
- How Might We help Holly visualize her food while deciding what to order?
- How Might We improve the delivery form?
In order to answer these questions, we brainstormed on different topics, grouped them by similarities and came up with ideas that would require minimal effort for the business to implement but have the highest impact on the user which made their online ordering experience more effective and stress-free. Then, we took our best ideas conducting a Feature Prioritization with the MoSCoW method to streamline these features based on MUST haves, SHOULD haves, COULD haves and WONT haves. Leading up to our Minimal Viable Product (MVP):
A website that allows users to:
- Order food online,
- Benefit from clear product information (images and descriptions),
- Check-out with ease using one-click checkout and smart form auto-fill capabilities,
- View the progress of preparation and delivery accurately
By narrowing down our features and streamlining our focus we were able to create a perfect user flow, that allowed us to understand, whether or not the recommended course met the need of our target users to accomplish their task — ordering food online for delivery. Once we finalized a path, the structure allowed us to concentrate on the screens we would need to generate for our low fidelity wireframing.
Oleksandr and I had many ideas on the layout of the mobile website based on the navigation and features we gathered along the way. We began creating a paper prototype for each scenario based on our user flow, coming up with a total of 6 screens. The sketches below show the first wireframes for the redesigned website for Toasted Bagelry & Deli.

We took these sketches into Marvel Design and Maze and began our usability testing. During these tests we analyzed to see if participants could successfully complete the task of ordering food online for delivery while we watched, listened and took notes in order to identify any usability problems.
In total we had 14 users and the report revealed that even though our initial mockup had glitches our users testers were able to easily navigate to the next action page in the ideal flow without any confusion. Some users expressed to us that they would like to see the ability to customize their food, as well as be able to directly add items to the cart to complete their purchase.

In the image above you can see the heat map where the users’ had difficulty to moving to the next step in our Happy Path. We took these findings and applied them into our Mid-Fidelity wireframes.
To view or play with our Mid-Fidelity prototypes click HERE.

In order to see if the changes to Toasted Bagelry & Deli webpage will improve customer satisfaction rates, the business should implement the changes and observe the following metrics:
- Increase in Conversion Rate
- Increase in Task Completion Rate
- Decrease in Cart Abandonment
- Decrease in Customer Satisfaction
- Increase in Bounce rates
During this project, we were surprised about the fact that stores were not paying much attention to their online presence even though some of their customers who live nearby were walking in to buy their food. It was also surprising to see that mobile sites were rather hard to navigate to complete an order where checkout flow wasn’t the easiest and tracking wasn’t provided at all. As a team we want to continue testing our mid-fidelity prototype but expand our users from early adopters to late majority and slowly start incorporating features such as letting users set specific times for their food delivery.
The important takeaways from this project were:
- Being able to walk through stages of how to redesign an e-commerce website.
- Acquiring cool frameworks as task analysis, site mapping, heuristic analysis which helped us to structure our thoughts and define user problems.
- For the first time we created low-fidelity prototypes and conducted usability tests. These methods helped us to detect gaps in our thought process.
In conclusion, I think that a functional website and online shopping platform is an important thing for any type of business to take advantage of. You miss out on a lot of potential customers by not offering an easy solution. Why would you want to miss out another channel for revenue?
We want to know your opinion! Comment down below your worst experience while ordering food online. Thank you 😊
