Microsoft Visual Studio

Microsoft Visual Studio

Overview:

Project: Visual Studio Website Redesign
Client: Microsoft

Project: Visual Studio Website Redesign
Client: Microsoft

Year: 2018

Year: 2018

Scope of Work: User Research, UX Design, UI Design

Scope of Work: User Research, UX Design, UI Design

Location: Redmond, WA

Location: Redmond, WA

Objective:

How do you approach a project when the task seems overwhelming, steeped in past challenges and everyone is looking for a way out? Simple, start with a large cup of coffee...and the basics! Microsoft is known for having a lot of sub-brands with their own "character" so the challenge was finding what felt Microsoft but still gave Visual Studio its own identity. We aimed to solve the following requests:
1. Have clear segregation of products
2. Show clarity of offerings
3. Display a less cluttered user experience 

Here's an insight into the process...

How do you approach a project when the task seems overwhelming, steeped in past challenges and everyone is looking for a way out? Simple, start with a large cup of coffee...and the basics! Microsoft is known for having a lot of sub-brands with their own "character" so the challenge was finding what felt Microsoft but still gave Visual Studio its own identity. We aimed to solve the following requests:
1. Have clear segregation of products
2. Show clarity of offerings
3. Display a less cluttered user experience 

Here's an insight into the process...

Before...

The Visual Studios website was plagued by legacy changes and siloed product ownership throughout the site. Inconsistencies in visual and UX patterns made for a challenging user experience ( and not to mention a dated overall look). Illustrations, graphs, and photography were haphazard and not consistent throughout the sites pages.

The Visual Studios website was plagued by legacy changes and siloed product ownership throughout the site. Inconsistencies in visual and ux patterns made for a challenging user experience ( and not to mention a dated overall look). Illustrations, graphs, and photography were haphazard and not consistent throughout the sites pages.

vscom_professional 1170
vscom_enterprise 1170
vscom_community 1170 (1)

One...Visual Audit Microsoft Brands...

Review all Microsoft category websites and competitors for similar problems solves and site patterns.

Review all Microsoft category websites and competitors for similar problems solves and site patterns.

screencapture-microsoft-en-us-windows-microsoft-edge-mobile-2019-04-08-11_06_35 copy
screencapture-microsoft-en-us-store-b-home-2019-04-08-11_04_24 copy
screencapture-microsoft-en-us-hololens-2019-04-08-11_03_08 copy
screencapture-onenote-2019-04-08-11_02_24 copy
screencapture-onedrive-live-about-en-us-2019-04-08-11_01_39 copy
screencapture-microsoft-en-us-sql-server-sql-server-2017-2019-04-08-11_00_52 copy
screencapture-dynamics-microsoft-en-us-2019-04-08-10_58_26 copy
screencapture-developer-microsoft-en-us-windows-2019-04-08-10_56_10 copy
screencapture-skype-en-2019-04-08-10_55_03 copy
screencapture-products-office-en-us-compare-all-microsoft-office-products-2019-04-08-10_52_48 copy
screencapture-microsoft-en-us-sql-server-default-aspx-2019-04-08-10_51_46 copy

Two...Dialing in What Works Well

Site asset compilation: Pull inspiration, concentrate on key pages to develop design language and overall vision.

Site asset compilation: Pull inspiration, concentrate on key pages to develop design language and overall vision.

Color research 1170
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles.1.1.1.1
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles.1.1.1
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles.1.1
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles.1
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles
1400 x 800.1
1400 x 800.3
Homepage hero design
Homepage hero design 2
Color
Interesting visual representations
Grid and Modular layouts
VSCOM Hero Treatment
MicrosoftTeams-image
1440 swim lane 3 column 9 icon grid 100px Fabric icons No circles.1 copy

Three... Establishing the Rules to Live By

Style guide toolkit:  Confirm font ramp, accessibility approved colors palette, image styling, and spacing rules...get ready to build modular components!

Style guide toolkit:  Confirm font ramp, accessiblity approved colors palette, image styling, and spacing rules...get ready to build modular components!

MS Global Header Codex 1440 FPO.1.1.1
medium.1.1
Centered2
Feature Group – Picture
Group 2
Color States.1
mwf color palette
VSCOM MWF Font Ramp

After...

After...

The end result: a cleaner, easier to digest look, a simple component system to simplify content updates and an overall brand perception that is on par with their competitors. 

The end result: a cleaner, easier to digest look, a simple component system to simplify content updates and an overall brand perception that is on par with their competitors. 

The end result: a cleaner, easier to digest look, a simple component system to simplify content updates and an overall brand perception that is on par with their competitors. 

Enterprise 1.1 1170
vs professional new 570
Community 1.4 1170

Outcomes:

Outcomes:

  • Initial testing came back positive with increased site activity and downloads resulting in a 22% increase in customer engagement.
  • Modular component library for ease of updates and refinements.
  • Initial testing came back positive with increased site activity and downloads resulting in a 22% increase in customer engagement.
  • Modular component library for ease of updates and refinements.

© 2024 David Fite • All Rights Reserved

© 2024 David Fite • All Rights Reserved