iFoodie Redisign
Locate tasty food around you and experience your best meal
Industry Cooperation Project/ UIUX Redesign/ IA Design/ Hi-Fi Prototype
Duration: Feb 2023-May 2023 (3 months)
Deliverable: Hi-Fi Prototype
Role: UX Researcher, UI/UX Designer, IA, Usability testing
Project Introduction
Background Introduction
Founded in 2014, iFoodie connects over 3 million Taiwanese users with great restaurants through foodie-written blogs, similar to Yelp, and collaborates with numerous bloggers. However, in the face of increasing competition, iFoodie has decided to reevaluate its user base and redesign the app’s interface and flow.
Business Goals
iFoodie highly regards the foodies’ blogs as their most valuable asset. However, in today’s trend, people prefer using platforms like Instagram or Google Maps for food searches, relying on quick visuals rather than lengthy text. The goal is to redesign the UI/UX for retaining existing users and attracting new ones with a visually engaging and efficient food discovery experience. This requires balancing iFoodie's current strengths with evolving user expectations.
Bottleneck & Challenge
Some feedback from existing users includes “Not user-friendly,” “The design looks outdated,” “Too much information within a page,”…etc. Balancing the fulfillment of user needs while meeting the demands of the business owner poses a significant challenge. Since iFoodie's team hasn't researched their users before, it is a big challenge to dive into the existing and potential users to understand their habits and motivations.
Our Goals
-
Redesign the visual and rearrange the IA to make it more intuitive and user-friendly
-
Identifying realistic usage scenarios and appealing features that people may enjoy.
-
Attracting new users and increasing user engagement.
Design Process
Research and Problem define
User Interviews
Five users were interviewed, two of whom had used iFoodie before. The aim was to understand people’s specific needs when searching for food.
Interview findings
-
Interface consistency: Interface consistency and a well-arranged information hierarchy can enhance the user experience.
-
Realistic usage scenarios: Setting some realistic usage scenarios can be thoughtful.
-
Users’ Genres: There are two main kinds of users: those who know their needs and those who don’t.
-
About reviews: Most people will not actively post restaurant reviews if it takes a long time.
-
Purpose of use: A few people take food searching as a stress-relieving leisure activity.
-
People do believes foodies' blog have provide more information.
Competitor Analysis
An effective layout is crucial when handling a significant amount of information. While iFoodie’s page offers a wealth of valuable content, the absence of visual consistency and clear information hierarchy often leads to user confusion and dissatisfaction.
-
Direct competitors: Yelp, Dianping大眾點評
-
Indirect competitors: Google Maps, Instagram
Persona
Based on our research, we have identified our target users and uncovered scenarios that shed light on their potential problems and concerns when using the app. Recognizing that there are two distinct user dimensions within iFoodie — those seeking information and those contributing reviews and comments — we have created two personas to better understand their needs.
Searching experience
Sharing experience
User Journey Map
Through the user journey map, we focus our goal on addressing users' need to efficiently find food or restaurants.
Ideation
HMW (How might We...)
Next, we begin ideating by formulating problem statements using “How Might We” (HMW) questions and brainstorming realistic solutions.
-
HMW ensures the app is intuitive and doesn’t require excessive mental effort to use.
-
HMW organizes complex information architecture to be easily understandable at a glance.
-
HMW Enables users to categorize their saved restaurants according to their preferences.
-
HMW streamlines the review writing process by converting some content into selectable options.
Solution
-
Refine the Information architecture and the content hierarchy.
-
Designing more customized features to cater to individual user needs.
-
Simplifying the review submission process.
Information Architecture
Design
Mid-Fi Wireframes
-
Home Page
For the initial version, our goal was to separate the Foodie reviews and restaurant exploration pages to ensure clarity for users. However, we realized that asking users to make a decision as soon as they enter the app could be bothersome. Additionally, we noticed that there was an overwhelming amount of information on this page. As a result, we simplified the Home Page by directly leading users to the Foodie reviews page. In the second version, we also added convenient shortcuts to different food genres.
For the second version, we noticed a lack of user interaction on this page. Therefore, we made slight changes to our final version, ensuring each block caters to specific target users. We start with a greeting to the user, mentioning their location and the current weather. Next, we have the search box and filter function for those who already have a clear idea of what they want to eat. Following that, we include genre shortcuts for those who may have a rough idea but are unsure. Finally, we have a section for people who simply want to browse.
The iteration process of Home Page Design
Other pages
Appeal and Feeling
In this redesign, we want to give iFoodie a fresh, young design and make it more life-oriented.
Final Prototype
-
Home Page
Feature
The main visual retains the original app’s blue color, while vibrant orange is used for important CTA elements.
Goal
The design aims to cater to users with diverse needs and assist them in finding suitable dining establishments.
-
Foodies’ Review Page
Feature
The top section can link to the restaurant page. In this way, users who are looking for a quick overview can easily find the information they need.
Goal
For people who want to see other’s experience about dining in a specific restaurant.
-
Restaurant Information Page
Goal
Help people get to what they want about the restaurant directly.
Feature
The main functions, such as ‘open Maps’, ‘make a reservation’, ‘write a comment’, and ‘check the menu’, are listed at the top with prominent icons.
The ratings and other reviews follow a consistent pattern, ensuring clarity. Additionally, at the bottom of the page, there are links to all the relevant foodie reviews.
-
Inspiration Exploration
Goal
Help people who have no idea what to eat find a restaurant, suggesting some nice food nearby.
Feature
Users can gain inspiration through two methods. The first involves random flashcards presented as GIFs, allowing users to interact by touching the screen to pause and choose again, save, or browse the associated restaurant information.
The second method offers curated lists based on scenario tags like ‘after workout’ or ‘chatting’, providing targeted inspiration for specific situations.
-
Hi-Fi Prototype
User Test
Usability test
Before the final prototype, we recruited 5 participants for a usability test through Maze, which proved valuable in identifying recurring issues. Based on the problems we uncovered, we devised solutions accordingly, as depicted in the picture below.
Iteration process
We streamlined the visual color scheme across the entire app, reserving the use of blue exclusively for call-to-action buttons. By reducing the overall color palette, we aimed to enhance user focus and direct their attention to the desired actions.
Onboarding
By implementing an onboarding process, we provide users with an immediate understanding of the app’s benefits and features. We highlight the unique functions and specialties that set us apart, making the app more enticing and engaging.
Preference setting
To provide personalized recommendations, we prompt users to input their food preferences, eating habits, and other relevant details during their initial login. Additionally, we collect location information to ensure the recommendations are customized for their specific area.
Outcomes
-
The System Usability Scale (SUS) score improved by 24.2%. The users find the overall design and the information structure to be more friendly to understand the flow intuitively.
-
The client is interested in the new “Inspiration Exploration” feature and highly impressed with the final Hi-fi design completed within three months.
Reflections
Takeaways
This is my first UI/UX redesign project, and throughout this process, I have learned and applied various methodologies. I gained the ability to define specific problems within a broad concept and, most importantly, learned how to collaborate effectively with others.
I now understand the importance of conducting quick tests in a project, as real-life usage situations often reveal insights that our initial assumptions may not capture. Overall, this experience has been invaluable, as it has enhanced my skills and deepened my understanding of the UI/UX design process.
Next step
For iFoodie, our primary goal is to implement a reward system that enhances user engagement with the app. While the client initially expressed concerns about the associated costs, I am inspired by insights from “Hooked” by Nir Eyal and Ryan Hoover, which demonstrate various methods to create user addiction in an app. Consequently, I am motivated to explore strategies that improve customer retention without excessive expenditure.
Thanks for reading 💓