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:
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.
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.
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.
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.
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:
- Dribbble: https://dribbble.com/collinhartigan
- Twitter: https://twitter.com/CollinHartigan
- Github: https://github.com/CisSovereign
- Personal: http://collinhartigan.com/
