Launched: 2017
Duration: ~2 months

Microsoft Technical Case Studies Site.


Overview

The Microsoft Technical Case Studies site was created in Github Pages for the developer community to share project details and technical write-ups, proving out the latest technologies with customers. With its far-reaching global audience, the MS team was looking to enhance the site so they tapped Southworks for their technical chops and me to redesign the overall look and feel and to improve usability.


Challenges

The core challenges and pain points of the old site that the team heard from users were the following:

  • Search function was not easily discoverable
  • Filtering options were hidden, making it hard to discover the feature as well as decipher what filters were applied
  • Case study tiles all looked similar, making it difficult to scan and read

UX First

To address these customer pain points, the MS team and I shared ideas by looking at sites and common UI patterns within Microsoft and across the industry.

To make the search function more discoverable, we followed a common pattern of disassociating the search from the logo name and including a search box in the global header.

Filtering Options

From my UX research on filter patterns, I found from Baynard of the top 50 U.S. e-commerce sites that a horizontal filter toolbar can outperform the traditional sidebar filter because it solves two severe user problems:

  • Users overlook or ignore the filtering sidebar entirely (this is the most common scenario),
  • Users sometimes mistake the site’s sorting tool for the sites filtering tools, thinking they are the only ones available.

However, the horizontal filter design has one major shortcoming: space is limited. Because it utilizes the screen width, and not the "unlimited" screen height as the traditional filter sidebar does, it only works well for industries and site types that naturally have few filters.

With that, the Technical Case Studies site was an appropriate candidate and would solve the issue of leaving users from navigating an overly broad sea of stories, which would make users feel fatigue and to cause them to abandon the site entirely.

Ideation

I then ideated on concepts, layering in design elements like the Microsoft logo, color, font and iconography to accomplish hierachy and brand trust with users, and utilized a responsive grid and white space to achieve structure.

To optimize scannability and information density across case study tiles, I added images unique to each story to create visual interest and make it easy to distinguish between stories at a glance.


Iterations

During the design process, new requirements surfaced from stakeholders, such as the importance of having featured case studies shown first. Keeping users always in mind, I explored the option to have featured case studies on a homepage and a separate page to browse all stories, exposing the filter and sort functions. The Sort function was introduced to allow users to sort stories between featured and most recent.

For each filter category, custom designed dropdowns to display checkboxes for each filter value were used, allowing users to always select multiple filtering values within the same filtering type.

Another avenue I explored was adding a carousel for featured stories. This would draw the eye to the carousel while exposing the filter, sort and featured stories below it.

Result

The final design of the site is inviting and clean; the hierarchy of content is concise and balanced; and search and filter options are easily discoverable - all intended to generate trust and usability between users and the site.

Like what you see?

Lets start talkin'

Copyright © 2013-17 Kat Estacio. All Rights Reserved.