Summary
As Salsify started entering sales cycles with larger accounts, we began hearing increasingly frequent pushback about the lack of a central dashboard in the platform. Prospects and customers alike wanted a birds’ eye view of their teams’ activity in Salsify, and product demos in particular were hurting from the absence of such a view.
Our growth team was asked to quickly build a first cut of a dashboard that could help us better demonstrate the value of Salsify on demos and that we could test on existing customers. As the designer on the team, I defined reporting UI patterns that were adopted not only for this project but across the platform, and worked closely with developers and PM to define the optimal UX under the constraints of the MVP.
Defining Personas
Every single Salsify user could benefit from better reporting in the platform. So to narrow down a persona for our MVP, my product manager and I turned to leadership across sales, customer success, account management and product marketing, all of whom had been gathering requirements for an eventual dashboard based on their work with prospects and sales. From this work, we determined the persona we as a company believed would benefit most from this view was the ecommerce manager looking to quickly identify and troubleshoot abnormal activity from her teams in the platform.
Documenting dashboard wishlist items by persona and theme
Defining the Story
The interviews also yielded a laundry list of potential metrics, which needed to be culled and then organized around a central theme. Again, we turned to internal leadership. Since every account would have different business goals, we settled on the one consistent theme they all shared: PXM (“Product Experience Management”).
At the time of this project, Salsify was introducing its trademark framework for ecommerce success to market. Sales pitches and customer onboarding plans revolved around it. What better way to drive PXM home for our users than to illustrate their activity against its three key pillars – content, ecosystem and insights – on the first screen of the platform?
And, even better, could we find opportunities on the dashboard to drive adoption of new features in the pursuit of PXM excellence?
Sample sketches of potential dashboard components
Comparison Analysis
I wanted to make sure I understood the metrics and story before I went out to do research, lest a shiny dashboard in the wild end up driving more of my design than my persona did. I gathered dozens of dashboards both from Upsplash and my everyday apps, and noticed a few common UI themes:
Decent amounts of whitespace to let data viz breathe
Lots of charts and color over stats in text
Widgetized UI’s, each widget telling a comprehensive story
Sample dashboards that helped inform my designs
Defining UI Patterns
Two of the biggest UI pieces I needed to define here were data viz and a reporting color palette. Since this project had such a large back-end lift, we decided to use EmberCharts to power our data viz to relieve some of the workload off our devs, which meant doing some extra UX navigation around the default behaviors of the library.
One of the highlights of this project was defining a reporting color palette that remained in brand with our Salsify blue. We wanted the charting colors to be bright, yet fairly agnostic since we already had a strong system red and green to report on positive and negative change.
The final color palette for our first release
The Solution: An Opinionated View of Using Salsify
What resulted was a visual representation of Salsify’s guiding framework: PXM or “Product Experience Management.” Widgets representing the three pillars of PXM – content, ecosystem and insights – contained charts nudging users toward key activities to round out their ecommerce strategy. A users section provided insight into who was completing these activities, and high-level metrics across the top painted a picture of overall usage.
The UI and UX were designed to be extensible, as this was just the first step in a long journey to fully customizable, widgetized reporting. After the rollout of the dashboard, we immediately began seeing adoption of these UI patterns across the product org for additional, one-off reporting use cases.
The "PXM" Dashboard
A new homepage that reflects user activity against the pillars of Salsify’s PXM framework. Bright colors purposely keep the data agnostic to accommodate a variety of companies and their goals.
Thorough empty states
Empty states were thoughtfully designed to promote action in any scenario, from unlocking a new feature to gently prompting additional activity.
Subtle onboarding cues
Capitalizing on having all the key features of Salsify in one view; how could we promote exploring more of the platform to “unlock” your dashboard?
