Michael Senkow
I Build Machines
navigation update leads to better component system
Role: Product Designer, prototypes for specifics
Entity: Microsoft
Location: Seattle, WA
Year: 2019 (part of larger efforts)
Team make-up: Sole designer for this project, collaborating with one primary Project Manager and multiple developers.
This was a fairly straight forward redesign of a navigation system within Workplace Analytics. Dashboards were becoming overly numerous and needed a new system for looking through them that would also be grabbing for the user.
There was a mixture of trying to move the project closer to Microsoft’s overall look and feel (Workplace Analytics was a bought start-up and when I joined did NOT look like a Microsoft product) while also not completely changing the application and disorientating users.
The original tabbed system hid dashboards behind extra steps, lowering interaction
The new design creates a more exploratory and component-ized concept. Patterns started here influenced a myriad of other pages in the product.
Tables were considered as part of the process but one of the primary needs was a guidance to drive users forward in exploring the dashboards.
Working with PM, the primary goals were determined and specific metrics that we technically could show were laid out.
I considered a few primary pattern types but settled on cards fairly quickly, from prior experience with data-driven apps and quick testing internally.
Settling into a general card based wireframe
Infographic and data-card exploration
I went through numerous iterations of concepts with PM and engineering. Comparing and contrasting benefits, as we tried to get closer to a design that felt like an infographic, or a humanistic piece of data rather than a cold one.
With one final set of changes based on making sure text was cohesive across the application, culminating into a final design.
And working with engineering to get the specific details correct (the codepen below for example was made to show the specific shadows, transitions, and some color usage that differed in a prior version of the app).
Pattern usage elsewhere in the application
As part of the process, this component design for card-type objects was successful. As part of a larger drive for cohesion across the product, this also turned into other ares of the application taking on the design.
Testing
Testing primarily came through two parts. During the visual design process, critiques were performed with other designers, internal PM’s and Engineering, and with one set of visiting corporate users. Alongside this, the initial drive for the redesign came from a drop-down in the amount of click through rates in dashboards as they got away from the primary one. After the redesign, click-through rates were higher across the board.
Success
The success was measured after the creation of the card system, where users click through rates increased with dashboards that were not just the first dashboard. Overall the redesign was considered a success.