UI UX Design Case Study: Car Rental Platform, ODA Payment App and Mawen Marketplace

This UI UX design case study covers three products designed by Kenania: a car rental platform shared by several agencies, the ODA payment app and the Mawen grocery marketplace, each with the reasoning behind its screens.

The three briefs had little in common. A car rental company wanted one platform where several agencies list their fleets. A fintech wanted a payment app that a shopper trusts within three taps. A grocery marketplace needed customer, vendor and driver interfaces running on one system. The team and the method stayed the same, and this UI UX design case study sets the screens of each product next to the decisions that shaped them.

Car rental platform

The first product in this UI UX design case study is a multi-vendor platform. Each agency manages its own fleet, prices and availability from a web dashboard, and customers search the cars of every agency from one app. Three desktop views carry the system, and the image at the top of this page shows them side by side: the admin dashboard for the platform owner, the supplier dashboard for each agency, and the form an agency uses to add a car.

The admin dashboard opens on a row of counters for total revenue, total orders, deliveries, and active, pending and cancelled orders. A statistics chart and a circular gauge sit beneath them, then a table of recent orders in which every row ends in a coloured status label. A narrow column on the right counts categories, cars in the store, available and unavailable cars, customers, suppliers and system users. From this one screen the owner reads fleet utilisation, bookings and revenue per agency, and sees which partners are performing without asking anyone for a report.

The supplier dashboard repeats those counters for a single agency and lists its cars by type and brand, with a status column for each car. Adding a car starts from a grid of car cards filtered by type, brand and year, each card showing the photo, name, type, model and year with a plus button. The details are then completed in one panel.

Its left side holds the photo, type, brand and year, with features such as colour, gearbox and seats below them and up to five extra features, each with a name and a short description. The right side holds the daily and monthly rental price, extra fees with a switch for delivery, and the rental terms. A red note under the price field says the maximum price is limited by the car type, so the agency sees the ceiling while typing, before it saves the listing.

Seen from the agency’s side, the system runs in a short line. A car is added with a price inside the cap, its extra fees and its terms, and it then appears in the customer app next to cars from other agencies. When someone books it, the order lands in the recent orders table with its status, and the counters on the owner’s dashboard move with it. All three views use the same counters and status labels, so a booking reads the same at every step.

ODA payment app

Paying is the point where a user is most likely to hesitate, so each ODA screen does one job. The app uses a single colour, yellow, gives every step its own card-shaped screen and sets amounts in large numerals. The amount, the merchant and the confirmation can be read at a glance, which is what a shopper paying with a queue behind them needs. The brief asked for trust within three taps, and one screen per step is how the design keeps to it.

The gateway checkout was designed to sit inside other apps in the same visual language. The yellow, the card screens and the large numerals travel with it, so a shopper who meets ODA inside a merchant’s app recognises the payment step. On the gateway screen the sheet itself is white and yellow is kept for the main button, the one control that moves the shopper forward.

Mawen marketplace

Mawen is a multi-vendor grocery marketplace in Arabic and English with three kinds of user: the customer who orders, the vendor who lists and sells, and the driver who delivers. Each has an interface of its own. The customer app leads with categories and offers, the vendor dashboard on the web handles products, orders and settlements, and the driver’s screens are designed for a phone held in one hand.

On the phone, the customer’s home screen starts with the delivery address and a search bar with a scan button. A seasonal offer banner follows, then round shortcuts to offers, best sellers and favourites, a row of partner brands and the top products, with a tab bar along the bottom. The brand ribbon sets the colours for all of it: a purple-to-pink gradient behind the Arabic logo, with the products themselves as the imagery.

The web shop, shown here in Arabic, reads from the right. The logo sits at the top right, the category tabs start from the right edge, and product cards with their prices fill the grid beside the cart total. A component library of product cards, favourites and offer tags keeps the customer, vendor and driver interfaces consistent. Each product card carries the image, the name, a heart for favourites and an add button, and because it is one component it looks the same wherever a product is listed.

Vendors arrive through a purple landing page that introduces the vendor app and invites them to join. Inside the vendor dashboard every product row has an availability switch and a price, and one button updates prices and availability together, which suits a grocer changing many items at once.

An order opens on a single page with the customer’s details, the shipping and billing addresses on a map, a barcode and the payment information, including a button to send a payment link, so the vendor can prepare it without moving between screens. Above the vendors sits the marketplace’s own admin dashboard, which follows vendor activity over a chosen period next to figures for income, orders, taxes, abandoned carts, active and out-of-stock products and registered customers.

GamerX, a marketplace-style product

GamerX, a PC-builder e-commerce app, sits outside this UI UX design case study but follows the same marketplace pattern. Its home screen puts search first, then a banner with two routes, exploring prebuilt PCs or customising your own, then categories such as cases, laptops and graphics cards, and the top prebuilt PCs. For a utility product, see the machine-learning waste app.

The method behind this UI UX design case study

Each product started with the same three questions. Who is the user in a hurry? What is the one action they must complete? What would make them give up? For the car rental platform that user is the agency employee updating availability at closing time. For the payment app it is a shopper at a checkout with a queue behind them, and for the marketplace it is a driver with a phone in one hand. Every screen was then judged by whether it shortened that person’s path.

Wireframes for every product in this UI UX design case study were tested on real staff before visual design began. The operators wanted dense tables, so the dashboards have them; shoppers wanted large single-purpose screens, so the consumer apps use those. An operator sits at a dashboard for hours comparing rows, while a shopper opens the app for one action and closes it.

From user flows to developer hand-off

The work ran in the same order on all three products. User flows and information architecture came first, drawn separately for each user type: owner, agency and customer on the rental platform, the shopper on ODA, and customer, vendor and driver on Mawen. Wireframes and their tests followed, then high-fidelity UI in Figma, then the component libraries with their Arabic and English layouts. Developers received the files with specs and assets, so every component size and state colour was specified before coding started.

The flow was always drawn before the screen. The agency’s flow, for example, starts with adding a car and ends with a booking in the owner’s order table, and each screen between those two points exists because the flow needed it.

One design system, three products

A shared component library links the three products in this UI UX design case study: buttons, forms, cards, status colours and typography. It makes the marketplace’s customer, vendor and driver apps look like one company, and it means the car rental admin can be handed to a new developer with a single reference. Colour carries information. Booking, payment and delivery states each have one fixed hue on every screen, which is what the coloured labels in the car rental order table do: a pending order, a cancelled one and a paid one are told apart before the text is read.

Each product in this UI UX design case study still has a colour of its own. The car rental dashboards are white and light grey so that the status colours stand out, ODA is yellow, Mawen runs on its purple-to-pink gradient and GamerX is green.

Arabic and English layouts

The component libraries in this UI UX design case study were drawn with Arabic and English layouts from the start. On the car rental dashboards each counter carries two labels, English above and Arabic below, so a mixed team reads the same screen. Mawen’s Arabic web shop is laid out right to left, and its product cards, favourites and offer tags were built to hold either language, so one set of components serves both. Prices keep the same digits in both versions.

After launch

The last step in this UI UX design case study came after launch. The teams tracked how long the core action took and where users dropped off, and two flows were simplified within the first quarter. The measure was the question each project started with: whether the hurried user’s path had become shorter.

Scope

• User flows and information architecture per user type
• Wireframes and high-fidelity UI in Figma
• Component libraries and Arabic/English layouts
• Web dashboards for admin and vendors
• Developer hand-off with specs and assets

Kenania designs and builds apps, marketplaces and dashboards for companies in the Gulf and Egypt. The UI/UX and digital products service page explains how a project like the ones in this UI UX design case study is scoped and priced.

Another UI UX design case study, and related services

The Saudi marketplace is an earlier UI UX design case study of ours; the other links cover the services behind this work:

• Multi-vendor marketplace UI/UX for Saudi Arabia: an earlier marketplace app and dashboard
• UI/UX and digital product design services: how we scope and price product design
• Digital marketing services: launch campaigns for the products we design
• How to choose a design agency: what to ask before you brief a product team

Planning an app, a marketplace or a dashboard? Send a short brief listing the users it has to serve for a scoped proposal.