User Interface: Designing a Native App for Freelancers

Why Don’t Freelancers Get Paid On Time?

A 2.5 Day UX Design Challenge.

It’s week 4 of Ironhack Barcelona’s UX/UI Bootcamp, and I’ve been set the challenge of designing a Native App to help freelancers get paid on time (in just 2.5 days) following Stanford D.School’s Design Thinking Methodologies

 

Tools used

User Interviews, Lean Survey Canvas, Competitive Analysis, Personas, Affinity Diagram, Problem Statement, Crazy 8s, Paper-Prototyping, Mid-Fidelity Prototyping, Style Tile, High Fidelity Prototyping, Sketch, Principle, InVision.

 

The Problem with Freelancing

Did you know that “at any one time, a freelancer in the UK is owed on average £5,431.03 in late payments?” 

In fact, when we surveyed our 2803 members at Flylancer in 2017, fear of ‘late or no payment’ was named the second biggest stress factor by freelancers across 14 countries. It’s no wonder that the internet is awash with memes…

Or as one interviewee beautifully put it: “I’d pay for an app to lie about my bank balance.”

So, how exactly do freelancers manage so many late payments? 

In product design terms, there’s nothing more satisfying than hearing a user tell you that they don’t have a problem because they’ve ‘built a spreadsheet’ to help them. So let’s just say I hit the spreadsheet jackpot on this project. 

The freelancers that I interviewed were sending invoices to clients via invoicing software and then manually copying payment and invoice data into a spreadsheet whilst using colour to indicate whether a payment was pending, due or overdue. If a payment then becomes overdue, they would send a polite email for WhatsApp to their client reminding them of their existence. 

User Research - Spreadsheet Workaround - Freelancer Invoices.png

Project Focus: User Research, Metaphorical Design

1_4mwB6DxMwC5s-Za1xvloNQ.jpeg
 
I just message them as if I’m inconveniencing them “Hi, just checking if the invoice was fine… do you need my swift code… would you prefer to pay in a different currency” — anything that will serve as a reminder?

Problem Statement

Freelancers with multiple clients need a way to keep track of reminding their clients to pay them on time.

Time to design a payment reminder app. 

 

Choosing Core Functionalities

My challenge was to make nervous spreadsheet checking a thing of the past for freelancers and to replace their workaround with a single space that offered them a clear overview and solution to their late-payment woes. The next step was to jump into a MoSCoW feature analysis to decide what core functionalities a payment reminder app would need.

  1. Clear overview of the status of client payments

  2. Timeline of when invoices were sent.

  3. Send payment request emails easily/automatically.

 

Personas

Pay Day App Presentation.001.jpeg
 

The Problem with designing Business Software.

Figuring out how to make Business Software attractive and fun is an age-old problem and a challenge I take to heart. In my mission to make business software relatable this, I experimented with metaphorical layouts, micro-iterations, colours and flat design.

Low fidelity, Mid fidelity and High Fidelity iterations experimenting with scrolling interactions.

Low fidelity, Mid fidelity and High Fidelity iterations experimenting with scrolling interactions.

  1. Layouts: What direction does time flow in?

    So it turns out that visualising the metaphysical concept of time is more complicated than it looks. I experimented across a number of different iterations trying to express the concept of past, present and future time in top-to-bottom, left-to-right and infinite scroll upwards and downwards motions, in an effort to discover the most intuitive visualisation of time. 

    I was surprised to hear users tell me that “Scrolling upwards into the past didn’t feel right” — whilst in the same breath showing me how they use Google Calendar app (which has the same upwards into the past scrolling motion). 

    So instead I landed on a common UI pattern displaying time in the past as below the fold and choosing to express any future actions as notifications and header information stuck to the top of the page. 

 
Low fidelity to High fidelity iterations experimenting with the direction of swiping patterns.

Low fidelity to High fidelity iterations experimenting with the direction of swiping patterns.

2. Mirco interactions: How someones ‘Tinder thumb’ inspired a 90s interaction metaphor.

Remember these? Index cards used to be on everyone’s desks.

Remember these? Index cards used to be on everyone’s desks.

Whilst testing one of my timeline variations I discovered something interesting from users: they were very quick to swipe left and right. In fact, one user called it his ‘tinder thumb’. 

Running with this concept I researched the design heritage of Tinder’s trademark swipe interaction (it is actually trademarked). Tinder users are presented with a pile of ‘cards’. They swipe right to confirm that they like someone and want to chat with them, or right to decline someone. In essence, users chose which people they will follow up within a chat, and which they prefer to ignore. 

Parallels were starting to become clear: freelancers needed to chose who to follow up with and who not to — so did Tinder users.

So I tested cards layouts and experimented with the metaphor of office ‘In-trays’ ‘Out-trays’ and ‘Index Cards’. The notion of index cards which you could swipe left to address now, or swipe right address at a later date. It really took off! 

 
Traffic Lights: Using colours to indicate due, overdue and paid invoices.

Traffic Lights: Using colours to indicate due, overdue and paid invoices.

 
 
PayDayInteraction.gif

3. Colour as an indicator: How recycling my research findings became an easy win.

Early on in my research a number of freelancers happily shared their spreadsheets and workaround client payment tracking systems with me. To my delight, a number of them used colour as a status indicator for the payments and invoices sent. Green text highlight signified paid, orange equalled pending payment from client and Red suggested a late payment. As you can see here, I adopted the same colour meaning for my users. 

 

4. Can micro-interactions create a sense of joy for users managing administration? 

What have you learned from this project?

Explain what you had learned, experienced, or simply how you felt during the project. 

  • What were your biggest fears, problems, struggles? 

  • How did you overcome them?

Being honest is a good thing, it means that you are aware of what you’re doing.