Bento School Management System

Challenge

Designed a unified multi-tenant management ecosystem and instant payment flow across 6 specialized role portals for emerging markets.

Impact

SOS Express transitioned from a traditional delivery service into a tech-enabled logistics platform, ready to scale nationwide.

Delivered a fully responsive design system adaptable across mobile, tablet, and desktop.
Created scalable UI components for faster development and easier handoff.
Increased customer trust through transparent order tracking and payment clarity.
Empowered business owners with finance dashboards and courier performance metrics.

Role(s)

Product owner and designer, brand designer.

Contributions

High fidelity prototype, user research, documentation, site mapping, journey mapping, user testing.

Bento School Management System

Challenge

Designed a unified multi-tenant management ecosystem and instant payment flow across 6 specialized role portals for emerging markets.

Impact

SOS Express transitioned from a traditional delivery service into a tech-enabled logistics platform, ready to scale nationwide.

Delivered a fully responsive design system adaptable across mobile, tablet, and desktop.
Created scalable UI components for faster development and easier handoff.
Increased customer trust through transparent order tracking and payment clarity.
Empowered business owners with finance dashboards and courier performance metrics.

Role(s)

Product owner and designer, brand designer.

Contributions

High fidelity prototype, user research, documentation, site mapping, journey mapping, user testing.

Bento School Management System

Challenge

Designed a unified multi-tenant management ecosystem and instant payment flow across 6 specialized role portals for emerging markets.

Impact

SOS Express transitioned from a traditional delivery service into a tech-enabled logistics platform, ready to scale nationwide.

Delivered a fully responsive design system adaptable across mobile, tablet, and desktop.
Created scalable UI components for faster development and easier handoff.
Increased customer trust through transparent order tracking and payment clarity.
Empowered business owners with finance dashboards and courier performance metrics.

Role(s)

Product owner and designer, brand designer.

Contributions

High fidelity prototype, user research, documentation, site mapping, journey mapping, user testing.

View Design File

View Prototypes

Visit Website

The objective

End-user

Keep track of your package status with direct access to your designated courier rider.

1. Designed a responsive web application portal that users can use to get up-to-date push notifications about their package's delivery statuses. 2. Designed a user facing website wjere users can quickly check their packages delivery statuses by simply inputing the waybill number.

Courier

Communicate directly with the users while the delivery is ongoing for a more personalized delivery experience.

1. Created a web application for courier riders to scan packages, view the delivery location in-app and, set the delivery statuses for the packages which would also update the user in real-time. 2. Riders have temporary access to chat with the customer while the delivery is ongoing. 3. Riders delivering multiple packages get the most optimized route for the quickest delivery times using the Google maps API.

Courier

Communicate directly with the users while the delivery is ongoing for a more personalized delivery experience.

Business owner

Keep track of all courier package activities, address user feedback and, allocate deliveries manually if needed

The system automatically assigns packages to courier riders based on allocated locations however, the business owner can assign specific packages to any courier rider of their choosing. They can also moitor courier deliveries and get performance reviews on each employee's performance from delivery to scan rates and so on.

Research

Competitive analysis

After understanding my client's goal, I conducted competitive analysis by analyzing the competitions's strengths, weaknesses to help to identify competitor's strengths and weaknesses relative to the business. I also cross examined the competitor's product deliverables based on the most common features used by logistics companies that match the objective.

Tabling system functionality with user types in Notion

User flows

After identifying the user types I'd need to design for (customer, courier and, business owner), I then made a feature list for each user type (here, I got some assistance from using an AI assistant. This was also a result of the research conducted during the competitive analysis stage.

Design

Revisited the scope of the project to make sure the feature list was all set and have been signed off by the stakeholders came next. I then proceeded to select the foundations for the design using the information gathered.

Icon pack selection

For versitility, I went for the Lucide Icon pack which has a business like look but also curved hintds at its ends which would appeal to a wider range of viewers and would pair well with smooth animations that could be further implemented in the future.

Icon pack selection

Spacing and size scaling

For the sizing, I went for the 8 pixel grid as well as the component sizing. This is an industry standard and ensured that consistent sizing and spacing was maintained. This practice future proofs the entire design system when scaling in the future.

Navigation: The optimization challenge

The problem: Create an optimal, intuitive, non-repetitive navigation flow that fits all user types

The solution: Give the chats its own proprietary page while still making it accessible from the order details page. This allowed for an interconnective experience while messaging the courier without cluttering the order page with notifications. Navigation became simple and easy to understand as their were less choices to make regarding where to click.

The delivery challenge

End-user unavailable to collect package

After consulting with some dispatch riders from direct and indirect competitors I found that the common approach to this issue was: 1. The user asks the courier to drop the package at the original location unsupervised (Unsafe). 2. The user asks someone they know to collect the package ion their stead (better security). 3. The courier doers not deliver the package to the user on that day(Time and resources wasted, delivery time could be exceeded).

Solution: Remote sign off and chat

By adding a clickable sign off component in the order and chat pages, I was able to have the customers remotely sign their packages off for delivery. 1. With this feature, there is a record of the customer asking the courier to drop the package at a certain spot. Coupled with the geotagging information from the image taken upon delivery by the courier, there is solid evidence of proper delivery and communication between both parties. 2. Whoever receives the package in the customer's stead signs off on the package. Coupled with explicit instructions in the chat to have it handed to a third party, their signature also acts as evidence of no foul play. 3. In cases where the user is unavailabel, the destinated courier for that package at the time could always communicate with the customer to best schedule a delivery time that works best for all parties involved.

Order history dilemma

Decluttering the order page

The challenge here was making sure only the active deliveries and a set number of recently completed deliveries were accessible at first glance on the order page. I went through a couple variations such as using tabs so the users could control what they wanted to see, and having a clickable history button icon at the top of the screen so they could view all their orders.

The evolution of the order state component

The initial plan to use unique illustrations to represent various delivery states was scrapped due to lack of proper documentation of the illustration pack and representation of order states.

Testing the signature page

This page can be accessed by either the courier or the customer upon delivery.

The reason for the test was to make it easy for the signee to know exactly where to sign as soon as they saw the page.

Note to self: So far for the testing, the users seem to like the bordered demarcation of the first image and the coloration of the second. So I’m thinking to combine the best of both worlds to see if it works.

Final design for signing page

Digitizing the signing process for courier

Courier records keeping board for daily deliveries

The firs step was to revisit the site architecture schema and flows for the courier portal. Then I revisited some design inspiration I had saved, found new ones and started getting an idea of what I wanted the page to look like. We will still be using the same color scheme for the courier portal as the end user’s. I also went to SOS Express office and found a board showing how they kept track of the deliveries.

Digitizing the signing process for courier

Courier records keeping board for daily deliveries

Custom page transitions

Evolution of the order status component

Onboarding

First, I asked users what they wanted to accomplish with this application the most to understand what appealed to them. Here are a few iterations of the onboarding designs I made.

Optimizing the splash screen

Make a custom splash screen animation

To fulfil this objective, I consulted my client on what they wanted it to look like and had them make a moodboard for better visualization. For the animation, I used a sight called phase.com to create a gif animation exporting the logo from the Figma file.

This beat the initial idea of making multiple screens in Figma as it required more coomputation power and could not be exported

Responsive design

Process and findings

Revisiting the site maps helped with designing for larger screens as larger screens required a different navigation and flow which sometime included merginig two pages and components into one page.

Breakdown of the current company's system

The company operates as a distributor for SpeedAF, a llarge and well known international logistics company in Nigeria. 1. Delivery scan: Delivery scans are performed using a third-party logistics application called -----------. After scanning the package's barcode, speedaf receives the alert that the package they gave to SOS has been scanned and is inbound or has been scheduled for delivery. 2. Cash on delivery: This is the payment made to the company account or physical cash given to the rider for the delivery. Speedaf expects their cut of the payment after the package has been delivered. 3. Delivery list: This contains a list of all the packages to be delivered fr each batch. They get a physical copy as well as a digital copy. This detailed breakdown shows how each functionality creates a connected workflow across all user types, highlighting the interdependencies within the SOS Logistics system.

Findings from observing the courier rider's workflow

1. Couriers don't scan the packages on-delivery and usually do it after work. 2. Their names are not attached to the delivery table shown on the business owner's portal. 3. The portal is a third-party application and has terrible and unintuitive navigation not catering to the user's use cases.

Table listing in detail, major system functions and how it affects each user

Designing for the business owner

The main functions of the business owner's profile were monitoring transactions and courier behaviour, analyzing user data,assigning tasks and roles to employees and addressing user complaints and feedback. This required a dashboard and more pages compared to the other two user types.

Task visibility

The majority of the third party aplication interface being used by my client had a lot of readability issues with regards to text copy placement, text color pairing, iconography and app usability. To solve this, I designed an application that solves all these problems with proper text visibility and font color pairing, consistent and appropriate iconography, and clear and easy navigation.

Designing for the business owner

Task visibility

Assigning roles

One of the major functions of business owner's portal is role assignment. It has a CRUD (create, read, update, and delete) function regarding employee data. They also have access to the courier's chats in order to judge cases of improper behaviour between the end-users and the courier.

Finance management

All payments are made to the company account which is connected to the business owner's dashboard. Each payment has all the details of the transaction paired with the package, and courier details. With full access to the payments, they can also reverse transactions when needed.

The component ecosystem

From the base number variables, to the font sizing on multiple screens to the screens containing multiple components, every instance of every component is linked by a base number and/or color. All components are comprised of base number variables that are then grouped into semantic number variables. This alo applies to the base colors which are a select number of primary, secondary and supporting colors which are then semantically grouped into color variables.

Impact

SOS Express transitioned from a traditional delivery service into a tech-enabled logistics platform, ready to scale nationwide. 1. Delivered a fully responsive design system adaptable across mobile, tablet, and desktop. 2. Created scalable UI components for faster development and easier handoff. 3. Increased customer trust through transparent order tracking and payment clarity. 4. Empowered business owners with finance dashboards and courier performance metrics.

Learnings

Side note: This project further strengthened my approach to balancing business goals with user needs.

Click to view product design work

Branding

The challenge

The main challenge here was creating a true to self and atractive brand identity that conveyed the company's values and attracted customers and a superb user experience to retain them. Key objectives: 1. Create a brand identity for expansive use across various media. 2. Create a client facing website to drive engagement and retention. 3. Create a website portal for multiple users so customers can get reall-time updates regarding their packages delivery statuses.

Brand foundation

1. Brand mission - To delivery premium logistic services 2. Vision - Global logistics services. 3. Values - Fast delivery and great customer service. 4. Purpose - To delivery fast and premium delivery services to our customers.

Mood boarding

After a few meetings with the founder to understand their company values, I then worked with the founder to create a moodboard to better visualise what they had in mind for their company.

Brand positioning

The most suitable age demographic for the brand range from aages 25 - 45 as they fit into a group of tech intuitive users who have the resources and need for the brand's services. Direct competitors range from small to medium level logistics companies in Abuja, Ilorin and Lagos in Nigeria with the company holding a competitive advantage of over 5 years of experience in logistics and plus in-house software for a thightly knit experience unlike other competitors who rely on third-party software that barely works for them.

Word map

Here are the key words that were derived from one-on-one chats with the founder of the company: Fast, Easy to use, Good customer service, simple yet sophisticated.

Typography

For typography, the DM Sans font family was perfect. The circular cuts paired with the flat, sharp edges and the x-height (text head) sitting on the line made it a great pairing further highlighting the simplistic sophistication of the brand. An important factor for the choice also included it being free to use and ease of access on Google Fonts. It also works well in Google Slides and Docs, a practical request from the team.