01. Brief / Overview
With a sprint length of just 4 days, the goal was to identify a local business and explore the opportunities for improvement that could utilize the UX process and best practices in order to improve their customers’ experience. I wanted to work with a business that operates in the food industry, I 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.
02. Business Insights
I had the privilege of speaking to one of their employees who discussed with us the services they offered and explained to us the mental model of their customers that walk through their doors. Here are some high-level topics we had discussed with them.
- 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.” - Do you use 3rd party delivery systems or do you have in-house drivers?
“We actually have both options, 3 drivers to be specific.” - 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 1 pm. So, I guess I would say people are waiting for their food.”
- 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.” - What problems do you currently see on your website?
“I have never seen our website, so I can’t really answer this question.” - 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.
03. Business Analysis
Focusing on the business analysis using the Lean UX Canvas 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 an increase in online revenue, task competition, or repeated transactions.
Performing a competitor feature analysis against other local café shops and online retailers I discovered a few opportunities for design, such as the fact that the current website did not have a clear layout resulting in its users 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, a goal was set for Toasted Bagelry & Deli to move towards, a blue ocean in the market, by following the highest organic and fresh food standards and having a convenient delivery process where other companies are not currently not competing.
04. User Research
Diving into the user research, I conducted 6 one-on-one Guerilla style interviews focusing on current platform users’ frustrations while placing an order through their website. As a result, I was able to gather great insight into current pains as well as gains.
``I have allergies, I love when menus have a clear description of what is included!``
``It really annoys me when I can't auto-fill the delivery info, I had previously saved``
``I love when menus have well-defined images. It helps me select based on portion sizes.``
05. User Persona
I used the findings to construct a provisional persona, Hungry Holly, to help me understand how I can help her/our users achieve their goals/needs. Using experience mapping techniques to visualize and communicate Holly’s end‐to‐end experience across various touchpoints with the scheme and mapping out the user’s emotions were key to set client expectations about the aspirational emotional state we were aiming to design for. Noticing a lot of repetitiveness and cluster after breaking down the website and assessing its current Site Map helped me to simplify its taxonomy.
06. Ideation
To brainstorm features for the product roadmap, applying the How Might We framework using insights gathered from my research and Holly’s empathy map.
- 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, I 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. I took the best ideas conducting a feature prioritization with the MoSCoW method to streamline these features. Leading up to our Minimal Viable Product (MVP):
Toasted Bagelry & Deli is an e-commerce website that allows users to:
- Order food online,
- Benefit fromclear product information (images and descriptions),
- Check-out with ease usingone-click checkout and smart form auto-fill capabilities,
- View the progressof preparation and delivery accurately
08. Visual UI Design
Homemade, delicious, warm, welcoming, and happy were the 5 pillars of our brand attributes that best describe Toasted Bagelry & Deli. These were used to sense‐check design decisions, articulate core values, and describe key attributes the mobile website experience should uphold for both the users and the brand. The principles were used constantly to drive the aesthetic, feel, and overall tonal direction of the website. A mood board was created to move past the original concept and begin visually define the brand. Testing the mood board in a focus group setting of 20 people yielded positive results. In order to create a common visual language between designers and stakeholders or web developers, I created a Style Tile consisting of fonts, images, logos, photography styles, and colors.
09. Mobile Mockups
The prototype process began by creating an atomic design inventory that helped us speed up the process, keeping the design integrity and minimizing error by having pre-set building blocks. Later we introduced micro-interactions to delight the user, and create a moment of engagement with the user and the product. To recap the user’s objective is to place an online order, customizing their item, and paying using Apple Pay frictionless checkout.
10. Key Learnings & Next Steps
I was 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.
The important takeaways from this project were:
- Understanding users’ active intent should be your top priority
Conversational interactions offer an opportunity to exchange information with a user. If structured properly, this exchange allows us to understand not only what they are asking for at a given time, but also the context and their active intent – creating the opportunity to deliver personalized content that surprises and delights. - Low-fi prototyping can deliver high value insights
Results from a simple interview, followed up with the use of paper prototypes to validate our initial ideas produced the insights that framed our MVP approach. (We all know this, but sometimes it is good to be reminded!)
