TAPPER
PROJECT OVERVIEW
In 2023, I joined Tapper to create a financial service platform for small to mid-sized contractors like those in construction, providing services that include intelligent form generation and rapid payment. Insights from our 1st phase of MVP's market testing guided a comprehensive app redesign. This overhaul resulted in a 130% increase in user registrations, attracting interest from investors such as PayPal and Stripe for series A, and earning nominations from tech associations in Philadelphia and NYC.
In this portfolio entry, I aim to detail the creation of the Estimate portal, offering a snapshot of the entire project.
Cut Paperwork, Boost Revenue.
MY ROLE
TEAM
Sept 2023 - Apr 2024 (32 weeks)
Product Designer
3 Engineers
2 Designers
1 Product Manager
SKILLS
Wireframes
Prototyping
User Research
Design System
Figma / React
TIMELINE
ESTIMATE PORTAL INITIATIVE
Contractors' work time is dominated by job estimating…
“Estimating jobs almost cut over 1/2 of my time normally... I often need to make many changes halfway through for a lot of reasons.”
For contractors, a typical project cycle often involves spending half of their time managing paper trails for job estimates and invoices—which can extend project timelines by several days. This significant loss of productive time, coupled with the limitations imposed by physical paperwork, severely hinders the efficiency and growth potential of their businesses.
How might we build a tool that simplifies and automates the administrative tasks for contractors, enabling them to focus more on growing their business?
USER RESEARCH
Dive into Contractors’ Everyday Work
During the early stages of the development, I encouraged our design team to reach out to individual contractors and contractor companies to get a deeper understanding of the users’ needs, behaviors, and experiences of their work.
3 rounds of workshops to discuss research findings and insights, including a co-design session to figure out our design directions with the engineering and product team.
Step 1. Direct Data Gathering
60+ 1-on-1 interviews, including an in-depth “1-day ghosting“ alongside the plumbing team from Alltown Services in New York.
Step 2. Insights Analyzing Workshops
USER ROADMAP
Understand Our Touchpoints
I created a concise contract project flow based on our research that specified all tasks the contractors need to do and highlighted 2 main touchpoints that our app features will integrate with the contractors’ working experience.
MAP NEEDS TO FEATURES
4 Key Insights That Drove Estimate Portal Design
1.Create and update on-the-go
“I usually handle all my document work on my computer, but I often need to write up something while I’m out.”
3. Track the document status
“I need to track important documents, make sure the clients approve the plans, and edit them if needed.”
2. Simplify repetitive item entries
“Most of the jobs are similar, so we are actually entering the same items over and over again.”
4. Look simple and professional
“We’re trying to make things easy for clients to get... When it all looks professional, people trust you more.”
INFORMATION ARCHITECTURE
Features Prioritization for a Minimum Awesome Product
We have a complex project to develop and our timelines are tight. However, we believe that we can, and should ship great products. Therefore I came up with this very interesting framework to group our project planning as Crawl, Walk, Run, and Sprint, where all desired features are broken into actionable chunks based on priorities we learned from our research.
The map above helped us to understand the scope of the project at a glance and also served well for grouping features and requirements.
We're able to decide on the information architecture for the Estimate portal very quickly.
DESIGN EXPLORATION
Communication and Attention to Details
Throughout the design process, we aim to actively engage with our users and ensure the entire team is in sync. To facilitate timely updates and communication, we employ a mix of low-fidelity, mid-fidelity, and high-fidelity designs.
Low-fi: Determine the Design Direction
We started off by sketching out some wireframes to check out different design directions and figure out how users should interact with the main features. I always love to mix and match various component versions for each function into sample pages at this point. It’s a great way to get quick feedback from early user testing and chat through ideas with the team.
Here’s a look at how the different versions of the Estimate widget integrate with other features on the homepage dashboard.
Mid-fi: More Detailed Interaction
For the mid-fidelity prototype, we delved deeper into testing more detailed interactions and start incorporating the intended color tones to establish the visual identity.
UI Exploration and Polishment
20
Core Patterns
Here’s an example of designing the UI component for the quick action button for Estimate creation on the homepage, we audited how our competitors designed the dashboard options and added our input into it.
80+
UI Components
We make sure our designs meet industry standards and also bring better aesthetics and a smoother user experience. Most importantly, we highlight our brand’s unique visual identity.
HIGHLIGHTED FEATURES
Walk Through The Estimate Portal
1. Complicate Form Entry on a Mobile Screen
2. User Guidance Step by Step
3. Interactive Dashboard and Easy Access
BEYOND MOBILE
Web App Version for More Business Options
HOW WE DID
Measure Success
127%
Increased Registration by Q3 FY24
We focused on the success metrics at the very beginning of the project. And this is what we see:
1000+
Estimates Created and Sent Per Month
I’m glad our designs help :)
“I’ve been using Tapper so much at work. I just tried to save all my job documents info here ah”
DESIGN SYSTEM
Visual Identity Gallery
Typography & Font Application
Color Palette
Icons and Illustrations (selected)
RETROSPECTIVE
What’s Next
Unfortunately, with some key members leaving the team, as well as our priority, has shifted. We are now sun-setting this project. However, I don't think this is goodbye. This has been an amazing seven months. We started with something very ambitious and bold and were given some really talented people to work together on solving this puzzle. I don't think I've ever learned so much or tried so hard in any project. Now coming out of it, I feel blessed and ready for my next big challenge! I know some images are of low quality, and it's intentional because I still cannot show everything at this point. However, I'll add some high-resolution images in the gallery section for you to have a better understanding of some visual, interaction, and product decisions we made for this project.
If you're also building an intelligent product, or are interested in things like productivity, business management, let's chat!