“Project Oxford” user experience update

The Goal
Update the user experience into something more modern and unique which would appeal to the hip independent developer audience. Educate the public about the AI APIs that Microsoft offers.

The Problem

The website was thrown together by developers without much thought for the target audience or the user experience. It needed to have some thought applied to it in order to perform better.

The Team

  • Project Manager
  • User Experience Designer
  • Software Developer
  • Software Developer Manager

The Tools

  • Illustrator
  • Invision
  • Photoshop
  • Visual Studio
  • HTML/CSS/LESS

The Discovery
The client had done a lot of the preliminary research, including user research, information architecture, and a first draft of wireframes. However, they were designing without a goal. So we took a step back to establish their goal (update their website to drive adoption from their target audience) and success metrics (increased downloads of their APIs). The work that the client had already completed was useful but involved a massive amount of information that needed to be condensed. I took their user research and created a single target persona, analyzed their information architecture and adjusted it with the new goal in mind, and then began the work on the pages.

The Process
Some wireframes had been created by the client, but they were not adequate for meeting the client’s goal, so we started over. Working in Illustrator, we created detailed wireframes that laid out the pages, paying special attention to the hierarchy of the content and the flow of each page’s content. We added important content like a clear pricing table and an easy to use demo of the API. Each API page would end in content that drove the user to either download the API or dive deeper into the content of the site, exploring the capabilities of the Microsoft AI APIs. Once the wireframes were completed, we created a prototype in Invision that allowed us to conduct moderated usability studies on the pages with our target users.

The Final Outcome
The moderated usability study gave us a good idea of what the users were expecting for this site. When we analyzed the results, it turned out that there were only small changes in the content that needed to be adjusted before moving on to the visual design phase. The visual design was created in Photoshop, using the Microsoft brand standards but pushing the limit of it in order to feel more modern and innovative. We settled on a color palette of teal and yellow, setting us apart from other Microsoft sites that tended to be blue or red. On approval of the visual design, I created a style guide document and coded the main page template using HTML, CSS, and LESS so the client would have a guide when developing the remaining pages.

This is a unique website which will require a more modern browser to work!

Please upgrade today!