📊
Enhancing dashboard experience
Hypersonix.ai Ltd
Enhancing dashboard
experience
Hypersonix.ai Ltd
Enhancing dashboard
experience
Hypersonix.ai Ltd
A few sections from cashgram UI
WHAT IS IT
WHAT IS IT
WHAT IS IT
A landing page is tailored homepage for new incoming inbound users to effectively help them start. That serves as the vital link between the onboarding journey and the integration process
Document is a supporting product feature that helps create and save personalised dashboards for comparative studies for each user, based on their insights or search results within different products in Hypersonix platform.
CONTEXT
CONTEXT
CONTEXT
Revamped the landing page of Cashfree to address the existing gaps in onboarding, improve the integration experience and help provide merchants with a smooth frictionless journey towards product adoption.
Focused on a new user-centric and informative design, supporting merchants
throughout their journey, providing essential information, resources, and options to optimise their experience and achieve
business growth.
Improved the overall usability and efficiency of the dashboard experience by identifying and addressing critical user pain points.
This included optimizing screen space to ensure more effective data visualization, enabling users to restructure and group multiple cards for better organization and comparability, and streamlining the process of creating new cards by making the feature more discoverable .
Read Case Study
MY ROLE
Product Design
Interaction Design
Visual Design
MY TEAM
Navdeep - Design Head
Ashok - Product Manager
WHAT IS IT
Document is a supporting product feature that helps create and save personalised dashboards for comparative studies for each user, based on their insights or search results within different products in Hypersonix platform.
CONTEXT
Improved the overall usability and efficiency of the dashboard experience by identifying and addressing critical user pain points.
This included optimizing screen space to ensure more effective data visualization, enabling users to restructure and group multiple cards for better organization and comparability, and streamlining the process of creating new cards by making the feature more discoverable .
New dashboard data/graph card look
New dashboard data/graph card look
CONTEXT
Revamped the landing page of Cashfree to address the existing gaps in onboarding, improve the integration experience and help provide merchants with a smooth frictionless journey towards product adoption.
Focused on a new user-centric and informative design, supporting merchants
throughout their journey, providing essential information, resources, and options to optimise their experience and achieve
business growth.
To view the full case study, please open the link on a desktop 🙂
To view the full case study, please open the link on a desktop 🙂
Identifying user pain points
based on general customer
feedback led us to re-evaluate
current dashboard experience
PROBLEM 01
PROBLEM 01
Unoptimised screen
space
The primary function of cards to the user was data consumption and the existing design could only accommodate 60% of the space for this purpose.
01
An inefficient placement of the toggle at the bottom makes it difficult to switch between views.
02
The note-taking feature on the right sidebar was quite unused & consumed space that could potentially be used for data visualization.
Old card design in dashboard
Old card design in dashboard
SOLUTION 01
SOLUTION 01
Making room for
data visualization
After going through different iterations of cards and possible interactions and discussing pros and cons of explorations we finally arrived to this one which was the most ideal one that bought us more space as well as least dev effort to implement.
New - card interaction in our dashboards
PROBLEM 02
PROBLEM 02
Lack of card restructuring
& grouping
Comparability of displayed data was crucial for quick
decision making.These concerns raised by customers had to be addressed in this new version of documents.
Modifying the current structure of cards was not considered hence, giving users the ability to assemble & organize
multiple cards, had to be part of the layout control.
Design
iterations
To minimize the effort from design to development, a simplified iteration was done with the use of a checkbox to select and group cards.
Iteration 01
Iteration 01
CONS
CONS
❌ No. of clicks for this approach was high.
❌ No. of clicks for this approach was high.
Iteration 02
Iteration 02
CONS
CONS
❌ Rearranging cards wasn't possible.
❌ Rearranging cards wasn't possible.
SOLUTION 02
SOLUTION 02
Introducing card grouping
& layout control
Introducing card grouping & layout control
Implemented an outline control for selecting and grouping cards which also enabled card rearrangement to enhance data comparison.
Card grouping interaction
Card layout restructuring interaction
PROBLEM 03
PROBLEM 03
Friction in creating new cards
Adding a new card to documents had two functional drawbacks:
01
"Add a new card" was placed at the bottom of the page creating difficulty in visibility of this feature.
02
Newly created cards were empty by default, which was not beneficial, costing user's time to configure data into the card.
Old card addition design
Old card addition design
Design
iterations
Design
iterations
Some early iterations we did bringing a flexible card addition functionality which can be accessed any where the user needs.
Iteration 01
Iteration 01
CONS
CONS
❌ Buttons appearing while hovering in between cards can interfere with the content and does not respond accurately
❌ Buttons appearing while hovering in between cards can interfere with the content and does not respond accurately
❌ An interruption in the whole experience since charts
and data within a card tend to re-render in this approach
❌ An interruption in the whole experience since charts
and data within a card tend to re-render in this approach
Iteration 02
Iteration 02
CONS
CONS
❌ Add Card placed as a sticky button to the right side. User may find it difficult to judge the placement of the created card
❌ Add Card placed as a sticky button to the right side. User may find it difficult to judge the placement of the created card
❌ From an engineering standpoint, positioning a newly
created card can be tricky to implement
❌ From an engineering standpoint, positioning a newly
created card can be tricky to implement
SOLUTION 03
SOLUTION 03
Introduced quick add
interaction & preconfigured templates
After going through different iterations of cards and possible interactions and discussing pros and cons of explorations we finally arrived to this one which was the most ideal one that bought us more space as well as least dev effort to implement.
Final - quick add interaction
quicly adding preconfigured card template
quicly adding preconfigured card template
FINAL OUTCOME
FINAL OUTCOME
Measurable impact
on changes
Quantifying the user experience gave us a wider understanding on how our customers interacted with the product and noted a boost in NPS (Net Promoter Score) from 32 - 57
12%
🎉 Increase in DAU (Daily Active Users)
70%
Higher task success in card creation & grouping.
Higher task success in card creation & grouping.
🌱 Takeaway
Through the length of this project, we observed that multiple design solutions are at times difficult to envision but it is always worth trying & testing out the various perspective and take on things, before discarding any idea. Often times the most simplified interactions or solutions may look basic to us as creators but can perform well with the users.
🔮
Merchant home page
Cashfree Payments
Thanks for visiting my portfolio, Lets build together!
On Light
Thanks for
visiting my portfolio,
Lets build together!
Thanks for visiting my portfolio,
Lets build together!
Thanks for
visiting my portfolio,
Lets build together!