Iconography.
Iconography.
Iconography.
Custom set of icons for the Order Logs, where each icon visually represents a different stage in the order status history.
Custom set of icons for the Order Logs, where each icon visually represents a different stage in the order status history.
The Challenge:
The Challenge:
Create a clear, cohesive set of icons that effectively communicated the various stages of an order’s status. The icons needed to be easily recognizable, ensuring users could quickly interpret the order history without confusion. Additionally, the icons should maintain consistency with the overall design language.
Create a clear, cohesive set of icons that effectively communicated the various stages of an order’s status. The icons needed to be easily recognizable, ensuring users could quickly interpret the order history without confusion. Additionally, the icons should maintain consistency with the overall design language.
Old Icons
Old Icons
The previous icons were too thin compared to the bold Poppins font in the dashboard and lacked uniformity.
The previous icons were too thin compared to the bold Poppins font in the dashboard and lacked uniformity.
New Icons
New Icons
The new icons align with the brand language and follow keyline grids, ensuring consistent and cohesive design.
The new icons align with the brand language and follow keyline grids, ensuring consistent and cohesive design.
Construction
Construction
Inspiration from the logo.
Inspiration from the logo.
Square- 18x18 px
Circle- 20x20 px
Rectangle- 16x20 px
Dimensions
Dimensions
I used a keyline grid to ensure the icons maintain consistent dimensions and visual balance.
I used a keyline grid to ensure the icons maintain consistent dimensions and visual balance.
Rectangle- 16x20 px
Square- 18x18 px
Circle- 20x20 px
Line Work and Color
Line Work and Color
Stroke width: 1.5px
Radius: 0.5
Color: #222222
Stroke width: 1.5px
Radius: 0.5
Color: #222222
Icon Categorisation
Icon Categorisation
There are several order statuses tied to similar actions, like shipment creation, shipped, and shipment canceled. To simplify things for users, I categorised the icons based on these actions, making it easier to quickly understand the status of an order at a glance.
There are several order statuses tied to similar actions, like shipment creation, shipped, and shipment canceled. To simplify things for users, I categorised the icons based on these actions, making it easier to quickly understand the status of an order at a glance.
Order
Order
Hub
Hub
Picking
Picking
Packing
Packing
Shipment
Shipment
Delivery
Delivery
Return
Return
