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.

ROLE

UI/UX Designer

SERVICES

Ideation, Research, Wireframe

TOOLS

Figma

MISSION

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?

RESEARCH

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

1. Timeline & Budget

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.

2. Removing + Postponing Certain Features

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

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

SKETCHES & WIREFRAMES

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

SHOWCASE

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

Toggle CC (closed captions) on for better context & viewing experience.

Web App Showcase

Screenshots are taken from the staging environment.

Task List Page

Order Details Page

Size Charts Template Page

Order Details Document with QR Code

Next Steps

1. Improve app’s performance

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).

2. Continuous UX & UI Improvements

After implementing core features, we plan to ship visual tweaks, namely improving the login page, color palette and elements interactions.

My Other Portfolios