top of page
mockup-of-a-macbook-pro-placed-on-a-wooden-table-next-to-an-agenda-2328-el1.png

54U

For a consultant firm I made a redesign for their landing page. The content needed an update to draw attention to visitors. 

angled-floating-iphone-x-mockup-against-a-transparent-backdrop-a13833.png

Benchmarking

I started by reviewing other landing pages to learn how they were structured and to get inspired.

Skärmavbild 2022-02-04 kl. 13.16.28.png
Skärmavbild 2022-02-04 kl. 13.19.07.png

Persona

I needed to understand who the person was that would visit the landing page and what their goals was. I knew persona is a uncertain way to learn who the user is. But I made a survey research before with a group of people working in different industries.

Persona 2-landing page .png
Persona - Landing page-1.png

Moodboard

To find the right style and context I tested to do a moodboard. 

Moodboard - Landing page.png

User Flow

After doing a first user test of the original landing page I took my findings and made a user flow structure. 

Bild1 2.png

Sketches

I took inspiration from the value words from the original landing page. I sketched different illustrations of a hero character and how the words connected things together.

spl_32_20200813150448_3_edited.png
spl_32_20200813150430_6.jpeg
spl_32_20200813150346_1.jpg

Wireframe

I took my drawings to a wireframe and put it all together. 

Desktop HD.png
Desktop HD Copy 2.png
Mobile Copy.png
Mobile Copy 4.png
Mobile Copy 2.png

Mockup

I made a first design from my wireframe to test on. 

Desktop HD Copy1.png

User test

I made a usertest.

On the image the red markings show the details that drew the users attention to that point. The goal with the new landing page was to make the content pop out more. But with the use of the same color on many places the content wasnt popping out enough and focus was drawn to the wrong places.

Desktop HD-usertest-result copy.png

Mockup version 2

After I had reviewed the results from the user test I decided to rework the design. I changed the colors and the first image.

I decided to work more with different shapes and show images of real people. The color needed to separate more to make the content stick out more. 

Desktop HD.png

Style Guide

The colors I finally chose to use was meant to give an eye-catching effect  but also appear like they belonged to a single theme and together make the content stand out.   

style guide-landing-page.png
style guide-landing-page-12.png
bottom of page