OrdersHub: An aggregator app
How I designed an app to make order management easier and more efficient
Type
Case Study
Role
Product Design, UX/UI Design
Date
March 2023
Context
OrdersHub is a fictional project, designed to address a common issue faced by users who rely on multiple delivery platforms: managing orders efficiently. With orders coming from various sources, users struggled to keep track of them in a single, unified interface. The goal was to create an aggregator app that would simplify order management and make the process more seamless for users.
The landing page of the app. The user can easily add his orders by adding the order number as provided by the eshop.
Approach
Before I start working on the designs, I had to understand the user’s needs. Since this is a fictional task and research methods such as interviews or surveys couldn’t take place, I did a competitor analysis in order to get some more insights from websites and applications that provide tracking and manage functionalities.
I conducted a competitor analysis on Amazon, DHL, AfterShip Package Tracker and 17Track. I also got inspired on the tracking and managing order functionalities.
Additionally, I came in contact with people who are using marketplace applications such as Amazon on a daily or weekly basis, so I get their point of view on the obstacles they are facing from browsing to the checkout and from buying to tracking multiple orders through various vendors.
Process
User flows
I set 7 objectives and explored 4 of them. These flows helped me understand the number of steps and interactions that are needed, as well as the obstacles the users might face before they reach their goals . After a couple of iterations, some of the steps got simplified, while some others got totally omitted.
The user flows and some of the scenarios I explored.
The user flows and some of the scenarios I explored.
Wireframing
With the user flows in mind, I transitioned to the wireframing phase. Using Figma and some rough components, I created some low-fidelity wireframes that outline the app’s layout and structure. These sketches served as the blueprint, indicating where various elements will be placed, from buttons and menus to content sections.
Some of the initial wireframes.
Some of the initial wireframes.
Establishing a design system
Before diving deeper into the design phase and prototyping, I created a design system to help me establish consistency. I dedicated time to create a design system that includes color and numerical values (using Figma variables), iconography, typography (using Figma styles) and various UI components.
Having built this design system, the design work proceeded much faster, ensuring a cohesive and visually harmonious experience across all screens and interactions.
A screenshot from the design system I started creating for this project, using Figma variables.
Outcome
The OrdersHub app was designed to consolidate orders into one cohesive platform, reducing the need to juggle multiple apps. This solution made it easier for users to manage their deliveries, improving their overall experience by providing a more organized and accessible way to handle orders.
Feel free to experiment with the slider below and take a look at wireframes and final designs.
Interactive prototype
Please find below a prototype of the final designs and experiment with them yourself. It is strongly suggested that you use the fullscreen option at the top right corner of the Figma snippet.
Thank you!
Get in touch!
If you are interested in learning more about the process and/or the designs, please feel free to reach out to me through my LinkedIn profile.
