Hopscotch, the all-in-one invoicing, bill pay, and cash flow management software for small businesses. Instant payments as well as fee-free bank transfers and low-rate credit card options.
Contribution
Discovery, UX, UI, motion design, design system
Role
Lead Product Designer
Industry
Fintech
Years
2024 – now
Key achievement
The redesign I implemented resulted in significant revenue growth and played a crucial role in the successful startup exit, followed by its acquisition by Avalara in August 2024. More detailed figures are available in the outcomes section.
Redesigned dashboard from the ground up to support long-term scalability and deliver a smoother, more intuitive first-time user experience — with a focus on clarity, usability, and system coherence.
My role
When I joined the company, I analyzed the product's state, business model, customers, and customer support challenges. My role was to elevate design, address issues, and create a more delightful product experience.
I've been working closely with management, product teams, and marketing to offer customers an exceptional experience, challenging the outdated perception of financial products. At Hopscotch, we're making a difference.
Challenge
Hopscotch is a modern B2B payment platform designed to simplify how businesses send, receive, and manage payments. As the product matured, onboarding became a critical bottleneck — users were signing up, but too many were stalling before reaching their first successful payment.
I took ownership of redesigning several core product views, including the dashboard and accounting pages, where clarity, trust, and information hierarchy were essential. These were the surfaces where users either built confidence in the product — or churned.
Because Hopscotch operates in a crowded fintech space, visual polish, performance, and trust were just as important as UX logic. To support this, I also introduced subtle UI motion to guide attention, reinforce hierarchy, and create a smoother, more intuitive product feel.
My approach
Step 1 – Audit & Insight
I reviewed existing flows and analytics, identifying friction points across onboarding, dashboard, and accounting pages. I also benchmarked other fintech products to evaluate areas where we can achieve success.
Step 2 – Wireframe & Define
I mapped a new onboarding flow with:
- Progressive disclosure – asking only what’s needed at each step,
- Trust cues – microcopy and layout choices that reduce anxiety,
- Strategic flow logic – prioritizing activation over data collection.
In parallel, I proposed structural and visual improvements to the dashboard and accounting views – focusing on clarity, account state visibility, and responsiveness.
Step 3 – High-Fidelity UI
I designed high-fidelity screens and applied a consistent design language across all core surfaces. I also implemented microinteractions and UI motion to:
- Make transitions feel intentional,
- Reinforce user input feedback,
- Add subtle delight without slowing the experience.
Step 4 – Prototype & Feedback
I assembled an interactive prototype and ran walkthroughs with stakeholders across product, compliance, and support – refining flows based on edge cases and real-world expectations.
Solved problems
We aimed to create a user experience that is easy and welcoming. We crafted friendly greetings for various times of the day or situations. After a brief pause, the interface transitions to show the account summary.
I also designed mini widgets for accounts payable and receivable, enabling users to quickly understand their financial forecast.
I designed several widgets from scratch, while others I simply redesigned, adding the necessary finishing touches.
Below is a highly visual version of the Hopscotch Balance widget. On the dashboard page, we opted for a more compact version without the graph.
The new vertical navigation enhances product scalability and offers additional space to increase awareness of product plans.
Since the notifications widget plays a crucial role in the user experience, we needed to determine what should happen when users click the notifications icon while on the dashboard (home) page. I proposed highlighting "Notifications" with our branded yellow brush animation.
I redesigned the accounting pages with a focus on enhanced readability and accessibility. This included the design of charts, tables, and transaction cards.
I aimed to improve the conversion rate from free to pro users by streamlining the methods the system uses to inform them, ensuring it remains engaging without being overly aggressive.
Shipped features
As we continuously enhance our product by incorporating new features requested by our customers, here are a few of the latest features that I have been an integral part of the team in delivering.
Outcomes
This work gave the Hopscotch team a clearer, faster path to user activation — not just through fewer steps, but through a calmer, more confident experience from first click to first payment.
Introducing UI motion added an additional layer of quality and intentionality to the experience — elevating the perceived performance and polish of the product without overwhelming it.
Our focus on MoM transaction and new account growth, supported by the new design I implemented, highlighted significant user engagement and expansion. By tracking Customer Acquisition Cost (CAC) and adoption rate, we assessed marketing efficiency. Additionally, support requests and churn offered insights into user satisfaction.
Together, these metrics underscored our project's success, leading to the startup's successful acquisition by Avalara.
Primary metrics
↑73%
MoM transaction growth. New features and the relaunch of Hopscotch Flow have enabled us to improve retention and dramatically scale transaction volume.
↑37%
MoM new account growth.
Secondary metrics
Customer Acquisition Cost (CAC)
↓11%
Adoption rate
↑30%
Support requests
↓20%
Churn
↓6%
Data sources
Google Analytics, FullStory, Dovetail, Zendesk