Electrolux

Save your time and grow your business right now

Project overview Persona Mood board Colours Typography Icons Alignment and grid Atomic design Components and variants Accessibility evaluation Full page Mobile view

Where

Kluczbork, 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.

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.

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

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 colourblindness can see the color blue.
  • 700 is the CTA colour.

Secondary colours

  • These colors highlight or complement the primary color.

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.

Semantic colours

  • These are the colors that communicate purpose. They help users convey messages.

Success

Warning

Error

Typography

To maintain consistency and visual hierarchy, I created a scalable type scale, using “Type Scale - A Visual Calculator” by Jeremy Church.

Headings

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

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. I think it fits.

  • 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 states and whether the button has a right or left icon.

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.

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.

Get in touch

Contact me

Do you want to collaborate, say hello, or offer me a job?

I'm currently unavailable for work.

But you can always

drop me a line

. I'd love to hear from you! 😊