Grand unification dashboard

Vision

Nordstrom, the luxury department store chain with 14B annual revenue, has a thriving online business. The 65 development teams responsible for their sites however were working at a disadvantage using an ad hoc mix of off-the-shelf DevOps dashboards. Further, their troubleshooting tools were outdated and poorly designed. Nordstrom IT managers envisioned a unified dashboard for advanced analytics and visualization creating efficiency and transparency throughout the organization.

View screens

The existing tools were outdated internal tools and off-the shelf dashboard products

My role

The DataVision team was formed out of the older tools team to execute this vision. I joined a few weeks before project kick-off, giving me time to ramp up. As the UX designer, my greatest challenge would be to Integrate all of the monitoring and troubleshooting tools that developers needed into a single system. Though my contract was for just four months, my completed designs would require several quarters to build.

Process

Kick off was a full day off-site meeting with the entire team, planning the MVP and project schedule for two quarters. We would work in month-long sprints, with me working ahead doing user interviews, iterating and providing designs for development. I worked closely with the front-end developer on implementation.

Research

In the initial research phase, I interviewed developers to understand how they used existing dashboards and tools. During the design phase, I used Adobe XD and created online clickable prototypes for user testing, asking users to think aloud while 'walking' us through. A PM watched remotely and took notes. This process yielded invaluable insights leading to improvements in the product.

view clickable prototype

Ideation and Design

I kept the project in wireframes and sketches for as long as possible while working out major challenges. These included:

Navigation and information architecture
Developing a workflow for users to move from monitoring to investigating
Enabling developers to maintain situational awareness for their many apps
Monitoring "neighborhoods" or ecosystems of interdependent apps
Graph selection, metrics, prioritization, and interactions
Achieving extreme information density to include server usage metrics in the dashboard
Representing predictive artificial intelligence and anomoly detection on charts
Selecting dates and drilling into time spans

Sketches, wireframes and higher fidelity versions

Outcome

I delivered finished designs under the wire as my four month contract came to an end. With a great manager and team, I was amazed at what we'd accomplished to improve IT at Nordstrom. DataVision continues to generate excitement and onboard teams. The development team has stayed true to my design vision as they build the complete feature set.

Final Designs

Neighborhood

This screen lets users monitor the health of other apps in their app's "neighborhood".

App Dashboard

This screen solves all of the "situation awareness" needs for a single app, with high level number metrics, charts for time series data, and "information dense" visualization of server usage. Charts are interactive with a predictive mode and anomaly indicators, and can be used to isolate a range of time for investigation on the Details page.

Team Page

This screen solves a team's need to maintain situation awareness of all of their apps simultaneously; it foregoes visualizations providing info as number metrics with attention getting anomaly and health indicators. It provides a point of entry to every screen of every app owned by the team.

Details Page - Exceptions

After selecting a curious time range on the dashboard, users can move to the Details screen to investigate. In this screen, all exception types are clustered by type in the top middle chart, visualized below as time series data, and listed in rows on the table. See next screen for interaction.

Details Page Filtering

Clicking a bar on the top chart filters the time series chart and table below; The table is filtered further by selecting a range on the time series chart, resulting in a small actionable set of table data.

Responsive Mobile Screens

In interviews, we learned that responsive screens would be valued by developers on call. Having taken a mobile first approach early on, these screens were relatively easy to design.

App Dashboard Interactions

As the sole designer on the project, I also took responsibility for interaction and visual design. I worked closely with the front-end developer, a talented novice, on implementation.

Navigation Interactions

The navigation panel lets users navigate to any team or app and find the team's contact info—important for resolving "neighborhood" issues.

Team and Product Logos

I designed logos for DataVision and DataLens, our sister team, to help market the product internally.

Nordstrom DataVision