How I leveraged AI to prototype a project management web app in just 4 days
Role: UX Research, UI Design, Visual Design
Timeline: 4 days
Platform: Web Application
Read Time: 10 mins
OVERVIEW
ZYO is a platform designed to help freelancers simplify project management, time tracking, and invoicing. The name "ZYO" comes from the Mandarin word "自由" (zìyóu), meaning "freedom." My goal is to give freelancers that sense of freedom by taking the hassle out of administrative tasks, so they can focus on what they love doing.
A BACKGROUND STORY
I got this prompt during an interview and planned a 7-day sprint, but caught the flu and lost the first 3 days. Clutching the design and presentation in 4 days meant quickly adapting to a new workflow. Ironically, a tool meant to save freelancers time and offer freedom was designed by one with neither. Still, I uncovered real gaps in existing products and value propositions. By the end of this case study, I hope you'll get a clear sense of my process!
01 DASHBOARD:
The Dashboard gives a quick overview of all current active projects. From here the user can choose to navigate to recent projects, pick up tasks in progress, or act on overdue invoices.
Automatic Hours Tracking (App Launch Pad)
For users new to time tracking
Users can launch their design tools directly from the dashboard's launchpad
Once launched, a timer automatically begins tracking billable hours in the background
02 PROJECT OVERVIEW:
The Project Overview page updates you on recent activities and changes made by your team. This ensures effective communication between members by keeping everyone up to date.
03 TIME TRACKER:
The Time Tracker page offers the Timer tool and an overview of the user’s billable hours. The timer tool is automated with smart suggestions to fill in gaps or adjust logs.
After the timer is activated, a floating window hovers on the desktop to remind users to log their session. Using a tags system removes need to assign each time record to specific projects, offering freedom and flexibility for different users.
04 INVOICE:
The Invoice page provides a quick finance overview of all recent projects. From here, users can create and send invoices, generate finance reports, and stay updated on the status of all sent invoices.
Z can help users automatically draft up invoices, or emails to remind customers of overdue invoices.
day 1
Understanding the Users
“A beautiful design isn’t necessarily a good product, but a design that has a real value proposition and solves an existing user pain point damn well is definitely a good product.” - Me
COMPETITOR ANALYSIS
To get a better sense of what freelancers needed, I conducted user research through analyzing user reviews and competitor tools. Due to the time constraint I utilized AI to speed up my workflow. I fed ChatGPT multiple company websites, user review websites, and an exemplar competitor audit report I’ve done in the past. After double checking the sources it used, here’s what I learned:
Weaknesses:
Bonsai: High subscription cost; steep learning curve for new users.
Toggl Track: Limited invoicing functionality.
FreshBooks: Overly focused on accounting; less intuitive for project management.
Clockify: Lacks advanced features for invoicing and financial reporting.
HoneyBook: Overly niche, targeting creative industries.
Gaps:
Pricing: Lack of tools from free tier subscription.
Collaboration restraints: Lacks collaboration and team management features.
Onboarding: Tools either lacked advanced features or were too complicated for new users.
THE PROBLEM
After a full day of user research, these were the main problems I set out to solve with ZYO. I chose to prioritize the Time Tracker function.
-
It’s hard to share updates with collaborators without exposing sensitive information or spending too much time on manual reporting.
-
Forgetting to start or stop timers is a common pain point, having to correct time logs later is a frustrating and time-consuming process.
-
Many existing solutions are packed with unnecessary features, making them confusing and intimidating for beginners.
User Personas & Solutions
After learning about my users, it’s time to categorize them into groups. This makes it easier to come up with value propositions that target specific audiences. This is a crucial step in the design process because it clarifies what features I should focus on, and makes sure I’m designing for a group of users and not a specific individual.
PAINPOINTS AND VALUE PROPOSITIONS
Pain Point 1: Lack of collaboration features, users need to involve collaborators without access to the tool and employees with different levels of clearance.
Solutions:
Affordable Team Plans: Offer pricing models that cater to small teams and freelancers transitioning to collaboration.
Comprehensive Collaboration Tools: Include shared dashboards, better team notifications, and client-facing project views.
Pain Point 2: Lack of flexibility with timer, new users often forget to start or stop a timer, process of logging time is complex and unintuitive.
Solutions:
Enhanced Timer Functionality: Ability to launch an app and automatically start the timer optimizes user flow to tracking times.
Tag System: Using a tag system allows users to freely organize and log their work sessions.
Pain Point 3: Inexperienced users struggle to incorporate complex process into their workflow.
Solutions:
Third Party Apps Integration: Add integrations that support third party apps such as Google Calendar
Enhanced Mobile Functionality: Ensure feature parity between mobile and web platforms for on-the-go users.
AI Assistant: An AI assistant that helps users navigate the APP and teaches them how to use complex features.
day 2
Starting the design
After identifying the user base and pain points, it’s time to solve the problem. Utilizing the last legal yet unfair advantage - creativity, and some coffee.
USER JOURNEYS, SITEMAPS, AND USER FLOWS
The first thing I did was to build a sitemap and user-focused flows for each core functions to ensure that my personas can successfully complete their key objectives while reducing the existing pain points. With the time constraint, I decided to focus on enhancing timer functionality.
PAPER WIREFRAMES
Next, focusing on the core features identified during user research, I sketched the first wireframes using pen and paper. I start by brainstorming multiple versions of the same screen, then combine favorite elements into one final design. I also believe it’s important to start thinking about how your design will look on different screen sizes to make sure your app turns out responsive.
DIGITAL WIREFRAMES
After coming up with initial concepts on paper, I translated those sketches into digital designs using Figma. Here are the main screens I focused on:
Dashboard: It’s a central hub for tasks, projects, and invoices.
Invoice Editor: A simple tool that makes it easy to create, edit, and send invoices with confidence.
Time Tracker: An automated tool that gets smoothly incorporated into the user’s workflow.
TIME TRACKER:
An automated timer with smart suggestions to fill in gaps or adjust logs. Using a tags system removes need to assign each time record to specific projects, offering freedom and flexibility for different users. More importantly, I was inspired by Steam to develop a launchpad that allows the app to automatically start the timer on launch.
day 3
User testing
With limited time and resources, user research should be focused on features that are unknown to the user base, instead of features that are proven to be successful.
USABILITY STUDY
5 participants with different occupations and tech literacy were invited and given up to 3 tasks to complete. Both quantitative and qualitative data were collected. They were encouraged to speak out what they’re thinking while performing these tasks.
KPIs: Time on task, User error rates, Navigation vs. Search
STUDY TYPE
Moderated usability study
PARTICIPANTS
5
Project Cards
Feedback: Info cards were too small and unclear. Most users were confused when reading them.
Actionable Insights:
Increase size or adjust layout for better readability
Improve visual hierarchy with clear headings and labels
Consider hover states, expandable sections, or tooltips to reveal more context without cluttering the UI
LOCATION
Remote via Zoom
LENGTH
20-30 mins
INSIGHTS
Navigation
Feedback: Navigation bar was confusing, which increased time on task. Users spent a lot of time reading through the options.
Actionable Insights:
Group related navigation items to improve scannability
Visually reduce spacing to create clearer sections
Use more intuitive labels and icons to guide users quickly
Invoice Creation
Feedback: Large CTAs were mistaken for windows. Users noted the lack of sorting function and missing tax info on the editing screen. They also wanted more information visible in the invoice list.
Actionable Insights:
Redesign CTA buttons to differentiate them from window elements
Add a sorting feature for better invoice organization
Include editable tax fields directly on the invoice editing screen
Display additional invoice details (e.g. client name, due date, total) in the list view for quicker overview
day 4
Final Prototyping
This step requires good a sense of aesthetics. Visual design, branding, and transforming the mockup into a fully functional prototype.
HI-FI PROTOTYPES
My next step is to implement solutions to insights found during usability studies, and add branding to the product. These are the key changes:
Grouped navigation items more intuitively and improved spacing.
Added sorting and tax fields to the invoice editor.
Redesigned project cards to display information more clearly.
ACCESSIBILITY CONSIDERATIONS
Ensuring accessibility was a key focus:
I chose colors that met WCAG AA standards for contrast.
Used two typefaces (Garamond for headlines and Roboto for body text) to maintain consistency and readability.
Applied a 4-point spacing rule to create a clear visual hierarchy.
Conclusion
KEY TAKEAWAYS
User-Centered Design: Listening to freelancers’ pain points made the design more impactful.
Iterative Process: Early testing and revisions significantly improved the final product.
Simplicity is Key: Freelancers want tools that fit into their workflows, not tools they need to learn from scratch.
AI Implementation: AI is not to be scared of, it’s a convenient tool that helps streamline the design process and user flow.
NEXT STEPS
Conduct more usability testing with a larger group of freelancers.
Build a mobile version to make ZYO accessible on the go.
Explore AI features that address other pain points like enhanced collaboration tools.