Skip to main content

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.

Where

Poland

What

Landing page

Why

Portfolio project

Role

Designer

Category

E-commerce, SaaS

When

Feb 2022–March 2022

Project overview

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.

A dashboard showcases the „Overview” tab with 5 sections, such as Analytics with 4 different cards, such as „New customers,” „New orders,” „Average sale,” and „Gross profit.” The second section includes „Revenue” for a specific year with the amount of profit on the left and months on the bottom. The second section is „Customers” with a pie chart, showcasing the percentages of Current, new, and retargeted customers. The 4th section shows top orders today, and the 5th section shows popular products in general.

Proto-persona

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.

A proto-persona of Anna, who’s a young, powerful, and ambitious woman, for whom work is everything. She set up a start-up for eco products two years ago, and now it’s growing rapidly with more and more people interested in obtaining such products as they want to feel closer to the Earth. Her main goal is to maintain her shop with one click and have all the data concerning her shop at hand, and her main frustration is that she’s scared of not being able to keep up and forget about something.

Mood board

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.

Elevato

  • 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.

Bench

  • 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.

Colours

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.

Primary colours

  • 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.

5 shades of blue, from the brightest to the darkest in a hierarchical order: 100, 600, 700, 800, and 900.

Secondary colours

These colors highlight or complement the primary color.

2 shades of turquoise, from the brightest to the darkest in a hierarchical order: 100 and 700.

Neutrals

  • 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.

5 shades of grey, from the brightest to the darkest in a hierarchical order: 100, 300, 400, 600, and 900.

Semantic colours

Success

3 shades of green, from the brightest to the darkest in a hierarchical order: 50, 500, 700.

Warning

3 shades of orange, from the brightest to the darkest in a hierarchical order: 50, 500, 700.

Error

3 shades of red, from the brightest to the darkest in a hierarchical order: 50, 500, 700.

Typography

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.

Paragraphs

  • 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.

Typeface

  • 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.”

Icons

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.

Atomic design

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).

Header

The header on my page consists of a logo, set of links, and a CTA button.

Logo

  • 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.

CTA button

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.

Accessibility evaluation

To assure the website and its content is accessible and meet at least AA of the WCAG, I run Figma’s plugin “A11y - Color Contrast Checker” and then checked the most prominent elements, such as buttons, colour of the body text, headings, and subheadings by hand with “Contrast Checker” by WebAIM.

Accessibility evaluation

To assure the website and its content is accessible and meet at least AA of the WCAG, I run Figma’s plugin “A11y - Color Contrast Checker” and then checked the most prominent elements, such as buttons, colour of the body text, headings, and subheadings by hand with “Contrast Checker” by WebAIM.

Accessibility evaluation

To assure the website and its content is accessible and meet at least AA of the WCAG, I run Figma’s plugin “A11y - Color Contrast Checker” and then checked the most prominent elements, such as buttons, colour of the body text, headings, and subheadings by hand with “Contrast Checker” by WebAIM.

Dark blue heading 1 on a white background has an 11.97 contrast ratio; white text on a button with a light blue background has a 5.92 contrast ratio; and dark grey text on a white background has a 7.57 contrast ratio.

Full page

Now let’s take a look at the full page.

Mobile view

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.