LaborX: Business in UI, Party on the Site

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 line art. 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.

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