Overview

🔍 What is Mercury+ ❓

Mercury+ is a platform specifically tailored to meet the needs of freelancers in effectively tracking and managing their client payments.

🤔 Dilemma❓

Managing multiple clients and projects is a fundamental aspect of running a successful freelance business. However, freelancers often encounter challenges when it comes to receiving payments from clients promptly.

This case study aims to address the question, "How do you help freelance business owners keep track of payments from their clients and ensure they receive payments promptly for every project?"

🎯 Goals & Responsibilities 👩🏾💻

My goals in this project, as the sole researcher and designer, were to understand, hypothesize, and design a solution to the stated issue, with the aim of assisting freelancers in streamlining their payment processes and improving their financial management. This was achieved through user research, competitive analysis, and applying both design and interactive design principles.

🧰 Tools & Skills 🛠️

  • 💼  UX Research

  • 💼  UI Design

  • 💼  Web Design

  • 💼  Wireframing

  • 💼  Prototyping

  • 💼  Symbol & Typography Design

  • 💼  Format & Layout Design

Introduction

👁️ Merging Personal Experience with User-Centric Design 🎨

As a freelancer myself, and someone who uses a platform to manage and track my own clients and projects, I was able to use my firsthand experiences as a point of reference to influence some of my design and feature choices. I saw this as an opportunity to design my ideal platform, while also conducting user research with other freelancers in my target audience.

Being passionate about the work that I do, I felt it very necessary to create a platform that helps to address some of the issues and pain points that I myself have experienced as a freelancer. One of the biggest pain points I aimed to address in this project was the issue of accurate billing, and setting up efficient infrastructure to ensure prompt payment from clients.

Phase 1

Research & User Understanding

💭 Defining the Problem 🤷🏾

Managing multiple clients and projects is a part of running a business as a freelancer. However, sometimes clients don’t pay on time. Here we try to understand the payment challenges that freelancers are facing.

🗣️ Interviews & Surveys 📝

For this project, the user research methodologies I used were mainly focused on gaining insights into the target users and their pain points, this provided valuable information for the design process.

As a freelancer, and someone that falls into the category of the target audience, I was able to rely on some of my own personal assumptions to guide my design process, however, I was extremely fortunate to have a diverse community of fellow freelancers in varying fields that I could reach out to for the user research phase of this project. Five of my friends graciously agreed to participate as the primary users in this research phase.

Some examples of questions I asked were...

"What method or platform do you currently use to track client payments?

"Have you had any difficulties with your current payment tracking method? If so what are they?

"What expectations would you have for an ideal payment tracking platform?

I also sent them a link to a Google Forms survey to collect quantitative data and gather a broader perspective on their needs and preferences. The survey included questions about their current payment tracking practices, pain points, desired features, and their willingness to adopt a new platform. Their responses provided valuable insights into their struggles with delayed payments, difficulty managing multiple clients, and the need for a streamlined payment tracking solution.

The survey responses in particular helped identify common trends and patterns. For example: the survey results showed that the majority of the freelancers faced challenges with payment tracking, such as delayed payments and difficulties in organizing payment records. This data confirmed the widespread need for a reliable payment tracking platform.

Using the insights I gained from the survey and interview responses, I was able to craft detailed user personas, empathy maps, and user journey maps. These visual representations are rooted in the authentic insights shared by each participant, ensuring that the Mercury+ platform is not only functional but deeply resonates with the real experiences, goals, and frustrations of freelance professionals.

(click on each image for a closer look!)

📊 Competitive Analysis 💼

For the competitive analysis I examined a few existing time tracking platforms, including one that I have personally been using for the past few years of my freelancing career. Some of the platforms I examined were:

I studied and analyzed each of them to understand their strengths, weaknesses, and unique features. This research helped identify opportunities for differentiation and informed the design decisions for Mercury+. By examining competitor platforms, I gained insights into industry best practices as well as potential gaps in the market.

For example: The analysis revealed that some existing platforms offered basic payment tracking features but lacked comprehensive reporting and integration capabilities. This finding highlighted the opportunity to develop a platform like Mercury+ that would offer robust reporting and seamless integration with popular payment gateways.

While I was unable to effectively conduct any usability testing or iterative design for this project, the user research methodologies I was able to employ, such as interviews, surveys, and competitor analysis, provided valuable insights into the needs, challenges, and preferences of freelancers in relation to payment tracking. These insights formed the foundation for the subsequent design and development phases, enabling the creation of a platform tailored to address the identified pain points and offer a valuable solution for freelancers.

Phase 2

Information Architecture
& Feature Design

📚 Building A Solid Foundation 🔨

My goal for the information architecture was to provide a solid foundation for a payment tracking platform that caters to the needs of freelancers. It ensures seamless navigation, efficient payment management, and timely reminders for clients to pay, ultimately addressing the pain points identified in the user personas, empathy maps, and survey responses.

✨ unique features 🚀

Three specific features I wanted to integrate into the structure and design were a Payment Alerts feature, a Task Time Tracker, and a Quick Notes feature.

📈 Proactive payment tracking 💰

As a freelancer who prioritizes efficient financial management and timely payments, I made it a top priority to include a Payment Alerts feature in Mercury+. This feature serves as a vital tool to ensure that users receive payments promptly and maintain healthy cash flow. By integrating the Payment Alerts feature into Mercury+, users are empowered with a reliable system that prioritizes their financial well-being.

The importance of the Payment Alerts feature on a platform like Mercury+ is manifold. It allows for:

  • 👍🏾  Proactive payment tracking;

  • 👍🏾  Timely reminders for clients; improved cash flow management;

  • 👍🏾  Personalized alert settings, and

  • 👍🏾  Seamless integration with financial tracking.

The Payment Alerts feature in Mercury+ effectively solves the problem of delayed or missed client payments for freelancers, and places the user experience at the forefront. By setting up customized payment alerts, freelancers can proactively track and remind clients about upcoming payment deadlines, ensuring timely payments and improved cash flow management. This feature acts as a reliable mechanism to mitigate the frustration and financial challenges associated with late payments, providing freelancers with peace of mind and a more streamlined payment process.

✅ Accurate Billing and Productivity Analysis 📊

The inclusion of a project timer and task tracking function was done with the intention of providing freelancers with the ability to track time spent on specific tasks or projects for each client.

The time tracker feature is comprised of:

  • 👍🏾  The ability to name and describe the task the user is working on.

  • 👍🏾  The ability to assign a project and client to the specific task that’s being time tracked.

  • 👍🏾  The ability to add tags to the task which can aid in the composition of invoices.

  • 👍🏾  The ability to set an hourly rate for the task and project, as well as the ability to set the currency in which the rate will apply to.

  • 👍🏾  The ability to see how much the user earned based on the set rate, and the time spent on the task.

  • 👍🏾  The ability to resume the timer for specific tasks, even after the task has been entered into the system.

  • 👍🏾  The ability to duplicate or delete entered tasks.

  • 👍🏾  A weekly summary showing the number of hours logged, as well as the amount of money earned based on the time tracking entries of that week.

This feature allows for accurate billing and helps freelancers analyze their productivity and project profitability. By integrating it into the existing structure, freelancers can seamlessly manage their projects, payments, and time tracking in one unified platform.

🕒 Efficient information Management 📝

As a freelancer, I understand the importance of staying organized and keeping track of important information related to my clients and projects. That's why I decided to integrate a Quick Notes feature into the side navigation bar of Mercury+. This feature allows me to jot down quick reminders, ideas, or client-specific details without having to switch between multiple applications or tools.

The Quick Notes feature is highly relevant and essential for freelancers because it provides easy access to important Information; improved efficiency and productivity; seamless integration with workflows, and enhanced collaboration and communication. In summary, the Quick Notes feature integrated into the Mercury+ side navigation bar is a valuable addition that:

By having this feature readily available, users can focus on delivering high-quality work while having essential notes and reminders at their fingertips.

  • 👍🏾  Empowers freelancers to stay organized,

  • 👍🏾  Efficiently manages client information, and

  • 👍🏾  Streamlines communication within the platform.

By having this feature readily available, users can focus on delivering high-quality work while having essential notes and reminders at their fingertips.

Phase 3

Wireframing &
Mockups

🖋️ Creating the Blueprint for Mercury+ 📐

The wireframing and mockup stages were crucial in visualizing the user experience. During this stage of the project, I focused on creating the blueprint for the Mercury+ platform's user interface.

Wireframes allowed me to outline the layout, structure, and functionality of key pages, ensuring intuitive navigation and a clear user flow. These wireframes served as a foundation for the subsequent mockup stage, where I transformed the wireframes into high-fidelity visual representations. Through the provided mockup, I refined the aesthetics, typography, and UI components of Mercury+, bringing the design to life and providing stakeholders with a realistic preview of the final product.

🎨 Design and Stylistic Choices ✨

The name Mercury+ is was inspired by Greco-Roman mythology, specifically Mercury, the god of merchants, trade, and commerce. Since this is a platform geared towards freelancers, effectively entrepreneurs, I felt it was an appropriate name and origin story.

🔵 Brand Identity and Colour Palette 🟡

For the colour palette I used mainly darker, navy blue hues, with light blue and a gold, almost-mustard-yellow colour as accents.

midnight
twilight
denim
aqua
marine
gold dust

The choice to incorporate blues and yellows in the brand identity of the Mercury+ platform is based on the relevance of colour psychology. Colours have the power to evoke emotions, convey meanings, and shape perceptions. In the context of Mercury+, the selection of blues and yellows serves specific purposes.

The use of blues in the brand and interface design reflects trust, reliability, and professionalism. Blue is often associated with qualities such as stability, confidence, and security, which are important considerations when dealing with financial matters like payments and invoices. It instills a sense of calmness and reassurance, creating a positive user experience and promoting trust in the platform. It is also a colour I saw integrated often into tech-related platforms.

As an accent colour, yellow brings energy, optimism, and creativity to the visual design of the platform. It serves as a vibrant and attention-grabbing element that adds warmth and positivity to the overall brand identity. Yellow accents can be strategically placed to draw users' attention to important elements, such as call-to-action buttons or notifications, fostering a sense of excitement and engagement.

Light blue, as an accent colour, complements the primary brand colour palette and provides a sense of tranquility, trust, and professionalism. It adds a touch of sophistication and reliability to the visual design, making users feel confident and secure while using the platform. Light blue accents can be used to highlight key information, create visual hierarchy, or indicate areas of focus, enhancing the overall user experience.

By using yellow and light blue as accent colours, the Mercury+ platform strategically combines the energy and optimism of yellow with the calmness and reliability of light blue. This colour combination aims to create a visually appealing and psychologically impactful interface that resonates with users. The yellow accents infuse the design with liveliness and creativity, while the light blue accents instil a sense of trust and professionalism. Together, they contribute to a cohesive and engaging brand identity for Mercury+, enhancing the overall user experience and promoting a positive perception of the platform.

The combination of blues and yellows in the brand identity of Mercury+ creates a balanced and harmonious visual appeal. The blues provide a solid foundation of reliability and professionalism, while the yellows infuse the design with energy and a positive outlook. This colour scheme aims to resonate with freelancers, who are often seeking a sense of security and motivation in their financial management journey.

Moreover, the choice of these colours aligns with the intended user experience of the platform. Freelancers can feel confident and secure in managing their payments and financial records, while also experiencing a sense of excitement and inspiration as they navigate through the platform's features.

Overall, the use of blues and yellows in the brand identity of Mercury+ contributes to creating a visually appealing, emotionally engaging, and psychologically relevant experience for its users, aligning the platform's aesthetics with its purpose and enhancing its overall brand perception.

🔤 Typography & Fonts 📖

I primarily used the Spartan MB typeface in varying font weights in the mockup design of Mercury+. This was done intentionally to enhance readability and modernity. Sans serif fonts have clean lines and lack decorative flourishes, making them highly legible on digital screens. The use of sans serif fonts brings a contemporary and minimalist aesthetic to the platform, ensuring that users can easily consume content, navigate through the interface, and focus on the essential information without distractions.

Title

Spartan MB - Bold

Heading

Spartan MB - Semi-Bold

Body

Spartan MB - Regular

🎨 Ensuring an Intuitive User Experience 👤

In crafting the mockup design for Mercury+, I infused my design process with interactive design principles that prioritize a personalized, visually appealing, and user-centric interface. My aim was to create a seamless and enjoyable journey for users, allowing them to navigate, interact, and accomplish tasks with a sense of ease and satisfaction.

Conclusion

Insights &
Final Thoughts

I enjoyed researching and designing for this project, the scope and process helped me put into practice designing and advocating for the user. Conducting the user research and identifying the pain points and needs of my target users gave me a lot of insight into the practice of empathetic design, and putting myself in the shoes of the user, which was made exceptionally easier in this case, being that I also fall into the category of the target user group.

This specific project also made me cross examine the platform that I had gotten used to over the past few years, and helped me to identify my own pain points and goals, as well as the areas in which it excelled and lacked.

In analyzing the different platforms, I was also able to take note of the industry best practices among like platforms, I was able to take the best features I saw from each of them, restructure and amalgamate them to bolster the design and features of Mercury+.

Although my previous platform has worked well for me so far, conducting competitive analysis showed me how little effortI initially put into finding the platform to begin with, it showed me that there were better options out there for me.