Designing an Intuitive Orders Module Experience
I’ve designed an orders Module user experience for The Yarn Bazaar, focusing on user-friendly functionality.
The Yarn Bazaar is a Managed (full stack) Vertical B2B Marketplace solving the problem of broken supply chain & working capital constraints in textiles.
Timeline - 2 Days
What I did - Research, Ideation, Visual Design, Iterations and Prototyping.
Problem Statement
The Yarn Bazaar intends to launch a mobile application that will be used primarily by buyers on the platform for their yarn-related needs. The primary focus of the initial version of the application will be Orders module, which will include both TYB and non-TYB orders.
- TYB orders: These are yarn purchases made by the buyer through the TYB platform. The user should be able to see the Mill name, Supplier name, Quality (e.g. 60 CWC), Quantity (in kgs), Price (in INR), and Payment Due Date for all open and historic orders. For all orders, the user should also be able to track orders and see the order status (Order Confirmed, Ready to dispatch, In transit, Delivered)
- Non-TYB orders: These are yarn purchases made by the buyer outside of the TYB platform. The user will be able to upload a picture of the invoice, which the system will process in the backend using ICR, giving them a unified view of all their yarn purchases.
After carefully reviewing the problem statement, I began jotting down the key data points.
The Research part
I started with my research to understand the root cause of the problem.
- Secondary Research
- Due to time constraints, I couldn’t identify the target audience for my research.
- Despite conducting online secondary research, I couldn’t find any competitive Apps for this purpose.
I didn’t stop there, instead, I began ideating on my own, making assumptions about how this solution might work for the users and benefit them greatly.
- I drew inspiration from some apps in the indirect competitive landscape to understand how orders are managed, aiming to maintain industry standards.
2. User Stories
Here, I’ve crafted a user story by assuming the user’s perspective.
- “Want” is when a user desires to do something but is unable to (unlike their current behavior).
- “Why” is the reason behind the users why they want to do that.
The Ideation Part
- Collecting Data Points
- Based on the assumptions and judgments I made, I’ve formulated data points outlining how the app operates for this platform.
#1 Data Points for the Home Screen
#2 Data Points for the TYB Orders Screen
TYB Orders - The Yarn Bazaar orders.
#3 Data Points for the Non - TYB Orders Screen
These are some of the data points that helps me to Design the user experience for the Orders module.
2. User Flow
- Based on the collected data points, I’ve created a user flow for the Orders module to guide users.
Based on the user flow focusing on the orders module, I assumed that onboarding and profile flows were already in place, as there was no data or requirement.
3. Making some Assumptions
I made certain assumptions before the Designing process.
4. Constraints
I had to keep constraints in mind while designing the screen.
Reason:
5. Metrics
So, I’ve followed certain metrics for the user and the business, which could have an impact.
With the help of this UX method, I began Designing my screens to fulfill user and business needs efficiently.
And finally, The Visuals!!!
Excited? Let’s break down the UI that contribute to the user experience, with explanations for why I made this Design Decisions
1. Home Screen
I made a decision to modify the terminology from “TYB Order” and “Non-TYB orders” to “Internal (TYB Orders)” and “External (Non-TYB Orders)”
Reason behind this: As a user having some internal terms might not be helpful at some time, so having these generic terms might not confuse the users.
2. Orders Screen (Internal)
3. Order Screen (External)
These reasons drove the visual design of the user experience.
Let me share you some of the Decisions I made while creating some elements.
5. Brand Identity
Why did I choose this Brand color and this type face?
I chose this brand color and typeface because they align with the brand’s identity and convey the desired tone and message effectively.
5. Responsive Checks
Considering responsiveness is crucial as a designer, ensuring that the design adapts seamlessly to various screen sizes and orientations for optimal user experience.
Some of my Iterations
These iterations were instrumental in refining the screen to meet the exact needs of the users.
Prototype
Design System
- Indeed, having a design system in place is essential as it streamlines future design processes, reducing time spent on reiterations and edits if needed.
- This also aids developers by providing them with text styles and color tokens to implement in the user interface development process.
Color System and Tokens
Typography
I followed Human Interface Guidelines for Typography, incorporating recommended practices for font usage. This ensures readability, consistency, and an intuitive user experience across the interface.
And that’s a Warp!
I want to express my gratitude to Subunu, Product Manager at The Yarn Bazaar, for providing me with this opportunity. It has inspired me to think critically and complete a case study within the given timeframe and I hope for the best!
Thank you!
