Microsoft
Visual
Studio

Microsoft
Visual
Studio

Finding pathways to improvements, no matter what.

Finding pathways to improvements, no matter what.

PROJECT : Microsoft Visual Studio Website
TEAM : Product Manager ▪︎ Designer ▪︎ Two Developers
ROLE : UX/UI Design Lead
CONTRIBUTION : Design System ▪︎ UI Design ▪︎ Research
SOFTWARE : Figma ▪︎ Adobe Creative Cloud

PROJECT :
Microsoft Visual Studio Website

TEAM :
Product Manager ▪︎ Designer ▪︎ 2 Developers

ROLE :
UX Design Lead ▪︎ Art Direction

CONTRIBUTION :
Component Design Patterns ▪︎ UI Design ▪︎ Style Guide
 
SOFTWARE :
Figma ▪︎ Adobe Creative Cloud

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...

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 Smorgasbord!!

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-garage-2019-04-08-11_13_33 copy copy
screencapture-microsoft-en-us-windows-microsoft-edge-mobile-2019-04-08-11_06_35 copy
screencapture-products-office-en-us-business-small-business-solutions-2019-04-08-11_05_19 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-xbox-en-US-2019-04-08-10_57_37 copy
screencapture-azure-microsoft-en-us-2019-04-08-10_57_03 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
screencapture-dotnet-microsoft-2019-04-08-10_47_29 copy
screencapture-visualstudio-microsoft-2019-04-08-10_45_14 copy
team_city_home
travis_home
apache_home
atlassian
atlassian2
bitbucket_home
digital_ocean
git_scm_home
gitlab_home
npmjs_home
asana
sketch_home
ux-app
jetbrains

Two...Dialing in What Works Well

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

Color research 1170
Photo samples copy
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
Homepage hero design 3
Color
Interesting visual representations
Grid and Modular layouts
VSCOM Hero Treatment
MicrosoftTeams-image
strip layout copy
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...

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

Results:

Initial testing came back positive with increased site activity and downloads resulting in a 42% increase in customer engagement.

Select Projects

Microsoft Visual StudioUI/UX Redesign of Software Developer Tools Website

Sidekick 4GComplete UI/UX Reboot of Iconic Android Smartphone.

First Green StepEnvironmental Causes Mobile App Experience

Groupon Proximity Buying ExperiencePatented Mobile UX eCommerce Buying Experience

T-Mobile Device Brand UnityUI Branding System for all T-Mobile Branded Devices

Groupon Global TeamDistributed Team Management Learning Insights

Marketing DesignVisual Design & Ad Campaigns

American Express Global ExperiencesGlobal Branded Customer Event Experiences

T-Mobile Executive Rally VideoVideo Direction & Editing

© 2020 David Fite • All Rights Reserved