Making the Microsoft Developer Network experience usable on mobile devices.
Disciplines: UI / UX | Website
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.
Learn more & contact me on LinkedIn Amadeo LLC / Seattle WA USA