© Iman Nazri 2022
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.
Ideation, Research, Wireframe
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.
Here are the deliverables for the project:
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.
Here are the pain points faced by IDANS:
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.
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
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
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.