Hopscotch: UX/UI for an all-in-one invoicing software for small business
Fintech l Design l USA 🇺🇸
Hopscotch is an accounting digital product aimed at assisting SME owners in the USA. Its design value prop was to build an experience that’s as easy as a P2P/Consumer platform but with a high level of business utility. In other words, the UI/UX should feel like a consumer platform
The Brief
After a brand identity creation process and securing funding to bring their first MVP to reality, Hopscotch called me in. They needed to create a digital platform focused on helping SME owners manage their businesses. It needed to be as simple as a P2P and as powerful as a B2B.
My Role
UX Design
UI Design
Handoff to Development
Client
Hopscotch
Industry
Fintech, Startup
Type of Project
Portal
Year
2021
The Challenge
As the lead designer, I worked to release Hopscotch’s MVP, from concept, to delivery of high-definition wireframes and handoff to development. The challenge in this project in particular was to understand and simplify complex flows that revolved around invoicing and accounting, giving a B2B platform a P2P user experience.
UX: Starting from scratch
The challenge of the experience design was to create a B2B product that has the simplicity of a P2P platform. The MVP of the project sought to meet the basic needs of the platform user for two goals: 1) Manage payments and 2) Quickly visualize the state of their business.
How did we support simple payment management?
The MVP work consisted in developing a series of specific features for a small business: sending and receiving invoices, integration with the country's most recognized accounting software (Quickbooks), scheduling payments, and requesting instant payments.
Understanding Branding
Hopscotch's visual identity was developed by the New York agency Motto, and I was responsible for translating the essence of the brand into their MVP. Luckily, this brand manual was excellent, so it was a pleasure to work with.
Bringing it all together
The approach to this challenge from a design perspective was to propose a modular design that would adapt to the different use cases of the audience, without affecting the global structure of the platform.
Therefore, a general control panel was created to serve as a business control dashboard, prioritizing information on the current state and the most recent transactions.
Building to last: Creating a UI Library for Hopscotch.
To document and continually improve the product, an initial UI Kit was created that would evolve into an initial design library in Figma. This UI Kit included usage specifications, master components, and variables for the project.
Final Metrics
$10m
in venture funding since 2020.
$3.6m
funding to implement the private beta of the product.