Introduction
This is the first UX design project that I completed as part of the Google UX Design Professional Certificate. The aim was to work on a specific project throughout the course to enable me to put into practice my learnings.
Project duration
October 2021 - April 2022
My role
UX Designer - Designing a client billing app for therapists.
My responsibilities
User research, UX/UI design, wireframing, prototyping, usability testing.
The problem
Busy therapists living in cities do not have time to spend on billing tasks and ensuring payments from clients.
The goal
Provide therapists with a clean, extremely simple and straightforward method to invoice their clients.
Research
Primary research
In order to understand better the problem faced by therapists, I created a needs assessment survey that I sent out to independent therapists and UK networks of therapists. The aim of the survey was to get to know the users, and understand the challenges they face with their current billing process in order to identify product opportunities.
Competitive audit
I then performed an extensive audit of competitors who offer clients billing products. I focused the audit on four main competitors reviewing the below items for each of them.
Competitor's overview
Product offering
Price
Competitor's size
Target audience
Unique value proposition
UX / UI
Interaction: features, accessibility, user flow, navigation
Visual design/Brand identity
Content: tone, descriptiveness
There were no direct competitors identified through my research. There are a lot of competitors but most of them offer generic services to businesses in any type of industry rather than in a niche market like therapists.
Research insights
My research highlighted that there are no simple invoicing systems available to therapists at an affordable cost. There are a lot of products available on the market which offer a wide range of services and can become overly complicated for our targeted audience with the purpose of invoicing and tracking only. Those products are made generic enough so they can fit the needs of small businesses, freelancers and self-employed across a wide variety of industries.
It appears that most therapists are still using paper-based invoices due to the lack of solutions available to them. There is a real opportunity to create a simple, user-friendly application that would focus on making the invoicing process easier for therapists.
User research: pain points
1
No simple and smooth billing system.
2
Lack of clarity between invoices that have been paid or are still overdue.
3
Using quieter period throughout the day to go through billing tasks.
4
Ability to send invoices on the go, from anywhere and at any time.
Features to have
Following the research, I also identified a list of features that are not automatically present with the current competitors' offerings but our users could benefit from:
Allow for offline payment i.e. cash and credit/debit card.
Invoice to be sent in PDF format rather than a link to a client portal - it is unnecessary to force the client to log onto a portal for payment.
Multi-clinics option to be available.
Setting up automatic reminders until payment has been made.
Personas
The primary research and competitive audit helped me understand better my users and the day-to-day issues they are facing. I created two personas that each represent a category of users.
Ideation
Visualising the user journey
I wanted to visualise better my users and their journeys, so to get the clarity I needed, I used my persona Rory to do some storyboarding.
First I designed a big picture storyboard and then a close-up of his user journey. I also created a user journey map detailing each action of his billing process identifying his feelings and emotions and any opportunities for my designs.
Once I had a good visualisation, I started creating paper wireframes to come up with plenty of ideas. Then I took the best part of my paper wireframes to create digital wireframes in Figma.
Storyboarding
Paper wireframes
Information architecture
Once I had created a rough concept of the features and how they would be organised, I translated these ideas into a sitemap. This helped me understand the user flow logic and which screens I needed to design.
Digital wireframes
The picture represents the initial version of my digital wireframes that led to the first low-fidelity prototype to enable the usability study.
I had designed all the relevant screens for the user flows I wanted to test during the study: sending an invoice to a client, searching for a specific invoice and adding a new clinic to the account.
The usability study would help me determine:
can participants easily use the core feature?
are there any parts of the user flow participants are facing challenges?
User testing
The usability study was conducted with 4 participants on the low fidelity prototype to gather first thoughts on the functionality of the app. The feedback was very constructive and helped in guiding the designs from wireframes to mockups.
Findings
After the study, I gathered all of my notes into an affinity diagram to organise thoughts and identify trends.
Then I iterated my designs based on participants' feedback.
1. Homepage does not answer therapists’ needs
The usability study highlighted that although participants saw a benefit in having access to a dashboard, they did not feel that it should be the first information they see as they log on to their account. They want the homepage to give them pertinent information, so they can gain time and be efficient in their billing process.
"The stats are very prominent on the homepage. I think there are more important things I would want to see first, like who has not paid for example."
_ Participant A
"I want to know from the homepage my latest activity. What is the latest invoice I just sent is much more helpful to me so I do not bill my client twice."
_ Participant B
2. All users found the new invoice screen confusing
Supporting evidence from the usability study:
4 out of 4 participants did not fully understand the new invoice screen. They felt there was too much information and were unsure where to start.
"The client section at the top sort of blends into the page a little bit. At first, I did not see it!"
_ Participant D
"The treatment section clutters the page.”
_ Participant C
Based on the feedback from the usability study I tried to figure out a way to make the new invoice step smoother and more instinctive for the user.
When breaking down the required actions for billing a new client, I needed the therapist to:
first, select the client they want to bill;
and second, select the relevant treatment(s) for that client.
With this in mind, I decided to focus on one action per screen. Below is the illustration of my new designs.
I also removed the clinic section which was an additional step that could easily be automated. Each client (when created) is assigned to one clinic. By selecting a client, the app would then automatically pick the correct clinic without any input required from the therapist.
Solution
Before starting to work on my mockups, I created a design system so I could keep design consistency across all the different elements.
Final designs
Take-aways
What I learned
Swift was my first UX project so I was on a steep learning curve throughout the design process. But what stroke me the most, was the valuable outcome I got from conducting a low-fidelity usability study. The feedback I received from participants was beneficial in order to create designs that fully met my users' needs and expectations. Listening to their frustrations and pain points, allowed me to redefine my designs to create an improved user experience.
Next steps
For this project, I would like to explore the integration of appointment scheduling systems with the Swift app. This would enable even less input from therapists. At the end of the day, the Swift app would suggest which clients need to be billed and for which treatments, based on their appointment scheduling system.