The food delivery app.. but for employees
Scope
Branding
Design system
Web App
Mobile App
Role
Lead product & visual designer
About
LunchPro is a lunch-only food delivery app created exclusively for Moroccan employees, partnering with carefully selected restaurants, LunchPro provides its customers high quality meals to help them refuel during their work breaks, ensuring diversity of choice, competitive prices, and lower delivery cost.
Employees also benefit from a company-provided discount, available once per day, which is automatically applied to their orders
Brought to the table :
✦ Logo design
✦ Brand tone & voice
✦ UX writing
✦ User flows & IA
✦ Design system
✦ UX UI design
✦ Prototyping
Disclaimer: This project was designed in French. Most screens have been translated into English, but some remain in French. If you need additional context, feel free to reach out.
Problem
As a Moroccan employee myself, I always seek new lunch options, but I don’t want to risk bad food or wait forever for delivery in my tight lunch break. With delivery apps like Glovo, I always hesitate to try new restaurants because I’m not sure if the food will be good. So, I usually end up ordering the same things from the same places over and over again, which gets boring.
Goals
The goal is to design a responsive web app, a mobile app (iOS & Android), and a staff web app, all working seamlessly together to ensure:
☑️ Employees can easily see their available discount at a glance, with automatic integration at checkout with no manual activation.
☑️ A minimal learning curve, allowing employees to intuitively find, select, and order meals without effort.
☑️ Staff can efficiently manage between 1 to 20 orders simultaneously without losing track of new or pending requests
Challenges
Most employees have limited time to order lunch during their break, so any friction such as: not sure if their discount is applied, or how much they have left could lead to frustration or even order abandonment. One of the biggest challenges was ensuring the discount was clearly visible at a glance, automatically applied, and seamlessly shown both before and during checkout without requiring any extra steps.
Logo design
To me, one of the best things a designer can hear from a client is: "We don't have any restrictions, you have complete freedom to suggest fresh ideas". That is how I designed the logo, I completely detached from the old logo and its identity, treating the new logo as a start-from-scratch task.
I chose the letter 'L' as the foundation, and incorporated key elements that represent LunchPro: Companies (symbolized by a building) & Fast delivery (Tilted shapes)
Brand voice & tone
Before moving into UX fun, I took the opportunity to define LunchPro’s character using a Google researcher’s method. This helped craft a UX copy that resonates with the target audience and keeps them engaged. I've experimented with different tones through a few sample phrases, such as:
Empathetic : Lunchtime is here, and we know that feeling—you need something good, fast, and satisfying!
Exciting : Hunger won't wait!! neither should you! Let's get something delicious? 😋
Professional : LunchPro brings carefully curated meals straight to your workplace—fast, fresh, and hassle-free.
Process
To approach the solution effectively I organized my process as follows:
Understand
Research
Ideate
Design
Test & Iterate
After Google meets.. Research
After several discovery calls with the client, I did some research. Due to time constraints, I performed secondary research by reviewing study reports and user reviews on AppStore to understand how familiar Moroccans are with food delivery apps, which app they use the most, and how frequently they order during lunchtime, their current challenges, and more. Here are some findings :
25% of the population use food delivery apps
Glovo is the most used food delivery app with 60% usage rate
Lunch makes up 40% of orders, with an average order value of MAD130
Additionally, I was also able to talk to some friends over the phone, who are employees themselves and use food delivery apps, I wouldn't call it a well-prepared primary research, but It still provided valuable insights, such as :
I usually use Glovo when I’m too lazy to go out or when I have a busy workday
I rarely order from new restaurants, but when I do, I check TikTok or Instagram to read what people think of it
I dislike using Glovo because the prices are always slightly pumped up
No wheel must be reinvented
To minimize the learning curve, and as much as we craved fresh ideas, we had to leverage what already works in food delivery apps. That’s exactly what I did for most flows such as finding a food item, ordering, and tracking, while only the sign-up and login flows were designed differently.
Even though the product could have been designed differently from other food delivery apps, applying Jakob’s Law at its core was the go-to approach here. I analyzed Glovo, DoorDash, and UberEats, with a strong focus on Glovo, as it is the most widely used food delivery app in Morocco according to the research.
Analyzing existing apps, User flows and Information Architecture
Knowing there wasn’t a real need nor enough time to rethink wireframes or journey maps, I focused on the main user flows and information architecture to align with the client on the key aspects.
Fortunately, we didn't have to worry about the delivery address entry with all its hurdles, since the food will always be delivered to the user's company address (which we'll have registered). All we needed to do is to inform users about it.
Moving forward, discounts
One of our strongest USP, and we needed to leverage it to its full potential. The challenge wasn’t just ensuring users were aware of their discount but also displaying both the original and discounted prices simultaneously. Since the discount applies only to the first selected item, it needed to be communicated clearly and intuitively. Here is how I broke it down :
1- Once a user signs up, they are welcomed with a 'You have a discount of X$ for every work day' message, this ensures they are immediately informed about the discount
2- Since the popup message cannot stay on-screen all the time, we needed to place the discount somewhere so the user can always see it, the top navbar is the right place, ensuring the usage of the discount icon, because we need it for step 3.
3- Displaying the discounted price directly below the original price, using the discount icon as a visual reference. This helps users quickly see the discounted cost of the item, and understand that the discount is available for use.
4- After the user selects the first item, it visually emphasized with a special color and special icon that the discount is applied, the discounted prices for all other items turn grey, signaling that the discount is no longer available for them
What about staff?
As highlighted in the goals above, we aimed to design an interface that allows staff to manage anywhere from 1 to over 20 orders simultaneously, ensuring they can track both ongoing and new orders. This meant striking a balance to display order details clearly, whether there is just one order or more than 20.
To address this, I first identified the key elements of an order, knowing that there would be a minimal view (with only essential elements) and a detailed view (with all the order details). The minimal view was my main focus, as it's the one that matters most to staff, and needs to be displayed correctly, whether for one order or up to 20 at once.
So I asked: What are the necessary elements? Can we lower that number? I knew that the fewer elements we had, the more space we could allocate for other orders. After minimizing the elements to gain space, I explored multiple solutions:
Solution 1
Filters & Sorting: Each order has a status (new, in preparation, ready, etc.). One feature that staff can use is filtering orders by status, allowing them to limit their view to fewer cards. An additional option that could be useful is filtering by creation time, sorting by Recent and Oldest was worth adding to give staff more control over the UI
Solution 2
Collapsible sidebar: By reducing the sidebar width, we can gain extra space to display more than 3 orders per line
Solution 3
Grid/List view : The list view allows users to see more orders at once with minimal scrolling. Stacking orders vertically is typically more efficient for scanning large amounts of data, while it also helps users to scan informations faster.
Ideally, we would have combined all three solutions, giving users the freedom of choice and complete control. However, we couldn't offer all options in the early stages of the project, so we started with filters and sorting while keeping the other solutions in mind for future iterations.
UI Screens peak
Although the project just launched last month, we are already seeing promising signs of success:
26% Adoption rate
We saw an initial adoption rate of 26% within the first roll-out
2 signed up companies
Within the first month, 2 companies are onboarded already
+100 downloads
During the first month
Few feedback & Satisfied client
The client provided minimal feedback, which served as a strong indicator that the solution met expectations
At this point, you probably deserve a snack break 🍫, so I’ll keep it brief. Here are few things I learned:
Staff handling customer orders had difficulty reading order statuses. Even with distinct status colors, visibility was an issue. To address this, we increased the font size and used stronger, more contrasting colors for statuses
The most important lesson I learned : when working with hybrid apps (responsive web, iOS, and Android), even small changes to a card or component must be carefully considered, as adapting them to fit every device can be challenging.