LaborX: Business in UI, Party on the Site

How we built a website and UI for Sydney-based freelance jobs platform

LaborX needed a website and an interface. We believe that a good website stands out and draws your attention, whereas for the interface the functionality is the prime goal. This is how we made this contradictory mix work in unison.

I am impressed with the speed of the team. For two weeks of work, we have developed 3 Landing Prototypes, Landing, 10 internal pages, a lot of modal windows, icons, avatars, buttons, text fields, standard blocks, and so on. Embacy proved fast work can be [of] quality.

Saypulla Sheykhanov, Project Manager at LaborX

About The Company: Freelancing For Crypto

LaborX is a blockchain-based freelance jobs platform. We had to make a website that would stand out among all the other freelance platforms, as well as cryptocurrency sites. And then we had to bridge that style over to the interface and make it work without getting in the way of functionality.

The Website And The Style: About Labor But Not Laborious

We settled on the concept rather quickly: gifs of people coupled with graphic elements. Gifs, because it’s a service about people, and the stock photography would bore everyone to death — whereas animation would add something, something exciting. And then the graphic elements to support them and tie the style together, to bring out that it’s a website about jobs.

3D elements on the dark background. We don’t often get to do it, but we always like to work with 3D elements. We liked it, and LaborX liked it, but ultimately we decided that it could be too much for some of the potential freelancers and employers, not all from creative industries.

3D concept for LaborX website by Embacy

Our classic lineart. It’s neat, but too simple.

lineart concept for LaborX website by Embacy

Highlights. It’s catchy, it’s attention-grabbing, it fits the mood perfectly.

Highlights concept for LaborX website by Embacy

The final result is bright and vibrant, but not to the point of having to put up an epilepsy warning.

Interface: Functionality Doesn't Have To Look Boring

First try. At first, we just took the old UI and treated it like a coloring book. This came out suitably childish:

early LaborX interface by Embacy

Luckily, this excursion only took a day of our time, and we learned in practice that what’s good for the site could be terrible for UI.

Second try. So then we went in the opposite direction and took all the colors out, completely losing the connection to the site in the process.

early LaborX interface by Embacy

And this is the final result:

LaborX interface by Embacy
mobile LaborX interface by Embacy

The Finer Details: How Did We Get Here

First off, we settled on light blue from the logo and CTA as the primary color.

process on LaborX interface by Embacy

Then we switched the fonts to something more reserved and culled down all the variance. We had fonts in all shapes and sizes, and the interface is not an inclusive space. After unifying them, the result is much cleaner.

process on LaborX interface by Embacy
process on LaborX interface by Embacy

More housekeeping: we removed all the dividers, the outlines, all the visual noise distracting from the functionality.

process on LaborX interface by Embacy

And to keep the styles unified, we used the buttons and other elements from the site.

process on LaborX interface by Embacy

The final touch: for the profiles without photos we drew some cute avatars keeping the same friendly mood.

avatars for LaborX by Embacy

Outro

Bridging designs with vastly different goals is difficult, but as long as we keep the goals of each in mind, it’s doable. Surprisingly, the whole project took us only ten days. For this amount of work and aiming at our quality, this one went fast even for us. Professional magicians. Do not attempt this at home or in-house.

Check out this project on Behance and keep up with what we are up to on our LinkedIn.

Don't be a stranger

Subscribe and never miss a story

Got it! Now check your email
Oops! Something went wrong while submitting the form.

Also read

Design articles

5 reasons why we love to use line illustration

Case Stories

VCV: Less Is More, A Case Story On Being Straightforward

Design articles

How Art Influenced Graphic Design and How Graphic Design Influenced Web Design

Design articles

Basic Types of Logos, Their Subtypes, And How To Design The Cornerstone of Your Branding Identity

embacy

Want to recieve our awesome stories?

Got it! Now check your email
Oops! Something went wrong while submitting the form.

© Embacy. 2020