ZYO
Designing with AI, and solving problems creatively.
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.
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.
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
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 With the Help of AI
“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 products offer complex tools that are hard to incorporate into current workflows.
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.
Lacks collaboration features, workflow is unintuitive, and has a steep learning curve.
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.
AI Brainstormed 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. After distilling the large amount of insights generated by AI, I asked it to analyze and generate personas based on themes and patterns.
01 Emily
Pain Point
Lack of collaboration features, users need to involve collaborators without access to the tool and employees with different levels of clearance.
Possible 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.
02 Alex
Pain Point
Lack of flexibility with timer, new users often forget to start or stop a timer, process of logging time is complex and unintuitive.
Possible 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.
03 Sam
Pain Point
Inexperienced users struggle to incorporate complex process into their workflow.
Possible 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.
Mapping out user journeys, site maps, 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. I asked AI to generate multiple versions, and handpicked the best outcomes myself. With the time constraint, I decided to focus on enhancing timer functionality.
Sketching paper wireframes while keeping different screen sizes in mind.
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.
Building a UI that feels familiar to the users.
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.
HOLD ON A SECOND!
How might we prevent the user from forgetting to track their billable hours?
Being inspired by Steam, the gaming platform
Midway through my design process, I realized I was approaching the problem like any typical project management app—building a time tracker that relied on the user to manually start and stop it. But that manual aspect was exactly what I wanted to eliminate.
The breakthrough came unexpectedly during a gaming session with friends. I noticed that Steam automatically tracks how many hours a player has spent in a game. It starts timing when the game launches and stops when it’s closed.
That insight sparked an idea: What if ZYO could do the same for creative work? Instead of asking users to start a timer, ZYO could detect when work begins—like opening design software or switching into "focus mode"—and track hours automatically. This small shift could solve a major pain point: forgetting to track billable time.
Make the time tracker smart by automating the start timing and log hours features.
After the breakthrough I wireframed 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 developed 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.
User testing with 5 freelancers in different industries and digital literacy.
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
LOCATION
Remote via Zoom
LENGTH
20-30 mins
Here are my insights:
Navigation
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
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
Automated Timer
Users appreciated the concept of the automated timer but often lacked confidence in whether it had started or was accurately tracking their time. Some users reopened the app to check, while others manually recorded time out of habit or mistrust. A few participants mentioned that they wanted more control and visibility, especially when switching tasks or tools.
Actionable Insights:
Add a persistent, lightweight visual indicator (e.g., mini timer or status dot) to confirm that tracking is active
Provide a clear notification or toast message when the timer starts and stops
Offer a manual override or pause/resume control for users who want more flexibility
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 with iterations from user testing insights and accessibility considerations.
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.
Adhering to WCAG AA standards and applying 4-point spacing rule.
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.
KEY TAKEAWAYS
Finding Inspiration: Sometimes, the solution to your problem already exists in another product from a completely different industry. As a designer, you should research wider range of products — don’t only fixate on competitors in your product’s industry!
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.