OVERVIEW

The rise of technology has made it easier to find freelance work, which made professionals work remotely easier and allowed the freelance economy to grow annually. However, running a personal business and being a creative talent can be an overwhelming experience, especially for those who never freelanced before.

One of the most challenging tasks new freelancers face is their ability to estimate their project duration. If you ever freelanced before, you probably have estimated project duration for clients. No matter how fast and efficient you work, you would feel like you work more than the estimated time in the early freelance years.

As a graduate project at VFS, I built InScope, a web application for new freelancers in the creative industry. I had around 12 weeks to develop the concept, research and design of the app. To have a quick glance at my process, check out the case study video below.

RESEARCH

Interviews & Survey

To dig deeper into my target audience’s problem, I conducted surveys and interviews, asking questions about budget estimation, their frustrations, their work process and these are my findings: 

  • Freelancers estimate projects based on their past experiences, but they find that estimation is not accurate because every project is unique
  • Very few of participants have financial and project management background
  • Hard to overview projects when working on multiple projects

Articles & Blogs

I wanted to dig deeper into my target audience, particularly where they make mistakes and what they can do to make their estimate more accurate. I started this by reading a lot of online blog articles ran by creative freelancers. I also discovered a forum where freelancers share their problems and exchange tips.

Based on those, I found that experienced freelancers had a habit of writing a work diary. They keep a record of not only the work hours, but also the creative process, and what they can do better the next time. The diary also helps them when they work on a similar project; they would have a better understanding of their time budget and they know exactly what steps to take.

Competitive Analysis

From the early stage of the research process, freelancers told me that they use time management applications such as Harvest, Timely, and Rescue Time to track hours and to send an invoice to their clients.

I conducted analysis on those applications and I discovered it was difficult for users to find a certain project because projects were only saved in a chronological order. Users had to go through all the projects without being able to sort projects by key project information such as project size and category.

IDEATION

From the insights that I gathered from the research stage, I was able to imagine what InScope would do at a high level.

I sketched a user journey to visualise how InScope could come into the user’s life. During this process, I tried to make the app to be intuitive and natural to the user’s work process.

Then I defined the functions and features of the app more in detail, which helped me tremendously to build a backbone of the application. When I finalised this step, I jumped to card sorting

USER JOURNEY

USER EXPERIENCE

I began this stage by creating rough sketches of various user flows. Then I made them as a clickable prototype in InVision to conduct user testings and collect feedback. I updated the prototype after a few more user testings.

Here are some of the highlights of the design changes that I made based on user testings:

By the end of wireframe/prototyping stage, the user flows became much simpler and InScope’s information architecture became more organised and easier for the user to use.

INITIAL USER FLOW
REVISED USER FLOW

Art Direction & UI Design

Before I start designing in pixels, I wanted to give a personality to InScope. I questioned myself “If InScope was a person, how would I describe them?” 
I started writing down all the brand attributes that I could think about with InScope and then I narrowed them down to three: Helpful, encouraging and friendly. Then I chose an archetype to have a stronger sense of identity.

Branding

BRAND ATTRIBUTES
ARCHETYPE
LOGO

Colours

Using IBM’s colour meaning resource, I chose yellow because it is associated with creativity and activity, which fits my target audience, and then selected navy because it evokes a feeling of trust and reliability. Colorable helped me to adjust brightness and saturation of these two colours so they have a good contrast when used on top of each other. Secondary colours were also added later to support the primary colours and to deliver a clean interface look.

COLOUR PALETTE
COLOUR USAGE EXAMPLE

Illustration

I created simple and whimsical illustrations on the onboarding, alert, and notification sections/pages to make the app appear more friendly and encouraging, and also to draw a visual attention to the users.

Motion

After all the UI elements were created, I pulled every asset in After Effects and created a custom animation for sections like “New project” to give users feedback on their actions and to provide visual continuity.

PROJECTS
PROJECT DETAIL
TIMER
NEW PROJECT