Project Overview
I contracted for Microsoft Office Marketing while they were mid redesign. They had worked with an agency to create a new visual style, I was brought on to help translate that design style throughout a vast number of pages insure responsiveness as well as produce assets and redlines for handoff to the developers who I would be working with throughout the project.
Interpreting the visual style
The visual design had been designed by an outside agency. As with visual design it doesn’t always translate to markup easily, this was the main focus of my work. I met with product managers and learned what they wanted on their page as well as what their customers have wanted both historically as well as assumptions of future behavior. With this information of requirements I translated the design patterns to something that could align with user desires, manager goals as well as be easily developed and responsive.
Testing
One of the best parts of working for Microsoft was access to testing and research teams who could quickly measure designs. Not something that we could do in every case but One specifically always blew me away. I had designed a page and another designer had created a competing proposal. We also in discussion and a shared love of images with slight movements (eg cinemographs) decided to test an image similar to the one on the left where an arrow seemingly a mouse hovered over a screen and clicked the button. We threw this on a blank page and tested it as well. This simple illustration with no additional information far outperformed either of our thought-out designs. Testing can show us things that we never would have known or assumed and is important to every design process.
List page alternatives
Within the UI design kit provided the only list format was a FAQ expanding list. We needed the ability to showcase customer stories in a more effective way. Unfortunately technical and legal limitations prevented continuous scroll but overall the page was designed and implemented quickly and successfully.
Header image creation and editing
Headers are a constant struggle many places I have worked. When placing something to cover it can blow the image out of proportion. When placing text over an image there are various ways to make it readable but a major component is images are typically not at a ratio that works well on websites. This is where my Photoshop skills are put to good use.