Microsoft.com Redesign


If I were to list the most-visited websites in the world, Microsoft.com would not have came to mind. Surprisingly, it ranks 41st in the world. Despite that, I have always felt as if Microsoft.com was more confusing than anything—much like Windows—in its attempt to serve all needs. I imagined a more focused website.

I finished this design last December, and as it so happens, Microsoft has recently given its website a sprucing-up which brings it closer to my vision. The world is an odd one, indeed. Nevertheless, I thought I would post this anyway.

Goals

I sought to design a simple website that managed to bring cohesion to Microsoft’s many brands. They have many brands—Windows, Office, Outlook, Surface, Xbox, Skype, Groove, etc.—that all feel distanced from one another. Apple manages to make everything feel a part of the grander Apple brand; Microsoft fails to do this, so much so that it is often easy to forget Microsoft has so many useful, different products. A website cannot fix ingrained culture, but it can help visitors better discover Microsoft’s disparate offerings.

Important Points

  • There is an assumption that visitors are either looking to learn more about products they do not own, or find support for products they do own.
  • The website is designed in three sections to support this: Explore, Microsoft, Support.
    • Explore provides links to each product category.
    • Microsoft is a link to the homepage.
    • Support provides support links to each product category; all documentation is centralized.
  • A persistent, consistent header lines the top of every page.
  • There is a primary focus on marketing to the consumer.
    • Demographically neutral imagery is used as to not be exclusionary.
    • Politically neutral content is used as to not be divisive.
  • Microsoft.com is accessed by millions of visitors, each with a different level of comfort with technology and all running a wide range of devices.
    • Plain and simple design was important: white background, dark fonts.
    • Arial was chosen for its ubiquity, friendliness, and compatibility.
    • No fancy CSS is used in order to ensure fast load times and consistent performance on a wide range of devices.
    • Site design is kept logical and simple so as to be compatible with localization, and accessibility tools.

Details

Designed in Pixelmator for Mac.
Fonts: Arial; regular, bold.
Colours: #FFFFFF for slider text, #303030 for charcoal text, #0676D7 for call-to-attention, #CBCBCB for secondary slider text, #EFEFEF for header tab backgrounds, #000000 for header and footer text.

Advertisements

Add your voice

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s