Brand & UX Design

Freelancer.com May 2011

Freelancer.com is the world’s largest freelancing, outsourcing and crowdsourcing marketplace. They connect over 13 million employers and freelancers globally from over 247 countries, regions and territories.

freelancer mascot illustration
logo light
logo dark
typography

Refreshing the brand

Being an early-stage startup, the branding for the company hadn’t yet been well defined. The aim was to create a fun and colourful brand concept that incorporated the existing logo design and hummingbird symbol. After throwing around a bunch of different ideas, we decided to take an illustrative approach. We used sharp angles and a unique illustrative style to create an origami world of birds as seen below.

I tweaked the existing logo to tidy up colours, kerning and alignment issues (above left) and created some branding guidelines to keep the company image on track as a whole. To give the typography a unique aesthetic we used Neo Sans (above right) for large headings and Arial for body text. We used bright, vibrant colours to keep things fun and friendly.

illustration style
illustrations
colour palette
landing page

Landing page design

I designed this landing page for a Scavenger Hunt competition that we were holding at the time. The design needed to be bright and exciting to encourage people to participate. I added some subtle animations to the page by making the stars scroll across the sky while the bird hovers slightly up and down. It’s always nice to add little extras like this if there’s time as it can make a big difference to the final product.

sitemap
wireframe sketch

Designing the interface

The interface of the application was also in need of some love, so the design team and I put together some new ideas to simplify the layout of the interface while still maintaining the same functionality. After numerous rounds of collaborative sketching, we put together some wireframes that demonstrated our concept.

We made a few key changes to the layout and structure of the application, some of which can be seen below. Messages, notifications and settings were moved into the top bar to declutter the header area. Tabs were used to separate the other parts of the application and to simplify the navigation. The page revolves around an activity feed which drives engagement with the application.

dashboard user interface

To ensure that notifications were always visible but not in the way we moved them into the top bar as seen below. A red notification badge lets users know when there are pending notifications to be read. To help users stay organised, all the active projects were moved into their own tab seen below. Users can easily filter their work using the side menu and can drill down into each project.

work listings user interface

Ongoing optimisation

The work mentioned above is just the beginning of a long journey of ongoing optimisation and user testing. Customer needs are always changing, so it’s important to keep listening, testing and adapting, one step at a time.