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.
Users are looking for information on the Microsoft Developer Network while on their phones but the site does not display the content well.
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.
Usability testing showed improved navigation and readability, happier customers, and better NSAT scores and task completion rates.
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.
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.
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.
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.”
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.
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.
From that, I storyboarded the solution story to better understand and evangelize it.
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.
Then I determined the stack order of elements as the content wraps to accomodate smaller screens.
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.
I built a small prototype in HTML & CSS using Bootstrap tools. An engineering partner built one that connected the backend & put them together.