Redesigning Microsoft Online

Product-first focus


As a fun project I decided to redesign Microsoft’s online presence. Why? Well for one they tend to be treated like second-class citizens in the design market. Everyone is always trying to redesign Dribbble or Netflix. How about Microsoft this time?


I drew a ton of inspiration from Amber Creative’s wonderful redesign of the Apple store and of Gilles Bertaux’s Redesign of IMDB.

One of the points I must make is that this is a functioning website/product. All of the features shown are implemented in the live design. You can view it here:

Microsoft Redesign Live

Let’s Make It Fun

One observation I’d had about Microsoft was that they felt too buttoned up, too old school. The amount of information presented on online stores is at times (especially in Microsoft’s case) overkill. My goal wasto simplify this into sections that a user could easily navigate.

I divided the page up into 3 sections:

  • Main Header
  • Product Body
  • Large Footers

Going with the rule of 3 is always good. Enough information to entice a viewer and easy enough to digest in a pass or two.

Main Header
Product Body
Large Footers

Menus Everywhere!

One of the other important factors in these large sites is navigation. My solution was to implement a series of 3 different sub-menus along with the simple main navigation. Perhaps too many but it works for this purpose.

The main menu is simple, consisting of 4 different sections and a search bar. These navigate the simple high-level areas of the site.

Desktop Version
Mobile Version (No Hamburger!)

The first sub-menu (shown below) is actually a child of the above menu. Each section of the menu is outfitted with a custom font icon and description of what is to be found in each section.

A few of the fonts are hand made while the bulk being provided by Font Awesome.

The rest of the menus are full screen modals that respond to each corresponding section.

XBOX Menu
Product sub-menus

Imagery

One of the real strengths of Apple’s website is their stunning images. Clear and crisp, the photos enhance the products themselves without using much text at all. Microsoft really struggles with this.

I made an effort to bring the products more to the center of the site. All images used of products were taken directly from the images currently on the Microsoft site, just repurposed in a more compelling manner.

XBOX One
Titan Fall XBOX Combo
Nokia Lumia

Final Thoughts

I did make sure to include some fun animation on the page in the footer as well as a full background video for the Titanfall section. I do enjoy the use of those even practical shopping sites like Mircrosoft’s.

While this is a fictional work and not a real Microsoft site, it is encouraging to see these types of projects being done with now. They’re great inspirational pieces to work from.

The site is live here: Microsoft Redesign Live

And here is some of my personal information:

Thanks!