Designing a Dashboard for a Student Freelancer

Nowadays the market for online freelance work via website platform is saturated on both ends: an abundance of odd jobs for minimal pay, and an abundance of competition willing to be the lowest bidder. This makes it difficult for a student to begin getting serious freelance work experience related to their field of study. Top Graduate offers a solution for Master’s students, where they connect students looking for freelance work with a professional proposition suited to their field of study. What they were missing at that time was a functioning dashboard and web-application. So that is what I designed.

Researching students’ workflows and painpoints

I designed the Top Graduate web application to be a platform where freelancers can not only send and receive proposals, but where they can manage tasks across all of their assignments, and deliver milestones to their clients for validation.

So the first item on my agenda was to begin quantitative and qualitative user research through surveys and interviews of Top Graduate’s target users.

Here I am presenting my final solution and prototype, at a hackshow at Deskopolitan in Paris.

A temporary solution to a temporary problem

From the personal interviews, I found that a common feeling towards online freelance platforms was that they were either for making a bit of extra money (jobs unrelated to desired career), or they were for building up a clientele in the beginning of their career. These types of platforms were only ever seen as a temporary solution

Top Graduate has embraced this temporary position in the lives of their users by targeting those in their Bac+4 or Bac+5 years at French universities, and providing targeted and relevant assignments for them.

A business student demographic

My client, Top Graduate, seemed more than aware of this, and so they come at the solution from a different angle: they are a platform specifically for Master’s students (Bac+4 and Bac+5) to find clients and projects relevant to their degree. They carefully screen both the clients who are allowed to propose jobs, and the freelancers who sign up for the site. They know their platform will be a temporary solution for someone’s career advancement, and so they aim to make it the most efficient and relevant temporary solution it can be.

So with this information in mind, I asked Top Graduate for an overview of their user demographic. They responded that:

  • 65% of their users were male, 35% were female
  • All users were in either their 4th or 5th year of their Master’s degree
  • 50% of their users were studying business, 30% were studying engineering, and 15% were studying design.

This last point is one of the aspects that separates them from their competitors: 60–70% of most other freelance platform users were either designers or developers, depending on the platform. This crucial piece of information would inform my user research, my solution and my design decisions.

Pay per milestone and the agile methodology

However, that was not the only way Top Graduate stood out from the competition. Their payment method was not based upon finished projects, but rather finished milestones. Each project proposal would come with a predetermined set of milestones decided on by the client and validated by the freelancer, and payments would be made upon completion of each milestone before the freelancer would move on to the next. This encouraged an agile work method, and ensured the client was happy with how the project was progressing, and the freelancer was happy with receiving payments on time and client validation without wasting too much time.

Synthesising all the data and ideation

One question I asked when I surveyed users was what frustrated them the most when they used other freelance platforms, and by far the biggest user pain points were these:

  1. Bad site organisation
  2. Lack of professionalism
  3. Lack of relevant options​

Basically, students had more important things to spend their time doing than sifting through messy and unprofessional listings of freelance jobs. 

I used the research from the user demographics and the primary user pain points to make Daniel. At 24 years of age and as a Bac+4 Marketing student, Daniel is Top Graduate’s target user. The idea is to retain users from the first year of their Master’s throughout their graduation, with the possibility of keeping them connected with their regular clients even when they are no longer using the web application. Every design decision from here on out I made with Daniel in mind. And the question I wanted answered on Daniel’s behalf was this: 

How might we provide Daniel with organisation,  and the most relevant information to his chosen field of study and future career?

The Solution

The solution was, of course, a functioning dashboard for freelancers to find, send and receive project proposals. However, I was inspired by Top Graduate’s payment system, and wanted to create a feature that would help Daniel stay organised and manage his tasks efficiently. I wanted to implement a kanban-style task-management board which would be accessible by both client and freelancer.

Designing and iterating prototypes

Information Architecture

In order to lay out the various screens and pages in the most logical and intuitive way possible, I recruited users to perform card sorting exercises. This gave me a huge amount of insight into their thought processes when seeing the names of the categories.

Picture

Before I jump into Sketch and make the wireframes and prototype, I like to sketch out the screens on a piece of paper. This is relatively fast and makes it clear if there is anything missing, and allows me to begin testing the concept on potential users immediately.

Picture
Picture

Moodboard

I created a moodboard which would encapsulate the general brand feeling: the door to symbolise new beginnings, the man jumping across a chasm to symbolise adventure and leaping into the unknown, and the architectural image to symbolise “the view from the top” and to bring a feeling of modernism to the images. The yellow and gold are also in sync with Top Graduate’s brand colours, and represent success, achievement and general positivity.

Picture

Logo and iconography

The Top Graduate logo represents similar ideals: the laurel wreath is often used to symbolise a Master’s education, so here it represents the success and achievement that come with that. And the unfinished circle represents the user’s unfinished story. The icons I created for the web application I wanted to replicate the unfinished lines, while being simple and easy to decipher.

Picture

Typography

For the typography, I selected Belleza for the page titles and main headings, and Lato for secondary headings and body text:

Picture

Belleza was the font that I wanted to resemble as closely as possible the Top Graduate logo text, but it also gives off a very professional, charming, almost classic feeling of a serif font, while having the easy readability of a sans-serif font.

Style Guide

The colours, the atomic design, the buttons, the typography, all of these components were put together into this style guide, and sent to the client for validation:

Picture

The Final Prototype

Here is a video of the final prototype with all of the UI elements added together​:

User Testing and Next Steps

When I first began this project, I asked my clients the top five adjectives that they wanted to see users describe their final design. These were the adjectives they gave me:

  • professional
  • clear
  • simple
  • relatable
  • achievable

When I asked the users during testing which adjectives they would use to describe the design, below are the adjectives they selected:

Picture

What’s Next

Picture

What I designed for Top Graduate was one main user flow. What I can design for the future is a fully functioning web application, complete with responsive design and a hybrid mobile application.

Another idea I had for the future web application was a separate page for statistics and trends: the keywords that clients are searching for any given month, the average price for a certain milestone or type of project, the average hourly income for certain types of projects. This would help Daniel tailor the SEO of his profile and CV page.

Speaking of which, the application needs a highly personalised profile and CV page. Something professional-looking that can help Daniel find the most relevant projects to his studies and career trajectory.

I think with the current direction of the web application, and with these future possibilities implemented, Daniel is well on his way to getting the career experience he wants and needs.