Client billing solution for a photographer

Harikrishnan R Nair

18 min readMar 24, 2022

Create photography bills easily

Case study: Photo bills app and responsive website

Photo bills app is designed for photographers who don’t want to spend so much time drowning in numbers, managing projects, calculations, stuck in numerous paperworks, and tracking whether their clients paid them or not.
Photo bills app offers a solution to all these problems.It helps you create professional invoices in a few steps.The app lets you review them, edit any part in them and easily send it to clients.

About the project

This case study was created as part of my google UX design certificate course. Got this challenge from the website sharpen design. So this website generates open-ended project prompts that reinforce critical problem solving, curiosity, and creativity across 21 different categories and 2 unique generators. This was a random project which was generated and I found it really worth solving because being a freelance photographer myself, I have faced several issues while creating invoices for my clients.

The product

Photo bills is mainly a billing app. This app will help in everything that needs to get done for a photography business. Be it managing bills, sending payment reminders, doing taxes on all the bills automatically, managing projects, sending estimates and getting paid easily.I wanted to simplify the flow and user experience, create a modern and professional design that matches the needs of our target audience, improve the user experience and eventually increase their conversion.

The project duration

It was approximately 3 months from November 2021 to January 2022. It was done within the stipulated time of Google UX design certificate as it was necessary to complete the case to get the certificate.

The problem

Freelancers, newbies and professional photographers have to spend a lot of time doing the paperwork like bills. Also they don’t get paid on time. They always find invoicing and payment collections complicated and overwhelming.Doing taxes is also a handful of work for these creative people.

The goal

Design an app so that photographers find it easy to do their bills and can send automatic reminders if the bill is due.

My role

UX designer designing an app for Photo bills app from conception to final hi fidelity designs. As it was part of the certificate course, I had to go through each lesson before completing each design process.

My process

I followed the same design process which was mentioned in the google design certificate which was the design thinking framework starting with empathising, defining, ideate, prototype and testing.
During the empathise phase, my goal was to understand users’ needs and how users think and feel. That involved a lot of user research, such as conducting surveys, interviews, and observation sessions, so that I get a clear picture of who my users are and the challenges they are facing.
In the define phase, I created a clear problem statement of the user’s need that my designs will address, based on my research findings. This will drive me toward a clear goal for the design of the product.
Once I landed on the user problem and established why it was an important one to solve, it was time for the ideate phase. The main goal of the ideation was to come up with a lot of different design solutions using methods like crazy 8 and HMW.
Once I had a clear idea of how to solve the main user problem, I was ready to enter the next stage which was the prototype phase. A prototype is an early model of the product that shows it's functionality.
The next phase was the test phase which was my favourite part because I get to test my designs and get feedback on it. So this test phase helps in feedback before the product is built by engineers and launched to the public. So I can use this valuable feedback to make changes and improvements to the designs as many times as I need.
During the test phase, users provide feedback about your designs, before the product is built by engineers and launched to the public. You can use this feedback to make changes and improvements to your designs, as many times as you need.

My responsibilities

There were many responsibilities or deliverables that I had to do before getting the design live. Since I was doing all this by myself, I had to go through each stage of the design process myself which included Conduct interviews, Paper and digital wireframes, Low and high fidelity prototyping, conducting usability studies, Accounting for accessibility, Iterating on designs.

Understanding the user

In order to understand the user pain points , i decided to do interview several people. For that, first I needed to come up with interview goals to have a clear understanding of what I want from the interview.

My interview goals

I wanted to understand the processes and emotions that people experience around the problem my product is trying to solve.
I wanted to identify common user behaviours and experiences with tasks that my product is trying to address.
I wanted to understand user needs and frustrations as they relate to the product I’m designing.

Interview participants

So for this project I decided to interview a total of 5 people. This was decided after sending an email to around 10 people which had some screener questions so that they are based on research goals and target users. It helped me to know that some of the participants were not potential participants and they didn’t meet the requirements of the research study. Also through these questions I wanted to reach a diverse group of people.

Target participants

Based on the screener questions my target participants was

Target participant customers

Age: 15–60
Lives in rural and urban areas
People who does photography on a day to day basis
Include participants of different gender
Include participant of different abilities

Types of customer

Customer 1:

A photography enthusiasts who just started his career, typically under 23 years of age
The freelance works he gets are less and he has difficulty in handling clients
He needs to know the correct format and all the guidelines regarding invoices as he is a beginner to it.
The most frustrating part for the customer is that he does all the hard work and even after delivering everything, the payments are delayed and sometimes, there is no response.

Customer 2:

A pro photographer who is very much passionate about photography and is always busy with work. He is more than 40 years of age
He has got a lot of freelance work and he has difficulty in streamlining the invoices , finances and getting paid on time.
He already has a set of formats for him and guidelines for his company with all the necessary registration and branding done.
The most frustrating part for him is the paperwork which he has to do after every project.

Interview questions

These were mainly open ended questions, did follow up questions, made it encouraging, asked more of why.

The questions were like:

Could you describe your experience with invoicing the clients after each photography project?
Tell me how you go about invoicing your clients now ?
What is your experience about delayed payments ?
How was the experience working with different clients?
Are you able to streamline your photography business operations so that It can optimize your finances and ensure that you get paid on time?

Empathy Map

After the interviews I created empathy maps to organize the findings I learned about a particular type of users. So it helped me break down each interview into digestible pieces of information.

The aggregated empathy map is as follows

SAYS

I am not sure how to do invoicing
I would love to have a template for all my invoices
I wish i could knew more about the clients and their payment due dates
I want all the paperwork to be done automatically
I want to be able to search my invoices fast and want it to be saved on cloud
I am willing to pay a percent of the project payment for any app that has this feature

THINKS

Wish all this paperwork would go
Giving to accountants is really expensive
Would like to have someone experienced who can handle all this so that i can work on the shoots more
Wants consistency in branding

DOES

Works as a full time photographer
Starts photoshoots early in the morning goes till late evening
Pays the CA to do the invoicing and the taxes
All the planning for the shoots

FEELS

Sad when he doesn’t get paid on time
Sad since he can’t spend more time doing what he loves
Sad he can’t take more holidays as he has to do paper work
Worried about a person who can do her taxes and invoices properly
Sad that the shoots are not properly documented and bills are misplaced

User research pain points

Time

Photographers spend a lot of time doing the repetitive and monotonous task by making it not automated

Format and pricing

Most photographers don’t know the correct format and industry standard rates of various photoshoots

The user flow is generic

Most of the user journeys are very complex in nature and it is very general in nature and not specific to the industry.

User research summary

I conducted interviews and created empathy maps to understand the users i am designing for and their needs.The primary user group identified through research was all genres of photographers who has less time to do bills.The user group confirmed initial assumptions about photo bills app, but research also revealed that time was not only the factor limiting users do their bills. Other user problems included they forgetting, they not knowing which format to send and also how to do bills

Persona

For this project I created two personas(Personas are fictional users whose goals and characteristics represent the needs of a larger group of users). It helped me empathize with the users and demonstrate a thorough understanding of who they are and what they want to achieve throughout the project when doing the user journey map, flows etc because i am thinking from their point of view.

User stories

Next I created some user stories which is a fictional one-sentence story told from the persona’s point of view to inspire and inform design decisions.
User story 1: As a freelance and a new photographer, i want to know the industry standard rates and format so that i look professional when sending these bills to clients
User story 2: As a professional photographer, I want to get paid on time so that I don’t need to constantly follow up on clients.

Create user journey map

User journey helped me discover the series of experiences a user has as they achieve a specific goal. This made me think and feel like a user, which I felt was super important. A deep understanding of user behavior and needs makes it possible to define who a product is being created for and what is necessary or unnecessary for them from a user-centered point of view.

Mapping madonna user journey map revealed how helpful it would be for users to have a dedicated bill app.

As a freelance and new photographer, i want to know the industry standard rates and formats so that i look professional when sending these bills to clients

Problem statement

The Problem statements helped me provide a clear description of the user’s need that should be addressed. The framework i used to create problem statements is the 5 Ws and H framework.
Problem statement 1: Maddy is a busy freelance photographer who needs Faster, hassle-free, automatic invoicing, booking, payment solutions from clients because doing it every-time is a tedious process and takes up a lot of time.
Problem statement 2: As a freelance and new photographer, i want to know the industry standard rates and formats so that i look professional when sending these bills to clients
Problem statement 3 : As a professional photographer, I want to get paid on time so that I don’t need to follow up constantly with clients.

Hypothesis statements

After creating a clear problem statement, I then created an educated guess about what I think the solution to my design problem might be.
If the user downloads the photo bills app, then they can utilize the features of the app to create their photography bills easily and send it to clients

Value proposition

After these, it was important to find the unique value that the photo bills offer to its users. So I created a value proposition which was that the photo bills app is uniquely created for photographers with a set of templates which are from their industry and it is tailored to meet their needs.

Competitive audit

The competitive audit helped me track where my competitors are and I was able to grade them with my audit goals. The first step I did was to create audit goals, then I listed out my competitors- direct as well as indirect.Then as the next step I wanted to determine the specific competitor aspects that I wanted to compare.
I rated them based on the categories like first impression, interaction, visual design, content and audience. After creating all that i created a report or summary of the competitive report.

competitive audit excel sheet first impressions

competitive audit excel sheet visual , content

Brainstorm design ideas

Now, it was the time of ideation stage to come up with different solutions for our problem statement. This was one of my favourite phases as I got to do the crazy 8’s and how might we exercise. It helped me really think outside the box.

Goal statements

In order to describe a product and its benefits for the user i created a goal statement. It provided me with an ideal solution for my design challenge.
So my goal statement is: Our photo bills app will let users create bills easily which will affect the users who have to create invoices and bill clients regularly by automating the process, creating bills with the tap of a button. We will measure effectiveness by Tracking the invoices from the clients and payment on time.

User flow

As the next part of the prototype phase did a user flow which is a path taken by a typical user on an app or a website, so they can complete a task from start to finish. So the user task I took was to create bills easily.This helped us quickly evaluate the efficiency of the process needed to achieve a user goal and can help pinpoint the “how”

Storyboard

To make it more effective than words, I decided to create a storyboard which is a series of panels or frames that visually describes and explores a user’s experience with a product.
Since it was early in the design process, I decided to use the big picture storyboard so that I can focus on the user needs, their context and why it will be useful for the user.Although its mainly done for the stakeholders, but as this was a google ux design project decided to do it anyways.
The process of creating the big picture storyboard was to go through the problem statement again which helped me establish the character and set the scene for my storyboard. The next step was to go through the goal statement to determine the plot of the story which was the benefit.Then set up the storyboard , added the storyboard scenario. There were 6 panels and I started drawing each panel. When drawing these panels, I was focused on the user experience. In some of the panels, I exposed pain points for the user along their journeys. The final panel had the user goal or conclusion in the final panel. The drawing was pretty bad as i haven’t drawn in a long time

Information architecture

Below I am showing the hierarchy and navigation structure of the app. It serves to show how the content will be organized into “screens”, and how the user may transition from one section of your service to another.
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritised a quick and easy billing process to help users save time.
I had to keep a few considerations in mind. First, The app should be focusing on invoice making which is its main purpose. The second consideration is that we need to show the users their reports, more data visualisation about the total outstanding balance, and the number of invoices, etc.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Paper wireframes — screen size variations

Because customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

wireframes for responsive design for photo bills app

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
And for desktop — Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement was a key part of my strategy.

Digital wireframe screen size variation

the main screens of photo bills app adapted to different size.

Low fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was Creating a bill, so the prototype could be used in a usability study.
To create a low fidelity prototype, i connected all of the screens involved in the primary user flow of creating a new bill.
At this point, I had received feedback on my designs from the online community as well as from the people I conducted the study with about the flow etc.
I made sure to listen to their feedback and i implemented several suggestions in places that addressed user pain points

UX research study plan

I conducted a UXresearch study plan to better understand the design. So the background till now was I am creating a photo bills app for photographers who want to create and manage their bills faster, effectively and efficiently on cloud.I noticed that our competitors offered dedicated mobile apps for the users to do their bills for free and they have been very successful in doing the same. I want to create a product that can compete in the market, increase sales and improve customer satisfaction and it will be solely dedicated to the photographers around unlike the competitors who offer it for everyone.

ux research study plan for usability testing

Usability study plan

Study details

Research questions

How long does it take for the users to create the bill?
Are users successfully able to create bills ?
What can we learn from the steps users took to create a bill?
Are there any parts of the bill creation where users are getting stuck?

Participants

5 participants
Participants between the ages of 18–60 who reside in metropolitan and suburban areas
Participants create a bill once a week.

Methodology

15–30 of minutes
India, remote
Unmoderated and moderated usability study
Users were asked to create a bill from the prototype

Usability test videos

Here are some of the videos i happen to record when i was doing the usability test with several participants.

Photo bills | Mysite

Edit description

www.harinair.co.in

Usability study insights

The insights was collected from 5participants, gathered each insight as a sticky note in Miro, then made themes out of it.

Finding themes

Found 2 themes after doing the tests

Theme 1:

Supporting evidence from the usability study.
4 out of 5 participants wanted to see a preview of the template before selecting it
3 out of 5 participants said it could be just like a popup.
“I would like to know the template details I am choosing before selecting it.” (P0)
- midhuna (freelance photographer)

Theme 2:
Supporting evidence from the usability study.
4 out of 5 participants wanted to do more with bills not just view them there on the page
3 out of 5 participants needed like a cta to remove, download, share, print, duplicate bills
“I like the bills divided according to various categories but i need also an options of sharing the bills via offline.” (P0)
-sanjay venkataswamy (wedding photographer)

Insights & recommendations

Insights

Need more starting points
users need to add a bill in certain other places and not just the home page.
Bill actions needed
users need like a cta to remove bills, download bills, share bills, print bills or duplicate bills
Bill preview
user needs a preview before selecting the template

Recommendations

Add a “add button” at home page, bills page so that are there are different starting points for creating the bill journey
Add a preview action to the templates and not just selection of the template
Add a modal sheet upon clicking the bills which will have various actions

Usability study findings

I conducted one round of usability studies. Findings from the first study helped guide the designs from wireframes to mockups to high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings
Users want to send a personalized message before sending the invoice
Users was overwhelmed with lot of options in the home screen
Round 2 findings
users want to have a preview of the template which he selected
Users had a lot of options to do with the bill

Refining the design

After starting the design and usability studies, i moved on to the next phase of the design thinking process which is basically refining the design that is creating high fidelity prototypes

Mockups

After a usability test it was found that the home page was overwhelming with a lot of options and menu, so I decided to focus on one main flow which was to create bills.
I also made the text more prominent and added a touch of personalisation as well.

Key mockups

High fidelity prototypes

The final high-fidelity prototype presented cleaner user flows for creating a bill.
It also met the user’s needs for reminding the client about the bill due and through the app it was possible to see all the bills at one place whether bills are due, paid, unpaid or on drafts etc.

Accessibility considerations

Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier and within section to highlight the headings
Used detailed imagery for bills to help all users better understand the designs.

Going forward

Takeaways

Impact

The app makes users feel like photo bills really think about how to meet their needs.
One quote from peer feedback:
“The app made it so easy to create bills! I would definitely use this app as a tool for creating my photoshoot bills as it is very accessible and it’s all on cloud.meal.”

What i learned

While designing the photo bills app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next steps

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need. So that new features or user flows could be built
Conduct test with industry photographers for the next phase of the app to understand their pain points

Let’s connect

Thank you for your time reviewing my work on the photo bills app! If you’d like to
see more or get in touch, my contact information is provided below.
Email: hkrnofficial@email.com
Website: harinair.co.in
Visual case study link: https://www.harinair.co.in/photo-bills
Dribble link: https://dribbble.com/shots/17754503-Photo-bills
Behance: https://www.behance.net/hkrnofficial