8ITUX/UI Redesign
The Company
8it is a food recommendation app based out of New York City. They are looking to disrupt competitor such as Yelp. All of the food recommendations on the app are made by professional food critics. The app is currently in Beta and testing out key features.
Challenges
They are seeking help with a new design to make the app more usable, with a focus on increasing user retention. 4 major challenges:● How to enhance 8IT's core value and benefits to users?
● How to satisfy the unmet needs for both of 8IT's key personas?
● How to facilitate user's decision process during their journey?
● How can 8IT entice and engage better with users?
Solution
A redesign of the app that follows industrial UX and UI standards and a new marketing landing page to attract users into the funnel
Role
UX/UI Designer
Tool
Figma, Sketch, Adobe Photoshop, Miro, iMovie
Time
140 hours
Team
Self-directed with mentorship; regular check-in with a 3-person startup team; and received design critiques with designer community
OVERVIEW
Redesign of 8it
In this consulting project, the goal is to increase the user retention of the iOS app. Through user interviews, usability testing, competitive analysis, in-app data analysis, persona & user journey mapping, and literature reviews, I identified 4 key opportunities to increase user retention. I created and prioritized the solutions, defined key metrics, and successfully pitched the ideas to the 8it team.
Redesign of 8it
In this consulting project, the goal is to increase the user retention of the iOS app. Through user interviews, usability testing, competitive analysis, in-app data analysis, persona & user journey mapping, and literature reviews, I identified 4 key opportunities to increase user retention. I created and prioritized the solutions, defined key metrics, and successfully pitched the ideas to the 8it team.
CHALLENGE1
How to enhance 8IT's core value and benefits to users?1. Usability Testing
I conducted a total of 5 usability tests on the old design. During the testing, when I asked them about what are the core value and key features of the app, only 1 out of 5 users got it correct and understand its core value.
2. Literature Reviews
How to enhance 8IT's core value and benefits to users?1. Usability Testing
I conducted a total of 5 usability tests on the old design. During the testing, when I asked them about what are the core value and key features of the app, only 1 out of 5 users got it correct and understand its core value.
2. Literature Reviews
"..., where I see that most of the leverage in improving these retention curves happen in how the product is described, the onboarding flow, and what triggers you set up to drive ongoing retention." - Andrew Chen
Research shows that first time user’s experience, how they remember the key benefits of the app, could be key factor to determine whether they will return to the app in the future. A good FTUE can improve user retention rate by 500%.
3. Competitive Analysis
To better help 8it position itself and enhance its core value to the users, I conducted competitive analysis and compare the key features and value proposition of 8it app to other food recommendation app.
3. Competitive Analysis
To better help 8it position itself and enhance its core value to the users, I conducted competitive analysis and compare the key features and value proposition of 8it app to other food recommendation app.
From the analysis, I recommended that 8it could differentiate by emphasizing on the professional critics’ reviews of the app.
SOLUTION TO CHALLENGE 1
Part A: Clarify value proposition by making tagline visible
To communicate the brand value and let first-time users understand clearly why and what 8it can benefit them, I reinforce the app value in different noticeable parts during their first journey with the app.
BEFORE
First Screen
BEFORE
Home Screen
AFTER
First Screen
AFTER
Home Screen
SOLUTION TO CHALLENGE 1
Part B: Provide onboarding process to explain key values and features
After first-time user signed up for the app, they have to go through these 4 introduction screens explaining what this app is about and how this app is going to make their food search journey easier. By doing so, users will be able to understand what are the key features and hence will be likely to come back to use the app in the future.
.gif)
Onboarding Screens
IMPACT OF SOLUTION TO CHALLENGE1
Brand and value recognition increased from 20% to 80%
I conducted additional 5 usability tests on the new design. While prompted the same question about the app's core value and key features, 4 out of 5 users were able to answer the question correctly. For the old design, only 1 out of 5 users got it right. The brand and value recognition has been greatly enhanced.
CHALLENGE2
How to satisfy the unmet needs for both of 8IT's key personas?
1. Usability Testing
Among 5 users that participated in usability studies, 3 out of 5 expressed during the test the spinning wheel design on the home page looks confusing to them.
Old Design
2. User Interviews
After interviewing 4 people, I categorized users who use food recommendation apps into two types: Hunters who know what they want, and when they are interacting with 8it, they are looking for efficiency; Explorers who want more inspirations to make decision during their journey:
THE HUNTER
THE EXPLORER
For hunters type of users, the current design could satisfy their basic needs; however, for explorers type of users, the current design forces them to pick a category filter before any exploration, which is problematic. For example, when Aubrey is looking for inspiration, she will have to go from category to category, the process is tedious and not efficient, which means cause serious problems in user retention.
3. In-app Data Analysis
To communicate the problem with the team, I performed in-app data analysis in Google Firebase, which is a Backend-as-a-Service app that carries all the 8it backend data. From Firebase, I pulled up the key data and show to the team:
To communicate the problem with the team, I performed in-app data analysis in Google Firebase, which is a Backend-as-a-Service app that carries all the 8it backend data. From Firebase, I pulled up the key data and show to the team:
By doing so and through different iterations, I was able to obtain buy-in from my stakeholders for the new design.
SOLUTION TO CHALLENGE 2
Provide 3 options for browsing food, meeting the needs for both types of personas
In the new design, I provided 3 options for users to discover food: by Search Bar, by Cuisine Type, and by Feeds.
By Search Bar
.gif)
By cuisine type
.gif)
By feeds
.gif)
For the first option, Hunters can search for the dish he wants in an efficient manner; as for Explorers, the moment they tap on the search bar, it will show them what are the trending items for inspirations.
For the second option, providing both search by popularity and alphabet allows both types of persons to achieve their goals. In addition, the visual hint of each cuisine type accelerates the searching process of users.
The last option provides Explorers Instagram-like experience for discovering their favorite dish. On the card, users can see whether the food is New, Trending, or Sponsors, which gives them ideas of what to eat.
CHALLENGE3
How to facilitate user's decision process during their journey?
1. Literature Reviews
From Google Firebase, a low percentage of the users have shared or saved a dish in 8it app. This is problematic in terms of user retention because according to Sarah Tavel's Engagement Framework, being able to grow the engaged users completing the core action is detrimental to the app's growth.
"What matters is not growing users. It's growth of users completing the core action." - Sarah Tavel
For 8it, the core action includes Save, Share, and Check In, since they are important parts in user's food search journey.
2. Scenario Analysis
To better dive deep into this issue, I analyze how would users interact with the app under different scenarios. As a result, I found out there are two types of scenarios that 8it's current design couldn't allow users to complete their tasks in an efficient way:
dish RESULT SCREEN (OLD)
dish detail screen (OLD)
In 8it's current design, when users need to perform tasks in these two scenarios, they have to go back and forth between the dish result screen and the dish detail screen, which is time-consuming and frastruting:
SOLUTION TO CHALLENGE 3
Add the Share Icon and Save Icon to dish result screen
By adding the Share icon and Save icon to the dish result page, I allow users to quickly and conveniently complete the tasks of saving or sharing multiple dishes in a short period of time.
In addition, the new design also add critic's 8-word reviews on the dish result page, allowing users to facilitate their decision-making process without having to go into the dish detail screen.
dish RESULT SCREEN (new)
dish detail screen (new)
The result of the new design is that now users can complete tasks easily in the two key scenarios mentioned earlier, which are critical during their food search journey.
IMPACT OF SOLUTION TO CHALLENGE3
All 5 test participants could easily finish tasks in these two key scenarios; key metrics are defined to measure success
In the usability tests of the new design, 5 out of 5 users were able to save or share multiple dish at the same time. No user complained about the process while they were performing the tasks on the prototype. In the usability tests of the original design, 2 out of 5 users expressed the inconvenience during the process.
Although the new design has not yet been implemented, key metrics such as number of share/save, percentage of users using these two features, and screen drop-off rate.
All 5 test participants could easily finish tasks in these two key scenarios; key metrics are defined to measure success
In the usability tests of the new design, 5 out of 5 users were able to save or share multiple dish at the same time. No user complained about the process while they were performing the tasks on the prototype. In the usability tests of the original design, 2 out of 5 users expressed the inconvenience during the process.
Although the new design has not yet been implemented, key metrics such as number of share/save, percentage of users using these two features, and screen drop-off rate.
CHALLENGE 4
How to entice and engage better with users?
1. User Journey Analysis
By using the 5E experience design framework to analyze 8it user's journey, I found that the current app covers ENTER, ENGAGE, AND EXIT, but ENTICE and EXTEND are missing: users are able to download the iOS app from app store, sign up, and use it to explore food options and go to the restaurant. However, there are two great missed opportunities:
● Entice
Currently 8it market their app only on app store and Instagram, a marketing landing page will be a great opportunity to get more people into the funnel
● Extend
8it is lacking a mechanism to attract users to come back to their platform and extend their journey
2. Literature Reviews
According to the Engagement Framework, I used in solving problem3, to retain users, the product should get better the more it's used, and users have more to lose if they leave the product:
The Engagement Framework from Sarah Tavel
3. Participatory Design Session
As a design, I like to engage with my users and stakeholders early and frequently to get their buy-in and gather collective creativity, so I ran a brainstorm sessions with 3 other users to come up with ideas to attract user to come back to the app.
SOLUTION TO CHALLENGE 4
Part A: Initiate a marketing landing page to bridge the gap of Entice in user journey
Adding a marketing landing page allows 8it to attract more potential users to get into the marketing funnel and become its engaged users in the future:
.gif)
VIEW PROTOTYPE IN FIGMA
SOLUTION TO CHALLENGE 4
Part B: Add 3 features to attract users to come back: Check-in, Foodprint Map, and Food Gallery
After user checked in a dish, they can find the dish in their profile tab under Foodprint map and Food Gallery:
.gif)
CHECK-IN FEATURE
FOODPRINT MAP AND FOOD HISTORY
By creating these new features, the more user uses checks in the dishes, the more user's data is accumulated in the database of 8it. As a result, this creates accruing benefits and mounting losses as user engages with the app, which means the more users are using the 8it, the harder would be for the users to leave the app.
IMPACT OF SOLUTION TO CHALLENGE4
Key metrics are defined to measure the success of new page and features
8it team has adopted the idea of creating a marketing landing page. the page was launched recently, and key metrics such as site traffics, number of clicks on download, and number of monthly new users will be monitored; for the new design of iOS mobile app, new design has not been implemented, however, metrics such as number of monthly active users, number of check-in, and average users lifecycle before vs after will be closely monitored.
KEY TAKEAWAYS
1. Getting stakeholder’s buy-in and influencing a change
I engaged users and stakeholders throughout the process, using data and research from the marketplace, in-app database, and users to support my recommendation, and got their buy-in of my new design. In addition, to influence a change, I make smaller change to different iterations to slowly and successfully lead to a more drastic change.
2. Working with constraints in the real world
I learned how to work with engineers and learned about how to work with technical constraints. In this case, when I learned from the engineer that implementing a search feature on the webpage is way more challenging than in the mobile app, which costs lots of time and resources. I did not just give up the idea, instead, I brainstormed with the engineer to find solution. In the end, I scaled down my design but still achieved our business goal.
3. When in doubt? Test it with users
I learned that when I am in double, usability is my best friend. It’s ok to make assumptions, but more importantly I need to validate with users and let it go when the assumptions were wrong. As long as I switch my direction quickly, I will be able to build a product that users love to use.
1. Getting stakeholder’s buy-in and influencing a change
I engaged users and stakeholders throughout the process, using data and research from the marketplace, in-app database, and users to support my recommendation, and got their buy-in of my new design. In addition, to influence a change, I make smaller change to different iterations to slowly and successfully lead to a more drastic change.
2. Working with constraints in the real world
I learned how to work with engineers and learned about how to work with technical constraints. In this case, when I learned from the engineer that implementing a search feature on the webpage is way more challenging than in the mobile app, which costs lots of time and resources. I did not just give up the idea, instead, I brainstormed with the engineer to find solution. In the end, I scaled down my design but still achieved our business goal.
3. When in doubt? Test it with users
I learned that when I am in double, usability is my best friend. It’s ok to make assumptions, but more importantly I need to validate with users and let it go when the assumptions were wrong. As long as I switch my direction quickly, I will be able to build a product that users love to use.
NEXT STEPS
To validate decision decisions based on the performance of monitor key metrics such as number of monthly active users, growth of number of new users, CSAT score etc., I will constantly improve the design based on the data available.
APPENDIX:
DESIGN DOCUMENTATION
Style Guide
I used style guide to keep the design consistent during the process. The guideline includes Design Principles, Color palette, Typography, Button, Icon, and Card Design:
Device Mockup 1:
:
.png)
Device Mockup 2:
:
.png)