Glutenvy Bakery & Bistro: Online Ordering Application

I created a simple and intuitive online ordering app centered around a Brand I created for the 2016 Future Business Leaders of America National Conference. See Case Study Here

Project Overview

The Problem

Tyler, a busy web developer with a family, needs a fast and convenient way to order from Glutenvy, a gluten-free bakery. Due to his Celiac Disease, he struggles to find gluten-free options in his area. He can't spend time calling or using a slow ordering app and wants the flexibility of delivery or pick-up.

The Solution

The Application enables quick selection of menu items for gluten-intolerant, health-conscious individuals seeking quality food in less time. It saves effort and offers a gluten-free dining experience.

Understanding the User’s Needs

Research was conducted through analyzing the needs and behaviors of individuals who were gluten intolerant, those who had a gluten-free diet, and all lovers of sweets alike. Persona profiles were created to represent the ideal user, which uncovered common pain points within the demographic. This in turn, allowed for effective planning and creation of the designs, and led to the acquisition of a helpful problem statement. Furthermore, the Journey Maps were made to help understand what the user needs to accomplish when using the product.

Pain Points

Time and Schedule Constraints

Lack of Gluten-Free Options

Lack of Nutritional Information

Persona Profile

User Journey Map

Starting The Design

Five different versions of the “Menu Home” screen were drawn out for planning and conceptual understanding. The last of the six presented here took certain elements from them all, and is the final, refined draft to move forward to low-fidelity wireframes.

Low Fidelity Prototype

Let’s say Lisa is a valued customer to Glutenvy and she is a frequent user of this application. She orders the same thing every single week. The “Saved Order” feature would allow her to input or save a past order for future selection. As soon as Lisa opens up the application and gets to this screen, Lisa is only 3 taps away from having her favorite order sent to her door. This feature directly tackles the pain point of Time and Schedule Constraints.

This screen is the heart of the application. All things start and end here. The customer can use the Saved Order function, Browse Suggested Items, and initialize a New Order from Scratch. Settings for accessibility and personalization is located in the menu icon to the top left, and notifications are located in bell icon to the top right.

Usability Study Findings

Five people were prompted to use the low-fidelity prototype to simulate an order from start to finish. Throughout the study, anything the subjects said or commented on was documented.

Round 1 Findings

  • No obvious way to navigate forwards or backwards throughout the order process

  • LF prototype did not have enough information for different menu items to be chosen

  • The transition between choosing menu items and checking out the final order was confusing and overlapping

Round 2 Findings

  • “Saved Order” function was easy to use and well-liked by subjects

  • Placement of “Current Order” pop in was placed close to the thumb which makes continuation and selection easy and efficient

  • The users found many unnecessary screens where processes and selections could be condensed

Final Key Mockups

Accessability Considerations

  • A “saved order” function has been implemented into the application so that individuals in a hurry could order their favorite items with only three taps

  • A clean, simplistic design was used to make the user interface as accessible and easy to navigate as possible. Consistent use of icons, style, and design while moving forwards and backwards in the flow make for an enjoyable and straightforward experience.

  • A settings page was created so that the user’s profile, payment method, saved addresses, and other features could be customized. There is also an option for languages other than English to be displayed in the app.

Next Steps

A new round of usability studies should be exercised to see if any of the structural and visual changes made from the low to high fidelity prototypes were effective or not, as well as to explore what else needs to be changed or rethought in the design. In efforts of getting a more accurate reading of the effectiveness of the application at this stage, I believe a larger group of test subjects is essential.

Additional accessibility features should be explored depending on the results of the next study.

A great feature to add to this application would be a “Dark Mode” since the UI is so bright and vibrant. This would definitely bring value to customers with eye problems or those who are ordering in dark environments. Furthermore, continuing to build additional pathways in the connections of the wireframe would be a productive step.

Takeaways

The app is designed to make the user feel a sense of enjoyment and ease when ordering food. Someone should not be confused, frustrated or overwhelmed when they are trying to make a choice on what to eat, as that can already be a stressful process. If an app like this was developed in the real world, I believe it would serve a great purpose and fill a void for gluten-free eaters and all lovers of sweets.

The process of creating a user experience that is both enjoyable and functionable is no easy task. A great amount of research, preparation, iteration and time was taken in order for the application to reach the level of quality shown. Furthermore, although there has been so much work and effort done in this project, there is so much more that can be done. I now know that this process never comes to an end. There will always be things to improve, things to change, and perspectives to reconsider when creating something of value. That is the beauty of design.