TAPPER
PROJECT OVERVIEW
In 2023, I joined Tapper as a Product Designer to help build a financial service platform for small to mid-sized contractors, particularly in construction. The product aimed to streamline workflows such as intelligent form generation and rapid payments. I led the redesign of the MVP experience based on early user feedback and testing.
My work was later presented to potential Series A investors, and I learned the platform went on to see a notable increase in user registrations and recognition from tech associations in Philadelphia and NYC.
This case study focuses on the design and evolution of the Estimate Portal, one of the platform’s key tools that I helped shape during my time with the company.
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 heavily 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.”
The pie chart below shows how contractors divide their time across different types of work. Estimate and payment management stood out as the biggest time sink.
For most contractors, a single project can mean days of managing paperwork just for estimates and invoices. This doesn’t just slow things down, but also affects cash flow, delays project starts, and keeps small businesses from growing as fast as they could.
From our early user research, we found that preparing and adjusting job estimates was one of the most time-consuming parts of a contractor’s day. In fact, over a third of their workweek often went into writing up estimates and managing payments, sometimes more time than they spent on the actual job site.
How might we design a tool that takes the weight off contractors’ administrative work, so they can focus more on doing the job and growing their business?
USER RESEARCH
Dive into Contractors’ Everyday Work
As the sole designer during the early stages, I led user research to understand how contractors handle estimates and payments in real-world settings. I worked closely with the CEO and engineers to translate field insights into product direction.
Ran 2 collaborative sessions with the CEO and engineers
Synthesized interview data into user themes and journey points
Facilitated co-design sketching to explore product directions
Aligned on priorities for the mobile MVP experience
Step 1. Direct Data Gathering
Led 30+ 1-on-1 interviews with contractors across trades
Shadowed a plumbing team (Alltown Services, NYC) for a full workday
Captured on-site workflows, bottlenecks, and estimation pain points
Documented key observations with photos and field notes
Step 2. Team Workshops
USER ROADMAP
Understand Our Touchpoints
To connect the app with real contractor workflows, I mapped out the full project lifecycle based on our field research. It outlines each step they take from project start to finish and highlights two key touchpoints where our product could support their work.
These touchpoints focus on the most time-consuming and repetitive tasks: writing up estimates and finalizing invoices. The roadmap helped us identify where our app could fit into the existing workflow without disrupting how contractors already work.
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.”
→ Mobile-first design approach, voice input
3. Track the document status
“I need to track important documents, make sure the clients approve the plans, and edit them if needed.”
→ Summary dashboard, easy file managment
2. Simplify repetitive item entries
“Most of the jobs are similar, so we are actually entering the same items over and over again.”
→ Item libraries, smart templates
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.”
→ Tone of the expiernece: clean, intuitive, and trustworthy
INFORMATION ARCHITECTURE
Features Prioritization for a Minimum Awesome Product
We had a large scope and limited time. Rather than rushing or cutting scope blindly, I introduced a Crawl → Walk → Run → Sprint framework to help our team prioritize features based on user needs, feasibility, and impact.
This structure broke down the product roadmap into actionable, research-backed chunks, helping us align across design, engineering, and leadership while keeping focus on delivering value fast.
The prioritization matrix helped us agree on what to build first, what to refine later, and what to reserve for future sprints. It was especially useful in balancing technical constraints with what our users needed most.
After aligning on priorities, I mapped out the Estimate Portal’s information architecture based on our feature list and user flows.
With this structure in place, we could move quickly into interaction design, confident that the layout matched both user expected models and product constraints.
DESIGN EXPLORATION
Communication and Attention to Details
Throughout the design process, I focused on keeping the entire team aligned while validating ideas early with users. To support fast iteration and shared understanding, I worked across low-fidelity, mid-fidelity, and high-fidelity design stages, each serving a different function in our collaboration.
Low-fi: Determine the Design Direction
We kicked things off with simple wireframe sketches to explore layout options and early interaction patterns. At this stage, I often mixed different component versions (e.g., how estimate summaries vs. earnings breakdowns should look) to spark conversation with the team and uncover user preferences.
This shows how Estimate Widget versions fits into the homepage dashboard. It helped us explore layout logic, get internal feedback, and run quick user tests.
Mid-fi: Communicating Interactions Across the App
We used mid-fidelity prototypes throughout the product to align with engineers, test task flows, and explore early layout and visual structure.
This example shows our modular, step-by-step approach to the Estimate Creation flow, designed to simplify complex input and reduce friction. We later refined this through iteration.
High-fi: Visual Polish & Design System
20
Core Patterns
Our high-fidelity design focused on polishing the UI and integrating a scalable component system across the product. We introduced:
The example shown here demonstrates UI iteration on the dashboard and shortcut icons, reflecting our effort to enhance usability while building a strong visual identity.
80+
UI Components
— ensuring consistency from dashboard to detailed workflows.
To validate our direction, we benchmarked top competitors and iterated on layout, clarity, and user logic.
HIGHLIGHTED FEATURES
Walk Through The Estimate Portal
1. Complicated Form Entry on a Mobile App
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!