Web Design - UX/UI

Financial Industry

2021

BIU, a Brazilian financial company, aimed to create a web platform to offer online invoicing. The platform needed to serve a diverse audience, including experienced online sellers and newcomers unfamiliar with financial tools.

DESIGN PROCESS & DURATION

MY DESIGN PROCESS

DISCOVERY

14 days

STAKEHOLDERI NTERVIEW

COMPETITOR ANALYSIS

USER RESEARCH

DEFINITION

08 days

PROBLEM

PROBLEM

PROPOSAL

PERSONA

FOUNDATIONS

15 days

SITE MAP

USER FLOW

WIREFRAME

DEVELOPMENT

28 days

DESIGN SYSTEM

PROTOTYPE

STAKEHOLDER FEEDBACK

TESTING & VALIDATION

IDENTIFYING PAIN POINTS

IDENTIFYING PAIN POINTS

CONFUSING PROCESS

Difficulty in understanding how the platform works to generate electronic invoice.

Difficulty in understanding how the platform works to generate electronic invoice.

DATA VISUALISATION

Problem viewing only the desired data or comparing numbers from different companies form the same user.

Problem viewing only the desired data or comparing numbers from different companies form the same user.

DATA PROCESSING

Errors and low reliability in the processing and issuing of invoices.

Errors and low reliability in the processing and issuing of invoices.

PERSONAS

32 years old

Personal trainer

São Paulo

Miguel Santos

Miguel Santos

Eduardo is a private physical education teacher and during the pandemic he started teaching online. He recently created a platform to sell access to his classes remotely.

Eduardo is a private physical education teacher and during the pandemic he started teaching online. He recently created a platform to sell access to his classes remotely.

He does not have in-depth knowledge of finance and a challenge is managing his company and issuing invoices at the correct time.

He does not have in-depth knowledge of finance and a challenge is managing his company and issuing invoices at the correct time.

"I wish the websites were simpler so I didn't have to hire anyone and save money"

"I'm paying someone

to generate the notes for me on the issuing websites, because I didn't understand how to do it."

INFORMATION

DETAIL

INSIGHT

38 years old

Digital Influencer

Rio de Janeiro

Carla Farias

Carla is a professional hairdresser and works as a digital influencer, she developed her own cosmetic brand for curly hair and sells her products on Instagram.

Carla is a professional hairdresser and works as a digital influencer, she developed her own cosmetic brand for curly hair and sells her products on Instagram.

She produces videos teaching how to do different types of hairstyles for curly hair and offers online courses for hairdressers

She produces videos teaching how to do different types of hairstyles for curly hair and offers online courses for hairdressers

"As I have been working with digital products since I was very young, I know how to manage my sales. But the time it takes me to organize the invoices for my products is something that irritates me."

INFORMATION

DETAIL

INSIGHT

32 years old

Personal trainer

São Paulo

Miguel Santos

Eduardo is a private physical education teacher and during the pandemic he started teaching online. He recently created a platform to sell access to his classes remotely.

He does not have in-depth knowledge of finance and a challenge is managing his company and issuing invoices at the correct time.

"I wish the websites were simpler so I didn't have to hire anyone and save money"

"I'm paying someone

to generate the notes for me on the issuing websites, because I didn't understand how to do it."

INFORMATION

DETAIL

INSIGHT

38 years old

Digital Influencer

Rio de Janeiro

Carla Farias

Carla is a professional hairdresser and works as a digital influencer, she developed her own cosmetic brand for curly hair and sells her products on Instagram.

She produces videos teaching how to do different types of hairstyles for curly hair and offers online courses for hairdressers

"As I have been working with digital products since I was very young, I know how to manage my sales. But the time it takes me to organize the invoices for my products is something that irritates me."

INFORMATION

DETAIL

INSIGHT

CHALLENGE

To design an invoicing system that anyone could use easily even if they don’t understand much about finance or technology. Developing an experience that feels easy and clear, but still has everything advanced users need—without making it messy or overwhelming.

PROPOSAL

1. Improve and simplify the system
2.Making knowledge accessible
3. Design for all

1. Improve and simplify the system
2.Making knowledge accessible
3. Design for all

1. Improve and simplify the system
2.Making knowledge accessible
3. Design for all

DESIGN

DESIGN

The design system ensure consistency in the entire project and facilitate the implementation by the development team.

COLOUR

COLOUR

#1A1A1A

#292929

#343434

#B0B0B0

#ECB037

#57AB69

#D13D32

#387CEC

#1A1A1A

#292929

#343434

#B0B0B0

#ECB037

#57AB69

#D13D32

#387CEC

Surface/Primary

colour-gray-700

#292929

Surface/Secondary

colour-gray-600

#343434

Surface/Yellow

colour-yellow

#EEB037

Text-Icon/Primary

colour-fullwhite

#FFFFFF

Text-Icon/Disable

colour-gray-400

#B0B0B0

Text-Icon/Secondary

colour-black-800

#121212

Status/Sucess

colour-green

#57AB69

Status/Help-Error

colour-red

#D13D32

Status/Neutral

colour-blue

#387EF0

GRid System

Desktop

Column

Amount: 12

Width: Auto

Margin: 80px

Gutter: 24px

46px

46px

ICONS & graphic elements

Typography

FAMILY

Light/ Regular/ Medium/ Bold/ Black/

Roboto

designed by Christian Robertson

Button Definition

Text: Roboto/Medium - 14px

Max Width: 260px - H: 42px

Min Width: 180px - H: 42px

Button

Dashboard Modules

x

x

x

x

2x

2x

2x

4x

LET'S DESIGN IT

LET'S DESIGN IT

analytics & calendar interface

analytics & calendar interface

IMPACT AND
FUTURE SCOPE

IMPACT AND
FUTURE SCOPE

What we achieved in the first months

What we achieved
in the first months

What we achieved in the first months

3 MONTHS

PROCESSED SALES

PROCESSED SALES

R$ 230 million

R$ 230 million

INVOICE ISSUED

INVOICE ISSUED

+ 210.000

+ 210.000

MONTHLY ACTIVE

CUSTOMERS

MONTHLY ACTIVE

CUSTOMERS

+ 100

+ 100

6 MONTHS

PROCESSED SALES

PROCESSED SALES

R$ 450 million

R$ 450 million

INVOICE ISSUED

INVOICE ISSUED

+ 900.000

+ 900.000

MONTHLY ACTIVE

CUSTOMERS

MONTHLY ACTIVE

CUSTOMERS

+ 150

+ 150

Looking forward

Once we started moving towards the web, we started designing for mobile in order to meet the demand of customers who usually consult analytical data on their cell phones, offering faster access.

Looking forward

Once we started moving towards the web, we started designing for mobile in order to meet the demand of customers who usually consult analytical data on their cell phones, offering faster access.

Looking forward

Once we started moving towards the web, we started designing for mobile in order to meet the demand of customers who usually consult analytical data on their cell phones, offering faster access.

Mobile App Development (V2)

Mobile App Development (V2)

Mobile App Development (V2)

OUTCOME

OUTCOME

The platform’s intuitive design made it easier for users of all ages and experience levels to navigate the invoicing system. The use of visual elements, clear hierarchy, and an organised dashboard helped demystify a complex subject, creating a more inclusive and effective experience.

The platform’s intuitive design made it easier for users of all ages and experience levels to navigate the invoicing system. The use of visual elements, clear hierarchy, and an organised dashboard helped demystify a complex subject, creating a more inclusive and effective experience.

Insight

• User-friendly system • Visually clear • Easy data management through visual elements • Smooth onboarding experience for beginners • Quick access to key actions for advanced users • Cohesive design fully aligned with BIU’s brand identity

Insight

• User-friendly system • Visually clear • Easy data management through visual elements • Smooth onboarding experience for beginners • Quick access to key actions for advanced users • Cohesive design fully aligned with BIU’s brand identity

Insight

• User-friendly system • Visually clear • Easy data management through visual elements • Smooth onboarding experience for beginners • Quick access to key actions for advanced users • Cohesive design fully aligned with BIU’s brand identity

Key Takeaways

1. Intuitive design was crucial to reaching a broad user base. 2. Dashboard makes the tool easy to use for users of all levels 3. Visual clarity and consistency build trust in financial tools.

Key Takeaways

1. Intuitive design was crucial to reaching a broad user base. 2. Dashboard makes the tool easy to use for users of all levels 3. Visual clarity and consistency build trust in financial tools.

Key Takeaways

1. Intuitive design was crucial to reaching a broad user base. 2. Dashboard makes the tool easy to use for users of all levels 3. Visual clarity and consistency build trust in financial tools.

renata.ao@gmail.com

RENATA OLIVEIRA

Hey! Drop me a line ;)

renata.ao@gmail.com