Eko Jeun App
Branding , UI/UX Design
The Eko Jeun app is a food ordering app with an in-built wallet system that allows users to book and pay for dine-ins and take-outs, before they show up at the restaurants, eliminating the time wasted placing orders and making payments.
Duration: February – April 2022
Role: UX Researcher, UX Designer, UX Writer, UI Designer, Brand Identity Designer
Responsibilities: User Research, UX Writing, Branding, Style Guide, Sketching, Wireframing, Mockups, Prototyping, Testing
DEFINING THE PROBLEM
Placing orders and making debit card payments at restaurants have proven to be many times unreliable and time-wasting. There have been several reports of embarrassing experiences when the customer tries to pay for their meal and there is a debit transaction error.
BACKGROUND
Many working-class people in the city of Lagos spend at least a day a week at their favourite restaurant. This activity is sometimes spoiled by delays or embarrassment associated with card transaction errors. Therefore, I wanted to design a solution that will tackle this problem. I carried out interviews to understand the users’ pain points better and define our main target users and features.
DESIGN THINKING FRAMEWORK
USER RESEARCH
I started my research by conducting interviews with young, tech-savvy, working-class individuals who visited restaurants at least once a week. Before conducting the research, I had the assumption that people were having challenges with making payments at restaurants. It was a relatable problem. The goal of my interview was to identify pain points that users experience when making payments at restaurants. I also wanted to determine preferred payment options.
PERSONAS
USER STORY
USER JOURNEY MAP
User journey maps are visual representations of the actions a user takes to achieve a goal. I mapped out the journey of one of the personas – Tochi, examining the series of actions taken from restaurant selection to payment after a meal (in this case, Dine-in). This helped me point out key areas in the journey that my app had to cater to.
COMPETITIVE ANALYSIS
In order to build a foundation for Eko Jeun, I had to study what other major competitors were already doing and what user goals they were not reaching. I found that none of the apps had a Dine-in option or Wallet feature. They were all easy to use but failed to include any form of accessibility considerations. Two of the apps remembered your last order.
USER FLOW
Based on the research, I came up with a user flow diagram to have a bird’s eye view of the design. It highlights the key features of the app and the flow from start to order completion.
BRANDING
I wanted to create a brand that conveys family, love, and friendship.
Philosophy
1. Community
2. Variety
3. Seamlessness
Naming
1. Lagos Eats
2. The Restaurant Hub
3. Eko Jeun
STYLE GUIDE
SKETCHING / PAPER WIREFRAMES
I sketched out ideas for the app screens: how each app page should look, and its features.
LOW FIDELITY DESIGNS
I moved on to create a lo-fi prototype with the following major functions: Signup/Login, Order a dine-in/take-out, place a delivery order, Select restaurant/meal, and Wallet.
USABILITY STUDY
I conducted a moderated usability study to evaluate the ease of use of the app (low-fidelity prototype) and identify areas for improvement. Using an affinity map, I was able to group the feedback and see areas in the design that needed to be reviewed. Firstly, the homepage was simplified to show the user a Categories section, Top recommendations and Recent visits. The option of Dine-in, Takeout and Delivery were moved to later in the flow. Favourites was added to the bottom navigation bar and the option to save debit card was introduced.
AFFINITY MAP
HIGH FIDELITY DESIGNS
The high-fidelity mockups and clickable prototypes were designed based on the feedback obtained from the usability study and using the design system.
ONBOARDING SCREENS
SIGN IN/REGISTER
MAKING A RESERVATION (DINE-IN)
MAKING AN ORDER (DELIVERY)
Onboarding
The 3 Onboarding screens are supposed to provide users with a quick introduction to the app’s features. It will be shown to only first time users and they have the option to skip it.
Home
The Homepage is an Explore page with featured restaurants and several categories to choose from. The user lands on this page immediately after signing in/up, without much ado.
Profile
From the Profile page, users can see their past orders, customize delivery addresses, access their wallet, see and customize notifications, and contact support.
Restaurant
The Restaurant pages contain a brief summary, location, opening hours, budget, and menu giving the user a rich insight into the selected restaurant.
Order/Reservation
The user can see items currently selected for purchase and choose order type. The “Dine-In” and “Pick-Up” options have similar flows as they both lead the user to choose a date and time. The Delivery option leads the user to a separate map page to choose an address.
Reservation
The “Dine-In” and “Pick-Up” options lead to a page where the user is expected to select a date and time to have their meal. It consists of a user-friendly calendar and time picker.
Delivery
The “Delivery” option leads the user to a map page where they can type in a delivery location or handpick using the map navigation interface.
Wallet
The user is able to credit his wallet in-app using a debit card at any time and make payments for his meals whether at the restaurant or before his visit. This helps to eliminate embarrassment and time wasted making payments at restaurants. The user is also able to see purchase history.
DARK MODE
I also set out to explore a dark UI mode for the app due to its aesthetics and accessibility advantages.
ACCESSIBILITY CONSIDERATIONS
It is important that designs cater to those who have disabilities like difficulty with hearing, seeing, and speaking. Among the many ideas for accessibility that came to mind, I was able to incorporate the Voice search feature on the Homepage and screen reader on the Restaurant screens.
TAKEAWAYS
Working on Eko Jeun provided a wealth of knowledge. It was incredibly satisfying to comprehend user pain points and be able to address some of them in the design.
NEXT STEPS
Some users may decide not to make reservations for dine-ins or take-outs in advance. They like to make their meal selections once they have arrived at the restaurant. The next step is to design a flow such that when they go to the restaurant, they can pay using the in-app wallet. In this instance, the user may pay by keying in the restaurant’s unique code or scanning their QR code when the bill is provided to them.
PROFITABILITY
In order for the EkoJeun App to operate at its best, a number of stakeholders must be deeply involved in the implementation. These also comprise the service providers in addition to the designers and developers. The establishment of a workable modus operandi that guarantees that clients receive the best service is crucial to its success.
