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 received this prompt during an interview process. I planned for a 7 days design sprint, but caught the flu and was knocked out for the first 2 days. Having to clutch the design and presentation in 5 days means I have to quickly adapt to a new workflow. Ironically a design aimed to save time and give freedom to freelancers, is crafted by a freelancer with neither of the two concepts. The good thing is, during the 5 days design sprint I found real room for improvement for existing products on the market. Hopefully by the end of the case study, you’ll have a good sense of my design process!
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, prioritize tasks from the To-dos list, or act on overdue invoices.
PROJECT OVERVIEW:
The Project Overview page updates you on recent activities and changes made by your team, this ensures effective communication between members.
For users that are not used to tracking their billable hours, they can choose to quickly open their design tool from the launchpad and the timer will automatically start tracking their hours. This was inspired by Steam.
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. Using a tags system removes need to assign each time record to specific projects, offering freedom and flexibility for different users.
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.
day 1-2
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. 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.
Customization: Limited options to tailor tools to freelancers’ needs.
Scalability: Tools either lacked advanced features or were too complicated for new users.
Opportunities :
Provide compelling free tier to attract a broad user base
Offer customization features
Prioritize simplicity in design
THE PROBLEM
After 2 days of user research, these were the main problems I set out to solve with ZYO.
-
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 common, and fixing logs later can be a frustrating and time-consuming process.
-
Many existing solutions are packed with unnecessary features, making them confusing and intimidating for beginners.
User Personas
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 scalability, users need to involve collaborators without access to the tool and employees with different levels of clearance.
Value Propositions:
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.
Value Propositions:
Enhanced Timer Functionality: Ability to pause, auto pause, and optimize user flow to tracking and logging times.
AI Assistant: An AI assistant that automatically records user activities and reminds users to utilize certain functions.
Pain Point 3: Inexperienced users struggle to incorporate complex process into their workflow.
Value Propositions:
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 3
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 functions 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 4
User testing
Moderated interviews with friends that represent our user base. Tasks were given, KPIs were measured and turned into insights.
USABILITY STUDY
Participants were given up to 3 tasks to complete. 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
LOCATION
Remote via Zoom
LENGTH
20-30 mins
INSIGHTS
Navigation: Navigation was hard to use. Users spent a lot of time reading through the options. I have to group elements by visually reducing spacing.
Invoices: Large CTAs caused users to mistake buttons as windows. Missing sorting function and tax information at editing screen. Users also wished to see more information on the invoice list.
Project Cards: The small info cards were unclear. Most users expressed confusion while reading the cards.
day 5
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
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.