︎︎︎ Back


Microsoft Windows 11 global consumer facing website - restructure and redesign

With the launch of the new brand campaign promoting the newest version of Windows 11, the ask was to refresh the Windows 11 homepage, features page, comparison and other supporting pages distinguising it from earlier versions of the software.


Deliverables


E-commerce
Design Systems
UI Animation
Motion Design

Time frame

3 months

Applications

Figma

Role


Lead Designer (Code and Theory)

Creative Direction
by Aaron Pedersen and Erik Jarlsson

Development: HCL Technologies






Problems & research insights from the existing user experience

- Lack of clear call-to-actions causing 55% users to drop from the homepage before they could find what they were looking for.


- Confusing storytelling and the user journey felt muddled making it hard for users to clearly identify and learn key features of the new OS. 


- The brand imagery and visual style felt out of date, for eg. the homepage opened with gaming specific imagery, lacking a sense of universality.


- The UI elements of the existing system felt inconsistent, outdated and clunky making a poor first impression of the site at first glance.





Highlights of our solution


We worked on making the experience simple, easy to navigate, airy and modern with clearly defined call-to-actions, a clear user journey and a structure that tells a story and paths users to download, learn more or compare the newest Windows 11 system with older versions.

- Pages are shorter and more concise with clear headlines and short copy 

- More CTAs!

- Dedicated page for clear instructions on how to download the latest version for different device users

- Removed over-use of parallax animation and forced scrolling but still kept a sense of delight and subtle animation

- Updated with refreshed seasonal brand elements and an opener that is more universal and not gaming specific




Homepage 


Before ︎︎︎

After ︎





Homepage hero animation


Animating the hero module, all done in Figma!




We decided to create a brand new animated hero experience for the homepage to highlight the new brand campaign, help create excitement around the newly launched Windows 11 as well as help bring users down the page to read more about features and download the latest version.




Meet Windows 11 (Feature Detail Page)


Before ︎︎︎

After ︎





The Homepage






Meet Windows 11 - In-Depth Features Page