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.
Our classic lineart. It’s neat, but too simple.
Highlights. It’s catchy, it’s attention-grabbing, it fits the mood perfectly.
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:
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.
And this is the final result:
The Finer Details: How Did We Get Here
First off, we settled on light blue from the logo and CTA as the primary color.
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.
More housekeeping: we removed all the dividers, the outlines, all the visual noise distracting from the functionality.
And to keep the styles unified, we used the buttons and other elements from the site.
The final touch: for the profiles without photos we drew some cute avatars keeping the same friendly mood.
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.
Don't be a stranger
Subscribe and never miss a story
5 reasons why we love to use line illustration
VCV: Less Is More, A Case Story On Being Straightforward
How Art Influenced Graphic Design and How Graphic Design Influenced Web Design
Basic Types of Logos, Their Subtypes, And How To Design The Cornerstone of Your Branding Identity