Duration: Apr-Jul 2022 (3 months)
Predefined Charts
- Research
- User Experience
- UI Design
- Prototype
OVERVIEW
Reducing Onboarding Time by 80% - First-time users of the dashboard often struggle with query-building, delaying their ability to gain insights. This friction significantly impacted time-to-value and user adoption. To address this, we introduced pre-defined chart templates—allowing users to generate meaningful insights with just one click.
TEAM & TIMELINE
I collaborated with:
Scratch to Development: 3 months.
PROBLEM STATEMENT
First-time users were expected to build queries manually without any guidance or shortcuts. This led to:
The result: users were stuck before ever experiencing the value of the platform.
PROCESS
1 .Research & Discovery
I held meetings with customer success reps and product managers to expand my understanding of our users. After a few sessions, I mapped out a common organizational structure, which helped us define key personas for designing targeted solutions.
2 .New User Flow Diagram
Before getting into more details and visuals, I created a flow diagram that maps all the possible scenarios from the user end:
– First-time or veteran log-in?
– Show onboarding – Yes or No?
It was an interesting and complex task to validate the user’s role and his permission after he logged in and before the option to create new charts of data. I had to meet with the project developer to understand and define the logic and what would happen in the backend. If the user doesn’t have permission to add data, we have to detect it in time and deny him permission to go through the wizard flow.
The Goal - always go through the pre-defined template wizard, no matter if you're a first-time user or a veteran
3 .Vendor Research & Design Inspiration
I explored many platforms in our domains and some overlapping domains to get inspiration about how the pre-defined chart wizard should look and behave. As you are going to see, there are clear steps to creating the wizard: Left side with categories, search, etc.… and the focus area (center) where all the chart templates will be placed.
SOLUTION
💡 Key Feature Introduced
Recommended tailor-made chart templates
Tailor-made template recommendations just for you. Click on a tile to view its details and use it within your dashboard.
Tile Interaction - 1st Design Concept
In the first iteration of the “Recommended tailor-made chart templates” section, I explored a hover-based interaction. When users hovered over a chart tile, two options appeared:
– Preview, navigate to a detail page with in-depth metrics and insights
– Select, quickly choose the chart without reviewing details
This design aimed to offer efficiency for experienced users while still supporting exploration. However, in a usability test with 7 design partners, none chose the quick "Select" option. All participants preferred to preview the chart first before making a decision.
Based on these insights, I removed the quick-select option and moved the "Select" action to the detail page, simplifying the decision flow and aligning better with user behavior.
Quick chart view switching, show and hide values
Favorites & Bulk Add
The Favorite Templates section is also a way to engage users when empty, encouraging them to get started and add more templates…
Similar Chart: Seamless Discovery
Keep users engaged by suggesting relevant charts, right from the details page, without breaking their flow
PROTOTYPE
After high-fidelity mockups were approved and validated with design partners, it was time to create a prototype to showcase the end-to-end experience, ensuring all edges were covered for developers.
IMPACT
Key Metrics Highlighting Efficiency Gains and User Engagement
🚀 Results as follows:
80% reduction in onboarding
From 20 minutes to 5
💖 40% use the "favorites"
Speed up the flow and tailor it to each user
📨 0 support tickets
for query setup
