From 0-1: Designing a Web3 payroll suite
The concept of Franklin is straightforward: increase Web3 adoption by integrating crypto into paychecks. As the solo designer for this start up, I took the project from concept to launch. This involved defining user flows based on research, leading user testing, and delivering high-fidelity prototypes for the beta product.
Impact: The soft launched design helped Franklin secure more investors and close a $2.9 million seed round.
Role
Product Designer
Contributions
End-to-end designs, research, user testing
Timeline
5 months
Status
🚀 Shipped
The problem: Web3 companies lack out-of-the-box financial tools.
The market needs crypto-native solutions for simple business processes such as payroll, accounts receivable/payable and taxes.
The opportunity: Launch a suite of tools to address crypto-native back office technology gaps
Franklin is launching payroll first because payroll is one of the more complex types of financial transactions to solve in a crypto-native way. We enable Web3 companies to pay their staff in cryptocurrency in a way that manages all of the tax withholdings and forms for them.
Payroll information architecture
This is the flow for the payroll tab. Prior to starting design, it was essential to map out the entire user journey to catch any inconsistencies and potential pitfalls in the system.
Admin set up information architecture
This is the flow for the admin side of the portal and we wanted to establish this user journey as the first step of building out the product because the user starts with the admin portal.
The initial approach was to put everything up that we need to on the screen (must haves vs. nice to haves) and while it was overwhelming, I found it easier to remove content than to add it back. We did rounds of testing to see how users interacted with the preliminary information presented to them.
Iterations
❌ Users would like ways to filter
❌ Collapsable Navigation
❌ Modal is not the best usage here
✅ Better layout and visuals
✅ Tree Navigation, more visuals
✅ Improvement on previous iterations
Here is an example of user testing of V1 of the product (we have come a long way since this design shown above). For the initial rounds of user testing, it was important for us to get feedback as early as possible. We utilized Maze to conduct usability testing for the admin onboarding session.
Ideally, it would be better to speak with users and monitor their testing live through video, but due to timeline constraints, Maze was the logical choice in order to get timely feedback.
Final designs leveraged Tailwind components for quicker implementation.
User testing
Is it accessible?
Additional explorations with different color schemes: one of the main challenges for UI is working with the existing color palette. The vibrant tones were hard to incorporate while passing accessibility.
What’s next?
Franklin 2.0 - Taking the feedback received during beta testing, we are continuously improving the onboarding experience to reduce user churn rates and increase product adoption.