Connecting small businesses of Egypt
to the largest FMCGs

Capiter Highlights

YEAR: 2021
POSITION: SENIOR PRODUCT DESIGNER @ CAPITER
IN CHARGE OF: INTERNAL DASHBOARD / DELIVERY AGENT APP / SELLERS MARKETPLACE
FIELD: ECOMMERCE

Case
Study

Intro

Capiter is a B2B e-commerce platform that combines the operations, marketplace, and financing business models with technology to serve MSMEs across the food and beverage, FMCG, and electronics sectors. It offers a one-stop-shop solution for MSMEs to order inventory, obtain delivery, and access buy-now-pay-later (BNPL) financing facilities. The platform aims to simplify the purchasing process and help MSMEs grow their businesses.

Capiter Cover
Capiter Cover

Goals

  • To create a seamless, user-friendly platform that makes it easy for MSMEs to buy and sell products.
  • To provide a range of financing options to help MSMEs grow their businesses.
  • To increase revenue by expanding the user base and driving more sales.
Capiter Cover

Delivery Agent App

We conducted user interviews with the delivery agents and identified the pain points in the existing app. We then completely redesigned the app, making it more intuitive and efficient. This improved the overall experience for the delivery agents and helped them to complete their tasks more quickly.

Delivery Agent Old App Delivery Agent App Home Screen - Before Starting
Delivery Agent App Home Screen - Before Starting

The new revamped app contains three tabs which contains all the tasks and information that the delivery agent needs to know on their daily route.
One of the biggest pain points we got from the agents the lack of knowledge of the products they're carrying in their truck so we introduced a new tab for all the products in the runsheet.
We wanted to track when they start delivering on their route so we introduced a new button "Drag to start" in order to access the delivery information and the map option.

Digital Agreement of Custody

The digital agreement of custody.

Delivery Agent App Home Screen - Started

Home screen after starting the runsheet.

Product Card Variations

Map Navigation

One of the pain points is switching back and forth between the app and Google Maps, so we introduced in-app navigation to make the experience more seamless.

Delivery Process - Map Navigation
Merchant Profile

Upon arrival, they access the merchant profile. Based on the interviews, we also discovered one pain point which is directions or in busy places they can't find a specific store or kiosk so to make things easier we introduced a new tab in the profile for previous orders to check if they have past delivered orders or they're a new merchant. If they have past orders, they can contact the agent that delivered to them to ask for directions. This was actually suggested by them as they do this manually through WhatsApp before.

Delivery Process

Delivery Process - View/Edit Products

The first step in the delivery process is previewing the products and bundles included in the order first and reviewing them with the merchant.

Delivery Process - Confirm Changes

The second step in the delivery process is confirming the order after the edits if the merchant asked for edits on their order.

Delivery Process - Offload Checklist

The third step in the delivery process is unloading the products from the truck. We made a checklist in order to precisely unload the products.

Delivery Process - Receipt

The fourth step in the delivery process is collecting the order fees. In this screen they can preview the reciept for their order. The agent then have to use the "drag to collect" button to enter the cash collected.

Cash Collection

In this screen they can enter the cash collected from the merchant.

Cash Collection - Above or Under Amount

To make life easier for both the merchants and the agents we allow them (per a certain margin) to pay less or more than the order and it adds to their wallet in the app. So, if they paid more than the order they can use that balance in the next order, or in case they don't have enough cash they can pay the remaining in the next order as well.

Refuse Delivery

In case the merchant isn't available or refuses to recieve the order the agent is prompted to add a reason and a picture (in case available).

Product Card

Internal Dashboard

We completely revamped the internal dashboard, making it more user-friendly and intuitive. We added new functionality, such as inventory management, customer management, and order management and tracking, to make it more efficient for the 15 different departments that use it.

Top Menu and Side Menu Components

First off, we decided to tackle the general UX issues in the dashboard before diving in each feature. We tackled the navigation first thing as this affects more than 15 department that uses the dashboard for daily tasks and each department has different needs and tasks to do through the dashboard.

Card Sorting

We took one member of each team and made a card sorting exercise to group different pages and actions and sort them as they see fit, and we then made a couple of iterations till we reached an agreeable sorting and grouping for all the dashboard pages.

New Side Menu with quick action

We added a quick action button on top that changes based on the department and permissions.

New Side Menu with quick action
New Side Menu without quick action
New Tables
New Table without multi selection

Second biggest problem is the tables which is basically in most of the features in the dashboard and most screens.

New Table with Picture and Multi Selection
Table Guides
Partial Delivery

Order Management

Orders Management
Products Listing - Before and After Delivery
Order History
Bundle Card and Expanded View

Sellers Management

Seller Details
Seller View and Edit
Seller Inventory and Product View

Runsheets Management

Pending Runsheet View
Delivery Dispatcher tab and Runsheet View
Runsheet and Assign Agent View
Capiter Cover

Suppliers & Inventory Management

Supplier Details
Suppliers table and Suppliers Delivery Configuration
Edit Supplier

Conclusion

The new design system and improved UI and UX across the platform have led to an increase in engagement, a reduction in user frustration, and an overall positive association with using the platform. The new internal dashboard has improved the efficiency of the different departments, and the delivery agent app has made the job of the delivery agents easier. The wholesalers dashboard has also been well-received and has helped to increase revenue by expanding the user base and driving more sales.

Capiter Cover

Selected Works

buseetMobile Apps, Art Direction, UX Research, Design Systems

SakneenWeb Apps, Mobile Apps, Design Systems, UX Direction

SwivelWeb Apps, Mobile Apps, Branding, Art Direction

[WHAT CAN I DO FOR YOU]

With nearly a decade of experience,
I can help make your brand or products’ experience not just humane,
but also memorable.

[SELECTED WORKS]

2014-2023

Designing for humans since 2014
STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©STYDIO by SYD ©

[NEXT AVAILABLE IN MAY 2023]

Let's create
together

© 2023 Sayed Essam.
All rights reserved.

Designing for humans since 2014