Two smartphones displaying a restaurant app. The first phone's screen shows categories like Featured Flavors, Personalized Picks, and Offers Near You, with restaurant options and promotions. The second phone's screen shows a map with street names and a search bar at the top.

Designing with empowerment & inclusivity in mind:

Vegout is a mobile app that helps people with dietary restrictions find restaurants catering to their needs.

ROLE

UX/UI Designer

Brand Development, User Research, Wireframing, Prototyping, Project Management

PROCESS

Discovery

Brainstorming

Design

Testing & Redesign

Reflection

TOOLS USED

Figma, Adobe Creative Suite, Miro

TIMELINE

16 weeks

The problem:

Dining out can be challenging for those with dietary restrictions, often leading to exclusion and frustration.

Research indicates addressing emotional, social, and informational factors is key, involving managing emotions, overcoming social barriers, finding clear menu info, and promoting inclusive options.

How does VegOut address it?

VegOut's design allows users to easily discover restaurants that cater to their personalized dietary requirements.

Users can also read reviews on food quality, atmosphere, and restaurant accommodations written by others in the community. VegOut fosters a sense of belonging and trust in restaurant choices, making it easier for users to confidently find the perfect dining experience.

A smartphone screen displaying a food app called VegOut with an image of various bowls of food on a wooden table in the background.

Mobile app screen showing a personalized food and restaurant recommendations interface with sections for featured flavors, personalized picks, and offers near the user, on a smartphone.

Screenshot of a mobile app's account settings page showing options for personalization, account, privacy, support, and allergen labels, with the 'Allergen Labels' section listing No Celery, No Soy, Dairy-Free, No Tree Nuts, Gluten-Free, Non-GMO, Hala

Mobile app screen showing dietary preferences options including no celery, gluten-free, keto, no peanuts, no shellfish, no tree nuts, kosher, paleo, vegan, vegetarian, dairy-free, non-GMO, no mercury, no sesame, no soy, halal, locally sourced, pescat

Mobile app screen with a pop-up message indicating changes have been saved and a button labeled 'Back Home'.

A smartphone screen displaying a food delivery app with a map at the top and nearby restaurant options below, including Rise & Dine Cafe and Prime Chophouse, with a navigation menu at the bottom.

Mobile app screen showing search filters for dietary preferences with vegan selected, and nearby restaurants including Rise & Dine Cafe and Prime Chophouse.

Mobile app screen showing pizza restaurants near me, with filters for vegan, highly rated, and reservations. Top options include Slice of Heaven, Cucina Romana, and Spice Factory, each with star ratings and distance.

A pizza with toppings of cheese, spinach, and tomatoes on a wooden table.

Smartphone screen displaying a restaurant review app with sections for local reviews, popular food items, and user reviews. Navigation icons for Home, Search, Reviews, and Account are at the bottom.

A mobile app screen displaying a pizza delivery or review service, showing top-rated pizzerias with images, ratings, and distances.

Mobile app screen featuring a pizza restaurant called "Slice of Heaven" with a photo of a pizza topped with greens and various toppings. The app allows selecting vegan or vegetarian options and includes customer reviews and a rate & review button.

Mobile app screen titled 'Slice of Heaven' displaying a review form with star ratings for Food, Atmosphere, and Inclusivity/Accommodations, a comments box with a review praising the restaurant, and buttons to submit or cancel the review.

Mobile app screen showing a review submission confirmation with a 4-star rating, a populated atmosphere rating, and a pop-up message saying 'Thank you! Your review has been posted.' with a 'Back Home' button.

Discovery

Secondary research:

During my secondary research, I found that individuals with dietary restrictions and allergies face numerous challenges while dining out. I have identified three crucial points for this particular group:

Emotional & social impact

Over half of individuals adhering to dietary restrictions face challenges when dining out.

61% of vegans report feeling judged when during dining experiences, while 52% of those following other diets struggle due to limited menu options.

Transparency is vital

86% of consumers value menu transparency, focusing on artificial ingredients (72%), fresh ingredients, calorie counts, and allergens.

Accurate information is critical for healthier dining choices, driving the demand for more transparent menus.

Inclusive menus

Despite the growing popularity of vegan, vegetarian, gluten-free, and keto diets, many people still struggle to find suitable restaurant options.

77% of diners check restaurant websites before dining out, and 70% have skipped visiting a restaurant due to the website, showing that available menu options are crucial in deciding where to eat.

Primary research:

I created a research plan to assess challenges for people with dietary restrictions when ordering at restaurants and develop a streamlined solution.

14 survey participants, 5 interviews

I created a survey targeting those with dietary restrictions or allergies, frequent online menu checkers, and those feeling excluded by restaurant options. Out of 14 participants stemming from various social media, I selected five for interviews.

During each interview, I explored participants’ everyday experiences with their specific restrictions. They answered questions about the challenges of dining out, the accessibility of restaurant websites, and how websites can enhance their transparency regarding allergen information.

Common themes among participants

Most participants emphasized the need to research restaurant menus in advance to ensure safe and suitable options existed for their dietary needs.
Some participants noted that restaurant staff often need adequate knowledge about specific allergies or restrictions, leading to miscommunication and overlooked precautions.
Interviewees highlighted the value of accessible allergen information online and on menus, with one participant suggesting standardized allergen symbols.
Online reviews and recommendations from others with similar dietary concerns were cited as valuable resources when seeking accommodating dining establishments.

Developing User-Centered Solutions through mapping & personas

I grouped diverse stories and data into five categories representing the challenges, emotions, and expectations of individuals with dietary restrictions:

Accommodations

Caitlin wishes for more user-friendly and accessible allergen information on restaurant websites.

Illustration of a clipboard with a menu on it, featuring the word "MENU" in large pink letters at the top.

Social/Emotional Impact

Patty feels isolated when family and friends want to share meals, and she is unsure if they fit within her vegetarian diet.

Three colorful emoji faces showing sad, happy, and neutral expressions

Communication

Matt sometimes struggles to determine if his nut allergy can be accommodated due to uninformed restaurant staff.

A graphic with a gray speech bubble containing a pink question mark over it, and two blue speech bubbles with lines of text to the right.

Current Search Methods

Carolee struggles to navigate menu options on restaurant websites that are not mobile-friendly.

Illustration of a web browser window with a magnifying glass.

Positive Experiences

Tanya remembers a time when a server offered her a customized dish to accommodate her dietary restrictions.

Illustration of two hands holding a chat bubble with a pink heart inside, with a pink banner below that says 'FEEDBACK'.

After reviewing my interview notes and creating an affinity map, I grouped each experience into empathy maps. These maps resulted in two personas: the Socially-Focused Diner and the Allergy-Focused Diner.

These personas provided concrete representations that will help shape my design process to be both emotionally resonant and functional.

Diagram titled 'Socially-Focused Diner' with sections on dietary restrictions and social dining tips, including suggestions for understanding, communication, and accommodations.

A woman with teal hair sitting at a table in a restaurant, looking at her phone with an empty plate in front of her.

A detailed infographic titled "Allergy-Focused Diner" with sections that describe the target audience, their needs, perceptions, actions, and feedback regarding dining with allergies. It includes color-coded sticky notes with information about what t

Ideation

How might we…

ensure a wide range of accommodating food choices is easily visible to individuals with restrictions or allergies?

create a confident dining experience that eliminates the fear of judgment or isolation without sacrificing personal dietary needs?

improve access to precise and reliable allergen information for those with dietary restrictions and allergies?

enhance communication between restaurant staff and customers to ensure food safety and accurate information?

Brainstorming: Transforming dining challenges into creative solutions

I brainstormed ways to innovate the dining experience, addressing each HMW’s core concerns with various sketches. These potential design solutions were instrumental in bringing this project to life.

Ideas shown:

Idea 1: A search engine enabling users to discover nearby restaurants with customizable filters based on their specific dietary needs, ensuring they have a wide range of options.

Idea 3: A digital reservation system catering to users' dietary restrictions and allergies, allowing restaurants to make accommodations in advance for a confident dining experience.

Idea 4: A review system catering to dietary restrictions/allergies. Users can rate restaurants based on inclusivity, fostering a supportive community, and informing others.

Idea 5: Encourage restaurants to adopt a standardized allergen labeling system on their menus to indicate the presence of common allergens in each dish.

Hand-drawn sketches of ideas for restaurant app, including search, location, allergies filters, reservation page with time slots and comments, full system diagram with symbols representing allergies and restrictions, and explanations of features like universal legend and allergy icons.

User stories:

User stories helped me refine essential needs into actionable features and tangible goals that addressed user requirements. I aimed to create solutions prioritizing satisfaction, inclusivity, and convenience.

As a user:

I want a dynamic interface for restaurant menus that updates in real-time based on current ingredients, allowing me to customize my choices and see what's available.

A green check mark inside a circular arrow indicating a cycle or process.

I want to use a search engine with customizable filters to find local restaurant options tailored to my needs.

Illustration of a magnifying glass with sliders inside, representing an adjustable control or settings.

I want to create an account and log in so my dietary preferences will be remembered and saved.

I want restaurants to adopt a standardized allergen labeling system on their menus to provide precise and reliable allergen information.

Soy free label with a green soybean pod and a red slash crossing it out.

I want a review system for restaurants that considers inclusivity towards dietary restrictions so that users can make informed choices and feel supported.

Online review with three gold stars and text comments.

Site map:

I prioritized essential app components and grouped key elements for intuitive navigation. With everything organized, I created a visual blueprint to showcase a user-friendly app design.

User Flows:

From the site map, I created user flow statements for three standardized app functions. These flows outlined efficient routes for user navigation.

A website sitemap with sections for onboarding, primary, secondary, and tertiary pages. The primary pages include Home, Account, Search, and Community, with additional subsections and filters, some highlighted in green.

Flowcharts illustrating processes for setting dietary preferences, searching for local restaurants, and writing a restaurant review on an app.

I sketched flow diagrams to map out user journeys for each red route, focusing on developing a cohesive and intuitive app interface.

Wireframes:

Sketches were transformed into wireframes, allowing me to strike a balance between aesthetics and functionality.

Screenshot of a mobile app homepage with greeting to Brandi, featuring restaurant and meal options, including Crave & Co., Starlight Diner, Green Haven Cafe, Wok n' Roll, Spice Factory, and Olivia's Garden, with navigation icons at the bottom.

Smartphone screen displaying an account menu with options for personalization, account settings, privacy settings, support, and an icon legend with various icons. Navigation bar includes Home, Account, Community, and Search.

A mobile app screen for setting dietary preferences, with options such as Dairy-Free, Vegetarian, Halal, Kosher, Paleo, Gluten-Free, Locally Sourced, Shellfish-Free, No Mercury, Pescatarian, Vegan, Tree Nut-Free, Peanut-Free, No GMO, and No Soy. Ther

Mobile app screen for setting dietary preferences with options like Dairy-Free, Vegetarian, Halal, Kosher, Paleo, Tree Nut-Free, Peanut-Free, No GMO, and No Soy, showing a confirmation message that changes have been saved.

Mobile app interface displaying a map with nearby locations, including Spice Factory offering 20% off on $20 or more, and Olivia's Garden with a buy one, take one deal.

A smartphone screen showing a map and a food filter menu with vegan option checked, and nearby restaurants named Spice Factory and Olivia's Garden.

Mobile app screen for finding pizza near me, featuring vegan options, highly rated, and reservations. Listings of pizza places with reviews and ratings.

Mobile app screen with the title "Slice of Heaven" featuring business hours, phone number, and buttons for "View Menu," "Reservations," and "Reviews." Bottom navigation icons include Home, Account, Community, and Search.

Mobile app screen showing local reviews, popular food categories, and personal reviews for restaurants, with navigation buttons at the bottom.

Mobile app screen displaying a search for 'Slice of heaven' with listings of vegan products rated with stars and reviews.

An iPhone screen displaying a mobile app review page for 'Slice of Heaven' restaurant, with star ratings and customer reviews, and navigation icons at the bottom.

Mobile app interface showing a review form for a place called 'Slice of Heaven.' It includes star ratings for food, atmosphere, and inclusivity, with comments about the vegan pizza place, and buttons for submit and cancel.

Mobile app screen showing a review submission with a 5-star rating for food and atmosphere, and a pop-up message saying 'Thank you! Your review has been posted.' with OK button.

Design

Capturing VegOut: A visual journey of simplicity, inclusivity, and trust

Mood board:

The chosen imagery for the mood board features communal dining, vibrant signage, and playful details. I aimed to capture the essence of culinary exploration with a brand that stands for simplicity, inclusivity, and trustworthiness.

Style Guide:

The style guide unified VegOut's visual identity by defining the essentials: logo, color palette, and typography. It reflects the brand's platform as a sanctuary for culinary exploration and conveys a warm and welcoming atmosphere that guides users toward their ideal dining choices.

High-fidelity screens:

From the style guide, I designed an app interface with vibrant colors, modern fonts, realistic screen content, and a user-friendly process to enhance engagement.

A smartphone displaying a login screen for VegOut with a background image of various Japanese dishes on a wooden table.

Mobile app screen showing food delivery options, including featured flavors, personalized picks, and offers near the user.

Mobile app screen showing account settings menu with options for personalization, account and privacy settings, support, and icon legend, with various icons representing dietary and health preferences.

Mobile app screen showing dietary preference options such as No Celery, Dairy-Free, Gluten-Free, Non-GMO, Keto, No Mercury, No Peanuts, No Sesame, No Shellfish, No Soy, No Tree Nuts, Halal, Kosher, Locally-Sourced, Paleo, Pescatarian, Vegan, and Vege

Mobile phone screen showing a confirmation message that says "Your changes have been saved" with a "Back Home" button, and a blurred background of app settings.

A smartphone screen displaying a map and nearby restaurant options on a food delivery app.

A smartphone screen displaying a food filter app for pizza, with dietary preference options and nearby restaurants. The app shows filters including vegan, no celery, no soy, gluten-free, non-GMO, keto, no mercury, no peanuts, no sesame, no shellfish,

Screenshot of a mobile app displaying pizza restaurants with images, ratings, and reviews, including 'Slice of Heaven', 'Cucina Romana', and 'Spice Factory'.

Mobile app screen displaying a restaurant called 'Slice of Heaven' with a picture of a pizza, tags for vegan and vegetarian options, business hours, phone number, and buttons for 'View Menu,' 'View Reviews,' and 'Reserve a Table.'

Smartphone screen showing a food review app with sections for local reviews, popular foods, and user reviews, featuring icons for sushi, pizza, and desserts at the bottom.

Mobile app screen showing a pizza delivery or restaurant ordering interface with options for 'Slice of Heaven,' 'Cucina Romana,' and 'Spice Factory.'

Mobile app screen showing a pizza restaurant called 'Slice of Heaven' with a picture of a pizza, options for vegan and vegetarian, a 'Rate & Review' button, and customer reviews.

Mobile app screen titled 'Slice of Heaven' with star-shaped icons for food, atmosphere, and inclusivity, an input box for additional comments, and buttons for submit review and cancel, with navigation icons at the bottom for home, account, community,

Mobile phone screen showing a review submission confirmation message with a 'Back Home' button.

Prototype:

I built interactive flows on my screens to mimic the user experience and find areas for improvement. After testing, I adjusted the navigation to make it more intuitive. Swapping the positions of Account and Search greatly improved usability and resulted in a seamless interface.

On Mobile?

Testing

Usability Testing:

During the prototype testing, I conducted usability tests with five participants via Zoom. Each participant was tasked with completing three activities to help uncover any UI or usability issues.

Objectives:

Evaluate the efficiency and ease of completing the three primary user flows.
Identify obstacles or confusion points in each flow to improve the user experience.
Ensure the design aligns with the target audience’s needs and expectations, making necessary adjustments if needed.

Task 1:

Set up dietary preferences.

Close-up illustration of three large, colorful cylindrical objects in red, yellow, and blue attached to gray metal structures.

Task 2:

Find a vegan pizza restaurant.

Illustration of a pizza with yellow cheese, pink pepperoni slices, orange sprinkles, and green basil leaves on a brown crust.

Task 3:

Rate the restaurant from the previous search.

Thumbnail of a hand giving a thumbs-up with three gold stars above it, indicating approval or high rating.

Test Results:

All five participants completed the tasks efficiently, but some areas in the app lacked clarity. I classified the issues by severity and suggested potential solutions to improve performance.

A table outlining issues and recommendations for a website, with priority levels including Critical, Major, and Minor. The issues involve unclear allergen icons, incorrect user ratings, missing comment box options, lack of distance info on search results, and missing filter options.

Issue 1: Allergen legend

40% of users expected icon definitions in the legend. Some users wanted interactive icons. The lack of labels caused confusion, especially for differentiating between vegan and vegetarian icons.

Solution: I redesigned the allergen legend with clear definitions for each icon to help users find restaurants catering to their specific needs.

Issue 2: Review tab

Users discovered the rating feature by taking a different path than intended. They found it directly after the second user flow, through the "View Reviews" button on the restaurant details page.

Solution: To improve user understanding, I changed the Community tab to Reviews so users can easily access restaurant reviews through multiple pathways.

Issue 3: Rating system

While most users were satisfied with the rating system, opinions on the comment box were divided. Some users wanted the comment box to be optional, while others found it helpful for it to be required.

Solution: Adding "Optional but Encouraged" next to the comment box encouraged users to share their opinions without feeling pressured to provide comments.

Comparison of mobile app screens showing updates to allergen icons. The 'before' screen has icons without labels under 'Icon Legend'; the 'after' screen adds labels next to each allergen icon, such as 'No Celery,' 'No Soy,' 'Dairy-Free,' 'No Tree Nut

Comparison of a mobile app screen before and after redesign. The app features local reviews, popular categories like sushi, pizza, and desserts, user reviews, and bottom navigation with icons for Home, Account, Community, Reviews, and Search. The 'Co

Before and after comparison of a mobile app review form, showing filled star ratings for food, atmosphere, and inclusivity, and a detailed comment on the after version.

Reflection

Designing the VegOut app was a transformative experience. Thorough research, ideation, design, and testing simplified the dining experience for those with dietary restrictions.

User-centered solutions

Prioritizing user needs and experiences is crucial in creating a visually appealing and intuitive product.

Iterative design

Multiple iterations and usability tests are vital in identifying and addressing issues to improve the user experience.

Design & functionality

Icons, labels, and buttons should be both aesthetically pleasing and practical in design.

Moving forward:

Including more user feedback and usability testing can improve the design process by identifying potential issues earlier, resulting in more polished and practical solutions.

My graphic and web design background helped me create a consistent and visually appealing app interface. This project provided a thorough understanding of user-centered design, iterative testing, and the impact of branding on the user experience. It reinforced the importance of continuous learning and adaptability in UX/UI design.