Yalla
Making food delivery more accessible in Juba, South Sudan
Contribution: Lead Product Designer
Duration: 4 months
Skills and Tools: Competitive Analysis, Interviewing, Site Mapping, Prototyping, Figma
Overview
Yalla is the first food delivery app in South Sudan. The team wanted to revitalize the food delivery app's consumer-facing side to make it more efficient and engaging.
The inefficient navigation system negatively affected the user's ordering experience and the overall visual design needed to meet current user expectations. These issues were causing a decrease in user engagement and retention, which affected the app's and businesses' performance.
The goal was to create a design solution where an updated UX, UI, and overall product thinking of a specific page can positively influence the rest of the app design. The first page we tackled was the Restaurant Menu page because users spend most of their time there. Redesigning this area of the app gave us a chance to help the Yalla team envision a more modern and intuitive approach to the app's overall design.
Challenge
How might we redesign the Restaurant Menu page to be more intuitive and modern while restraining from introducing any new features or major backend changes?”
Solution
We concentrated on enhancing three critical aspects of the app:
Navigation Redesign: We shifted the main navigation to the bottom of the screen to improve accessibility and foster greater user engagement.
Information Architecture Improvement: We re-evaluated and restructured the app's information architecture to ensure it is more intuitive and user-friendly, making it easier for users to navigate and find what they need efficiently.
UI Modernization: We updated the user interface to be more visually striking and aligned with contemporary design trends.
Final design (click to view)
Results
We conducted an A/B experiment, dividing our user base into two groups, with 50% experiencing the new design. The KPIs monitored were User Engagement, Conversion Rate, User Retention, and Navigation Efficiency.
The Process
01
Understanding the Problem
The goal was to enhance the user experience and user interface to align with modern standards. To understand some of the issues from the current experience, we compared Yalla to apps like DoorDash and Uber Eats, leading players in the food delivery space.
Navigation improvements to enhance user accessibility
The Navigation menu for Yalla is within the top-left menu icon. Though functional, this approach hindered the user journey since it required more steps to navigate the app.
We took inspiration from the navigational ease we observed in competitor apps, which mainly use a tabbed navigation bar at the bottom of the screen, allowing users to seamlessly switch between different features without the need to return to the Home page. This user-friendly design not only enhances the accessibility of key app functions but also facilitates a smoother, more efficient user experience.
Yalla Navigation compared to Uber Eats and DoorDash
Information Architecture
We compared Yalla’s existing information hierarchy to the straightforward and streamlined designs of Uber Eats and DoorDash. These platforms exemplify the art of guiding users through menus with well-organized categories to highlight sections like "Featured Items" and "Popular Dishes."
Their approach simplifies the user's path from selecting the order method (delivery or pickup), then menu browsing, to adding to cart, all on one page. This method enhances decision-making by presenting options in an orderly and understandable manner.
Yalla's current design lacks this clarity. Some key steps live in a different section of the app, making navigation and ordering more complicated than necessary. By adopting a more structured and intuitive layout, we aim to simplify the user journey, ensuring easy access and interactions with menu options. This refinement is crucial for providing an improved experience that aligns with user expectations.
Information Arcthitecture
Final design
Visual Appeal
Platforms like Uber Eats and Doordash capitalize on high-quality, vibrant food imagery that looks enticing and enhances the page's overall aesthetic. We realized that Yalla's Restaurant page needed to follow suit. Yalla's existing food imagery needs to capture the user's attention in the same way as competitors. The color scheme and visual language overall are also muted in comparison.
Taking these insights, we embarked on a design overhaul for Yalla, aiming to create a more visually stimulating and user-friendly interface that could compete with the best in the business and essential to effective user engagement.
Yalla Visual Appeal compared to Uber Eats and DoorDash
02
Identifying the Opportunities
What users want and need
A user-focused card sorting research guided our Yalla's Restaurant page redesign.
We asked 50 users in Juba to rank features as 'Must Have,' 'Nice to Have,' or 'Don't Need.' Their insights helped us prioritize essential features, enhance with desirable add-ons, and remove the unnecessary to make the app more intuitive and user-friendly.
Card sorting test results
Information Architecture Improvements
We updated the information architecture based off the research we conducted.
Updated Information Architecture
Updated Information Architecture
03
Design Process
Wireframes & Iterations
After getting approval from the stakeholders, we moved forward with wireframing iterations in collaboration with the Yalla team.
These iterations reflect the users' concerns from our previous card sorting exercise (e.g., clear pricing alongside menu items, adding items to the cart quickly, high-quality food imagery, and clear options for delivery and pickup).
We tested these low-fidelity iterations by giving users a few tasks to complete. Overall, the users resonated with a more straightforward way to select their delivery or pickup option.
There was no definitive better option when choosing how to layout adding items to the cart, so we created higher fidelity iterations to re-test how users might engage differently if add-to-cart buttons were directly above images versus separated from them.
Top Row - Options for Delivery / Pickup
Bottom Row - Options for Main Course / Food Options
A/B Testing
After going through several iterations with stakeholders we arrived on three designs we wanted to test. We conducted A/B tests with 30 users to see how quickly they were able to add and remove items from the cart. The users engaged differently when presented with actual images on the menu, most of them preferred the food images being separated from the add to cart button - as it was more easy to find and interact with.
Final Design
After iterating and testing with stakeholders and users, we arrived at a final solution. Our final design includes these improvements:
-
Allows users to access high-quality food imagery and a straightforward user flow.
-
Communicates to users how to choose between Delivery and Pickup within the Restaurant page in a way that is easy to understand.
-
Allows users to add and remove items from their cart quickly.
-
Offers a simplified and intuitive Navigation bar so users can easily accomplish their goals when using the product.
While these improvements enhanced the user's overall experience of interacting with the Restaurant page, we were also able to provide the Yalla team with a solid visual direction for the app overall and reusable components to make the design and development of the other pages more manageable in the future.
Next Steps
Our next step is to release the improved iteration of the Restaurant page to the rest of the users.
Wanting to understand what other features could increase user engagement, we also plan to test additional iterations (see below) based on the feedback we gathered from users. These iterations will highlight ‘Promotions’ and the ‘Most Popular’ food items available for each restaurant, which currently is a low priority for the Yalla team. We are eager to learn from these experiments and continue to help Yalla become a successful food delivery app in South Sudan.
