Next Project
Next Project
Next Project
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
PASSIONFROOT
Summary
Passionfroot is a dish centric food app geared towards people who know what they're craving or just want to explore hot dishes around town.
Role + Team
I completed this project as part of my UX/UI bootcamp with one partner. We both partnered throughout the whole project from user research to LoFi prototyping. I spearheaded visual design individually afterwards.
Tools
-
Sketch
-
InVision
-
Instagram Stories
-
Photoshop
RESEARCH + PLANNING
USER RESEARCH
Time constraints were a big factor in this project. I had the idea to leverage Instagram Stories' polling feature to ask a few questions regarding food apps, and especially Yelp.
Below are some samples of a 6 question poll we put together. 151 people participated in the poll and provided some great insights.
When reviewing food, would you rather rate by dish or by restaurant?
Although 71% of people preferred to review by restaurant, 29% of participants expressed interest in reviewing by dish, which did speak to an untapped demographic.
Which do you find more helpful: user reviews or overall ratings?
Participants seemed to equally enjoy both written reviews and overall ratings on food apps. This encouraged us to include both in Passionfroot.
Would you rather rate 1-5 stars or thumbs up/thumbs down?
Most people didn't express interest in a binary thumbs up/down option. This surprised both my partner and I, but we thought that people didn't love the thumbs up/down option, because it didn't leave any room if you didn't love or hate the food.
This influenced our ratings system for Passionfroot, and we decided to go with the smiley face system with a middle of the road option.
Do you trust written Yelp reviews?
Users seemed to appreciate written reviews, so we decided to include written reviews but also limit them to 200 characters. This would help users quickly glean valuable information without sifting through paragraphs of content.
USER FLOW
After analyzing the results of the user testing, we came together to ideate on features and draw a userflow.
We wanted the app to be focused on helping people find what they're craving, so we focused the product around search and also exploration through a landing page of suggestions and categories.
DESIGN PROCESS
ILLUSTRATED WIREFRAMES
Next, we sketched our wireframes. Prior to this, we brainstormed features for the app and decided what we wanted as the core of our product.
We decided that the product should be easy to use and based around the dish at the end of our ideation.
DIGITIZED WIREFRAMES
We digitized our wireframes using Sketch and threw them into an InVision prototype for our first round of user testing.
USER TESTING
INITIAL USER TESTING
We put together a LoFi prototype to conduct a moderated usability test on 2 people and leveraged these insights to further iterate on our prototype.
This led to larger buttons, image details detached from the images themselves, and an edit review button.
VISUAL DESIGN
After user testing the LoFi wireframes, I incorporated the updates and also strategized Passionfroot's visual design aesthetic individually.
PASSIONFROOT'S IDENTITY
I began this project similarly to how I'd begin other client based projects: by establishing the target audience distilling the brand.
I wanted Passionfroot's visual identity to feel modern, trendy and above all food centric.
COLOR + TYPOGRAPHY
Passionfroot's design lends itself to an image heavy experience, and I wanted to leverage the UI to highlight the images even more. To accomplish this, I decided to utilize a modern and understated font along with a color scheme that employed an accent color on a mainly monochromatic background.
I noticed other image heavy products, like Spotify, use an accent color on a dark background to highlight their images as well.
MOOD BOARD + COLOR
Using the keywords from the planning above, I composed a mood board to visualize the tone I was aiming for in Passionfroot's visual brand.
I sampled some of the colors that caught my eye from the moodboard to get some ideas for Passionfroot's accent color.
LANDING PAGE ITERATIONS
I settled on a salmon tone for the accent color along with Roboto font. I chose salmon, because it was similar to red, which is associated with hunger, but dissimilar enough from red to be more understated and modern.
I then tried out some color combinations on the landing page. I made sure to keep the page dimensions at 375 x 667 while comparing, so that I'd be seeing the same thing as the user would when first opening the app.
HIFI MOCKUPS
I chose the dark color scheme at the bottom right and applied that to the LoFi wireframes. I also tweaked some elements in the LoFi wireframes to improve the overall composition and feel of the app.
I utilized the accent color in the map pins, smiley face rankings, and the main nav at the top to break up the darkness of the UI.
I also updated the feel of the search bar to evoke a more modern feel through a gradient using the accent color.
I added gradient overlays to the images to make the text stand out more and also rearranged the copy to make it more symmetrical over the image.
I included filters that competitors didn't offer such as options to only search for vegan, paleo and vegetarian dishes.
Through gradients, I aimed to add a bit of character to the dark background and also evoke a visual hierarchy similar to that of material design.
I added quick action buttons below the restaurant info to make it easy for users to make plans once they find what they're craving.
Through a visual filter at the top, I made it easy for users to explore the kinds of reviews they're looking for.
Previous