PAYNT

Creating PAYNT, a responsive website and app for creative freelancers

ROLE

UX Research, Information Architecture, UX Design, UI Design

RESEARCH METHODS

Desk research, user interviews, Usability testing

TOOLS

Figma, Figjam, Miro, Keynote

TIMEFRAME

3 months

Objective

Design a responsive website and app to enable effective invoice management.

Problem

Creative freelancer burnout is on the rise - partially due to the large amount of financial admin required. PAYNT want to be the best solution to this problem.

Key goals

Our client wants to support creatives and empower them to stay freelance, by making invoice management easy and painless.

DISCOVER

DEFINE

DESIGN

DELIVER

Problem space
Research
User interviews
Key insights

How Might We?
User personas
User journeys
Task selection & flow

Wireframe sketches
Lo-fi to Mid-fi
Usability testing
Design iterations

High fidelity prototype
Style guide
Accessibility summary
Key takeaways

The Process

Using a Double Diamond framework

In order to structure and streamline the end-to-end UX design process

Discover

RESEARCH OBJECTIVE

PAYNT wants to provide new invoicing solutions for creative freelancers.

We audited industry competitors to understand how the PAYNT app could stand out.

RESEARCH QUESTIONS

What audience are they trying to attract? Are they succeeding in doing so?

How does their app look and feel? Does the design complement the product?

How intuitive is in-app navigation? Are there any specific sections which may be confusing to users?

Competitor audit research project

As numerous invoicing products and services exist, the most efficient way to start this project was to do an in-depth competitor audit to see where other companies are doing things right and where there is room for PYNT to improve user experiences.

I analysed these aspects of each competitor and their app/ website design:

PROCEDURE

Competitor type
Location
Product offering
Price
Business size

Target audience
Unique Value proposition
Desktop website experience
Mobile website / app experience
Features

Accessibility
User flow
Navigation
Brand identity
Content tone

Competitor strengths and weaknesses

Please click below to view my in-depth competitor audit findings. Otherwise, see summaries of their key strengths and weaknesses below.

STRENGTHS IN VISUAL DESIGN

Notion, Miro, Monzo, and Wave all excel in visual design and branding, with highly approachable, modern interfaces and intuitive navigation.

COMPREHENSIVE INVOICING FEATURES

QuickBooks, Xero, and FreshBooks have robust invoicing features that cater to the needs of UK freelancers, especially with VAT-compliance tools and tax handling.

FLOW AND ACCESSIBILITY

Many direct competitors are user-friendly but may have accessibility gaps in mobile experiences, especially when it comes to more advanced features.

LIMITED CUSTOMISATION

Indirect competitors like PayPal, Monzo, and Miro offer some invoicing capabilities but lack the depth of project or client management and tax support.

Following my desk research on creative freelancers, I was able to determine three distinct user personas with separate requirements from the app.

Define

Problem statements & hypothesis

Having explored the three personas' journey maps, I defined three problem statements and user personas:

KATE'S PROBLEM STATEMENT

Katie is a freelance copywriter who needs to automate her invoice follow-up emails to clients because this admin is taking up too much time, disrupting her work-life balance.

HYPOTHESIS FOR KATIE

If Katie has a way to automate client emails, then she can spend less time chasing clients about invoices.

HYPOTHESIS FOR OMAR

If Omar can get live support and have AI do the heavy maths lifting, he will be able to face regularly using a finance app.

OMAR'S PROBLEM STATEMENT

Omar is a freelance session musician with dyspraxia who needs his invoice management to be less intimidating because he gets anxious whenever dealing with finances.

PIPPA'S PROBLEM STATEMENT

Pippa is a multi-industry freelancer with ADHD who requires a way to streamline all of her various incomes because she can’t keep track of who owes her what and when.

HYPOTHESIS FOR PIPPA

If Pippa can see all of her payments and invoice details in one place, then she will be able to remember who owes her what.

Defining PAYNT's values proposition

As this is a new product, it was important to establish its values as part of the design process. What does the app need to do for users? How is it different from other products out there? Here, I incorporated my learnings from the competitor audit and user hypothesis statements to deliver four overarching points of focus for the app's design.

EDUCATE

1. Industry guidance

We will provide users with:

Up to date, average industry rates for all creative freelance roles, to be used as a reference for invoicing
Industry-specific invoice templates
Contract support
Live-chat expert guidance
User messaging platform for creative collaboration, peer reviews and mentorship

AUTOMATE

2. AI-automation

Allow users to upload photos and screenshots which can be machine “read” to:

Automatically input invoice information into the correct fields, and learn form previous invoices
Check invoice information against payments
Calculate earnings, allowing for different filters e.g. “Earned this week”, “Earned this month”, and “Projected annual earnings”
Send clients notifications leading up to payment deadlines
Traffic colour system to track invoice payment process

CONDENSE

3. Multi-app integration

Link the invoicing process together, by:

Integrating the user’s professional email
Integrating the user’s banking app
Providing a place to manage files such as:
- Contracts (previous and ongoing)
- Invoices (previous and ongoing)
- Client comms templates (invoice reminder emails, project brief questionnaires, etc).
- Rates cards (previous and current)

ENGAGE

4. Industry guidance

We will ensure each payment process is complete with notifications and alerts:

Invoice follow-up reminders
Automatic notification when user receives a new payment in their bank account
Network alerts when previous and potential clients are active on social media (utilising LinkedIn Sales Navigator, Google Alerts)

Product Strategy

PRODUCT GOAL STATEMENT

Our invoicing app will let users automate and integrate the end-to-end invoicing process and access relevant industry guidance.

By making freelance finances more manageable, we will empower creatives to continue doing what they love — independently, but not alone.

THE OPPORTUNITY FOR PAYNT

PAYNT has the opportunity to build an invoicing app with only features relevant to them to prevent overwhelm, and a clear and simple way to use them — for those who would rather not be doing financial admin at all.

GAPS IN THE MARKET

Prioriting meeting the needs of *everyone*, financial management apps often include endless features — many of which are unneccesary for independent creative freelancers.

Creative freelancers need an app that is made for them, which doesn’t overwhelm them with information and lingo.

Once I had established a product strategy that will stand out amongst competitors and meet user needs, I needed a more in-depth understanding of the user journey in order to start designing. Therefore I created a user flow for each persona and built corresponding close-up and bigger-picture storyboards to map user emotions, challenges, and desired outcomes.

Design

By focusing on the four personas' needs, the problems they face, and the features they require, I was then able to expirement with various information architecture structures. Below is the final iteration. As you will see in my user testing, I did not focus on the IA enough until *after* producing medium fidelity mockups. This meant when I changed the navigation format at a later stage, I then had to manually change over fifty high-fidelity screens' bottom navigation panels and top panels. This showed me the importance of user testing, and for a similar project I would ensure to thoroughly user test the IA on low fidelity prototypes first.

First wireframe sketches

HOMEPAGE

1. I started off with a simple design, with the main focus being to account for all the required elements, e.g. 4 categories for invoices, transactions, files, and freelance support.

2. Then I experimented with different layouts.

3. This layout is inspired by my banking app’s homepage, helping me to conceptualise button sizing and how much content should be on each screen.

4. I then experimented with an 'easy upload’ button in the bottom right corner. This could also be a ‘live-chat’ button.

5. This sketch blends typical banking app formats with social media and more creative app formats, like that of Instagram, using images for navigation at the bottom of the page.

6. Mostly integrating sketches 3 and 5, this iteration allows users to navigate the app in a way that is familiar in the context of creativity and finance management — work and play.

To change the design from diagrams A to B, I implemented feedback from user testing to:

Early user testing

VERSION A

1. Add more universal symbols for navigation.

For example, I swapped in opposite facing arrows instead of coins for “Transfers”, and a bar chart icon instead of a line graph for “statistics”.

2. Remove the “Invoices” graph from the bottom half of the homepage, as this was too crammed in to be functional.

Instead, it is now only on its own allocated page where there is more room and the full screen can be turned horizontal to fit in all of the columns.

3. In place of this, I added user notifications, as this is a more immediate and universal user need.

VERSION B

BUTTON SIZE

The usability study found that the toggle buttons were too small for people with restricted fine motor skills so this was fixed by making each button larger with surrounding negative space.

FONT SIZE AND TYPOGRAPHY

The font size was increased app-wide to make information easier to read and select. While the focus of this alteration was those with visual impairments, this type of change can benefit everyone.

I also changed the main font from Goldman to Golos in order to maximise readability. This decision was necessary for better accessibility, but with Goldman being the same font used in PAYNT's logo, it felt integral to the brand identity. The work around for this was using Goldman as the alt text font, and for larger text such as page headings and sub-titles.

DARK MODE

Utilising dark mode was an obvious choice as it both promotes accessibility by making the app usable for those with light sensitivities, and fits our target persona: creative freelancers who work at all hours - often at night. With 66% of our target demographic frequently using dark mode on their phone, it made sense to create a dark-mode-first design.

Accessibility considerations

Implementing the product strategy in design

Diagram C exhibits the changes made after a later round of user testing which came *after* developing the high-fidelity mockups.

Further user testing

VERSION B

In hindsight, I would make better use of rapid wireframe sketch iterations to find the best deisgn solution more efficiently.

By placing the “+” symbol in the middle of the main navigation bar, it encourages users to fulfil the main objective of the app: to upload documents and invoices.

For a cleaner look, the design was updated to include wider boxes which utilise more screen space.

Notifications were made more easily accessible throughout app pages.

VERSION C

Deliver

The colour orange is widely associated with creativity, warmth, and energy. This is also true in branding — consider some of the world’s most creative companies that use orange as their main colour, e.g. Harley Davidson, Etsy, and SoundCloud.

Meanwhile, studies have found that many of us associate the colour blue with finance and banking apps — a trend corroborated by my competitor research.

STYLE GUIDE

One finding from my user research was that many of our target audience (creative freelancers) feel intimidated and / or demotivated by financial management software, leading to lots of people putting off essential tasks.

This is why I chose to use orange as the main brand colour: to go against trends, speak directly to creatives, and increase engagement. However, as blue is commonly seen as the most trustworthy colour and is complementary to orange, I included it in the product style guide as a secondary colour.

This project was personally a great opportunity for me to work with complex needs in an area I was previously relatively uninformed about. In fact, this may have helped to keep the research stage less biased.

Project takeaways

It also reaffirmed the necessity of user testing to help highlight areas where brand identity may have subconsciously overridden user needs. Great UX design means both are prioritised, but user needs must take priority.

I am proud of the output from this project and six months post, I am also aware that my skillset has already eclipsed what has been demonstrated. UX design is a constant learning process and this is why I love what I do.

Going forward, I would love to create this app in complete dark mode and light mode for added customisation.

Next steps

I would also design more screens to focus on other app integration such as Gmail, Outlook, and banking apps.

If you are looking for a UX designer with a passion for improving user experiences, do get in touch.