.svg)
.png)
My contribution
We needed a design system with pre-built components and Figma integration for rapid development.
Material-UI (MUI) emerged as the optimal choice, offering a comprehensive ecosystem that enabled quick implementation while maintaining design consistency.
The design documentation outlined customizations, highlighting global changes in branding and UI elements like elevation and border radii. It featured extensive modifications to table headers and rows, showcasing original components alongside changes in color, typography, border radii, and elevation.
Our aim for the Information Architecture (IA) was to construct a clear, intuitive framework for our design.
Just at a high-level, this was the basic architecture of the MVP:
.png)
As mentioned we will be focusing on the order pages, so this the architecture for the orders.
This diagram reveals the amount of granularity under each vehicle in addition to it's status' both from a financial and conversion perspective.
.png)
We also had consider different levels of information that could be edited at each step of the conversion process. This was due to customers often not knowing which specific vehicles in the fleet they wanted to convert until much later.
Mapping it out helped us concretely design the flow and accomodate for the all the necessary edits that could be done
.png)
Our initial approach was to offer a high-level overview of orders, categorized by vehicle type, with status indicators at both the aggregate and individual vehicle levels.
However the conflict came with the way to display the specific vehicle information, as it really depended on the volume of orders that would be shown on this page. The difference between customer orders could be anywhere from 100 vehicles to 5.
We had two options:
The approach we would choose to take depended on the scale of users we were designing for.
Concept 1: Works for a large number of orders as it reduces information overload
.png)
Concept 2: Smaller number of orders. Allows all information to be centralized
.png)
We decided to go with focusing on a smaller number of orders.
There were a few number of business logic changes that were made in approaching the final screens.
The time constraints we faced meant prioritising certain development aspects over others.
However, due to removing the editable sections of the MVP, it became more of a consumption experience rather than an interactive one. This mean that the need for user testing was less crucial than getting the product out.
