Insight cards show the four numbers admins check first
Component 01
Work / Case study 03 / UX & UI
V-Data Dense data, clear decisions
V-Data is a SaaS data-management app for election teams. Admins check what changed, find and contact voters, browse districts down to polling stations, and manage users, roles and elections from a phone. I designed the UX and UI, from the information architecture to the component library.
What I did
Information architectureDashboard designData visualisation
Design systemMobile UIPrototyping
Millions of records, a few decisions a day
V-Data holds voter records across a deep hierarchy: districts, taluks, constituencies, local bodies, wards and polling stations. Admins open it to see what changed, find a voter, update a record or reach someone, often on the move.
Data dashboards fail when they display everything and explain nothing. I organised the product around the decisions users actually make: what changed, what needs action, and what can wait behind a tap.
- Project
- V-Data
- Category
- SaaS data-management app
- Platform
- Mobile app, live on Google Play
- My role
- UI/UX designer
- Scope
- Information architecture, insights, lists and cards, data visualisation, component library
- Links
- Google Play · Behance
- Tools
- Figma
Design system
One blue, one typeface, colour that means something
A restrained interface: neutrals for structure, one blue for primary actions, and green and red kept for change. Cards summarise before they detail, and every component comes from a documented library, so new screens ship consistent by default.
The cards below are components from the Figma library, shown as they appear in the app.
Colour one blue for action, status colours only where they mean something
Component 02
Demographics switch between age, gender and religion in place
Component 03
Voter cards put the three ways to reach someone on the card
Component 04
Tabs and search keep the list and its statistics one tap apart
Component 05
District cards count every level below them
Component 06
Create voter is the one big button on the home screen
Component 07
Settings group users, roles and elections in one list
Component 08
Sign-in takes e-mail or phone in the same field
Component 09
Problem
Users drowning in tables need hierarchy
Users need to know what changed, what needs action and what can wait. Auditing comparable SaaS tools showed the same trap everywhere: dashboards that display everything and prioritise nothing.
On a phone the problem gets worse. A table with a dozen columns doesn't fit, so every screen has to decide what one record looks like at a glance, and what waits for a tap.
Users and goals
Two kinds of user, one interface
PRIMARY
The daily operator
Lives in the product, values speed and notices every inconsistency. Needs dense but ordered screens that reward familiarity.
SECONDARY
The occasional decision-maker
Drops in weekly for status and numbers. Needs summaries and trends without relearning the interface each visit.
Design goals
- 01The first screen answers "what needs me today?" before showing anything else.
- 02Summary first, detail on demand.
- 03Any record reachable in two interactions, by search or by place.
- 04The same patterns on every screen, so speed comes from muscle memory.
Information architecture
Three ways in: by number, by person, by place
Admins come to V-Data with one of three questions: what changed, who is this voter, or what is happening in this place. Each question has its own path, and settings sit outside them in one list.
VV-Data app
Seen onceSign in3 screens
- Admin sign in
- E-mail or phone
- Edit profile
By numberInsights5 screens
- Stat cards
- Change from last week
- Create voter
- Demographics chart
- Age · gender · religion
By personVoters5 screens
- Voter list
- Tabs + search
- Filters
- Voter card
- Call · WhatsApp · Mail
By placeDistricts5 screens
- Districts
- Taluks
- Constituencies
- Wards
- Polling stations
AdminSettings6 screens
- Profile
- Reward points
- Users
- Roles
- Elections
- Election winners
Key decisions
Four choices that kept dense screens readable
ACTION FIRST
The home screen leads with change
Four stat cards show totals and the change from last week, with the one primary action, Create Voter, right below. Charts come after.
PROGRESSIVE DISCLOSURE
Cards instead of wide tables
Each voter or district is a card with the few fields people scan for. Everything else is one tap away, so the list stays fast to read.
HONEST CHARTS
One chart, switched in place
Age, gender and religion share one donut with a switch above it, instead of three charts competing for the same screen.
SEARCH AND FILTERS
Every list starts with a search
Voters and districts both open on tabs, a search field and a filter, so any record is reachable without scrolling.
Process
How I worked through it
- 01Listed the tasks admins do every day, and the decision behind each
- 02Set the information hierarchy: summary, list, record
- 03Built a layout system for cards, lists and tabs
- 04Chose a chart for each question, not for looks
- 05Documented the component library
- 06Designed the high-fidelity screens and prototype
Interface
Dense screens, one shared library
Every screen is built from the same parts: stat cards, tabs, search, list cards, rows and buttons. Below is a selection from across the app.
Screens
Six screens, one pattern
Lists open on the same tabs and search, records are cards with the same anatomy, and management lives in one settings list. Once you know one screen, you know the rest.
Testing and iteration
Designed against real data volumes
Prototypes were tested against realistic data: hundreds of rows, awkward edge cases and long names, because SaaS designs that demo well often collapse under real data. The voter card, for example, keeps a long name like "John Davis Kottarathil Varghese" on one line and lets it truncate.
Iterations tightened the empty, loading and error states, the three screens teams usually forget.
What I took away
- 01Action first, data second. People open the app to do something.
- 02Dense is fine. Dense without hierarchy is not.
- 03In a daily-use tool, predictability is speed.
Keep exploring
Next: Salon website
Previous: Social Chat App