jean cannella

design • art direction • illustration

Visual Studio site redesign

Visual Studio's site redesign began in March 2016 with the goal of creating a more user friendly, reponsive website. The site has to serve three purposes; first, as a product marketing site; second, it is an informational site complete with tutorials, how-to's and docs; finally, it is a community for developers to get and share apps.

The site needed to be more accessible and responsive in order to serve a wide spectrum of users. The design required changing everything in an effort to align visualstudio.com with the Microsoft's long term goal of snap all of their products to a single, unifed brand standard.

  • Role: UX Design, Art Direction and Production
  • Client: Microsoft, Visual Studio
    Visual Studio
  • Year: 2016
VS Beauty shot
Visual Studio's new homepage. The site is built in Wordpress and is now fully responsive.
Old and new homepage
The old (left) and the new (right). In the above view, you can see the differences between the two sites. A key change is the reduction in the number of "calls to action" (CTAs) and more targeted language. This has improved the overall user experience and greater engagement that is supported by higher click-through rates as compared to the old version of the site. Visually the site redesign is more ellegant as well.
Sketching Visual Studio
Examples of wireframing sketches. The two images above are representative examples of the sketching style I use during the design process. Sketching allows for quick iterations that can be later refined into wireframes then, high fidelty mock ups. Shown here are early thoughts around Visual Studio Community and the navigation.
detail sketches for VS
A detailed view of early sketchwork.
detail sketches of pricing iterations
A few more details concerning pricing being worked out before going to high fidelity Photoshop or Illustrator comps.
Hifi comp showing pricing
Moving beyond sketches. Here is an example of a high fidelity comp. This depicts one of the earlier iterations of the new Visual Studio homepage. Shown here is one way to introduce pricing on to the page.
Hifi comp showing pricing
Developing page patterns for the site. This excercise allowed stakeholders to view the possibilities.
Hifi comp showing pricing
The Visual Studio redesign required over 100 new illustrations. This is a small sample of the many that were created.
Gamepage view
A view of the all games page. One of the goals of the redesign is to eliminate unnecessary pages. To achieve this goal, similar pages were combined together. In this case, many of the game platforms were combined by using on page navigation.