![](https://static.wixstatic.com/media/11062b_4b7c9a8e48334d5aad2fd274fddba3bc~mv2.jpg/v1/fill/w_288,h_192,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/11062b_4b7c9a8e48334d5aad2fd274fddba3bc~mv2.jpg)
![mockup-of-a-macbook-pro-placed-on-a-wooden-table-next-to-an-agenda-2328-el1.png](https://static.wixstatic.com/media/064332_9062bdaf31d34139a56f8403dde28b10~mv2.png/v1/fill/w_61,h_41,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/064332_9062bdaf31d34139a56f8403dde28b10~mv2.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](https://static.wixstatic.com/media/064332_15e6cf5d852946e68f314c817add33c3~mv2.png/v1/fill/w_488,h_366,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/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](https://static.wixstatic.com/media/064332_88dcf091141d439a8b067df5f6695b84~mv2.png/v1/crop/x_0,y_151,w_3360,h_1949/fill/w_600,h_348,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Sk%C3%A4rmavbild%202022-02-04%20kl_%2013_16_28.png)
![Skärmavbild 2022-02-04 kl. 13.19.07.png](https://static.wixstatic.com/media/064332_ec758a9692a54c1da6613f4ec2852c41~mv2.png/v1/crop/x_0,y_140,w_3360,h_1960/fill/w_600,h_350,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Sk%C3%A4rmavbild%202022-02-04%20kl_%2013_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](https://static.wixstatic.com/media/064332_eaa643c2e611428eba26672e5161fa3e~mv2.png/v1/fill/w_52,h_72,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Persona%202-landing%20page%20.png)
![Persona - Landing page-1.png](https://static.wixstatic.com/media/064332_e4be32473f06447fa305c47d1abcfecc~mv2.png/v1/fill/w_123,h_179,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Persona%20-%20Landing%20page-1.png)
Moodboard
To find the right style and context I tested to do a moodboard.
![Moodboard - Landing page.png](https://static.wixstatic.com/media/064332_ca385122093044e1946d95b0a52b91b7~mv2.png/v1/fill/w_52,h_37,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Moodboard%20-%20Landing%20page.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](https://static.wixstatic.com/media/064332_f93fd2db63614589b988883378c90db2~mv2.png/v1/fill/w_52,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Bild1%202.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](https://static.wixstatic.com/media/064332_82f5419dd59942038c8095b2404fb007~mv2.png/v1/crop/x_77,y_0,w_2244,h_3000/fill/w_107,h_143,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/spl_32_20200813150448_3_edited.png)
![spl_32_20200813150430_6.jpeg](https://static.wixstatic.com/media/064332_5d593ca441534b54b5d15bb86f7302a6~mv2.jpeg/v1/fill/w_96,h_147,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/spl_32_20200813150430_6.jpeg)
![spl_32_20200813150346_1.jpg](https://static.wixstatic.com/media/064332_b69d2a4eba20467394e5b92ebd032539~mv2.jpg/v1/fill/w_157,h_113,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/spl_32_20200813150346_1.jpg)
Wireframe
I took my drawings to a wireframe and put it all together.
![Desktop HD.png](https://static.wixstatic.com/media/064332_a2083a196fae4607b8d5a73638a6834f~mv2.png/v1/fill/w_120,h_86,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Desktop%20HD.png)
![Desktop HD Copy 2.png](https://static.wixstatic.com/media/064332_b5cd42ed97ba40aaa8e492d91883afbe~mv2.png/v1/fill/w_120,h_86,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Desktop%20HD%20Copy%202.png)
![Mobile Copy.png](https://static.wixstatic.com/media/064332_4ce49d8b7f864b01819fd8f15f25e32a~mv2.png/v1/fill/w_80,h_256,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Mobile%20Copy.png)
![Mobile Copy 4.png](https://static.wixstatic.com/media/064332_baeedc4265a844a58bd5439f1c580d14~mv2.png/v1/fill/w_80,h_256,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Mobile%20Copy%204.png)
![Mobile Copy 2.png](https://static.wixstatic.com/media/064332_bcb972819eba45168d84d1acb9403f5d~mv2.png/v1/fill/w_80,h_256,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Mobile%20Copy%202.png)
Mockup
I made a first design from my wireframe to test on.
![Desktop HD Copy1.png](https://static.wixstatic.com/media/064332_8c765f7027534d108de08e311586f01a~mv2.png/v1/fill/w_60,h_211,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Desktop%20HD%20Copy1.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](https://static.wixstatic.com/media/064332_c151e76774244fdb8ed25266bd3073ce~mv2.png/v1/fill/w_60,h_211,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Desktop%20HD-usertest-result%20copy.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](https://static.wixstatic.com/media/064332_623948b5971c418da389e7a476075d0f~mv2.png/v1/fill/w_60,h_265,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Desktop%20HD.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](https://static.wixstatic.com/media/064332_684fa516991e47d284d338126eee866e~mv2.png/v1/crop/x_0,y_65,w_595,h_645/fill/w_61,h_66,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/style%20guide-landing-page.png)
![style guide-landing-page-12.png](https://static.wixstatic.com/media/064332_dad8bfdc9c64471da11e94d556b0c5bd~mv2.png/v1/crop/x_0,y_20,w_595,h_706/fill/w_62,h_73,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/style%20guide-landing-page-12.png)