Microsoft Developer Network - Mobile

Making the Microsoft Developer Network experience usable on mobile devices. In this case I led a collaborate responsive redesign effort to make the content display clearly at any device size and redesigned the navigation to work as a mobile web application.

Problem

Users are looking for information on the Microsoft Developer Network while on their phones but the site does not display the content well.

Role

I led a design effort to make the content display clearly at any device size and redesigned the navigation to work as a mobile web application.

Outcome

Usability testing showed improved navigation and readability, happier customers, and better NSAT scores and task completion rates.

User Experience Designer Seattle

Part of my role on this team is to change the context or share the value of design and its contribution to the process as we go along, increasing design literacy on the team for better decisions. Setting aside the ego, and driving decisions made on objective data and established design patterns rather than subjective feelings.

User Research & Personas

In user research we discovered that although the majority of site users use MSDN on desktop and laptop computers, a significant use case involved users trying to get information on the site using a phone.

In 2011 responsive web app development became the standard of development. By 2014 the site was particularly out of date given our developer audience, and to support accessible and humane reading and interaction with the site, responsive was the right thing to do.

And so the decision was made to redesign the website to be responsive.

User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle

Writing the Problem Story

What came out in usability testing was that although users don't write code on phones, they often want to access information outside the office where a phone is the most convenient device. The existing site didn't facilitate that.

User Experience Designer Seattle

So our problem statement is “Users are looking for information on the Microsoft Developer Network while on their phones but the site does not display the content well.”

Mapping the Customer Journey

I took the problem statement and checked it in the context of the overall experience, and mapped the customer journey to better explain it to others and to be sure we were addressing all affected parts of the experience.

I create a visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or brand, over time and across channels and touchpoints. A touchpoint might be something like paying a bill. The channels for bill paying might be in person, by postal mail, from a website, or using a dedicated app.

User Experience Designer Seattle

Writing the Solution Story

I rewrote the user story with new steps indicating improvements. By adding a reponsive design to the user’s workflow, the user was able to read articles on a phone during the commute.

User Experience Designer Seattle

Solution Storyboard

From that, I storyboarded the solution story to better understand and evangelize it.

Grid Math

Next I looked at existing responsive frameworks and the Windows 8 grid, design patterns across other Microsoft sites like Microsoft.com and Surface.com to inform the grid we would use to build the MSDN UI layer on.

500x500

Responsive Stack Order

Then I determined the stack order of elements as the content wraps to accomodate smaller screens.

User Experience Designer Seattle

Responsive Typography

I developed a typography order for content on the site, specifiying styles for page titles, headings, subheadings, body copy, and other patterns across the site.

500x500

Wireframes

User Experience Designer Seattle

Prototype

I built a small prototype in HTML & CSS using Bootstrap tools. An engineering partner built one that connected the backend & put them together.

Comps

User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle
User Experience Designer Seattle

Visit MSDN.com


USA West Coast        206-659-9822        damon@damonstudio.com        LinkedIn