top of page

Yalla

Making food delivery more accessible in Juba, South Sudan

1B Landing Hero_Yalla FUN.png

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.

Role                                                       

Product Designer / Researcher

​

Duration
6 months 

​

Skills & Tools
Research, Storyboarding, Wireframing, Experience Prototyping, Usability Testing, Figma, Adobe Creative Suite

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.

Results

We conducted an A/B experiment, dividing our user base into two groups, with 50% experiencing the new design.
The results were nothing short of incredible! 🥳

KPIs_Yalla.png

Process

The Process_Yalla.png

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. 

Navigation_YallaVSCompetitors_wBG.png

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.

Info Architecture - Yalla Vs Competitors.png

DoorDash

Uber Eats

Yalla

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.

Visual Appeal_YallaVSCompetitors_wBG.png

02
Identifying the Opportunities

What Users Want & 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.

5 Test Results_Yalla Purple.png
5 Test Results_Yalla Purple.png

Information Architecture Improvements

Based off the research we conducted,  we updated the information architecture to enhance the user experience.

Old

Info Architecture_YallaOldVSNew.png

New

Info Architecture_YallaOldVSNew.png

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.

7 Wireframes & Iterations_Yalla.png

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.

8 AB Testing_Yalla.png

Main Course / Food Options Iterations

04
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.

9 Final Design_Yalla.png

Restaurant Menu

Page

Adjustable Quantity

Food Item Page

Restaurant Menu

Page w/ Quantity

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. 

10 Next Steps_Yalla.png

Current
Lead with speed of purchase

Iteration 2

Lead with user behavior

Iteration 1
Lead with promotions / deals

bottom of page