👋 Welcome, to my portfolio

{{ typedHero }}A HUMAN BY
DEFAULT,
A DESIGNER
BY CHOICE.

👋 Hello
~/work
6 projects · 4 live · 2 in progress — fintech, design systems & GTM tooling
{{ s.icon }} {{ s.status }}
★ FLAGSHIP
{{ s.title }}
{{ s.sub }}
🔍 {{ aboutQuery }}
1 result found (0.03s) — showing best match
Bangalore 5 years Senior Product Design

👋 Hello,
I'm Sravanthi Dhannarapu, a passionate product designer based in Bangalore, India. With nearly four years of experience, I craft compelling experiences that blend functionality with aesthetics. Inspired by the intersection of art, design, and technology, I see every project as an opportunity to create something meaningful.

LinkedIn
Career
{{ c.initial }} {{ c.org }} {{ c.role }} {{ c.dates }}
{{ b.t }}
Education
S UI/UX Design, Certification Springboard 2021
VIT Bachelors in CSE Vellore Institute of Technology 2016 - 2020
How I work
🧩
Systems over screens
One good pattern beats ten good pages. I design the rules first, so every new screen ships faster and feels familiar.
🔍
Follow the friction
Support tickets, workarounds and sighs in user calls are my roadmap. The best problems are the ones users have stopped complaining about.
⚙️
Default to done
A shipped 80% teaches more than a perfect mockup. I get designs into engineers' hands early and iterate on what's real.
why_pixels.txt

Why pixels? Monday to Friday, I design B2B fintech software, where every pixel gets interrogated by a compliance team before it's cleared for duty. Important work. Not a lot of fun.

This site is where the fun lives instead.

Turns out pixel art has its own rules too: a locked grid, a tiny palette, no room for a pixel that hasn't earned its keep. I just enjoy these rules more. They don't need anyone's sign-off.

★ FUN FACT Old game sprites often reused the exact same handful of pixels across dozens of characters, just recolored or flipped. Constraint didn't just shape the art style, it was the production pipeline.
* HINT Psst... ↑ ↑ ↓ ↓ ← → ← → ... you know the rest. 👾
Currently designing my way into your inbox!
Open to senior product design roles — let's talk.
{{ ic.label }}
✳ made with pixels — © 2026 Sravanthi
{{ caseFile }}
{{ readPctText }}
opening {{ caseFile }}
{{ loadBar }}
{{ loadPctText }}

{{ caseTitle }}

{{ caseSub }}

{{ tg.t }}
Profile

Senior Product Designer with five years of end-to-end product design experience in fintech and B2B SaaS (Business-to-Business Software as a Service). Owns product direction across two products, leads a team of two designers, and founded a design system used by design and engineering. Strongest in ambiguous, systems-heavy problem spaces: discovery and problem framing, untangling complex workflows, and building scalable design solutions from discovery through delivery.

Employment History
Senior Product Designer — Volopay
BENGALURU · OCTOBER 2021 – PRESENT
Designed the majority of Volopay's spend management platform across web and mobile: onboarding, corporate cards, bill pay, reimbursements, approvals and accounting integrations.
Adapted core flows for markets across APAC (Asia-Pacific), each carrying its own regulatory rules and workflow expectations.
Drove the V1 to V2 product evolution, rebuilding information architecture (IA), navigation and core user flows without disrupting existing customers.
Designed Fly Design System, Volopay's component library, defining components, design tokens and documentation as the shared source of truth for design and engineering.
Designed the Policy Agent, an AI compliance layer that reviews receipts and flags policy breaches before they reach the finance team.
Lead a team of two designers: setting design direction, running design critiques, allocating work across parallel product tracks and mentoring on craft.
Collaborate cross-functionally with product management, engineering, growth and marketing from discovery through delivery and launch.
Run user research and usability testing on high-risk flows, using qualitative feedback, support themes and product analytics to make data- informed decisions.
Own design handoff to engineering, documenting states, edge cases and specifications so what ships matches design intent.
Set product terminology and UX writing standards across modules, resolving inconsistent language before release.
Audit live flows for usability, information hierarchy and validation gaps, turning findings into prioritized improvement roadmaps.
Present design rationale to founders and stakeholders, translating business goals into roadmap-ready design direction.
Senior Product Designer — Oxo (Sales Outbound Tool)
2025 – PRESENT
Designed Oxo from building to launch over one year, discovery, product definition, information architecture, interaction design and visual design as the sole designer on the product.
Shaped the outbound workflow end to end: prospect lists, sequence building, multi-channel outreach, inbox and reply handling, and reporting, turning a sprawling sales process into a small set of screens a sales representative can work out of daily.
Built a component library for Oxo so a features could ship consistently at speed.
Built the product's user interface (UI) foundations from scratch and shipped it as a standalone launch alongside the core fintech platform.
Product Design Intern — Juno
BENGALURU · AUGUST 2021 – OCTOBER 2021
Iterated on concepts for the mobile app alongside the product team, moving from rough directions to testable flows.
Analysed user feedback and market research to inform design decisions, and supported marketing to informed design decisions.
Education
Certification, UI/UX Design
Springboard
JUNE 2020 – JULY 2021
B.Tech, Computer Science
Vellore Institute of Technology, Chennai
JUNE 2016 – JUNE 2020
Skills
Product Strategy 0 → 1 Product Design Design Systems Interaction Design AI & Agentic UX Complex Workflows User Research Usability Testing Wireframing Prototyping Information Architecture UX Writing Design Ops Mentoring & Team Leadership Stakeholder Management
Tools
Figma FigJam Framer ProtoPie Storybook Webflow Adobe Illustrator Lottie Miro Notion Claude & AI tooling
Details
Bengaluru, India
+91 96037 06037
dhannarapusravanthi@gmail.com
Languages
English
Telugu
Hindi
LOAD FAILED
this case study is still under construction
▓▓▓▓▓▓░░░░
62% BUILT — {{ wipEta }}
WHAT'S COMING
{{ w.t }}
Context

Volopay helps finance teams control company spend across four core workflows: corporate cards, vendor bill payments, reimbursements and accounting. I worked on design across all four workflows as the product matured from an early, MVP tool into a platform built for mid-market and enterprise finance teams.

This case study covers that evolution: what broke at scale, what we rebuilt, and the compliance-automation layer that tied the four modules together.

The problem

The MVP solved a real pain point: no more manual expense spreadsheets. But it was built for small teams making a handful of decisions a month. As customers scaled to hundreds of employees and thousands of monthly transactions, the product's early shortcuts turned into recurring cracks across research and support tickets.

Policy lived in people's heads, not the product
Finance teams enforced spend rules manually: reviewing receipts, flagging duplicates, chasing missing invoices, because the product had no way to encode "what's allowed."
Every workflow worked in isolation
Cards, Bill Pay, and Reimbursements had separate settings, approval logic, and mental models, even though a finance admin thinks of "company spend" as one thing.
Complex, cluttered configuration UI
Where settings did exist, they were scattered across many inconsistently-worded screens, making the product feel cluttered and slowing down even simple admin tasks.
Scalability cracked under growth
Workflows tuned for a handful of monthly decisions didn't hold up once customers had hundreds of employees and thousands of monthly transactions; manual review simply couldn't keep pace.
The goal
1
Unify all workflows around one mental model
Use Fly design system shared components and patterns to make every workflow feel consistent and easier to use with a shared structure and vocabulary.
2
Encode policy into the product
Make compliance something the product enforces, not something finance remembers to check manually.
3
Make setup faster, not sessions
Cut the number of screens and decisions needed to set up compliance rules.
4
Give employees visibility without needing finance
Let employees check their own activity and pending actions directly.
5
Make the product hold up at scale
Ensure workflows and performance actually work at hundreds of employees and thousands of transactions.
🖥️ CORPORATE CARDS

What we built: Corporate Cards gives finance teams a way to extend controlled spending power to employees, instead of routing every purchase through reimbursement. Each card carries its own limits and restrictions, set by the admin issuing it.

BEFORE
Card issuance and controls existed, but spend rules were static and manually monitored. Admins found out about a policy violation after the fact, usually during reconciliation.
AFTER
Cards became the most configurable module, with real-time controls. Admins could stop a non-compliant transaction before it settled, not just flag it in a report weeks later.
Flexible limits, frequency and granular spend controls
Real-time transaction visibility tied to policy state
"Flag" escalation, an opt-in control that blocks approval outright
Agent activity
🖥️ BILLPAY

What we built: Bill Pay is how finance teams pay vendors and suppliers directly from the platform, domestically and internationally, across multiple currencies. It replaces manual bank transfers and spreadsheet tracking with one place to review, approve, and pay invoices.

BEFORE
Vendor payments were functional but reactive. Duplicate invoices, mismatched line items, and inconsistent vendor records were caught manually by finance ops, if at all, usually after a payment had already gone out.
AFTER
Bill Pay was scoped to always-on detection with clear explanatory copy about what was being checked and why.
OCR for creating bills
Automated duplicate invoice detection
Line-item and vendor-consistency checks against transaction data
Partial and advance payments
Multi currency payments
Locked-state settings screens with plain-language explanations
🖥️ REIMBURSEMENT

What we built: Reimbursements is how employees get repaid for expenses they've covered themselves: submit a receipt, route it for approval, and track it through to payout.

BEFORE
Employees submitted receipts; finance manually checked line items. This was the slowest, most support-heavy part of the product; reimbursement cycles routinely stretched into weeks.
AFTER
Moved to always-on automated checks, cutting the manual review burden dramatically. The bigger unlock was consistency: the same duplicate-detection and line-item logic now applied identically across expense claims, bills, and card transactions, so finance teams weren't learning three different rule sets.
Automated duplicate receipt detection
Category-based line-item flagging with restricted-category chips
Reimbursements per line item level
OCR creation for claims
🖥️ ACCOUNTING

What we built: Accounting is how data from Cards, Bill Pay, and Reimbursements gets synced to the company's accounting software, mapped to the right categories and ledgers automatically, instead of finance re-entering it by hand.

BEFORE
Finance teams manually exported transactions and re-entered them into their accounting software, a slow, error-prone process.
AFTER
Accounting introduced direct, automated sync with major accounting platforms, with category-to-ledger mapping handled inside Volopay. Transactions flowed through as they happened rather than in a manual batch at month-end, cutting reconciliation errors and the time finance spent on close.
Direct integrations with accounting platforms (Xero, QuickBooks, NetSuite, Tally, MYOB)
Automatic category-to-ledger mapping, replacing manual re-entry
Real-time sync, reducing the manual reconciliation work concentrated at month-end close
📱 MY VOLOPAY

What we built: My Volopay is the employee's personal home base in the product: their own card activity, reimbursement claims, and pending tasks, all in one place. It exists so employees never have to ask "where's my stuff?" or go through finance just to check on their own activity.

Unified personal activity feed across Cards and Reimbursements
"Pending tasks" view surfacing anything blocking the employee
Self-serve status checks, removing the need to ping finance for routine updates

Why it mattered: it's a small module by scope but it directly reduced support load and gave every employee, not just finance admins, a reason to open the product regularly, which helped adoption to the rest of the Platform era.

Outcome

The result was a product finance teams could trust from day one, not one they had to learn to distrust less over time. Compliance moved from something finance remembered to do, to something the product did by default; four workflows that once felt like four separate tools started behaving like one system; and employees stopped needing finance's help just to check on their own activity.

About Volopay

Volopay is a spend management platform built for finance teams, combining all workflows into a single product. As the company scaled, so did the surface area finance teams had to manage, with increasingly complex compliance sitting behind every action. That growth is exactly what made a consistent design language non-negotiable.

The problem: a product growing faster than its UI

Before Fly, Volopay's UI had grown the way most fast-moving fintech products do: organically, and inconsistently. Different workflows across Corporate Cards, Bill Pay, and Reimbursements had been designed at different times, by different people, under different deadlines. There was no shared source of truth.

Visual inconsistency across workflows
The same type of action could look and behave differently depending on which part of the product you were in.
Broken UX continuity
Because components weren't standardized, users moving from one workflow to another had to re-learn small interaction patterns each time, instead of relying on muscle memory.
Compounding design debt
Every new feature added another one-off component, making the product harder to design and harder to build consistently.
Lack of scalability
The existing setup wasn't built to support new modules, platforms, or use cases. Every new feature meant starting from zero rather than extending something that already existed, so design effort kept growing in lockstep with the product instead of getting easier over time.

This wasn't just a visual problem. Inconsistent patterns were quietly making it harder for users to get from Point A to Point B, adding friction to tasks that should have felt instant and obvious.

We knew patching individual screens wouldn't fix this. The product needed a foundational layer everything else could be built on top of.

The goal

With the problems clear, we set out with a few concrete goals for Fly:

1
Establish one visual language
Across Web and Mobile, so the product felt like a single, coherent experience regardless of which module a user was in.
2
Reduce design-to-dev friction
By giving engineers a shared, documented source of truth instead of one-off Figma files to interpret each time.
3
Build for scale
Not just for what existed today, so new modules and features could be designed faster by extending the system rather than starting over.
4
Make consistency the default
Not something designers had to remember to enforce screen by screen.
Why "Fly"?

The name isn't decorative. Volopay takes its root from the Latin verb volo, meaning "to fly." It's the same root that gives us words like volatile and volley, all carrying that same idea of movement, lift, and speed. When we set out to name the design system, we wanted something that echoed the company's own name rather than sitting beside it as an unrelated brand.

Fly became the natural choice: a system built to help the product (and the people building it) move faster, with less friction, and with a shared sense of direction. It was also, quietly, a nod to what we wanted the system itself to do, letting designers and engineers stop rebuilding the same wheel and start moving quickly across the product.

The approach: 

We chose Atomic Design as our methodology because it mirrors how a spend management product actually behaves: small, well-defined pieces that combine into increasingly complex, real workflows. Rather than treating it as an abstract framework, we mapped each layer directly onto Volopay's existing product surface.

⚛ ATOMS
The indivisible building blocks, including color, typography scales, iconography, spacing units, and base elements. This was the layer where consistency mattered most, because every inconsistency here would multiply exponentially as it moved up the system.
🧬 MOLECULES
Atoms were combined to form molecules – more complex components like form fields with labels and buttons with icons.
🦠 ORGANISMS
Molecules were grouped to create organisms – larger, cohesive sections of the interface such as headers, footers, and navigation bars.
📐 TEMPLATES & PAGES
Where it all came together, the actual layouts for flows like bill creation, card issuance, and reimbursement approval, now built from a shared vocabulary instead of being designed from scratch each time.

Working through the hierarchy this way forced an important discipline: we couldn't jump straight to solving a screen. Every new pattern had to justify itself at the right layer first, which meant far fewer one-off components sneaking into the product over time.

From Atoms to interfaces

A look at how the building blocks came together across real screens.

Feedback

We didn't build in isolation. Once we had working drafts of the core library, we ran iterative feedback loops with:

Product Managers, to stress-test whether components could flex to support upcoming roadmap features without needing rework
Founders, to validate that the system reflected the visual and brand direction they wanted for Volopay long-term
Engineers, to make sure what we designed in Figma was actually buildable and maintainable in code, not just clean in the design file

This loop of feedback and iteration meant Fly wasn't handed down as a finished artifact. It was shaped by the people who'd actually have to live inside it every day.

Outcome
~50% of new screens built using Fly components within the first two quarters of rollout
Design-to-dev handoff time cut of massively, as engineers could reference a shared, documented component library instead of interpreting one-off designs
1400+ components and patterns shipped across covering Web and Mobile
Noticeably faster onboarding for new designers joining the team, who could get productive against real product surfaces within days instead of weeks
Reflection

Fly wasn't just a component library. It was the first time Volopay's product had one visual and interaction language across every module. Beyond the metrics, what made this project meaningful was watching a two-person effort quietly become the default way the entire design and engineering org built product: a small, deliberate decision at the Atom level rippling out into a faster, more coherent experience for every Volopay user.

Context

Volopay's mobile app exists for one reason: to let finance move at the speed of real life. Approvals shouldn't wait until someone's back at their desk. A claim from a work trip shouldn't have to wait until you're home. The mobile app is, in effect, a portable version of "My Volopay" — the section of the web app centered on your activity, your pending actions, your approvals, your claims — stripped down to what you need when you're away from a desktop.

The problem

The MVP app didn't live up to that promise. It was functional in the sense that the APIs worked, but it had a compounding set of issues across the whole app:

No end-to-end thinking
Flows were designed screen-by-screen rather than as journeys. A user could get an action done, but the path there and back wasn't considered: dead ends, unclear next steps, and inconsistent navigation.
Clutter
Screens tried to surface everything at once instead of prioritizing what a user on the go actually needed in that moment, like a pending approval, a claim to submit, or a card to check.
Visual and interaction inconsistency
Because flows had been built independently and incrementally, the app didn't feel like one product. Components, spacing, and interaction patterns drifted from screen to screen and didn't reflect the maturity of the Fly design system that by then existed on web.
Mismatch with intent
The mobile app is supposed to be the fast, on-the-go counterpart to "My Volopay" on web.
The process

Because I was working across every flow rather than owning one narrow piece, my process looked less like a single linear design sprint and more like continuous triage and rebuild:

1
Audit existing flows
Went through the shipped and in-progress flows (including ones designed by other members of the team) end-to-end, as a user would, to find where journeys broke down, not just individual screens in isolation.
2
Reset around the app's real purpose
Re-anchored every flow to the "finance on the go" intent: what does someone need to do in under a minute, one-handed, possibly on a trip? This became the filter for what stayed, what got cut, and what got redesigned.
3
Rework, don't just polish
For flows that had fundamental structural issues, I didn't do a surface-level visual pass. I redid the flow logic itself, then rebuilt the UI on top of that, sometimes replacing work that had already shipped.
4
Bring it in line with Fly
Reconciled mobile patterns with the Fly design system so mobile stopped feeling like a separate, less mature product from web.
What changed, flow by flow

Not a coat of paint. Every flow was rebuilt from the logic up.

📱 HOME & ACTIVITY

The home screen needed to answer one question immediately: what needs my attention right now? Pending approvals, recent activity, and required actions were restructured to be scannable at a glance rather than buried under general navigation.

📱 APPROVALS ON THE GO

Approving spend from a phone needed to feel as trustworthy as approving it on desktop: enough context to make a confident decision, without needing to tap through to five other screens first.

📱 CLAIM CREATION

This is the flow that matters most for the app's "finance on the go" promise: someone on a work trip capturing and submitting a claim in the moment, rather than saving receipts to deal with later. The v1 version of this had too much friction for a moment when the user has neither the time nor the patience for it.

Outcome
Reduced steps to complete a claim submission on mobile
Increased approval completion rate 
Reduced drop-off in the claim creation, due to OCR and automatic draft creation
Easy access to update card limits, cards contols
Managing activity through notifications and alerts
Reflection

This project was less about a single clever redesign and more about raising the bar for what the mobile app needed to be, and being willing to rework things, including work already shipped, when they didn't meet that bar. The result is an app that actually fulfills its purpose: letting people handle finance in the moments when they can't get to a desktop, without the app itself getting in the way.

Overview

OXO is an outbound execution platform that takes a sales team from "who should we reach?" to "they replied and want a demo", inside a single connected system. We defined the core mental model, designed the workflows that let a team run outbound at scale without losing quality control.

This wasn't a redesign. There was no existing product, no legacy screens to inherit, and no established patterns to lean on. The job was to take a genuinely fragmented category, one tool to find leads, another to write copy, another to send, another to track, and design a single operating system that could hold all of it together without becoming a maze.

The problem

Sales teams running outbound today stitch together 4 to 6 separate tools, and lose context at every handoff between them. The brief was to build one system where a team defines a campaign once, and everything downstream flows from that single definition.

Fragmented tooling
A data provider for leads, a copywriting/AI tool, a sending platform, and a CRM, all disconnected.
Context lost at every handoff
The email tool doesn't know why a lead was chosen; the CRM doesn't know what messaging angle was used.
No shared view of performance
No one has a clear view of why a campaign is or isn't working.
The stakes of the mental model
Get the mental model wrong, and every screen built on top of it inherits the confusion.

The hard part wasn't any single screen. It was that this is a system design problem before it's an interface design problem.

Discovery: finding the real shape of the problem

Before designing anything, I looked at how sales teams actually run outbound today, not the ideal version, the real one.

1
Walk through the current process
Finding leads, writing copy, sending emails, tracking replies, each step happens in a different tool. I traced this journey to see where teams waste time or lose trust, like sending from an unwarmed mailbox and only noticing weeks later when replies stop coming in.
2
Spot where things fall apart
Every time a tool hands off to the next one, something gets lost. Why a lead was picked, what messaging worked before, why an email was written a certain way, none of it carries over.
Turning discovery into insights
Teams shouldn't have to repeat themselves
So we built a shared knowledge base every part of the product can pull from.
Leads shouldn't disappear after one campaign
So we kept leads and campaigns as two separate things, leads stick around and can be reused.
Speed can't come at the cost of quality
So AI drafts everything, but a human always reviews before it goes out.
Structuring the system

Organized OXO around one continuous flow, where each module has a single job and feeds directly into the next:

ONBOARDING LIBRARY PLAYBOOK CAMPAIGNS TASKS MASTER INBOX
🖥️ ONBOARDING

What it does: Sets up the workspace once — connecting mailboxes, defining the company's ICP, and capturing the messaging context every downstream module reuses, so a team never has to repeat itself.

🖥️ LIBRARY

What it does: The shared knowledge base — leads, accounts and reusable assets live here independently of any campaign, so nothing disappears after a single send.

🖥️ PLAYBOOK

What it does: Where outreach logic is defined — sequences, messaging angles and rules that turn a strategy into something repeatable across campaigns.

🖥️ CAMPAIGNS

What it does: The launch surface — define a campaign once across four steps (overview, audience, sequence, readiness check) and everything downstream flows from that single definition.

🖥️ MASTER INBOX

What it does: Where replies land — Reply Intelligence pre-classifies every response, so the inbox reads as a prioritized queue instead of an undifferentiated pile.

🖥️ TASKS

What it does: The rep's daily to-do — every action a campaign generates (reviews, follow-ups, replies to send) surfaces here as a prioritized queue, so a rep always knows exactly what to work on next.

Five decisions that shaped the system
1
Two states per lead
Delivery status and business outcome are tracked separately, so a stalled lead never gets confused with an unactioned one.
2
A review step before anything sends
AI drafts every email, but a rep approves, edits, or regenerates before it goes out.
3
Mailbox health, visible where it matters
Readiness status sits inside the campaign flow, not buried in a backend dashboard.
4
Replies triaged before they're read
Reply Intelligence pre-classifies every reply, so the inbox reads as a prioritized queue.
5
Campaign creation in four steps
Overview, audience, sequence, and a final readiness check before anything commits.
Outcome
Reduced the number of separate tools a sales team needs from outbound to reply-handling from ~5 to 1
Lesser time now needed to create and start campaigns
Replies auto-classified correctly by Reply Intelligence, reducing manual triage time
Context now carries across the whole flow — why a lead was chosen the messaging angle from playbook through to the Master Inbox, with nothing lost at handoffs
Every email can be human-reviewed if approval is on before it sends, so speed no longer comes at the cost of quality or deliverability
Reflection

The core lesson from OXO was that in a 0-to-1 system this interconnected, the interface design is downstream of the information architecture, and the IA is downstream of a small number of conceptual distinctions that have to be gotten right early. Getting those distinctions right made nearly every subsequent screen easier to design, because there was always a clear, defensible answer for where a piece of information belonged and why.

Next case study
{{ nextTitle }} →
Good design shouldn't be an afterthought!
If that's a problem you're solving, I'd love to help
Designing spend management by day, my career by night
Kidding — but only a little. Let's talk about what's next
Somewhere between Figma and shipped!
That's where I like to work. Reach out if that sounds like your team
Pixels, systems, and a little bit of chaos!
I turn all three into products people actually enjoy using
{{ mw.file }}
{{ mw.title }} OPEN
★ YOU FOUND IT ★

The Konami code. Respect — that's exactly the kind of curiosity I design for. 30 lives granted.

Let's talk →
click anywhere to dismiss
SRAVANTHI_OS
{{ saverClock }}
press any key to wake
sravanthi_os.boot
SRAVANTHI OS
v2.0 — pixel edition
{{ bootLog }}{{ bootPctText }}
{{ ln.t }}
{{ L.c }}
8-bit chime ahead — toggle SND in the navbar anytime