IDANS Web App
IDANS Design is an apparel printing company based in Kangar, Perlis.
Previously, they use manual operations for their printing process, which results in lost documentations, messy handoffs and staffs went off-track.
I was tasked to ideate and design the wireframe + flow for the new web app.
UI/UX Designer
Ideation, Research, Wireframe
Figma
Design and build a project management web app
Existing project management tools such as Notion or Monday wouldn’t fit to IDANS use case.
My team and I were tasked to design & build an internal project management app that are custom-tailored for apparel printing workflow.
Project Deliverables
Here are the deliverables for the project:
- Design user flow
- Research on design patterns
- Design wireframe & components to be used from TailwindUI
- Constantly improving the UX after delivering the project.
Team Members
Izzad
Project Lead
Iman
Product Designer
Amirul
Full-Stack Developer
DESIGN PROBLEM
How might we enable fast handoffs and help IDAN's staffs be on-track in the apparel printing pipeline?
Understanding IDANS' operation pain points
To pinpoin the exact factors, our team discussed the business requirements with IDANS on Google Meet.
From the meeting, we’ve discovered their pain points and what a successful project would mean to them.
Pain Points
Here are the pain points faced by IDANS:
- Physical Invoice & Printing Notes are often lost and not documented
- Staff lose track of of their tasks progress when they are printing shirts in bulk (or during peak season)
- No integration between departments, namely production and sales team.
Constraints & Trade-Offs
The timeline to design and develop this project is set to 3 months. Instead of designing from scratch, we made the decision to base our frontend UI on TailwindUI.
Our developer used Laravel, VueJS and Tailwind for this project.
Early concepts & wireframes are still being done in Figma.
After brainstorming with the team, we have identified features that would make the biggest impact with the least amount of effort.
We trimmed down features that are not impactful, and postpone the shipment of certain features after the first version of the project is delivered.
IDEATION
Mapping out the
System Flow & User Flow
Our team went through the brainstorming session and we mapped out the high level system flow, as well as the user flows.
High-level systems flow
Design Order Form Flow
Design Task Flow
Design Task Flow
Low-Fidelity Sketches + Wireframes
In the early stages of the design, I started with rough sketches on paper to experiment with layouts, later digitizing in it Figma as wireframes
Lo-fi sketches during the early phase of the project
FINAL OUTCOME
End Product - IDANS
The first version of iteration was shipped within the allocated timeline. Here’s a Loom demo for the order creation flow.
With the help of Tailwind UI, our team can ship the high-fidelity front-end UI faster, and focus more on the complex business flow.
Order Creation Demo
Web App Showcase
Task List Page
Order Details Page
Size Charts Template Page
Order Details Document with QR Code
Next Steps
After 2 weeks of successful deployment and widely adopted by the staffs, we’ve noticed that IDANS web app’s performance starts to become sluggish.
The login page got slow and important pages suffered the same issue.
We implemented plans to improve this, namely improving caching in Laravel & upgrading the VPS server (as starters).
After implementing core features, we plan to ship visual tweaks, namely improving the login page, color palette and elements interactions.
