Electrolux Dashboard and Landing Page
UI Case Study
Design of a landing page for a dashboard, showcasing the usage of colours, typography, components, atomic design, and more.
Feb 2022–March 2022
The e-commerce dashboard that I had created a while ago couldn’t be left without a proper landing page that would attract recurring and new customers to take action and either book a demo or be tempted to decide on a subscription. As I have never created a dashboard before, nor a landing page for any SaaS products, I decided to conduct some research. Below is the dashboard I designed.
To help me visualize the direction I’d like to take in terms of the UI design, I decided to create a persona, which would sum up most of the end-users of the page and dashboard.
I created a mood board to get inspired. I collected some screenshots of real-world websites offering SaaS products. I also looked for inspiration on Dribbble. Here are some examples I got inspiration from.
A picture of a young woman pointing at the website’s welcome message, which subconsciously suggests reading it;
A mock-up of a laptop with the open app on it;
Clean and fresh look with nice shapes in the background.
Another picture of a young and smiling woman, by which we resonate with the website more, as photos of real people give the human feel;
Cut-outs from the app, which demonstrates what it has to offer.
Sass Landing UI by Ofspace Digital Agency
Big picture of the dashboard with cut-outs once again;
A lot of whitespace and subtle shadows with a nice, clean, and fresh look.
To attract the young generation of professionals and make the product feel like it’s fresh and modern, I decided to go with vibrant and light colours.
By defining a colour system, I ensured I have a controlled and consolidated palette of colors, so everything is maintainable;
I went with the HSL colour model to get the exact tints and shades of the main colours. For time-saving purposes, I used a Figma plugin called “Color scale generator” to generate them;
I scaled colour names between 0 and 900 based on HSL’s lightness;
To reduce the cognitive load, enhance decision-making speed, and make it easier to maintain the colour system, I limited tint and shade quantity from 10 to a maximum 5.
These are the colors that are most frequently used across my UI and impart a distinct identity to the product;
Using these colours strengthens brand awareness;
I decided on blue for simple reasons:
- Surveys show that the majority of people see blue as their favorite color;
- It’s a universal and safe colour;
- It’s often associated with tech and innovation;
- It represents reliability, credibility, and makes the product seem trustworthy;
- Blue evokes a sense of balance as well as calm intelligence;
- The most common types of colour blindness can see the colour blue;
700 is the CTA colour.
These colors highlight or complement the primary color.
These include shades of grey, all the way from white to black. These are used for backgrounds, text colors, etc., and form the majority of my UI;
I added a slight hint of blue to bring more liveliness to these colors;
600 is the colour of the body text.
To maintain consistency and visual hierarchy, I created a scalable type scale, using “Type Scale - A Visual Calculator” by Jeremy Church.
I went with a medium-scale, 1.200 — Minor Third, as it has a clear hierarchy and helps organize sections with subheadings. I rounded up the numbers. It's a good idea to stick with whole, even numbers;
I also added some custom, tailored to my needs, sizes, as I wanted to have some more control. So, e.g., besides having only one basic size for a paragraph (16), I also added 14 and 18;
For things like metadata, smaller fonts can also be found, from 12 to 10;
There are also sizes for the mobile version to maintain responsivity. Thus, H1 for desktop is 48, but for mobile, it’s 34;
Line-heights differ, as, e.g., headings don’t need as much line-height as, e.g., a paragraph. It all comes down to readability.
Headings for desktop
Headings have only two fonts; semi bold and bold;
Line-height for headings was calculated simply by multiplying the size by 1.2 (which, as previously stated, was chosen as the type scale). Therefore, if H1 is 48, I multiply it by 1.2 and the result is 57.6. I round it to a full and even number, and we’ve got 58. I adjust it a little bit and decide to go for 56 for better readability;
For better readability, headings have a smaller value for letter-spacing.
I set the basic font size as 16 (1rem), as this is the browser default and is recommended by many as the perfect size for the main body text.;
A good rule of thumb advises to set the line-height at around 150% of the text size for the paragraphs.
I chose Inter, which is under the Open Font License, for both the landing page and the dashboard;
I think Inter is a great font, as it’s universal, widely-known, and looks professional;
Inter also provides many styles. I only used Regular, Semibold, and Bold;
As it’s stated on the Google Fonts page: “Inter is a variable font family carefully crafted & designed for computer screens.”
For the icons, I chose Feather, a collection of open-source icons.
Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility;
The size and stroke width are both customizable. As the icons are .svgs, they look great in any size;
Sometimes I had to use more specific icons. To find them, I used Figma’s plugin, “Icons8,” and looked for icons that were similar visually to Feather icons.
Alignment and grid
I used an 8-point grid system and a 4-point grid (smaller elements) for the project. I choose the default width for the desktop, which is 1440. I set the margins to 110. For the margins within groups, I used 112, with margins between groups at 48, 40, 32, 24, and 16. Also, the designs were created using Auto Layout to assure responsivity across different screen sizes.
Throughout creating the landing page and dashboard, I went with the Atomic Design Methodology. As the author of this approach, Brad Frost, explains: “Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.” What’s more, he says that “[a]tomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.” Now, for the sake of this case study, let’s see how I approached this methodology while building a header (which is an organism itself).
The header on my page consists of a logo, set of links, and a CTA button.
I simply used Figma’s “Logoipsum” plugin;
The vector in the logo is one atom, and the text is another one. Both create a molecule.
Set of links
One link is an atom, a set of them a molecule. Later on, when I create a component out of the set, I can put it in the header and, e.g., change the spacing between the links at any time, and that will be reflected in anywhere I’m going to use the header.
Later on, we've got a button with an icon. It's a molecule, as it consists of more than one element, text and an icon.
Components and variants
Creating components and variants speeds up the work and lets us keep everything in one place and make the design cohesive and coherent. What’s more, if we have to create multiple screens, it’s always good to create components out of bigger elements, as, e.g., if we want to change something in the header, we can do that only by adjusting it in the master component and the changes will be visible on every screen. It’s also great for reusable elements, like buttons or cards. For the sake of this case study, let’s see how I approached this while creating a primary CTA button.
Primary CTA button
There are variants for types (such as Primary, Secondary, and Tertiary), states (Default, Hover, Pressed, and Disabled), and whether the button has a right or left icon or no icon at all.
Now let’s take a look at the full page.
For the mobile version, I adjusted the font sizes, re-arranged the navigation bar and sections. Cards in the “Testimonials” and “Pricing” sections can be scrollable horizontally.