Developing a web platform
for digital Invoicing
Developing a web platform for digital Invoicing
Developing a web platform
for digital Invoicing
UX & UI Design
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.
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.
I developed BIU's platform to simplify and enhance the manage of data, crafting a fluid navigation that also allowed the user to compare and analyse metrics with different dates and status situation, all into one platform.
I developed BIU's platform to simplify and enhance the manage of data, crafting a fluid navigation that also allowed the user to compare and analyse metrics with different dates and status situation, all into one platform.
MY DESIGN PROCESS
MY DESIGN PROCESS
DISCOVERY
14 days
STAKEHOLDERI NTERVIEW
COMPETITOR ANALYSIS
USER RESEARCH
DEFINITION
05 days
PROBLEM
PROPOSAL
PERSONA
FOUNDATIONS
10 days
SITE MAP
USER FLOW
WIREFRAME
DEVELOPMENT
22 days
DESIGN SYSTEM
PROTOTYPE
STAKEHOLDER FEEDBACK
TESTING & VALIDATION
DISCOVERY
14 days
STAKEHOLDERI NTERVIEW
COMPETITOR ANALYSIS
USER RESEARCH
DEFINITION
08 days
PROBLEM
PROPOSAL
PERSONA
FOUNDATIONS
15days
SITE MAP
USER FLOW
WIREFRAME
DEVELOPMENT
28 days
DESIGN SYSTEM
PROTOTYPE
STAKEHOLDER FEEDBACK
TESTING & VALIDATION
DISCOVERY
& RESEARCH
DISCOVERY
& RESEARCH
COMPETITOR ANALYSIS
Notazz and Enotas are the most biggest platforms that automates the issuance of electronic invoices to digital entrepreneurs and online businesses offering integration service with platforms like Hotmart, allowing users to manage directly within their sales environment. From a UX/UI perspective they prioritize functionality and automation. However, the interface could benefit from enhanced visual hierarchy and more intuitive navigation to improve user experience.
COMPETITOR ANALYSIS
Notazz and Enotas are the most biggest platforms that automates the issuance of electronic invoices to digital entrepreneurs and online businesses offering integration service with platforms like Hotmart, allowing users to manage directly within their sales environment. From a UX/UI perspective they prioritize functionality and automation. However, the interface could benefit from enhanced visual hierarchy and more intuitive navigation to improve user experience.
COMPETITOR ANALYSIS
Notazz and Enotas are the most biggest platforms that automates the issuance of electronic invoices to digital entrepreneurs and online businesses offering integration service with platforms like Hotmart, allowing users to manage directly within their sales environment. From a UX/UI perspective they prioritize functionality and automation. However, the interface could benefit from enhanced visual hierarchy and more intuitive navigation to improve user experience.
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.
USER PERSONAS TO UNDERSTAND THE AUDIENCE
USER PERSONAS TO UNDERSTAND THE AUDIENCE
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
DEFINING THE PROBLEM
TO PROPOSE A SOLUTION
Most users find hard to manage their own accounts due to the ammount of information and an inefficient interface, making it confusing to understand and analyse the data which generates many complaints and low customer loyalty.
Most users find hard to manage their own accounts due to the ammount of information and an inefficient interface, making it confusing to understand and analyse the data which generates many complaints and low customer loyalty.
Most users find hard to manage their own accounts due to the ammount of information and an inefficient interface, making it confusing to understand and analyse the data which generates many complaints and low customer loyalty.
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.
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.
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.
SOLUTION
PROPOSAL
SOLUTION
PROPOSAL
1. IMPROVE AND SIMPLIFY THE SYSTEM
Develop an interface easy to understand and navigate, allowing data to be visualised in a simple and clear way, ensuring a good experience.
2.MAKING KNOWLEDGE ACCESSIBLE
Ensure that the user can manage their own account by offering visual communication that helps them understand specific financial information and the possibility of consulting specialised professional help.
3. DESIGN FOR ALL
Create an interface that works for both experienced users and beginners with little or no knowledge of online invoicing.
1. IMPROVE AND SIMPLIFY THE SYSTEM
Develop an interface easy to understand and navigate, allowing data to be visualised in a simple and clear way, ensuring a good experience.
2.MAKING KNOWLEDGE ACCESSIBLE
Ensure that the user can manage their own account by offering visual communication that helps them understand specific financial information and the possibility of consulting specialised professional help.
3. DESIGN FOR ALL
Create an interface that works for both experienced users and beginners with little or no knowledge of online invoicing.
1. IMPROVE AND SIMPLIFY THE SYSTEM
Develop an interface easy to understand and navigate, allowing data to be visualised in a simple and clear way, ensuring a good experience.
2.MAKING KNOWLEDGE ACCESSIBLE
Ensure that the user can manage their own account by offering visual communication that helps them understand specific financial information and the possibility of consulting specialised professional help.
3. DESIGN FOR ALL
Create an interface that works for both experienced users and beginners with little or no knowledge of online invoicing.
THE FOUNDATIONS
OF BIU'S UI SOLUTION
THE FOUNDATIONS
OF BIU'S UI SOLUTION
I developed a design system to ensure consistency in our entire project and facilitate the project implementation by our development team.
I developed a design system to ensure consistency in our entire project and facilitate the project implementation by our development team.
Style guide
Style guide
Style guide
COLOUR
COLOUR
COLOUR
#1A1A1A
#1A1A1A
#292929
#292929
#343434
#343434
#B0B0B0
#B0B0B0
#ECB037
#ECB037
#57AB69
#57AB69
#D13D32
#D13D32
#387CEC
#387CEC
Surface/Primary
colour-gray-700
#292929
Surface/Primary
colour-gray-700
#292929
Surface/Primary
colour-gray-700
#292929
Surface/Secondary
colour-gray-600
#343434
Surface/Secondary
colour-gray-600
#343434
Surface/Secondary
colour-gray-600
#343434
Surface/Yellow
colour-yellow
#EEB037
Surface/Yellow
colour-yellow
#EEB037
Surface/Yellow
colour-yellow
#EEB037
Text-Icon/Primary
colour-fullwhite
#FFFFFF
Text-Icon/Primary
colour-fullwhite
#FFFFFF
Text-Icon/Primary
colour-fullwhite
#FFFFFF
Text-Icon/Disable
colour-gray-400
#B0B0B0
Text-Icon/Disable
colour-gray-400
#B0B0B0
Text-Icon/Disable
colour-gray-400
#B0B0B0
Text-Icon/Secondary
colour-black-800
#121212
Text-Icon/Secondary
colour-black-800
#121212
Text-Icon/Secondary
colour-black-800
#121212
Status/Sucess
colour-green
#57AB69
Status/Sucess
colour-green
#57AB69
Status/Sucess
colour-green
#57AB69
Status/Help-Error
colour-red
#D13D32
Status/Help-Error
colour-red
#D13D32
Status/Help-Error
colour-red
#D13D32
Status/Neutral
colour-blue
#387EF0
Status/Neutral
colour-blue
#387EF0
Status/Neutral
colour-blue
#387EF0
#1A1A1A
#1A1A1A
#292929
#292929
#343434
#343434
#B0B0B0
#B0B0B0
#ECB037
#ECB037
#57AB69
#57AB69
#D13D32
#D13D32
#387CEC
#387CEC
Typography
Typography
Typography
FAMILY
Light/ Regular/ Medium/ Bold/ Black/
Light/ Regular/ Medium/ Bold/ Black/
Roboto
designed by Christian Robertson
designed by Christian Robertson
GRid System
GRid System
GRid System
Desktop
Column
Amount: 12
Width: Auto
Margin: 80px
Gutter: 24px
Button Definition
Button Definition
Button Definition
Text: Roboto/Medium - 14px
Max Width: 260px - H: 42px
Min Width: 180px - H: 42px
Button
ICONS & graphic elements
ICONS & graphic elements
ICONS & graphic elements
46px
46px
Dashboard Modules
Dashboard Modules
Dashboard Modules
x
x
x
x
2x
2x
2x
4x
DESIGN
& DELIVERABLES
DESIGN
& DELIVERABLES
wireframe & prototype screen
wireframe & prototype screen
analytics & calendar interface
analytics & calendar interface
dashboard DEVELOPMENT
dashboard DEVELOPMENT
Wireframe
Horizontal View
Horizontal View
Vertical View
web prototype
web prototype
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
PROCESSED SALES
R$ 230 million
R$ 230 million
R$ 230 million
INVOICE ISSUED
INVOICE ISSUED
INVOICE ISSUED
+ 210.000
+ 210.000
+ 210.000
MONTHLY ACTIVE
CUSTOMERS
MONTHLY ACTIVE
CUSTOMERS
MONTHLY ACTIVE
CUSTOMERS
+ 100
+ 100
+ 100
6 MONTHS
PROCESSED SALES
PROCESSED SALES
PROCESSED SALES
R$ 450 million
R$ 450 million
R$ 450 million
INVOICE ISSUED
INVOICE ISSUED
INVOICE ISSUED
+ 900.000
+ 900.000
+ 900.000
MONTHLY ACTIVE
CUSTOMERS
MONTHLY ACTIVE
CUSTOMERS
MONTHLY ACTIVE
CUSTOMERS
+ 150
+ 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
renata.ao@gmail.com
Renata Oliveira