Transforming a dull website, with little content, into an exciting well organized & modular Landing Page.
Understand
Main Pain Points
Information Architecture
IA needed a completely rearrangement as the current website at that time had several links with very little content, which made users do extra click-work to get to where they want.
Design
Design was boring, old-fashioned and not user friendly, as main actions within the website weren't clear at all.
Ideate
Paper Wireframes
Rapid iterations of wireframes on paper
To iterate quickly and easily on new layouts and IA structures numerous paper wireframes were made as fast as possible in order to transform a several-page website into a single Landing Page .
Design
Key Mockups
Design
Colour Palette
Kleup's colour palette was made up of 3 main colours (Primary: #3F434B; Secondary: #24D3C4 and Tertiary: #510BDB). In order to make the palette broad enough Primary hues were also added to it, from 900 to 50.
Design
Iconography
View of the icons grid
40x40px icons
20x20px icons
In the end a set of around 30 custom icons was created. The set was divided in 2 different categories, as regards size: those within a 40x40px grid and those within a 20x20px grid. Most icons created have: 1. Rounded corners from 2px to 4px, 2. Stroke weight: 2px and 3. Stroke Cap Butt.
Design
Typography
Two fonts (Regular & Light) from a sharp and modern Sans-Serif typography were chosen to be used within the project. Stolzl fonts are part of the archive of Adobe Fonts, designed by Mariya V. Pigoulevskaya from The Northern Block. They offer perfect legibility (chief objective), even at very small sizes, and properly used they bring about: rhythm, elegance and modernity.
Design
The Grid
In order to make design task easier, faster and more consistent across screen resolutions a 12 column grid was established to lay the design within desktop. The 12-column grid was transform into a 2 column-grid for mobile and smaller screens.
Take aways
Goal Accomplished
After various iterations on paper wireframes and, eventually, mockups, a modern, exciting and with a well structured Information Architecture Landing Page was launched. Thanks to its new IA structure, and a sober yet exciting new design, users can now navigate the site in a faster and more intuitive way than in the past, and best of all, reach their goals effortless.