web design
redesign
development

BrFideliza

01.

Who is BrFideliza?

BrFideliza is ​​a platform that offers solutions to facilitate the management of Pix payments for companies, including features such as sending payment receipts via WhatsApp, due date notifications, financial reports, and marketing and customer loyalty tools. In addition, it allows you to set up personalized charges, whether for in-person or remote sales, using QR Codes and other features to simplify financial transactions and communication with customers.

Comprovantes na palma da sua mão em até 10 segundos.

02.

Person

A persona in user-centered design is a fictional character created to represent a type of user who might use a website, brand, or product in a similar way.

Carlos Andrade

“I can’t keep track of payments via Pix and this hinders my company’s financial control.”

38 years

São Paulo - SP

Complete Higher Education

Married

Andrade Ferragens

About:

Carlos Andrade is the owner of Andrade Ferragens, a store that serves residents and small contractors in São Paulo, offering everything from hand tools to basic construction materials. He started the business 10 years ago with the goal of becoming a reference in quality and service in the neighborhood, taking advantage of his experience in the retail sector.

In the early years, the store’s business grew through referrals and personalized service. However, with the popularization of marketplaces and the entry of competitors offering aggressive prices, Carlos realized the need to differentiate himself.

Recently, he invested in more modern payment methods, such as Pix, to attract customers who prefer convenience and speed. Despite this, managing these payments has been a challenge, since he still uses manual processes to organize receipts and track defaults.

Carlos also feels the pressure to improve the customer experience. He wants to automate billing and integrate a system that allows sending notifications about due dates and promotions, in addition to building customer loyalty with benefit programs. All of this, he says, would help maintain his loyal base and improve cash flow.

With a lean team, he needs tools that optimize time and reduce the need for manual interventions, allowing him to focus on expanding the business and improving service.

Ana Lemos

“I waste a lot of time organizing payments and billing customers manually.”

38 years

Recife - PE

High School

Single

Ana Bolos e Doces

About:

Ana Lemos is a young entrepreneur who turned her passion for baking into a thriving business. Three years ago, she started making homemade cakes and delicious pastries in her own kitchen, initially serving friends and family. Over time, her ability to create delicious, personalized pastries helped her build a solid reputation, gaining new customers through referrals and social media.

Her business, Ana Bolos e Doces, grew quickly, and today she caters to birthdays, weddings, and corporate events, in addition to maintaining a loyal clientele for individual sales. Despite her success, Ana faces challenges related to managing payments and communicating with customers. As she works alone or with a very small team, she has to balance production, service, and financial management of the business.

The implementation of Pix was a significant step forward in facilitating payments, but there are still bottlenecks: Ana spends a lot of time manually sending payment reminders, organizing receipts, and charging customers in case of delays. In addition, she seeks to build customer loyalty by offering promotions and benefits, but she does not have the right tools to implement an effective rewards program.

Ana sees technology as an ally to further professionalize her business. With systems that automate billing and improve communication, she hopes to reduce the time spent on administrative tasks and focus on what she loves: creating sweets that make special moments even more unforgettable.

04.

Typography

05.

Colors

Colors are a fundamental element of UX/UI design as they play an important role in how users perceive and interact with a digital product. The choice of colors was based on a WCAG 2.1 contrast system.

Base

These are base black and white color styles to quickly swap out if you need to.

AAA 21:1
White
#FFFFFF
AAA 20.19:1
Black
#050610

Gray

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design, text, form fields, backgrounds, dividers are usually gray.

AAA 10.2:1
25
#F4F5F6
AAA 10.01:1
50
#F9FAFB
AAA 9.49:1
100
#F2F4F7
AAA 8.84:1
200
#EAECF0
AAA 7.09:1
300
#D0D5DD
AA 4.06:1
400
#98A2B3
AAA 4.97:1
500
#667085
AAA 7.68:1
600
#475467
AAA 10.46:1
700
#344054
AAA 14.7:1
800
#1D2939
AAA 17.74:1
900
#101828

Primary

The primary color is your “brand” color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

AA 4.15:1
50
#F0FBFB
AA 3.79:1
100
#D9F4F3
A 3.33:1
200
#B7EAEA
A 2.7:1
300
#86D9DA
A 2.2:1
400
#4DBFC3
A 2.53:1
500
#36B3BA
AA 4.38:1
600
#2C848E
AAA 6.01:1
700
#296C75
AAA 7.79:1
800
#295961
AAA 9.49:1
900
#264B53

Premium plan

The yellow color is used for the BrFideliza´s premium plan and get highlighted between other plans.

A 2.07:1
50
#FEF0C7
A 2.07:1
500
#F79009

06.

How it was

The previous version of the website had an outdated design and did not reflect the company’s credibility, in addition to having difficulty communicating clearly how its services worked. Therefore, my focus was on improving communication and conveying the credibility that the company needs to strengthen its image in the market.

07.

Presentation

The website has been completely redesigned to present the benefits of each service offered by BrFideliza in a clear and detailed manner, highlighting the advantages for customers. In addition, information has been included on the business segments that can benefit from the solutions, as well as the plans available, adapted to meet the needs of companies of different sizes.

08.

Design process

Enhancing user engagement and satisfaction through innovative design and intuitive functionality.

01
DISCOVERY

Identified key objectives and user needs to create a focused, user-centered landing page experience.

02
RESEARCH

Analyzed user pain points and visual inspirations to shape a clean, minimal design that conveys trust.

03
IDEATION

Explored layouts and user flow with wireframes, refining the design based on feedback for clarity and usability.

04
DESIGN

Created a polished, responsive design in Figma with subtle interactions and a seamless user experience across devices.

05
DEVELOPMENT

Once everything has been approved by the client, development in WordPress begins and the website is published online.

Control

all your

company's

payments

in the

palm of

your hand

with

brfideliza

09.

High fidelity

Now you can view every detail of BrFideliza’s main sales page.

Thanks for seeing until here!