A Modern Dashboard Experience
TRACKVIA
Overview
In December of 2019, I conducted a survey of all 6,000+ admin users in our system. One of the key questions was - what one improvement would you like to see in this upcoming year? What our team largely heard back was an ask for "More Modern Design."
Dashboards are the 'home' pages of our customers and their most-used resources. They help our clients run their businesses more efficiently and surface valuable data to highlight key metrics, so this is where we decided to start our redesign efforts.
Despite a global pandemic beginning and moving all of our teams remote, I was able to lead a complete redesign of our dashboard experience across our web, iOS, and Android platforms from January to June of 2020.
Role
Senior Product Designer
Activities
User Research
User Interface Design
Status
Live
The Current Experience - Web
To better understand what our users felt was lacking in the current experience, we set up conversations to hear existing pain points. From this we learned the following insights about our current dashboards:
Visual hierarchy was lacking which caused confusion
The admin menu was hidden, slowing user navigation
Dashboard elements lacked clear visual distinction & felt cramped, preventing quick data skimming
The Current Experience - Mobile
TrackVia is available not only via web platform, but also through iOS and Android native apps on both handset and tablet devices. This meant that updating the web dashboards would also require a redesign of the mobile dashboards as well. Some clear areas of improvement for the mobile experience were:
Parity between web, iOS, and Android was lacking creating an inconsistent experience
There currently was no visual differentiation between different dashboard elements
Many everyday actions in the apps required unnecessary clicks to surface data
The Process
Moving remote a few weeks into the kickoff of this project meant being able to quickly adapt to different communication styles to keep the project moving forward. With a tight deadline and a large impact to our entire customer base, communication and collaboration were key.
Because communication was so important as a remote team, we leveraged tools like Miro to hold virtual whiteboarding and ideation sessions. Above you can see an artifact from an affinity mapping session we did to uncover risks and assumptions. Cross-team members sat down throughout this project to stay on the same page and talk through our challenges and goals.
Ease of collaboration was also key, so I brought in Zeplin, a handoff tool, to better communicate design specs to our developers. This allowed me and the team to communicate complex documentation, to quickly iterate, and have detailed design artifacts we could reuse later.
Above you can see just one of many documents I created to ensure the whole team was working from a single source of truth and that all states were being accounted for.
Iteration was crucial to our process. We didn't have much time so we had to learn quickly as we spoke to our customers and worked with one another. We tried many different design iterations and kept refining the designs as we went based on customer and internal feedback. Despite our goal to avoid major functional changes, we knew just changing the visual look of our platform would evoke a strong response from our customer base and we needed to minimize as much disruption to customer workflow as we could.
Key Design Decisions
Typography
Going into this project knowing that we needed to work on our visual hierarchy and data legibility, I knew typography was going to play a large role in our solution. What I quickly found out after an audit of our product was that we had never actually purchased the license to the primary font we were using in our web platform, and as a result, our native applications could not use the same font family. This created a disjointed experience across platforms because effectively each platform was using a different font entirely.
One of the first things I set out to do was to find a font family we could leverage across all platforms that felt modern and easy to read. This could help us improve our product parity, modernize our look, and improve our data legibility all at once. After test-driving multiple fonts, I decided on TT Norms Pro, which is now leveraged by all our platforms for a consistent experience.
Navigation
The goal of this project did not include redesigning our navigation, but we knew that modernizing the design and making it easier to use meant making small improvements to our UI and information architecture as a whole. While we were cleaning up the design of the navigation, we were able to incorporate some feedback we consistently heard about our navigation - such as "I don't like having to click to show the admin menu," and "The navigation feels too cluttered."
Tablet Design
We knew our tablet application was underutilized by our mobile users - the feedback we were getting was that it was just a copy of the handset application and provided no additional value to our users. Seeing this as an opportunity to bring real value to our mobile users and their devices, we created an enhanced dashboard experience for tablet users.
This experience leveraged our card components from our web platform to expose the most valuable data on their dashboards (like charts and tables) and gave admins the capability of seeing their dashboards close to the same way they saw them on the web platform. These enhanced dashboards also gave our admin users who were mostly not currently leveraging mobile the ability to use the TrackVia app in the field for reporting and managing their teams easier.
Grid Views
Another large aspect of the redesign involved our grid views - or tables. Since grid views were the most commonly used resource on user dashboards, we wanted to make sure they felt cohesive alongside the redesigned elements. We saw this as an opportunity to improve data legibility within our tables in parallel with this work. To increase legibility we increased site padding across the board, loaded in our new font, increased minimum row heights, and brought in what we like to call 'zebra striping.' We found bringing in alternating colors by row helped users skim their data faster in discussions with our customers.
Final Designs
Launching Our Redesign & What We Learned
Prepping for Launch
When thinking about releasing our new designs, we wanted to over-communicate that visual changes were coming. Our customers use our platform to get their daily work done, and surprises in the interface can be disruptive to their work if they aren't prepared or provided education.
To address this, we designed several modals to introduce and educate users on the changes and how to leverage new functionality.
Prior to launch, we did a 'roadshow' to ~15 customers to get their thoughts about the new designs.
The Positive Feedback
During this roadshow, the feedback we heard from customers was largely positive. Much of this feedback was echoed by customers post-launch as well.
"Seems intuitive, it's not such a big of a change where you can’t figure it out on your own."
"It looks very clean. More welcoming and easy on the eyes - I think novice users will find it easier to navigate."
"Being able to see the data in our mobile app will help us make decisions quickly if there's a delay."
"I really appreciate the zebra striping - when we're scrolling through a huge import today it isn't easy to find things."
"I like the hero data on the mobile app - it guides the user well."
Room for Improvement
As expected, after launching the new designs to all of our customers, we did get some recurring feedback to iterate on. Here's a summary of what we heard:
- Mixed reviews on removing the tab bar that was in the previous dashboard. Some users liked the new dropdown approach, others wanted the tabs back. (We did another release shortly after to allow admins to turn tabs back on for their accounts if they preferred.)
- Some users really liked the added padding for legibility, others wanted more data density. We learned that this is very much a user-by-user preference.
- Some users wanted the ability to revert to the old designs. This is never the feedback you want, but I think it was good to learn how averse to change of any kind some of our customers were.
Despite some negative feedback on certain features, our team found the changes to be well received. Most feedback died down after the first week or two once users got accustomed to the changes.
Longer Term Impact
We have since taken some of the feedback shown to do additional updates to the dashboards as we continue to modernize the rest of the platform.
Since this release, we have continued to modernize other screens and features throughout the platform.
In our 2020 admin survey we asked users several questions around the redesign. 93% of users said we had met our goal of 'more modern design.'
