PAYPER

Intuitive Navigation

Intuitive

Navigation

PAYPER is a B2B SaaS accounting software that offers digital invoicing and financial business management services for small businesses and freelancers.

Payper preview screens
Payper preview screens
Payper preview screens

Role

Product Designer

Role

Product

Designer

Role

Product

Designer

Responsibilities

Mobile Redesign

UX Research

UI Design

Prototyping

Usability Testing

Client

Pay Investments

Timeline

Nov '21 - Jun '22

Problem Statement

Most first-time PAYPER users find it challenging to navigate the mobile app.

comlex flow
comlex flow
comlex flow

What made the

stakeholders hire my services?

PAYPER's stakeholders hired me to resolve mobile app usability issues, as first-time users struggled with navigation, causing retention to drop.


They needed my expertise to identify pain points and design a more intuitive, user-friendly solution.

Diagram
Diagram
Diagram

KPI

Upload and review one expense in one minute instead of 02:37 minutes.

Over 80% success rate when uploading and reviewing expenses for the first time.

target
target
target

Objectives

Redesign the MVP with an intuitive navigation menu.

Reorganize the IA.

mountains with flags
mountains with flags
mountains with flags

Challenges

On-the-go mobile app needs to be compatible with fast tasks.

Smooth transition for users due to the app's significant changes and redesign.

Discover

01

User Research

User Research

Observations - User Behaviors

Observations - User Behaviors

Observations -

User Behaviors

We began user research using Microsoft Clarity to observe the behavior of 30 new users at various points during their workday for one week.

We found that most first-time PAYPER users struggle to navigate the mobile app. More than half fail to complete the task, and those who succeed take significantly longer than expected.

The primary task under evaluation was:

The primary task under evaluation was:

+

Upload and review one expense

via mobile (upload) and desktop (review)

1. Upload and review one expense via mobile (upload) and desktop (review)

02:37min

Average duration

42%

Success rate

Main Persona

Goal

Efficiently manage the business aspects of her freelance work.

Pain Point

Unintuitive navigation makes it difficult to find key features.

Need

Clear, logical navigation with a simple and organized menu that makes it easy to navigate and find and access key features.

Sara
Sara

Sara Abramovich

First-Time User

/ Freelancer

Sara is a freelance artist primarily focused on creating and selling artwork, managing projects, and handling business management. Sara is inexperienced with digital tools and needs a user-friendly solution to manage her finances.

Main Persona

Goal

Efficiently manage the business aspects of her freelance work.

Pain Point

Unintuitive navigation makes it difficult to find key features.

Need

Clear, logical navigation with a simple and organized menu that makes it easy to navigate and find and access key features.

Sara Abramovich

First-Time User

/ Freelancer

Sara is a freelance artist primarily focused on creating and selling artwork, managing projects, and handling business management. Sara is inexperienced with digital tools and needs a user-friendly solution to manage her finances.

Sara
Sara

Competitive Analysis

Competitive

Analysis

Morning Logo
Morning Logo
Morning Logo

Strengths

Upload expenses CTA

User-Friendly Interface

Easy expense upload

Weaknesses

Missing features in the App

Customer service

Bills should still be kept

for records

icount Logo
icount Logo
icount Logo

Strengths

Microcopy

User-Friendly Interface

Easy expense upload

Weaknesses

Hidden expenses button

Missing features in the App

Bills should still be kept

for records

finbot Logo
finbot Logo
finbot Logo

Strengths

Upload expenses CTA

User-Friendly Interface

Scalability

Weaknesses

Aimed at accountants

Missing features in the App

Bills should still be kept

for records

Ideate

02

User Flow

Expense Upload

Mobile | First-Time user

Information Architecture

Information

Architecture

Payper IA before and after
Payper IA before and after
Payper IA before and after

Design

03

Screen Flow

Walkthrough

First-Time User

NEW Payper screens
NEW Payper screens
NEW Payper screens

Homepage

Quick navigation

CTA buttons display icons and text

Quick navigation

CTA buttons display icons and text

Navigation bar

Helps users navigate through the different sections

Menu Buttons

Menu buttons

key elements in the navigation of an app

Expenses - Empty state

Quick navigation

CTA buttons display icons and text

CTA button

Button display icon and text

Clear Explanation

Display a message that explains why the screen is empty.

Document Upload Modal

Modal dialog

Instructions on how to upload documents

Microcopy

Gender-neutral language that could be understood by anyone regardless of how they identify

Checkbox

"Don't show this again" - for a smoother UX on the next attempt

Insights

04

Trophy
Trophy
Trophy

Results

New users

upload and review one expense

via mobile

Upload and review one expense via mobile (upload) and desktop (review)

00:46sec

The new average duration

Before:

2:37 min

90%

The new success rate

Before:

42% success rate

Future Steps

These days, we are working on the PAYPER desktop redesign,

and this is a sneak peek of the high-fidelity wireframe.

New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe
New payper screen desktop wireframe