top of page
interaction design - ditosell landing page - web ui animation - build menu.gif

Project Overview

The product:

“We see these kinds of messages every day and we answered the call”

Ditosell is a mobile application designed to solve delivery service problems individuals and organizations face when trying to send an item.

Project duration:

April 2022 to June 2022

need and splash ditosell screen.png

​​The problem:

Every day in Nigeria people of different ages, tribes, classes, and backgrounds send items from their family, friends, loved ones, customers, and for business. While a person can easily reach a dispatch rider today, he/she isn't guaranteed that the same dispatch rider will be available tomorrow or the next time to handle the delivery. The endless search for a dispatch rider begins.

​

While people have resorted to announcing on their social networks such as WhatsApp status, Twitter timeline, Facebook posts,s, etc their urgent need for a dispatch rider in order to send their package(s) which has so many disadvantages and cannot be guaranteed. Check the image slider below to see screenshots of Twitter users I personally gathered to buttress the urgent need for a longtime and reliable solution to this pressing need (I filtered the search results for Lagos, Nigeria between January 2022 to April 2022 only).

Solution

I led the design team to design an innovative experience that will help these people who regularly send items to connect to the next available dispatch rider as quickly as possible to deliver their package(s).

 

Apart from helping these users to easily connect to a dispatch rider, the Ditosell app is designed to ensure there is transparency, a secured delivery service, and efficient tracking of the parcel. After a delivery service has been completed, the user can review and rate the rider and the delivery service on the app.

​

This product is a collaborative effort between me, other design team members, UX Researcher, Brand Designers, UX Writer, Product Manager, and Developers.

Image (3).png

My role:
UX/UI Designer, UX Strategist

Responsibilities:
Direct the design process, Facilitate design reviews, Design, and Ship to Engineers

Deliverables:

  • User Flow

  • Wireframes

  • Style Guide

  • Mockups

  • Interactive Prototype

  • Ship for development.

Tools Used (Design and Collaboration):

  • Figma

  • Anima

  • Jira

  • Slack

  • Telegram

  • Google Doc

The Design Process

User flow

I and the other designers came up with different ideas and sketches for the user flow for the experience for both the user and the dispatch rider. After rounds of reviews and feedback from other stakeholders, we agreed on a simple user flow for the users of the Ditosell app which also aligns with the business objectives.

Ditosell proposed user flow.png
Wireframes

To ensure the design team is all on the same page with the design flow, I ensured the team members all agreed to do the wireframes in the same Figma workspace with basic shapes, text, and lines for the layouts. I assigned wireframe tasks to the five design team members (including myself) and I facilitated another round of design critique where each member worked us through the idea behind the design layouts of the Ditosell app.

 

After reviews and feedback were given, adjustments were made to the wireframes which align with the basic features intended for the app. We came up with simple wireframes or low-fidelity prototypes that are easy to understand by the users of the app.

ditosell wireframes mockup presenation port.png
Wireframes flow

I arranged the wireframes in the right flow and this helped me to better understand the prototype and collapse some screens into popups.

Ditosell wireframe flow.png
Design Guide

I set up the main requirements for a design style guide for the Ditosell app. This comprises Typography, colors, Input fields, Buttons, and Shadows in order to ensure the design team work on predetermined design standard for consistency.

colors.png
Typography.png
buttons.png
Input fields.png
shadows.png
The Mockups
Splash and onboarding screens

The onboarding screens were designed with a simple swipe gesture and a process bar to carry the users along. Pictures with images of black people were used which helped to foster inclusivity from the target audience, Nigerians. The UX writings help communicate the benefits of using the Ditosell app.

ditosell splash and onboarding screens (1).png
Signup and Login Screens

The signup and login process was designed for the Ditosell app was design to give users an easy experience when getting into the app. We also set up a one-time OTP for some level of security measure for users of the app. Finally, we designed Fingerprint authentication the simplest yet secure form of login feature to give users an awesome entry experience into the app.

ditosell login and signup screens - mockup presentation.png
Home & Request Dispatch Rider Screens

The home screen of the Ditosell app was designed with a sense of the user's quick actions in mind. These include a large map at the top for users to easily track an order in process, an Input field below it to enter the order tracking code and the other important tasks a user will want to perform without distraction (request a rider, view recent activity). The steps for a user to request a dispatch rider on the Ditosell app are streamlined into two screens in order to give the user a smooth ordering experience.

home and request dispatch rider screens mockup presentation.png
Picking confirmation and tracking screens

What else could be important to a person after they have connected to a dispatch rider to deliver an item?

  • A number is assigned to the package by the Ditosell app for documentation purposes

  • The user can confirm package pickup after the rider has picked up the package

  • The user can track the location of the package in the app

  • The user can contact the rider with either the In-call or chat feature in the Ditosell app

  • The is expected to confirm delivery of the package when delivered

  • The user can rate the delivery

ditsosell package pickup and tracking mockup presentation (1).png
Other Screens

Other screens on the Ditosell app include profile, dispatch rider's profile, call, chat interface, and password resent screen which were all designed to give the user a complete app experience.

ditosell other screens mockup presentation (1).png

Target Audience

The target users for the Ditosell logistic app are not limited to desperate users who urgently are in need of a dispatch rider. The list of the target market for the Ditosell app is endless as it cuts across different ages and classes. Check the list below

SMEs / MSMEs

  • Business Owners

  • Online Vendors

  • Entrepreneurs

Private Individuals

  • The different ages and classes of citizens who want to send or receive a package from family, friends, and loved ones.

Fleet Owners

  • These categories fall into the riders app. They include individuals and organizations that own and run logistics services.

Ditosell responsive website product design

My task wasn't done with leading the design team to successfully deliver the Ditosell logistic app, I also designed a responsive website for the product. The website helps to convey information about the Ditosell app, its features, benefits, how it works, form fields for users to subscribe to the newsletter, join the waitlist for the product, and where to download the product.

Ditosell product website design for desktop

I used some of the images from the onboarding screens of the Ditosell app for consistency, with a page title, tagline, and a clear call to action button (Join waitlist) beside. All these convey the message of the product Ditosell app and prompt visitors to take immediate action.

ditosell product web mockup presentation.png
Ditosell product website design for mobile

I designed the mobile view in such a way that the layout is similar to the desktop screen

ditosell product resp web mockup presentation.png

What I learned from the Ditosell project

It was a privilege for me to lead the design team to successfully deliver this project in the shortest possible time, I learned so many things, and please remind me if I don't drop a blog post about the best practices for remote collaboration. Anyways, below are some of my takeaways from the project.

​

  1. The world is still learning and adjusting to the remote work style, first time I learned and immediately implemented was to ensure all decisions made are available to every member of the team. I took recordings of design critiques with the team members and stakeholders and kept them where anyone could quickly review them.

  2. Keep an updated post of the design decisions made on the communication channels so there is no confusion on the direction of work.

  3. The importance of having stakeholders in the industry, business owners, and other stakeholders available for design critique sessions helped the team immediately validate some proposed features which moved the delivery of the project faster.

  4. Feedback on design has only one purpose, "helping to deliver a better product experience." The importance of not losing sight of this on any end of the feedback may be.

Thanks for your time

I am available to contribute and grow as a designer - in a collaborative environment.

Henry Adeyemi

Product Designer
UX/UI Designer

bottom of page