A Dashboard for Freelance Designers

An iMac screen displaying the projects view of the H cue freelancer dashboard

The Problem

Currently, many freelance designers consult multiple platforms in order to keep their personal businesses organized. There are online tools that assist with accounting, apps that support collaboration and work breakdown structures, and documentation of different projects from different clients might be decentralized across email and shared files.

The purpose of this project was to design and build a dashboard for desktop that assists freelance designers in managing a variety of projects at different stages. My solution, called 'Hcue,' provides freelancers with their digital headquarters, centralizing the functionality that they need to maintain their businesses. This is a Masters project that I developed, using real-world insights from graphic designers, and their goals, needs and behaviours. Ultimately, I strove to solve the following:

Freelance designers need a single place to manage their projects so that they can work efficiently and effectively.

My Research

In 2018, I had the opportunity to research designers' needs regarding the management of projects in a collaborative online platform. I had developed an in-house creative briefing tool for the company I was with that bore some similarities to the functionality of this particular project. Using my existing knowledge as a starting point, I proceeded to research the current state of freelancer tools.

I spoke to a small sample of freelancers who work in graphic design and web design, and that was sufficient to tell be that SaaS systems such as Wave and Trello are the most popular. Having used both of them extensively myself, I was familiar with their features, yet I expanded my research into competing systems that offer freelancers the ability to meet the needs that I described above. Both my primary and secondary research gave me inspiration and data to assist me in developing 'Hcue.' My main findings were that users overwhelmingly wanted to see their go-to tools merged into one, and that certain features were particularly useful to them, such as the accounting functionality of Wave and Trello's Kanban format.

The Constraints

The Information Architecture:

The assignment was communicated with a very specific set of requirements related to the information architecture of the dashboard. Each of the freelancer's projects was to be comprised of five stages which included Research, Ideation, Concept Refinement, Revision and Submission. And each stage would have a status, which comprised either Active, Waiting, Complete or Future.

The Tasks:

As a component of this project, I was assigned tasks that user would have to carry out. They are as follows:

  1. See all current active projects and the current stage of each project
  2. See all active stage stages that could be worked on right now, and their deadlines
  3. Determine which stages are overdue
  4. Change the status of one current project stage from Waiting to Active, and update the details field with the client's input
  5. Input that 6 hours of work have been performed on one active stage
  6. See the overview of a single project, including all details and a detailed list of phases
  7. Add a Future phase to a project and increase the overall fee of the project by $300

My solution would enable each of these tasks to be completed by navigating between two screens at a maximum.

My Solution

The most common tasks are those towards the top of the numbered list, so I aimed to optimize the experience of giving freelancers visibility into the projects that they had on the go. Furthermore, I wanted a single screen to show them the high-level information about each of the Active projects, including their current stage and its deadline. Search, filter and sort features were inevitably critical to the usability of this dashboard, enabling users to easily discover the projects that needed priority or attention. The landing page provides an overview of All Projects with their information listed in a table.

The H cue Active Projects page

Clicking the second item in the Work side menu provides users with a glimpse of all Active projects only. Inputting additional information into the fields or drop-downs of the search bar can further enable users to locate particular groups of projects or even one specific project.

Clicking on any row item in the table brings the user to that project's Details page, which includes information like the name and contact details, the instruction of the brief, and five columns for the particulars of each stage in the project. Every field and drop-down can be edited anytime to keep records updated, and the page can be saved by clicking in the bottom-right corner. Recently accessed project pages remain as tabs at the bottom of the Work side menu for easy retrieval.

H cue Project Details page

While the assignment did not specifically ask for scheduling features, my research and experience taught me how helpful it would be for users to have another way to view and interact with an overview of their projects. I created another side menu card that I called 'Time' in which I developed a Kanban-style workflow for freelancers to see the highest-level project information and a quick and clear idea of the distribution of their work, as categorized under each of the four statuses.

H cue Workflow Page in Kanban style

Considerations:

The accessibility of this dashboard was a key concern throughout its development. Font sizes and styles were to be kept at a size and weight that would facilitate readability, and colour choices were contingent on legibility. I performed contrast testing on each of my background colours against the colours of the text and interactive elements, ensuring that they met WCAG standards at a AA minimum and AAA compliance almost everywhere.

The selection of the brand colours was influenced by accessibility for people with low or impaired vision. I searched for the colours that would provide the greatest contrast on white and light grey, while still appearing vivid and saturated to many users. Before I had settled on the final colour scheme for the dashboard, I uploaded it to a colour blindness simulator, verifying that the two brand colours would still look distinctively different from one another, and different to the background greyscale elements as well.

Branding was not the focus of this assignment; nevertheless, I intended to give my freelancer dashboard an identity of its own. Colour psychology is highly cultural, yet with the North American audience in mind, I selected purple to signify creativity, and a pink-red to represent passion, which are two primary traits among designers. The name of the tool was centred on the concept of a designer's personal "head quarters (HQ)."

Learnability was an important consideration for me, as I would want my freelancer dashboard to be adopted as quickly and easily as possible by many users. To support this, I integrated tool tips into the interface, and rather than providing solely declarative information about the name of each element, my hover tool tips provide procedural information about the use of the particular element, be it a button, a field or an icon.

Scroll to Top