Introduced multiple order statuses to streamline order management and refined the order details card for a more intuitive UX.
Project Goal
Reimagine the merchant’s orders screen to support multiple order statues and increasing the overall space optimized layout space to improve visibility and display more orders at once.
TEAM
SVP
1 Product Manager
2 Engineer
1 Designer (ME)
MY ROLE
Conceptualizations of the ideas, approaches.
Designing high-fidelity designs.
Dev Handoff & Collaboration with Engineers.
Presentations, Demos.
Duration
2 Months
And a lot of Iteration, Collaboration, and Care.
Results across Business, Users, and Application UX
Merchant partners and their staff are the primary users of the current experience, relying on it daily to manage and fulfill orders
Designing for a platform with multiple interconnected applications is challenging—but working on new features at IQM has taught me to think deeply about their end-to-end impact across the entire ecosystem.
Non-Design lessons learned while designing interfaces
Faster Order Management → Improved visibility of more orders on a single screen reduced the need for scrolling or navigating, enabling merchants to act faster and process orders more efficiently.
Reduced Operational Errors → Clear differentiation between multiple order statuses helped merchants avoid confusion, lowering the chances of missed, delayed, or mishandled orders.
Higher Order Throughput → By streamlining the screen layout and surfacing more orders at once, merchants could manage and fulfill a greater number of orders in less time, boosting platform transaction volume.
Multiple tabs → Introduced multiple tabs at the header to give users the filtered view which made it easy for them to manage the new orders and focus on the existing orders with different statuses like ready to dispatch, preparing etc etc.
Updated UI Structure → Reorganized mini-features such as past transactions, chat, call, and shop status for better accessibility and a more intuitive user flow.
Order card refinement → Redesigned the order detail card to enhance usability and readability, enabling quicker understanding of key order information at a glance
Some good words
My mentor exceeded my expectations with amazing communication and motivation. Their subject knowledge truly helped me grow. I highly recommend booking with them for an insightful experience
Current UX problems
Improved the UX through 3 Stories
Reimagine the merchant’s orders screen to support multiple order statues and increasing the overall space optimized layout space to improve visibility and display more orders at once.
Story 1: Do we really need page header?
3 mins read
What does this page header do?
This header gives the merchant a quick way to see how there store looks like on the Magicpin consumer app.
Also, there is a quick link to share the store link with the users by copying the link OR sharing it on the Whatsapp quickly so that people don’t have to search in Magicpin
consumer app rather they can directly find this store and order quickly.
This is the sub-header which gives the status of the store i.e whether it is open or closed and also, an switch option to update the status.
Quick switch to open and close was given to quickly change the shop status incase of any temporary reasons else it will impact the upcoming orders.
Along with the Outlet Status, it shows the closing timing of the store as a quick reference.
My questions
What does it add as value by placing it above the orders screen where a lot of order management happen?
How often do they share this information throughout the day, week, or month?
How often do they view the store as the customer?
Answers, possible scenarios
When the people comes to the app store for the first time in a day, they click on the link ‘View my store as customer’ So, this was important to have as the first thing in the app.
Merchant had to tap on the Switch to change the status of the outlet but being a small and placed in the center, the interaction was not smooth.
When it comes to sharing the link with people manually, rarely merchant used do this. This used to happen with family members, or friends circle. And these people already had the links or there order history.
Since orders screen is an important screen of the whole merchant app, we found that this header was taking a lot of header space (almost 25%) and giving only 60% for the screens (15% was going to the bottom navigation).
Ideation Phase
Idea 1
Remove the ‘Business website card’ from the top.
→ So, our first decision was to remove the ‘Business Website’ section from the top of the screen since the need of it was very rare and it was occupying the lot of header space
Thoughts
We got extra space for showing the food orders.
But removal is not a good option every time and the the store name at the top should be visible since we have the orders below in the screen and it is important to know which store is it.
Idea 2
Introducing the store name, address
→ So we explored multiple approaches for the header with the store name, location, closing time and switching the shop status
→ So we explored multiple approaches for the header with the store name, location, closing time and switching the shop status
Thoughts
The UI of the card is simplified with a reduction of the height.
The visibility of the store name and address builds a relationship with the store and list of orders below.
Question: Can we rethink the outlet status and closing time?
So we explored multiple approaches for the header with the store name, location,
closing time and switching the shop status the store name, address
We refined the above approaches and reached to 2 final ideas
but had a dilemma...
Should we keep shop status as: Open/closed OR Online/Offline?
Same language used in the non-digital world for the shop statuses. More relatable.
If we go with this, no change in the user behaviour.
Not matching the language of statuses used in social world like online and offline.
VS
Change in the language, new learning for the users.
Matching with the language of the digital world i.e online and offline.
Scalable for the future items like food statues, other stores.
This decision was hard to make since it involved a different path and a new learning for the customers,
but after having the discussion with the store owners and internal stakeholders, we went ahead with the
Online/Offline status copy and the keep it uppercase for more readability and prominence
Final Header Design
Story 2: How about order statuses UX?
8 mins read
What does this page header do?
Since this screen focus on the orders, it has 2 tabs to view the ‘Live Orders’ and ‘Past Orders’.
Live order includes new orders, preparing order, ready to dispatch and delivered orders
My questions
Why do we need Past Transactions along with the ‘Live Orders’? Once the orders is completed, I don’t need to focus on those orders.
Why don’t we have the counts on the ‘Live Orders’ to get a quick glance over how many orders I am processing at this time? It can help me manage the time and resources well at a give time
Why did we have the single view of the ‘Live order’ for all the orders with different stages?
Insights
Merchants used to go to the Past Transactions at the end of the day when the store is closed to check how the business did and the numbers of orders delivery successfuly or cancelled.
The orders volume was less during the initial stages of the company and merchants were new to the platform, the simple approach of showing all the order under 1 tab ‘Live Orders’ was taken but as of now the order volume have increased significantly.
Thoughts
We thought of removing the the ‘Past Transactions’ from the upfront view and keep it under some icon or secondary level.
We thought of introducing the different order statuses for the users to manage orders based on the statuses like New order, Preparing orders, Ready to deliver etc.
Can we improve the interaction of the changing the outlet status from Online to Offline and vice versa.
What are the possible food order statuses?
Before thinking of the visuals of the statues, We wanted to understand the type of statues that could be possible with different types of orders, For example, Pickup or Self-Delivery or Magicpin delivery.
Currently, based on the order card, we had 3 statuses
Accepted
Out for delivery
Delivered
Also, since the merchants used to manage 2 types of the order, we also had to think of how we can streamline the statuses for all the types.
Below is a table of the type of orders and possible actions/statuses.
PICKUP
To Accept
Ready to pickup
Delivered
SELF DELIVERY
To Accept
Ready to Dispatch
Dispatched
Delivered at
Idea 1
Based on the above statuses, we tried different combination like,
Combining the current Live status with other possible actions
Separated out the actions for Pickup and Delivery orders
insights
But when we compared to the ideal workflow of the order, these were not working well.
We realized that to manage the order successfully and efficiently, the statuses should reflect and match the ideal workflow so that Merchants
find it easy to manage orders.
ACTUAL ORDER STAGES,
Order Received → Accepted → Starts Preparing → Ready to deliver → Out for delivery → Delivered
RESULT
Proposed solution
We had a team discussion where we brainstormed on multiple names, the order of the statues and how can differentiate the Live status OR so called a space to view all the orders and orders with different statuse
RISK factor: We changed the ‘Live’ → ‘All’ order
But we believed the placing the ‘All’ with other status may simplify the meaning of the ‘All’ and in long term, it will become easy for the user to understand.
FINAL DESIGNS
Thoughts
The new order status line up looks good and clear for our users.
Still the user is unaware of the counts of the order under each status.
Can we think of some new visual ideas
Visual Exploration
Though I had some of my own, but wanted to check if there were any good ideas
available on the internet
But we believed the placing the ‘All’ with other status may simplify the meaning of the ‘All’ and in long term,
it will become easy for the user to understand.
Approach 1
Approach 2
Approach 3
Can you guess which approach our team picked?
Approach 3
Among the above approaches, the team liked the Approach 3 and wanted to do
more refinement among these.
Refined Approaches
Rejected
→ Numbers are easy visible.
Accepted
→ Numbers are easy visible.
Accepted
→ Numbers are easy visible.
At this point....we had 2 thoughts
About Readability,
So if we read the status and count against a simple question, How many new orders are there? Merchants’
answer will be 8 new orders. So, if we match this answer with both the approaches then simply the second approach fits
perfectly with the verbal answer.
Importance of Count,
We wanted to see whether we want to keep the count first or last, everyone in the team decided
to go with the showing the first since that number is the key for the merchants since counts gives them a clear idea about each stage of the order. So
final thoughts
But we believed the placing the ‘All’ with other status may simplify the meaning of the ‘All’ and in long term, it will become easy for the user to understand.
Final Design
Story 3: Order Card + Listing
8 mins read
What does this page header do?
This header gives the merchant a quick way to see how there store looks like on the Magicpin consumer app.
Also, there is a quick link to share the store link with the users by copying the link OR sharing it on the Whatsapp quickly so that people don’t have to search in Magicpin
consumer app rather they can directly find this store and order quickly.
This is the sub-header which gives the status of the store i.e whether it is open or closed and also, an switch option to update the status.
Quick switch to open and close was given to quickly change the shop status incase of any temporary reasons else it will impact the upcoming orders.
Along with the Outlet Status, it shows the closing timing of the store as a quick reference.
My questions
What does it add as value by placing it above the orders screen where a lot of order management happen?
How often do they share this information throughout the day, week, or month?
How often do they view the store as the customer?
Answers, possible scenarios
When the people comes to the app store for the first time in a day, they click on the link ‘View my store as customer’ So, this was important to have as the first thing in the app.
Merchant had to tap on the Switch to change the status of the outlet but being a small and placed in the center, the interaction was not smooth.
When it comes to sharing the link with people manually, rarely merchant used do this. This used to happen with family members, or friends circle. And these people already had the links or there order history.
Since orders screen is an important screen of the whole merchant app, we found that this header was taking a lot of header space (almost 25%) and giving only 60% for the screens (15% was going to the bottom navigation).
Credits to GOOD DESIGN
First of all, I would like to say thanks for good design of the order card, I really like the timer band, delivery boy and chat icon designs.
Let’s understand what do we have in the card
Idea 1: Optimise the visual load of the ui elements
Reduce the visual load of the buttons, icons by making the fill color a bit light.
Made phone and chat icon consistent.
Improved the contrast of the out of devliery and delivered text as there were quite low on contrast.
THOUGHTS
The card was looking visually light and consistent, but still the order of the things were not looking balanced. For example,
Order tracking bar has ‘Accepted’ above the line and ‘Out for Delivery’ and ‘Delivered’ below the line, increasing the height.
The delivery person → Placing it the top left was wasting out horizontal and vertical height and we were not sure of the requirement of it. Visually it is good, but the purpose and value addition was missing.
The timer is an important detail, and the priority of its was getting hidden because of its placement in the middle of the top information and order tracking bar.
If we look closely, then the ‘Chat with the customer for any concerns’ and ‘View Order’ was taking the highest priority which was against the order interaction requirement. Even though, complete chat won’t be possible in the card itself.
What is the more important, Delivery Order ID or Customer Name?
Why we have ‘Magicpin’ tag when all the orders will be of the Magicpin only?
Based on our above statuses, the tracking bar will be updated as well. It will have have 2 statuses as well ‘Preparing’ & ‘Ready to Dispatch’.
Priority check
Since every visual component has textual information so It is always important to do the priority check with the information required. It gives a good clarity to decide which one to highlight, keep bold or hide from the UI.
“If everything is important, nothing is important”
So, based on the above questions and considering a lot of information, we did priority check with the PM and other stakeholders. And we found the below results
Primary
Order ID
Order Type
Timer
Tracking bar
View Order CTA
Secondary
Customer Name
Chat Icon + Chat message
Phone Icon
Order Time
Payment details
Tertiary
Excluded
Delivery person Icon
Notification once the order is packed
Redesigned below components to optimise the order card
Use of 'Magicpin' tab
Issues
Since all the orders will be of magicpin type, we didn’t find any value providing the magicpin tag instead we can show the order types, i.e Delivery type OR Pickup type.
Reason for the colors, Delivery was the most important one hence used the magicpin theme color only and pickup orders were were less so used the warning color to identify it among the pink and magicipin theme color
Suggestions
Redesign of the order tracking bar
Order Tracking bar →
Based on the above new status filters, we decided to update the tracking bar to match the status tabs at the top. Also, we kept the textual information in the same line to reduce the overall height.
In the previous bar pattern, once the status was updated, then only the progress line becomes green (or filled) but in the new bar, we tried to filling the progress line as per the timer for the next status so that it is clearly visible how much time is left visually.
CURRENT DESIGN
NEW DESIGN
Kept the text in the same place for both the completed and pending to maintain consistency and reduce height.
Introduced the a small check to show the current status is completed.
The contrast of the pending statuses was quite low which was harder to read, so increased the contrast a bit more to make it visible.
Timer color contrast
Issues
If we look at the overall colors in the order card, then we had 3 colors → Icon and CTA Pink Color, 2 Tag colors, and tracking bar green color and with these timer, we will have 3 more colors. So, overall we have almost 6 colors which we thought was a lot to deal with on a daily basis for the merchant. So, we have to reduce the colors.
In our timer, we have use the Hue colors for the timer circular loader and text i.e Accept within, Delivery within, at the same time, we use saturated colors to fill the background of the text to make it look like a complete pattern.
Suggestions,
To reduce the overall color combinations and contrast, we thought of keeping the textual part neutral with keeping the timer part as it so that we retain the current experience.
Since the hue of the loader was strong, we thought it will be enough for the merchant to identify the statuses and pending time.
Also, since we have the new statues at the top, we believed this will go well.
Context based CTAs
Since we had multiple status tabs, and based on the order status, the actions to move orders from 1 tab to another can be different for example,
Visual Explorations
Approach 1
Approach 2
Approach 3
Still room for improvement..
The above approaches were good but the team was not satisfied since there was a lot of information in the cards, actions, the different patterns. Next, we thought of really focusing on whether we can remove information or rearrange again better based on the priorities, and merchant needs.
Final Design
Phewww! It was a long story but i learned how to work in a fast paced startup
Magicpin was my second product company which was at the growth phase focused on product-driven and a small in size, focused on the faster design deliveries, I learnt a lot about how startups work on a daily basis, and how the design deliveries are the key for the product releases.
Since the design team was small, and I was the only designer assigned on the Merchant app, I had to take a lot of ownership's in moving the designs to productions, constantly solving the Developers doubts, and at the same time, figuring out the design files since there was no KT available for the previous designs.
Decision Making
Can’t say this was the complete B2C app, but the consumers of this app are also connected with the other consumer apps so Merchants are actually running the business but their personality also includes the normal consumer as well, so I had to think of the B2B solutions but keeping the experience of the B2C.
My rewards
Mutual conversation between me and the persion who hired me
Appreciation from the PM
