Peel

Timeline:
2 weeks
Tools:
Figma, Illustrator, FigJam, UX Tweak
Deliverable:
End to End Mobile App

Peel is a food discovery app highlighting constructive reviews and personalized restaurant recommendations.

End to End Mobile App
Product Design
UI Design
Branding
UX Research
Lifestyle
Food
Case Study
Problem

Current food review apps are problematic due to emotional and unconstructive feedback, outdated discovery tools, reputation-damaging reviews without constructive input, and susceptibility to manipulation.

Solution

Create an end-to-end food discovery and reviewing app that is nondestructive and harmful to restaurants, but also fair and honest to customers by relying on led from emotion.

Business Goals

Peel aims to lead the market with objective reviews and personalized recommendations, enhancing user retention and engagement, and driving app downloads to achieve significant market share in the first year.

Interviews

Asking the Right Questions

To understand user pain points in discovering new restaurants and leaving/viewing reviews, I created two sets of questions for customers and business owners. These focused on current behaviors, feedback utilization, constructive honesty, and personalization. The following questions had the most impact on Peel's final design.

Competitive Analysis

Let's Take a Look at the Competition

People use Yelp, Google Reviews, and Atmosfy to find local restaurants. These apps have similar structures but appeal to different audiences. To understand user preferences, I analyzed the strengths and weaknesses ย of each app.

Research Findings

Insights

Research and affinity mapping revealed customers want personalized recommendations and simple overall ratings. Business owners need constructive feedback and an integrated review platform. Required written feedback reduces reviews, and customers prefer non-sponsored, independent restaurants.

HMWs & POVs

Food for Thought

Analyzing these insights, I formulated targeted questions and perspectives aimed at improving the review system, enhancing customer-business communication, and personalizing the restaurant discovery process. This iterative process ensured the HMWs and POVs addressed the core issues and aligned with user needs.

User Flows

Main Tasks

To create the user flow for Peel, I focused on five key task flows: setting up an account and dining preferences, bookmarking a restaurant, leaving a review, searching for a restaurant, and creating a business account. I mapped out each task flow based on user research and affinity mapping to ensure they were intuitive and aligned with user needs.

Wireframes

Onboarding

To create wireframes for Peel's onboarding screens, I focused on clarity and simplicity, ensuring a smooth user experience from the start. I designed low-fidelity wireframes to map out the layout and navigation, emphasizing ease of use and intuitive progression.

Wireframes

Map, Reviews,
& Profiles

To create wireframes for Peel's main screens, including the map, restaurant search, and reviews, I prioritized intuitive navigation and clear visual hierarchy. I designed low-fidelity wireframes to outline key features, ensuring users could easily search for restaurants, view reviews, and navigate the map seamlessly.

User Testing

What I Learned from Users

Through user testing with wireframes for Peel, I discovered issues such as missing restaurant credentials, excessive screen real estate usage, and difficulty identifying menu tabs. To address these, I iterated on the design to include comprehensive restaurant details, optimize graphics and review presentation, and improve menu tab clarity.

Profile Layout & Logo

Users felt as though there was something missing from the credentials of the restaurant.

Banner photo, restaurant logo, and story were added. Layout was adjusted to accommodate these new features.

Minimizing

Too much screen real estate was being taken up by the original design so I iterated on the graphics and review presentation. I also added a place where users can view the photos that each individual reviewer uploaded.

Verification & Story

Users had trouble identifying the menu and which tab was selected.

Resized the menu and added lines marking which page was active.

Branding Kit

Creating a Brand Identity

I aimed for a design that is soft and rounded but still conveys structure and stability. This is reflected in the fonts, cards, graphic assets, and icons. The color palette is inspired by citrus and nature, with elements like oranges, leaves, lemons, and the sky, evoking a picnic scene under a clear blue sky. Emoticons were designed as oranges to match the color palette and logo.

Hi Fidelities

The Final Stretch

For Peel, I created high-fidelity designs by refining the initial wireframes, incorporating the citrus-inspired color palette and soft, rounded typography. I ensured all design elements, from icons to graphic assets, were consistent and visually appealing, aligning with the app's user experience goals.

Key Feature 1

Visual Rating Wheel

A circular graph that displays restaurant reviews with pictures and numbers instead of written reviews. This design offers clear, concise feedback, making the review process more engaging and less cluttered.

Key Feature 2

Personalized Preferences

Peel offers a personalized setup that lets users define their restaurant and dietary preferences during account creation. This ensures tailored recommendations, enhancing the user experience from the outset.

Key Feature 3

New Rating System

A two-screen process that allows users to quickly rate their experience based on specific aspects of the restaurant. This streamlined approach enables fast, regenerated selections, making the review process efficient and user-friendly.

Usability Testing

Feedback & Improvements

During usability testing, I identified issues with background visibility, tab clarity, and option selection. By analyzing user feedback, I refined the design to improve visual elements and overall cohesion, enhancing the user experience.

Edit Profile & Card Backgrounds

Users had a hard time seeing the contents of the card due to the gray background.
โ€
Card background was changed to improve visibility and to create a cleaner visual design. The settings and edit profile flow was also changed to create a simpler flow.

Review Stat Wheel

Users were confused with the tab โ€œStatsโ€ and felt that there were lacking visual elements that caught their attention.
โ€
โ€œStatsโ€ was changed to โ€œReviewsโ€ and the visual design of the graph was updated to better fit with the overall design of the app.

Outline Color

Users hesitated to realize what options were selected and what were not selected at first glance.
โ€
Visual line weight was reduced in order to increase the visibility of the contrast.

Map Color & Location Pins

The card and location pins were updated to align and be more cohesive in the overall design of the app due to the design changes from the previous usability points.

Icons & Checkbox

Users had a hard time viewing the icons due to the gray background.
โ€
Icons colors were updated for higher visibility and check icons changed to match the use of color in the design.

My

Conclusion

Working on Peel was a fulfilling experience, allowing me to reconnect with the food industry and address a personal pain point with food review apps. As my first project as an end-to-end UX/UI designer for a mobile application, it posed significant challenges, but I quickly gained momentum through the lo-fi wireframing stage. Overcoming initial hesitations, I successfully created emoticons, graphics, and a logo that complemented the overall UI, bringing the design to life. Although this deliverable is an MVP, I am eager to continue developing and refining this product in the future.

Product Design ๐Ÿฅ
UX/UI Design ๐Ÿž
Visual Design ๐Ÿฉ
Branding ๐Ÿง‡
Pastry Chef ๐Ÿฅฎ
Information Architecture ๐Ÿช
Product Design ๐Ÿฅ
UX/UI Design ๐Ÿž
Visual Design ๐Ÿฉ
Branding ๐Ÿง‡
Pastry Chef ๐Ÿฅฎ
Information Architecture ๐Ÿช
Research ๐Ÿฅ–
Prototyping ๐Ÿฐ
Wireframing ๐Ÿฅฏ
User Testing ๐Ÿฅจ
Interactive Design ๐Ÿฅž
Usability ๐Ÿฎ
Research ๐Ÿฅ–
Prototyping ๐Ÿฐ
Wireframing ๐Ÿฅฏ
User Testing ๐Ÿฅจ
Interactive Design ๐Ÿฅž
Usability ๐Ÿฎ

See My Other Projects

Fantastical Calendar

Create itineraries right in your daily scheduler

Advantage Tennis

Responsive website for local tennis shop

Ready to connect?