Project Overview
A task management SaaS web app that helps people living under the same roof get tasks done collaboratively in a very easy way. The app has a reward system that motivates users to complete tasks. Users can also keep track of progress throughout the entire family, get performance review and suggestions from AI, and many other features.
Role: UX designer
Main tool: Figma
Audience: People living together (families, roommates, etc) who are usually not tech-savvy
Duration: February 2024 → Present
My Role
My role is to create the design for the MVP. First, I received some general information about the web app. Here are the steps I went through:
Step 1 - Ideation (≈ 20 hrs):
- I created a use case document detailing the features of the web app. I continuously received feedback from the client and refined it accordingly until they were satisfied with it.
- I created a sitemap showing the structure of the web app.
- I created some user flow diagrams, only for the most complex user tasks.
Step 2 - Wireframing (≈ 100 hrs):
- I started creating the wireframes. The wireframes are fairly high fidelity, but they don’t use any branding. I started with the tasks screen which was the main screen of the app, and I left the dashboard for the end because it would act as a hub for the web app.
- I continuously received feedback on the wireframes and made changes accordingly.
Step 3 - Prototyping and Testing (≈ 40 hrs):
- I turned the wireframes into a prototype on Figma.
- I compiled interview questions for user testing and conducted 6 tests on UserBrain.
- I used the feedback from the test to refine the wireframes further.
Step 4 - Design System (in progress):
Once we settled on the wireframes, I moved to creating the design system, starting with deciding on the branding (colour palette, font styles, etc) then creating variants for the various components used.
The project is on hold and it is still work in progress, thus why I am only able to present wireframes at this stage.
Wireframes
Some of the wireframe I designed. There is a total of 42 pages in the Figma file (including all different configuration panels). The following are the main pages.
