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
Process
Information architecture
Payroll IA: 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 IA: 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.
Feature explorations
I led the design and delivery of over 10 features for Franklin, here’s a snapshot of key iterations throughout the process.
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 below). 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.