# Melo — Freelancer Management Platform > A concept SaaS experience for managing freelancer projects, clients, time, finance and messages; prototype tested using Maze. Canonical case study: https://uditha.design/projects/melo.html Created by Uditha Prabhasha Dharmarathna. This page summarises the published case study; claims about testing and outcomes are limited to those stated in the original. PRODUCT DESIGN · SAAS · UX RESEARCH ## One dashboard for a freelancer’s work, time & money. Designing a calmer way for independent professionals to manage clients, projects, hours and cash flow — without switching between disconnected tools. PROJECT **Melo** MY ROLE **Product Designer — Research, UX, UI & design system** PRODUCT **Responsive SaaS dashboard** STATUS **Concept case study · Prototype tested in Maze** PROJECT AT A GLANCE ### Freelancers are a one-person company. Melo is a SaaS workspace that connects project management, time tracking, invoicing and AI-based productivity guidance. Freelancers often manage several clients while also handling admin, billing and follow-ups. Melo brings those activities into one place so more of the week can be spent on actual work. 02 / OPPORTUNITY ### Tools exist. The connections don’t. Survey responses pointed to a fragmented workflow: spreadsheets for projects, calendars for deadlines and Word or Excel for invoices. The challenge was to give freelancers one clear picture of their work, time and income without creating more admin. **How might we** give freelancers a single, simple view of their work, time and income, without adding more admin? 03 / RESEARCH ### What 15 freelancers told me. I surveyed 15 freelancers across design, development and other creative fields. These findings are directional because of the small sample, but they gave me a useful starting point for prioritising features. #### freelancers surveyed **15** #### struggle to manage multiple projects **87%** #### create invoices manually **53%** #### want AI productivity suggestions **93%** INSIGHT 01 #### Disconnected tools create friction. Freelancers are already using project tools, calendars and invoice templates. The pain is the gap between them. INSIGHT 02 #### Time is the hidden cost. Two-thirds struggle to track time, which means billable work is at risk of slipping through unnoticed. INSIGHT 03 #### Invoicing is really a cash-flow problem. Freelancers need to know when money is arriving, not just whether an invoice has been sent. INSIGHT 04 #### Balance matters too. Productivity features should not simply push people to do more. They should help people work more sustainably. **Method note** · Small survey sample (n=15). These percentages were used to guide design priorities, not to claim representative market behaviour. 04 / PRODUCT STRATEGY ### Turn research into design decisions. I shaped the product around four principles: connect rather than duplicate tools; make next actions obvious; favour calm, focused screens; and surface money and cash flow early. 01 #### Connect, don’t duplicate Projects, time and money should behave like one system rather than several disconnected utilities. 02 #### Answer “what do I do next?” Every screen should surface a next action, not just present information. 03 #### Calm over clutter This is a product for one person using it every day, so clarity matters more than density. 04 #### Show money early Cash flow is the anxiety, so Finance is treated as a first-class experience rather than an afterthought. 05 / INFORMATION ARCHITECTURE ### Seven destinations, one click away. Melo’s structure is deliberately shallow. The sidebar holds seven top-level destinations, and detail opens beside or within a page instead of burying features in nested menus. INFORMATION ARCHITECTURE #### Melo workspace **7 SECTIONS · 33 SCREENS** Each section is grouped with its screens. - ##### Dashboard 4 screens - Earnings, projects & hours - Performance overview - AI Insights score - Upcoming deadlines - ##### Projects 5 screens - Project list & filters - Detail · Tasks - Detail · Time logs - Detail · Activity - Detail · Links - ##### Time Tracking 4 screens - Active timer - Daily productivity - Time trends - Time log - ##### Clients 5 screens - Client list - Client details - Needs your attention - Money & last message - Client projects - ##### Messages 4 screens - Inbox - Chat - Catch me up - Suggested reply - ##### Finance 5 screens - Projected income & goal - Money calendar - Income by month - Who pays you - Invoices - ##### Settings 6 screens - Profile - Business & brand - Invoicing - Notifications - Preferences - Security 01 #### Everything is one click away All seven destinations live in the sidebar, so a freelancer can move between projects, time, clients and money without deep navigation. 02 #### Details open beside the list Selecting a project reveals tasks, time logs, activity and links while keeping the list visible, which supports fast context switching. 03 #### Money has its own home Invoices, forecasts and payment timing sit together inside Finance because cash flow was one of the biggest anxieties in the research. FIRST-RUN FLOW #### From sign-up to workspace The first-run experience is kept short: authentication, verification and a lightweight onboarding flow that personalises the workspace around the freelancer’s role and services. LoginCreate accountVerify emailOnboarding · 3 stepsWelcomeDashboard 06 / WIREFRAMES ### Structure before style. Low-fidelity layouts helped me decide the hierarchy, grid and information placement before getting into colour, typography and component styling. DASHBOARD #### Daily priorities first Earnings, active projects and hours logged appear above the fold, followed by AI insights and upcoming deadlines. ![Melo Dashboard wireframe](https://uditha.design/assets/melo-wireframe-dashboard.webp) PROJECTS #### List + detail panel The list stays visible while detail panels reveal tasks, time logs, activity and links, helping users keep context. ![Melo Projects wireframe](https://uditha.design/assets/melo-wireframe-projects.webp) TIME TRACKING #### Always-ready timer The timer is central, supported by today’s totals and trend views so logging work feels fast and reliable. ![Melo Time Tracking wireframe](https://uditha.design/assets/melo-wireframe-time-tracking.png) FINANCE #### Money flow made visible Projected income vs goal, a money calendar and invoices are stacked in order of urgency and decision-making value. ![Melo Finance wireframe](https://uditha.design/assets/melo-wireframe-finance.png) These wireframes established what sits above the fold and how related tasks stay connected. They also reduced clutter before visual styling was introduced. 07 / ORIGINAL SOLUTION ### Work, time and money in one place. This is the original prototype tested in Maze. The post-test redesign appears in Design iteration below. Its navigation uses a slim icon sidebar with seven destinations. A freelancer can reach anything in one click, while key screens prioritise the actions they are most likely to need each day. ONBOARDING #### A short setup that makes the workspace feel personal. The onboarding flow collects a few important details — avatar, name, role and services — so the experience feels relevant from the first screen rather than generic. ![Melo onboarding flow showing create account, login, profile setup, preferences, business workspace setup, email verification and account created screens.](https://uditha.design/assets/melo-onboarding-flow.webp) [Open Onboarding in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=62-3721) DASHBOARD #### A starting point for the day. The dashboard answers three questions at a glance: how am I doing, what’s due, and what should I focus on next? ![Melo dashboard interface with earnings metrics, project counts, performance graph, AI productivity insights and deadlines](https://uditha.design/assets/melo-dashboard.webp) [Open Dashboard in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=194-2608) PROJECTS #### Switch context without losing your place. A filterable project list sits beside a detail panel with Tasks, Time Logs, Activity and Links tabs. ![Melo project workflow showing the project main page, Tasks, Time Logs, Activity and Links panels](https://uditha.design/assets/melo-projects.webp) [Open Projects in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=331-16118) TIME TRACKING #### Capture billable work as it happens. An always-available timer connects to a project and task, with a billable toggle and supporting productivity trends. ![Melo time tracking screen displaying an active timer, billable hours, productivity score, time trends and a time log](https://uditha.design/assets/melo-time-tracking.webp) [Open Time Tracking in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=543-31593) FINANCE #### Know what is coming in — and what needs attention. Finance brings projected income, goals, outstanding payments and the Money Calendar into one view. It highlights payment timing and provides actions to follow up on overdue invoices. ![Melo Finance dashboard showing income against a goal, receivables, overdue invoices, payment timing and money calendar](https://uditha.design/assets/melo-finance.webp) [Open Finance in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=1008-19904) MESSAGES #### Client conversations, without losing context. Project details, payment updates and AI assistance stay close to the conversation. ![Melo messaging screen with inbox, client conversation, catch-me-up and suggested reply features](https://uditha.design/assets/melo-messages.webp) [Open Messages in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=935-15218) SETTINGS #### One place for business preferences. Manage profile, branding, invoicing, notifications, preferences and security. ![Melo settings screen showing profile, business and brand, invoicing, notifications, preferences and security settings.](https://uditha.design/assets/melo-settings.webp) [Open Settings in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=1201-25264) 08 / DESIGN SYSTEM ### One system behind every screen. As the file grew, inconsistencies started to appear: too many button styles, inconsistent corner radii and several near-identical colours. I audited the work, consolidated values into tokens and rebuilt repeated UI into reusable components. SYSTEM SNAPSHOT #### Visual foundations Design tokens across 5 variable collectionsPoppins text styles + 4 shadow stylesVariants across 5 core componentsHand-built elements replaced with component instances [Open Foundations in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=1283-11317) TOKEN ARCHITECTURE #### From primitives to semantic variables ##### 1 · Primitives 31 raw colours across neutrals, blue, green, red, orange and data hues. These are not used directly in screens. ##### 2 · Semantic tokens 44 interface roles such as bg/page, text/primary, border/default and icon/brand. ##### 3 · Components Buttons, avatars, status pills, cards and nav items are all bound to semantic tokens so updates flow through the system. ##### Modes The documented system currently covers Light mode. A Dark mode can be added through semantic aliasing without rebuilding components. COLOUR VARIABLES #### Semantic palette examples bg/brand #0088FF bg/brand-hover #0069C2 bg/brand-soft #EAF4FF bg/page #F6F6F6 text/primary #111111 text/secondary #636366 bg/success #20B15A data/4 #7B61FF TYPOGRAPHY VARIABLES #### Type styles **Display / 36**Poppins SemiBold 36 — used for key hero moments and high-emphasis headlines. **Heading / H2**Poppins SemiBold 24 — section-level headings such as “Upcoming deadlines”. **Body / Large**Poppins Regular 16 — core descriptive copy and supporting explanations. **Label / Small**Poppins Medium 12 — metadata, tags and UI labels. **Caption / Tiny**Poppins Regular 10 — low-priority helper text and timestamps. CORE COMPONENTS #### Reusable UI building blocks **Button** Primary, Secondary, Ghost and Danger styles across two sizes and multiple states. **Avatar** Four sizes with either initials or a photo, plus presence states. **Status Pill** Success, Warning, Danger, Info and Neutral states. **Nav Item** Default, hover and active states to keep navigation consistent. [Open Component Library in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=1283-1452) BEFORE / AFTER #### System-driven consistency One of the key improvements was moving from hand-built screens to component-based screens so the product could be refined faster and stay visually consistent. Before ![Melo dashboard before applying the design system](https://uditha.design/assets/melo-consistency-before.webp) After ![Melo dashboard after applying the design system](https://uditha.design/assets/melo-consistency-after-v2.webp) [Open updated dashboard in Figma](https://www.figma.com/design/EY3F3p7bLMWygAt9sGELt8/Melo?node-id=1285-6498) **Design system takeaway** · The system reduced inconsistency, made iteration easier and created a cleaner foundation for future handoff and expansion. 09 / USABILITY TESTING ### Tasks completed. Clarity still to improve. I tested the Melo prototype in Maze to see whether people could find the information and actions they needed. Completion was high, but misclicks exposed friction that success rates alone would have hidden. #### Study responses **16** STUDY REACH 13–16 responses per task. #### Everyday tasks **7** TEST COVERAGE Projects, clients, payments, time and messages. #### Average ease rating **7.6/10** PERCEIVED EASE 13 responses · 1 = very difficult, 10 = very easy. TASK PERFORMANCE #### Reaching the goal did not always mean a clear route. Compare task success with the misclick rate. Both use a 0–100% scale. Misclick rate measures clicks outside interactive hotspots. It is not the percentage of people who failed a task. Explore task times, drop-off and response counts Reported task metrics from the Maze export | Task | Success | Misclicks | Avg. time | Drop-off | Responses | | --- | --- | --- | --- | --- | --- | | Dashboard progress | 100% | 32.2% | 35.8s | 0% | 16 | | Review payments | 93.3% | 66.5% | 48.2s | 6.7% | 15 | | Start a timer | 93.3% | 60% | 19.5s | 6.7% | 15 | | Client details | 100% | 21.3% | 16.0s | 0% | 13 | | Find projects | 100% | 17.6% | 4.6s | 0% | 13 | | Review project tasks | 100% | 66.7% | 25.5s | 0% | 13 | | Client conversations | 92.3% | 52.1% | 89.1s | 7.7% | 13 | EVIDENCE → DESIGN ITERATION #### Four priorities for a clearer workflow. Navigation labels, payment routes, project actions and connected conversations shaped the redesign. [See how these findings changed the screens ↓](https://uditha.design/projects/melo.html#iteration) > “Adding labels or tooltips would make them easier to understand.” > > Participant feedback on dashboard icons · Maze study PARTICIPANT INPUT → REDESIGNED SCREENS #### Two requests that shaped the screens. Each suggestion below came from one written response. They informed the design direction; their impact still needs testing. DASHBOARD / VISUAL CLARITY > “I would love to see more charts and visual diagrams on the dashboard rather than lists and specific numbers.” **Design response:** I added a payment-status visualisation and weekly workload chart so people can scan money and capacity. [See the redesigned dashboard](https://uditha.design/projects/melo.html#iteration-dashboard) PROJECTS / DEADLINE CLARITY > “deadline countdown (e.g: 2 days left) in projects” **Design response:** I added days-left badges to project cards and deadline priorities to the dashboard. [See the redesigned projects](https://uditha.design/projects/melo.html#iteration-projects) **Study scope** Source: Maze report exported 22 October 2026. The report contains 16 study responses, seven prototype tasks and two feedback questions; individual tasks received 13–16 responses. These are findings from a small prototype study, not live-product performance or proof of post-redesign improvement. Misclicks can also reflect prototype hotspot coverage; a follow-up test should check both interaction clarity and prototype completeness. 10 / DESIGN ITERATION ### From completed tasks to clearer journeys. I redesigned the key screens using the Maze task results and written feedback. The focus moved from showing information to making the next action easier to recognise. **Redesigned. Ready to retest.** The metrics below describe the original prototype. The impact of these changes has not yet been measured. 01 / NAVIGATION #### Give every destination a clear name. ![Compact icon sidebar with an expand control.](https://uditha.design/assets/melo-iteration/navigation-compact.webp) Compact ![Expanded sidebar with seven labelled destinations and a timer dock.](https://uditha.design/assets/melo-iteration/navigation-expanded.webp) Expanded **What testing revealed**Two written responses explicitly requested labels or tooltips. I added an expanded sidebar with names for all seven core destinations, so people can recognise a destination through text as well as icons. The timer dock and project selector keep tracking close to navigation. Expand and collapse controls let people choose how much workspace to use. **Design intent**Reduce ambiguity around icons and make the timer easier to find. 02 / DASHBOARD #### Start with what needs attention. **What testing revealed**Starting a timer recorded 60.0% misclicks; payment review recorded 66.5%. ![Updated Melo dashboard with priority cards, payment status and weekly workload.](https://uditha.design/assets/melo-iteration/dashboard.webp) Dashboard · Updated design ##### What I changed I brought overdue payments, waiting replies and approaching deadlines to the top, each paired with a named action. Payment status and weekly workload now have visual summaries. ##### Why this direction Start timer, Send reminder, Reply and Open tasks make the next step explicit. 03 / PROJECTS OVERVIEW #### Make the next project action explicit. **What testing revealed**Reviewing project tasks succeeded, but recorded 66.7% misclicks. ![Updated projects overview with deadline badges and explicit project actions.](https://uditha.design/assets/melo-iteration/projects.webp) Projects overview · Updated design ##### What I changed I grouped projects by urgency and added deadline countdowns, progress, billing context and the next task to each card. ##### Why this direction Open project and Start timer provide labelled entry points; overdue balances and requests stay in context. 04 / PROJECT DETAIL #### Keep the conversation close to the work. **What testing revealed**Finding conversations averaged 89.1 seconds, the slowest task. ![Updated project detail with client conversation, additional-work request and files.](https://uditha.design/assets/melo-iteration/project-detail.webp) Project detail · Updated design ##### What I changed I brought client replies, extra-work requests, tasks, money and files into one project view. ##### Why this direction The activity thread supports replies and quote decisions; Files & links keeps supporting resources nearby. 05 / FINANCE #### Turn payment visibility into action. **What testing revealed**Payment review recorded 66.5% misclicks, one of the highest rates in the study. ![Updated Finance screen showing invoice reminders, unbilled time and projected income.](https://uditha.design/assets/melo-iteration/finance.webp) Finance · Updated design ##### What I changed I separated received, owed, overdue and earned-but-unbilled amounts, then placed follow-up actions beside the relevant invoices. ##### Why this direction Send reminders from the invoice list and turn unbilled time into an invoice. 06 / SEARCH & SHORTCUTS #### Reach the task through familiar words. **What testing revealed**One respondent expected pending payments to lead directly to Finance. ![Search overlay with pending-payment results, reminder actions and recent projects.](https://uditha.design/assets/melo-iteration/search.webp) Search & shortcuts · Updated design ##### What I changed I explored a second route to payments and frequent actions through search. The example query “pending pay” returns payment destinations, invoice results and reminders. ##### Exploration to validate Search and quick actions are designer-led extensions to the feedback, ready for validation. Design iteration · 22 October 2026. Informed by the Maze report and 13 written feedback responses. UI amounts are sample data. Mobile access and calling were also requested; these screens do not demonstrate those features. 11 / NEXT STEPS ### What still needs validation. The Maze study established an initial prototype baseline. The redesigned screens now address navigation and action clarity. The next step is to repeat the key tasks and check whether misclicks and completion times improve. Melo remains a concept, with the AI guidance and pricing still to validate. 01 #### Iterate and retest the core tasks Test the updated payment, timer, project-task and conversation routes against the original baseline before claiming an improvement. 02 #### Evaluate the AI score Test whether freelancers understand how the score is calculated and whether the advice feels useful rather than intrusive. 03 #### Test pricing Explore the $5–$10 range and whether a free tier helps communicate value without reducing trust. 04 #### Extend lower-priority features The updated project view explores files and links. Validate that direction before extending contracts and collaboration.