Plumbing Estimates
A mobile application that provides a way to help plumbers create estimates and send invoices to their clients along with features that assist with keeping up with billing and inventory.
Product Designer
Role:
Individual
Team:
3 weeks (Jul - Aug 2023)
Timeline:
Figma
Tools:
Google’s UX Design Certificate Program Personal Project 1.
Project For:
Project Overview
•
This was my first project for the Google UX Design Certificate Program. The prompt for this project was "Design a bill estimation app for plumbers." I researched my prompt and set my goals based on what I discovered.
My goal was to design a mobile application to help plumbers create estimates and invoices for client billing after service was rendered. Since this project's prompt mentions that this app is for plumbers, I researched additional features that would go above general estimate/invoice creation apps and specifically help the users I'm designing for.
Understanding the User
•
Becoming more than a bill estimation app
Reflecting on the project’s prompt, I figured I could go down two paths for this project.
Path 1: Create a bill estimation app with the standard features needed for this type of service.
Path 2: Design the app with a bill estimation creation process and include features that would benefit my users: plumbers.
I chose path 2
Making a general bill estimation app wouldn't make sense since the prompt specifically mentions designing this app for plumbers.
I decided to focus on the bill estimate creation process for plumbers and how they could use it best. I also wanted to find the best features I could include with the bill estimation process that would benefit plumbers.
Reading internet comments
I took a deep dive into forums focused on plumbing. I searched and read comments on anything I could find related to mobile apps and bill estimate/invoice creation to see if I could find complaints or suggestions on this whole subject to see if I could find pain points and features that would be helpful (whether specifically mentioned or determined based on the wording of the comments).*
*Due to this being a personal project, I didn’t have many resources. There are many ways I could have improved my research. See more about this in the Takeaways section.
Research findings
There were quite a few comments on having trouble keeping up with things such as appointments, billing, and inventory.
The pain points have been discovered
Through my research, I discovered two main pain points users experience while on the job working as a plumber.
Keeping up with clients' appointments, billing, inventory, and more can be tricky, especially when there is a lot of business. This disorganization can be apparent to clients and give the impression of unprofessionalism.
1
Organization
It can take time and be difficult to remember and find the prices of materials, services, and labor. Having all of these things in one app would be beneficial.
2
Efficiency
Who am I designing for?
With the user research done and pain points discovered, I created a persona to provide a clear visualization of the users and always remind me who I was designing for.
Persona 1: Aaron Rodney is a user and plumber who would benefit from an app that provides quick estimate/invoice creation and features that help track appointments, billing, and inventory.
Tip: Click on images for a full-screen view.
Starting the Design
•
Deciding on the extra features
From my research, I wanted to settle on the extra features I wanted to include before starting my wireframes/mockups. I decided on:
Calendar and Reminders
1
Having a section dedicated to reminders and appointments would provide users with a lot of helpful information and help address the organizational pain point that was found. With the feature, users can see when appointments are scheduled and receive reminders on billing, contacting clients, restocking inventory, and more.
Client List
2
This section is typical of an estimate creation application. Still, I wanted to create a section where users could see all of their clients and have a complete overview of their work history, as well as integrate with the calendar and reminder features, which would help users be more efficient.
Inventory Database
3
Including this feature would specifically help my target user, helping with organization and efficiency. This section will allow users to add their inventory to the app and include it when creating an estimate.
Adding items to estimates would subtract the amount of stock the users have (allowing for low stock reminders) and help the user add the cost of the item to estimates quickly.
Creating some paper wireframes
I started my designs by creating paper wireframes.
For the homepage, I wanted to include an area where users could see reminders and a calendar with their appointments, along with buttons that would allow the users to quickly start making an estimate and access the other features of the apps.
Once I finished creating a variety of initial wireframes, I took elements from each of them to make a refined version that would be converted into a digital wireframe. Afterward, I did this with all the other screens.
Tip: Click on images for a full-screen view.
Now let’s make them digital
Once settling on the refined paper wireframes, I convert them into digital wireframes.
For the homepage’s design, I focused on giving users quick access to the most important features/sections in the app and displaying the reminders and calendar.
Tip: Click on images for a full-screen view.
Homepage
The “Create New Estimate” flow
When creating the estimate creation process flow, I wanted it to be as simple as possible since users could create estimates on the job.
Refining the Design
•
Redesigning after feedback
Unfortunately, due to the project's niche user base, I couldn't truly test the wireframes because I didn’t know any plumbers to use as testing participants. So, I turned my wireframes into mockups. I did this because the mockups would give non-plumbers a better idea of the app and its flow.
Since this was my first UX project, my UX and UI design skills needed more development. I decided to ask friends knowledgeable in design to test my mockups and provide feedback.
I ended up having three iterations of mockups. My friends who provided feedback didn't hold back, but they were kind, and the advice and feedback I received from them are invaluable and appreciated.
The Feedback
What worked
The features were received well.
The idea of the app was liked.
What needed improvement
The beginner-level designs needed to be upgraded to include a more modern design. Someone recommended adding a tab bar, a more consistent and appealing color scheme, and a floating action button.
Having a huge form to fill out for the estimates was overwhelming.
The wording of features and overall design needed improvement.
A few examples of the iteration process
Here's a few examples of the iteration process:
These are examples of the Homepage, Inventory Page, and Create an Estimate Page and their three iterations of mockups.
Tip: Click on images for a full-screen view.
Homepage
Inventory Page
Create an Estimate page
Let’s give it some style
Now that I’ve explained how this project went through a few iterations, I want to explain my choices for the final version.
I wanted to keep my style choices simplistic, so they are not a distraction to the users.
Design choices to mend pain points
Scheduling and Reminders:
Some features I wanted to include were reminders and a calendar. These would help users keep track of appointments, billing/payment deadlines, calling clients, and low inventory reminders.
I included the calendar section so users can see upcoming appointments. I created the reminder screen and split it into two sections. One is for general reminders covering almost everything, and the other section is for payment/billing reminders only.
The payments section will alert users if a bill is overdue or close to overdue.
To round it all out, I made a notification tab so users could quickly see the most recent reminders.
Here is the calendar, reminders screen, and notifications center.
Tip: Click on images for a full-screen view.
Keeping up with clients:
A feature that helps with efficiency is a client list for users to keep up with their clients and see their history and details.
Tracking Inventory:
To help with organization and efficiency, I added a section where users could keep up with their inventory.
Here, users can see the price of items and add or subtract how much of those items they have in stock.
I also added a section where users can set labor costs and save common services to make the estimate creation process more efficient and quick.
Interacting with the high-fidelity prototype
Thanks to the help of my friends, I settled on a final version of the design, addressing all the pain points found during the research. I created a prototype for the different processes of the user flow. These include:
Creating and sending an estimate/invoice.
Interacting with the client section.
Interacting with the inventory section.
Viewing notifications, reminders, and the user’s profile.
Creating and sending an estimate/invoice.
I expanded the estimate creation process. Earlier versions made users fill out one large form, which could overwhelm users. I broke the process into three manageable parts so users could fill out each section more easily.
Interacting with the client section.
The client section of the app allows users to view client details and history.
Interacting with the inventory section.
Users can add and edit inventory items, set labor costs, and save common services.
Viewing notifications, reminders and the user’s profile.
To help with organization, users can access a notifications center, a reminders page, and a profile with all their details.
Interact with the full prototype
Developer handoff
In SquarePlanet’s courses, I learned how to present my designs to developers. While this is a personal project, I want to get more practice in presenting my designs to developers like it was an actual project because my designs are optically aligned and not aligned by bounding boxes.
Here is an example of how I would present the homepage:
Refections and Takeaways
•
Impact
I received an average score of 98.81% on all deliverables I had to submit for the Google UX Design Certificate Program.
If this were an actual project, my designs would have solved the pain points that plumbers in forums were discussing by creating a more efficient and organized experience for them.
What I learned
With this project being one of my first actual projects using the whole design process, I learned a lot. I learned more about the entire design process and how to use it in practice. After receiving feedback on my original designs, I learned more about using elements such as shadows, borders, call-to-action buttons, FABs, etc.
Along with learning how to use different design elements, I learned how to utilize research to figure out what features users would like in certain apps and how to take steps to solve their pain points.
What could use improving
Because this is a personal project, I would have liked to improve my research if I had more resources. More specifically, I would have benefited from having actual plumbers to interview and test my designs.
While my research is solid, having users from the profession I was targeting would provide even more insight into this topic.
Thank You!
See More
