My Framer Site

CSAT

Dashboard

CSAT

Design

View Profile

Privacy mode

Portfolio Summary

Invested

₹ 1.52 L

Total PnL

₹ 9.52 L

+22.32%

Today’s PnL

₹ 2.53 L

+26.34%

Total Portfolio Value

₹ 2.38 L

19.2%

Family 1-Consolidated

As on 17 May, Friday 5pm

Analysis and updates will not be available in family-consolidated state

View your portfolio

Type

Self-initiated

Role

UX design, UI design,

research, illustration

Platform

Android, iOS

Design Tools

Figma

Designing an intuitive CSAT Dashboard to simplify customer satisfaction insights and drive actionable decision-making.

Hi i am working on mob version. It'd be awesome to view on desktop… Thanks

View on Desktop

Before

What makes it difficult to make decisions whether to buy or sell a stock from their portfolio?

Tackling this issue required a broader understanding. So i gave myself a 2 days understanding by doing secondary research and understood how?

Our users struggled with getting in a loop without a clear performance report about their invested stock

And stumbled on how to return back to their profile as there was two unclear gateways, (Nav sheet) and a lack of privacy to secure their portfolio data while travelling

Imaginary User Voices:

Oof i just need to quickly see how my investments are performing without digging through multiple pages or confusing data."

Oh my i thought the profile details on the left nav’d take me to the profile page but nope!

The invested stocks status influence my decisions; I want to understand the overall impact at a glance.

I rely on this dashboard to guide my financial decisions, so I need accurate and easy-to-read insights.

Which formed some key insights:

😶‍🌫️

Many users have stumbled on how to return back to their profile page as there was two unclear gateways which is too confusing

🔐

and Lack of privacy to secure their portfolio data while travelling or giving their mobile to others

🤔

Also i came to know most of our users where expecting a clear view about their equity performance ase they invested a lot in there

We can see the frustrations of struggling to take decisions and not knowing even in which stocks does their investment goes. Leads to a chaos experience in (Nuvama markets app)

Figuring out what to build

To start defining how the dashboard design should be and achieve, I needed

to specify one main problem to solve for. Based on my secondary research, I set out a problem statement:

What i Did?: I kept the design consistent with the Nuvama Market app while adding UX improvements to the equity section, enabling users to quickly understand their portfolio and make informed decisions.

This is an important problem that seriously impacts the investors

(rather than just being confusing UI), there is a loads of UX problems going in there

Here comes the toughest part. There was already loads of things going on. How we are gonna add this features & sections

Iconography

Some icons are closer to spot illustrations,

to help explain the concepts they represent.

Is that All?

The low fidelity designs was ready for ideating and to explain to the stakeholder. We deep dive each and every section and i personally sat with our Visual design head and discussed how things should be look to make it clear, compact and simple

I believe the 70% of timing should go for planning things then comes implementing it guess what it works!

After loads of discussions and planning we finally pulled up the designs in figma, and there went a huge iteration part and it is a long story to discuss:

Finally the tab features got approved and satisfied with a green signal from our BA side.

😉

The best thing in the new design was equity portfolio composition. This feature was loved by the business team, and got many appreciation for the in-detail design

We now had data-led benchmarks for comparison with future tests, and a clear priority for the next iteration had emerged: draw attention to the "add new" buttons.

I iterated on the low fidelity designs once more, ensuring a solid foundation for the visual design stage. Changes included enlarging and positioning all the "add new" buttons consistently, and revising the wording to be a clearer call to action.

In conclusion

There are always more improvements to make, but at this point Iwas happy with calling the design ready to build. Users could take decisions with ease, comprehending ux features and written language, and most importantly having a clear view on—their invested values. I believe almost every user would be able to take a wise decision by just looking on their dashboard, which meets the original goal statement:

The dashboard designs will now let the users who aren't satisfied with the current design on the app, to now can make their own decision and be aware of how their portfolio & investments going on. I will measure effectiveness through usability testing low and high fidelity designs once it is completely developed and tested.

The Future designs could account for more resourceful sections like, e.g.

introducing more learning resources on the update tab and knowledge the user to invest more and which time is best to buy and share their stocks so that the

new user groups who know less could be educated on how to invest.

Anyway, After all no product is ever truly finished…

*If you’re my roomie, those late-night clicks were the sound of productivity, no panic Ha Ha.

Design Squad Had My Back :

Vineet, dileepan, Arjun, febin, Shubham

Typefaces Used

Ariel, Times new roman

Ph.No

6384713508

Mail me: Jananaprriyasriramar@gmail.com

We could help David limit waste by asking

how each bird reacted to an ingredient, or

offer free samples to try ahead of making

a mix.

Users might be guided through creating a

mix with detailed nutritional breakdowns, or

broader guidance on macro balances with

actionable fixes.

Before

30%

20%

10%

40%

Telecom

2 Stocks

Media

5 Stocks

Pharmaceuticals

1 Stock

6 Stocks

Auto & Auto Ancillaries

View All

Equity Portfolio Composition

Sector Wise

Contribution

Market Cap

After

Equity Portfolio Composition

Sector Wise

Contribution

Market Cap

Highly invested

Auto & Auto Ancillaries

40 Stocks - 40%

Telecom

20 Stocks - 20%

Energy

20 Stocks - 20%

Media

10 Stocks - 10%

Others

10 Stocks - 10%

10:00

Dashboard

Sensex

101,366

8,240

Nifty

22,829

2,630

View Profile

Privacy mode

Portfolio Summary

Click to view all Asset classes

Positions (5)

View All

Today’s MTM

₹ 12,43,345

Net MTM

₹ 12,43,345

Add Funds

View Details

Portfolio Insights

Portfolio Updates

Portfolio Analysis

Gainers & Losers

In your portfolio

In the market

Zomato

₹271.83

+7.84 (2.98%)

Gland

₹271.83

+7.84 (2.98%)

ICICI Bank

₹271.83

+7.84 (2.98%)

View All

DIXON

₹271.83

-7.84 (2.98%)

TRIVENI

₹271.83

-7.84 (2.98%)

NUVAMA

₹271.83

-7.84 (2.98%)

View All

Equity Portfolio Composition

Sector Wise

Contribution

Market Cap

Large Cap

Highly invested

Adani Ports

Name of Stock

% of Contribution

Adani Ports

15%

HDFC Bank

12%

Bajaj Auto

10%

SBI

10%

Hindustan Unilever

13%

This approach will not only gives a clear data and reduce the clicks. It solves the problem of changing to a next market cap

Before while with the first iteration it was totally confusing and increase with the overloaded content

Before the final iteration. The drop down doesn’t actually gives a way to add family

Then we bring it up with this solution by giving out a 3D illustration to add family.

10:00

Dashboard

Sensex

101,366

8,240

Nifty

22,829

2,630

View Profile

Privacy mode

Click to view all Asset classes

Invested

₹ 1.52 L

Total PnL

₹ 9.52 L

+22.32%

Today’s PnL

₹ 2.53 L

+26.34%

Total Portfolio Value

₹ 2.38 L

19.2%

Your Portfolio

As on 17 May, Friday 5pm

Positions (5)

View All

Today’s MTM

₹ 12,43,345

Net MTM

₹ 12,43,345

Limits Available

₹ 3,32,34,345

Cash Available

₹ 1,12,43,345

Add Funds

View Details

Updates

Portfolio Analysis

Upcoming SIPs

View All

Your Stocks in News

View All

Kicking it up to high fidelity

I started moving into visual design by collecting references,

research, and inspiration for the dark mode theme. and discussed with my senior visual designer, and finally organised everything with the senior UX Designer

I created a space for loose exploration where I could test colour palettes, type pairing, component styles, and a lot of different layouts for key screens. The process was largely non-linear—trying some combinations, then returning to my research, before going back to adjust styles and exploring another direction.

Visual design is not a colour-by-numbers exercise

I made several changes from the wireframes to improve usability.

The equity portfolio composition’s data chart weren't adding much except clutter—instead,

I banked it as a potential feature to implement a pie chart to represent the data and even implemented further down the roadmap. I also added an option with a dropdown to

specify each with a sector wise view to help the user to better understand what type of stocks were performing well on the market.

I made plenty of tweaks to simplify features and provide better user control. I examined the flexibility and development feasibility ofeach sections, and ensured tone and style were consistent in the copy and micro-copy. Just like the current design on our app.

We could help David limit waste by asking

how each bird reacted to an ingredient, or

offer free samples to try ahead of making

a mix.

Users might be guided through creating a

mix with detailed nutritional breakdowns, or

broader guidance on macro balances with

actionable fixes.

Time to investigate the real challenges

I set up a Figma designs and sought another round of design

critique. All of a sudden there was a new requirement jumped in which is to add family portfolio inside.

Using the same pattern followed in family reporting. I gotta use the same style as it was already developed. and might be easy for the user to recognise it functionality to use.

To rechange the UI Placement was a bit hard, As i already done with the Hi-fi designs

The design was clutter with no breathing space between

Not sure how much does the view profile will make a good benift for all the user inside the dashboard

The UI-placement was confused and the flow was improper when the new requirement pitch it

👨🏻‍💻

Anyway with the help of senior designer i nailed it, But a lot of technical & complicated things to understand

After a 3 week of continuous iteration, and loads of constraints from the BA team, I finally gave a solution which can actually works well with old style of our app design and simple yet effective to navigate and easy to access

This was a solid foundation to build on. I created a minimal designs and sought critique from my manage and other designers.

I was lucky enough to get some insightful feedback, and implemented several ux ideas. For example, I added a tab function to group the info together yet keeping it simple. I also split the sections way more clear to consume the portfolio values in order

Organising the data

“Wouldn't it be great", “to be the voice

of the user to help them make best decision to gain a good profit from their portfolio at the same time considering the business requirements?"

In January 2025, I designed the

CSAT Dashboard

to help investors better understand

their portfolios and improve customer satisfaction. customer satisfaction. The goal was to turn scattered data into a simple, unified platform that provides clear, actionable insights.

I found that the existing dashboards were either too complicated or didn’t offer enough flexibility, leaving users confused or uniformed. My challenge was to create a design that looked great and made it easy for users to turn raw data into meaningful decisions

We could help David limit waste by asking

how each bird reacted to an ingredient, or

offer free samples to try ahead of making

a mix.

A few rough sketches for the brainstorming stage to check whether the requirements and our solutions were right or not?

We could help David limit waste by asking

how each bird reacted to an ingredient, or

offer free samples to try ahead of making

a mix.

Finally the ideas was made through low-fi wireframes within in a day to present it with our manager and stakeholder to run through the idea that we bring up.

I used the same process to produce

hifi-wireframes for other core screens.

We could help David limit waste by asking

how each bird reacted to an ingredient, or

offer free samples to try ahead of making

a mix.

After a few discussion i quickly created a hi-fi designs to ensure things were going right. And checked it with our visual design lead

So how can I create a solution that will really help the user and create an appropriate impact to take invest wisely?

Observing competitors:

I’ve observed all of our competitors like groww, dhan etc to understand how others were doing it in adjacent (Compact) spaces? I audited thoroughly also saw the other common pattern followed for dashboard designs. Focusing on their customisation and flexibility to navigate, I noted some key differentiators—notably around the importance of sections that they’ve involved in a consumable way.

To understand what features would serve the users best, I laid out a

unique value proposition that addressed my user's needs

and frustrations:

👀

View profile & Privacy mode

📈

Top gainers & Losers for my portfolio

Equity portfolio composition

🗞️

Your stock in news

👨🏻👩🏻‍🦱

Family portfolio

We now have a list of the most useful sections to start designing.

Scope and structure

I focused the project on a mobile-first Android design to keep it practical and achievable. The goal was to create designs that balanced user needs and business goals, planning for edge cases, smooth transitions, and scalability.

With a goal statement set out:

By considering all the requirements and needs we introduced two features including the (family portfolio view)

Updates:

For a clear view like Upcoming SIP & Stock in news

Analysis:

Equity- Gainers, Losers & Equity portfolio composition

Limits Available

₹ 3,32,34,345

Cash Available

₹ 1,12,43,345

Add Funds

View Details