Web Design - UX & UI
Financial Industry
2021
Web Design - UX & UI
Financial Industry
2021
PROJECT
BIU
DURATION
09 WEEKS
LOCATION & YEAR
SÃO PAULO - 2021
MY ROLE
PRODUCT DESIGNER
TOOLS USED
PROJECT
BIU
DURATION
09 WEEKS
TOOLS USED
LOCATION & YEAR
SÃO PAULO - 2021
MY ROLE
PRODUCT DESIGNER
PROJECT
BIU
DURATION
09 WEEKS
LOCATION & YEAR
SÃO PAULO - 2021
MY ROLE
PRODUCT DESIGNER
TOOLS USED
About
BIU
About
BIU
BIU is a Brazilian financial technology company that simplifies electronic invoicing for businesses. Its platform enables users to issue invoices, manage tax documents and monitor financial data of their online sales.
BIU is a Brazilian financial technology company that simplifies electronic invoicing for businesses. Its platform enables users to issue invoices, manage tax documents and monitor financial data of their online sales.
BRANDING
BRANDING
DISCOVERY
DISCOVERY
DEFINITION
DEFINITION
FOUNDATIONS
FOUNDATIONS
WIREFRAME
WIREFRAME
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
PROTOTYPE
PROTOTYPE
Workflow Plan
Workflow Plan
At BIU, design emerges as a language that simplifies and democratizes the management of online product sales.
More than a web site, it is a business partner where productivity meets simplicity, and purpose meets clarity.
At BIU, design emerges as a language that simplifies and democratizes the management of online product sales.
More than a web site, it is a business partner where productivity meets simplicity, and purpose meets clarity.
At BIU, design emerges as a language that simplifies and democratizes the management of online product sales.
More than a web site, it is a business partner where productivity meets simplicity, and purpose meets clarity.
Site Map
Site Map
Site Map
The sitemap was designed to make information easier to visualize, thereby simplifying company management for the user and reducing the cognitive load required to achieve the desired goal.
The sitemap was designed to make information easier to visualize, thereby simplifying company management for the user and reducing the cognitive load required to achieve the desired goal.
Operation
Operation
Hero
Services
Social Proof
FAQ
Partners
Analysis
Analysis
Overview
Sales
Notes
Details
Dashboard
Dashboard
Dashboard Overview
Sales - graphics
Notes - graphics
Comparisson Board
Help
Help
Hero
FAQ
Expert Help
Home page
Home page
Wireframe
Wireframe
Wireframe
The BIU wireframe defined the information hierarchy, screen layout organization, and user flows, facilitating discussions and alignment among the designers, stakeholders, and developers involved in the process.
The BIU wireframe defined the information hierarchy, screen layout organization, and user flows, facilitating discussions and alignment among the designers, stakeholders, and developers involved in the process.
Dashboard
Table
Login
Plans
Home
Main Menu
Partners
FAQ
Social
Proof
Services
Hero
Partners
FAQ
Social
Proof
Services
Hero
UI Design
UI Design
UI Design
The project delivered an intuitive design that transformed numerical data analysis into visual elements, enabling a simplified language accessible to users. This facilitated navigation and management while reducing the time and number of clicks required for users to achieve their goals.
The project delivered an intuitive design that transformed numerical data analysis into visual elements, enabling a simplified language accessible to users. This facilitated navigation and management while reducing the time and number of clicks required for users to achieve their goals.
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
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
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
Typography
FAMILY
Light/ Regular/ Medium/ Bold/ Black/
Roboto
designed by Christian Robertson
GRid System
Desktop
Column
Amount: 12
Width: Auto
Margin: 80px
Gutter: 24px
Button Definition
Text: Roboto/Medium - 14px
Max Width: 260px - H: 42px
Min Width: 180px - H: 42px
Button
46px
46px
ICONS & graphic elements
Dashboard Modules
x
x
x
x
2x
2x
2x
4x
Prototype
Prototype
Prototype
The BIU website achieved all proposed design objectives, offering:
Accessible and simplified language
Visual data management
Customized dashboard
Intuitive navigation
Comparative chart
The BIU website achieved all proposed design objectives, offering:
Accessible and simplified language
Visual data management
Customized dashboard
Intuitive navigation
Comparative chart
Management Pages were designed to ensure usability, simplify the language and reduce the time it takes for users to achieve their goals.
Management Pages were designed to ensure usability, simplify the language and reduce the time it takes for users to achieve their goals.
Overview table
Dashboard
Selection of period for
comparative analysis
Overview table
Dashboard
Selection of period for
comparative analysis
Overview table
Selection of period for
comparative analysis
Dashboard
Impact
Impact
Impact
The project delivered an intuitive design that transformed numerical data analysis into visual elements, enabling a simplified language accessible to users. This facilitated navigation and management while reducing the time and number of clicks required for users to achieve their goals.
The project delivered an intuitive design that transformed numerical data analysis into visual elements, enabling a simplified language accessible to users. This facilitated navigation and management while reducing the time and number of clicks required for users to achieve their goals.
Increasement
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
Want to see another project?
Want to see another project?
Want to see another project?
FOTOSTAX
Instant print in motion and 3D
Instant print in motion and 3D
Mobile Prototype
Mobile Prototype
renata.ao@gmail.com
RENATA OLIVEIRA
Hey! Drop me a line ;)
renata.ao@gmail.com