Microsoft Azure platform & services

My role
Product Designer
TOOLS used
White boards, Sketch, Jira, Slack, Illustrator, Noteable, Microsoft suite
timeline
9 months

Goals

Maintaining and growing the Azure website while working with the Microsoft brand guidelines.

Projects

Day to day I was tasked with a wide range of projects with dynamic timelines. Projects could range from resizing assets to redesigning the entire website’s navigation. Throughout my time on the team I was eager to take on new projects and enjoyed pitching in to meet deadlines and help the team.  

As I learned the brand guidelines and worked on pages across the website, I was able to contribute new design patterns as well as make suggestions for improving and consolidating existing patterns. I worked with developers on small changes to the framework that the website runs on, which in turn, cut down time spent on one-off fixes. Collaborating with an Information Architect, fellow designers, developers and project managers was a great learning experience. This collaborative environment was very useful for identifying where I have opportunities for improvement.

Team building "brown bag"

I got the opportunity to give a talk about User Experience design to the development team and project managers. My motivation for giving this talk was to practice presenting ideas to a large audience and to expand team dialog about how every team member contributes to User Experience Design. I considered the experience a success because it generated conversations directly after the talk, and people continued to reach out to ask follow up questions or discuss pathways to improved workflows.

"Something you talked about really stuck with me, inconsistencies of our site are a direct reflection of the product. This has been a huge help in justifying patterns."
-Chad Senior Software Developer Engineer

Designing the Product Index page and homepage

The business goal was to create a page that showcased a large number of products to users in a time efficient manner. Before our redesign, the product index page was very long with navigation on the left side that was not anchored to the top. This made it hard for users to navigate easily.

The homepage presented a condensed version of the full product index page, giving users a quick look at the breadth of products offered.

Product index page and homepage sketches

The early designs closely referenced the existing page. As I continued to sketch a solution, I knew the design needed to stay flexible for future growth.

Post redesign of the product index page and homepage

The early designs closely referenced the existing page. As I continued to sketch a solution, I knew the design should stay flexible for future growth. For instance, in future launches there will be category icons, which my design includes placeholders for. Also, the left side of the navigation is anchored at the top of the page and has the increased functionality of anchoring to any specific category on the page.

general product pages

Each product page had separate stakeholders and varying content. A majority of the pages needed custom illustrations created to simplify complex information. I communicated online and in person with key people to make sure that we came to solutions that were consistent with brand requirements and met all deadlines.

Redesign of service level atreements

Prior to redesign, the page used a pattern of grey boxes, which was not a good solution because all of the content in different categories varied greatly. Also, the boxes were not responsive in resizing for different screen sizes.

Post redesign, the design needed to stay clean and easy to navigate, while making better use of the space.

redesign of the downloads page

The Downloads page located in Resources, receives a large amount of traffic, which prior to redesign, lacked clear organization.

After sketching a few different solutions, I decided to leverage an existing design pattern. This specific pattern was being executed differently across the site. I met with a developer lead to talk out all of the use cases and created redlines to ensure all of the designs were streamlined.