End-to-End Application
Workforce Management System
Project Overview
Project Type:
End-to-End Application
Team:
Independent project with the help of Mentor and Peers
Tools:
Figma
Problem Statement:
Construction workers face confusion and delayed payments due to manual records and lack of transparency. A simple mobile dashboard with voice and local language support can help them track work, wages, and benefits, ensuring fairness and control.
Research
Competitor Analysis
Competitor analysis helps evaluate the strengths and weaknesses of similar products to identify gaps and opportunities. It guides better design decisions and ensures your product stands out by offering improved features and user experience.
User Interview Insights
User interview insights are key findings gathered from conversations with real users about their needs, behaviors, and pain points. These insights help identify common patterns, validate assumptions, and guide design decisions to create a more user-centered product.
Personas
A persona is a fictional character created based on real user research to represent a typical user’s goals, needs, and behaviors, helping guide design decisions.
Affinity Map
To analyze the user interview data, I created an affinity map by grouping similar responses and observations. This helped us identify key patterns, recurring pain points, and user needs. Organizing insights visually allowed us to better understand user behavior and define clear design directions for the project.
Project Goals
These project goals are categorized into Business Goals, User Goals, and Common Goals, represented using a two-circle intersection diagram, where the overlapping area highlights goals shared by both the business and users.
Information Architecture and Flows
Site Map
A sitemap is a visual layout that shows the structure of an app or website, outlining all the main screens and how users navigate between them.
User Flows
A user flow is a step-by-step path a user takes to complete a task within an app or website, helping designers create smooth and intuitive experiences.
Design & Prototype
Branding
The branding for this project includes typography, a color palette, and a brand logo. The app is named Daily Check—a short, simple, and relevant name that clearly reflects the app’s purpose and usage.
Low Fidelity Wireframes
Using Figma, I translated key screens into mid-fidelity digital wireframes, enhancing the detail and structure of each interface element. This transition from hand-drawn sketches to a digital format provided clarity on the feasibility of my initial low-fidelity concepts and allowed for more precise exploration of layout and functionality.
High Fidelity Wireframes
A high-fidelity interface is a detailed and polished version of a design that closely resembles the final product. It includes accurate layout, typography, colors, images, and interactive elements to simulate the real user experience. This level of detail helps in gathering more precise feedback, testing usability, and presenting the design clearly to stakeholders or developers.
UI Kit
A UI Kit is a collection of pre-designed user interface elements like buttons, icons, input fields, and components. It helps maintain design consistency and speeds up the design and development process by providing ready-to-use assets.
Testing & Iterations
Usability Testing Results
User testing is a process where real users interact with a product or prototype to identify usability issues and gather feedback. It helps understand how users experience the product, ensuring it meets their needs and expectations. Feedback from user testing is analyzed and used to refine the design, addressing pain points and improving the overall user experience to better align the product with user needs.
Test Feedback
Add illustrations or icons to make interface more intuitive.
Add amount to work detail page.
Add prototype for "Search with AI" feature.
Make long screens scrollable.
Usability Test Results
The feedback received during usability testing has been implemented, with references shown below. Key points are highlighted using blue-colored arrows, boxes, and other visual elements.
AI Support Features
Prototype
A prototype in UI design is a working model of a digital interface that allows designers and users to interact with the layout, flow, and functionality before development. Unlike static wireframes, prototypes simulate real experiences to test navigation and key interactions. This helps identify usability issues, gather feedback, and make informed design decisions early, reducing the risk of costly changes later.
Final Results
Personal Reflection & Learnings:
Looking back, this project taught me the value of designing for real-world users with low tech exposure. I learned to prioritize clarity and accessibility over trends. From research to high-fidelity prototypes, the process pushed me to think from the user's perspective.
Even simple features like attendance tracking can build trust and empowerment. I gained confidence in handling end-to-end design and learned to observe, listen, and simplify rather than assume. This project strengthened my ability to design practical, meaningful solutions with empathy.
Key Takeaways:
Simplicity is powerful—especially for first-time tech users.
Designing for underserved groups requires deep empathy and clear communication.
Visual + voice-based guidance makes a big difference in user understanding.
Real-world testing always reveals things that mockups alone can’t.