Leiaud.com.

Here you go, the chili of websites
A rabbit living inside the eye of a boy doll. A stripe of vertically aligned programming language sliding in and out. And abstract shapes transforming as you move your mouse across the screen. Crafting the identiy and Webflow site of Danish agency Leiaud was never boring.

The final product.

A Webflow website, visual identity and marketing material
The design is lively, different and doesn't conform to many UX standards. While this might lose some users in the first go, the idea was to capture the interest of those who stayed, and stand out in the crowd. We animate, we use emojies, we have ultra short videos and take many more bold creative decisions.

Required skills.

Crafting the design
  • Conceptualisation
  • Webflow design and development
  • After Effects
  • Premiere Pro
  • Marketing strategy
  • Weglot for multi-language
  • Cookieinformation for GPDR
  • GTM for GPDR
  • Copywriting

Executing team.

Key responsibilities
  • 1 client
  • Myself as designer, developer and strategist

Deliverables.

Design hand-offs
  • Webflow website with 4 subpages
  • Internal design guide
  • Internal components library
  • Facebook carousel ads
  • 4:5 video ads
  • Strategic communication over Slack

Overview.

PROBLEM | Conceptualise, design and develop a freelance platform that is eye catching and different

CONTEXT | Leiaud is freelance dealer, matching top freelancers with companies, so they don't have to spend days tracking them down. The company had just started when I was approached to give the company birth and get them online.

Design patterns.

Vibrant colors and illustrations | Most agencies feature a minimalistic website with a white background, a clean typography and serious tone. In order to appeal to as many people as possible and don't scare away Enterprise customers who have to mitigate risk. For Leiaud; let's do the opposite. A strong saturated salmon orange, a vibrant purple, over the top illustrations and silly emojies. While other agencies do take similar approaches, one thing is certain - in the space where Leiaud is to compete – in the Danish freelance space – this is not a typical visual identity. My idea was to follow this path to communicate that by hiring a freelancer on Leiaud, you're ensured a high level of creativity.

overlapping shapes | Cosmetic shapes like a small green rectangle, a purple stripe, a semi-transparent overlay, a rolling ball and similar shapes worked to spice up the design and help break the common 12 by 12 grid. The shapes make it seem more chaotic and less organised, communicating that Leiaud is the naughty boy in the class.

Huge letters | When blown up letters start becoming shapes. Like the R below, it binds to a shape like the yellow circle like a stilleben. At the same time it's a letter, meaning with these kinds of layouts, we communicate both the abstract design, clean Bauhaus-like designs and the sharp lines of typography, without having to show real portfolio examples from Leiaud's catalog.

Animations | As seen in the small GIF below, the website has a lot of animations that help bring some life to it. It was important, though, not to make the navigation too advance, as the customers would often be less IT experienced users. Therefore, animations were 1-2 second intro loading animations, fast menu on click and cosmetic animations like mouse hoverings, that didn't obstruct the natural flow.

straight to the point | While the visuals should be experimental, the content should be straight to the point. I decided to position lists of services as the first thing after the hero section, together with the purple grid shown below of programming languages Leiaud can provide freelancers for. The orange circles behind the grid loop an animation that doesn't obstruct the job to be done; understand the services right away and spot the one you're after.

Grid based footer | A footer is often a couple columns, a newsletter signup and social media icons. My idea was to create a collage like in the image below, where the typical information is ripped apart and thrown into a mess of a grid where the user can go on a micro-adventure search for the information they're after. To guide them, the most important bits are highlighted, like the general contact email.

Marketing material | Translating the brand traits into marketing material was great fun. I stitched together the most acid trip like clips of geometric shapes flying through space and the origin of galaxies, threw in some punk rock and edited it with fast and sharp transitions. The result was the video below, which laid the foundation for the overall communication style of the company, which was then carried out in other formats like Facebook Carousel ads and more.

Learnings and reflections.

Designing fast | This project was done in a week by me as a sole designer and developer. I had free creative decision to carry it out, which was great fun and shows a trusting client. Designing this fast is a perfect match when the result is supposed to be chaotic and has few stakeholders in the end who need to approve of the brand direction. This was the case here, and everything was approved in the first go.

A balance of adhering to UX rule | How crazy can you make a website menu? Not very. You risk pissing people off right of the bat, which will make them leave and never return. Your creative ideas further down the ux funnel are then worth nothing. On the other hand, making the traditional hamburger menu wouldn't communicate the DNA of the company very well either. Striking these balances was particularly interesting in this project, especially under time pressure to deliver it within a week.

See more.

Leiaud is still active and a few more sections have been added after the initial delivery of the project.