Banco do Brasil
B A N K R E W A R D S W E B S I T E R E D E S I G N
In an exciting design venture focused on creating a website for the digital rewards program of Banco do Brasil, I collaborated with a dynamic team. Composed of the project leader, a developer, a Banco do Brasil stakeholder and myself as a UX/UI designer, we embarked on an accelerated schedule.
Throughout strategic meetings, we investigated user profiles and outlined essential requirements. The diversity of perspectives, from the project leader to the stakeholder, enriched our discussions, fostering a comprehensive understanding of the project. This intensive and effective collaboration was key not only to meeting expectations but also to overcoming challenges. The end result is a Banco do Brasil digital rewards website that not only meets but delights users.
B A N K R E W A R D S W E B S I T E R E D E S I G N
In an exciting design venture focused on creating a website for the digital rewards program of Banco do Brasil, I collaborated with a dynamic team. Composed of the project leader, a developer, a Banco do Brasil stakeholder and myself as a UX/UI designer, we embarked on an accelerated schedule.
Throughout strategic meetings, we investigated user profiles and outlined essential requirements. The diversity of perspectives, from the project leader to the stakeholder, enriched our discussions, fostering a comprehensive understanding of the project. This intensive and effective collaboration was key not only to meeting expectations but also to overcoming challenges. The end result is a Banco do Brasil digital rewards website that not only meets but delights users.
Info
C L I E N T
Banco do Brasil
Banco do Brasil
Y E A R
2020
2020
R O L E
UX/UI Designer
UX/UI Designer
T O O L S
Figma, Photoshop
Figma, Photoshop
Process
1. Research
Given the tight timeline for delivering this project, my primary sources of guidance were our product leader, Mike, and the Banco do Brasil stakeholder, both pivotal experts in this digital realm. Drawing insights from CRM databases, benchmarking research, and team meetings, I gathered valuable qualitative and quantitative information. These findings were instrumental in crafting a more precise user experience that effectively translated both user needs and business requirements.
Starting with personas.
Banco do Brasil Persona Cards
2. Information Architecture
After creating the personas and a series of meetings, we came up with the sitemap, outlining all the crucial pages and sections so that users can easily find all information related to digital rewards.
Once we received the list of digital rewards, we ran a card sorting workshop with stakeholders and some users to better understand their mindset and establish the reward categories. That way, users can filter and find rewards more accurately.
Banco do Brasil Sitemap
Card Sorting
3. Interaction Design
After defining the user journey, embracing the "mobile-first" approach, I initiated the sketches of wireframes and began designing medium-fidelity prototypes for the essential screens. In collaboration with our developer, we chose to use the Angular Material Figma component library as the foundation for our project, aligning with the front-end implementation in Angular.
To draw inspiration for the UI style, I explored design platforms such as Dribbble, Mobbin, and Behance, and revisited websites of other companies offering benefits and digital rewards programs, seeking innovative interfaces and engaging experiences. Given the presence of a filtering component, I also examined apps that provide effective filtering experiences, such as iFood.
Mid Fidelity Prototype
4. UI Design
Mobile Mockup
Following client's specifications, we meticulously crafted the screens and website banners employing the sophisticated Roboto typography and the color palette synonymous with Banco do Brasil branding.
High Fidelity Mobile Prototype
The screens above, from left to right:
Initial Screen - This starting point determines whether users have an existing bank account. Based on their response, the dynamic banners throughout the website will tailor content accordingly.
Home Screen - At the forefront of user engagement, the Home Screen presents a multifaceted experience. Beginning with top banners showcasing new rewards and acting as a gateway to the dedicated rewards page. Subsequent sections unfold a journey: users explore available rewards, learn about the Rewards Club, discover new and featured rewards, engage with lead capture forms, and are encouraged to subscribe to the Rewards Club—a strategic element persisting across most pages.
Opened Menu;
'What is your moment in life?' expanded dropdown menu - Empowering users to connect their life experiences with relevant rewards, this menu offers a curated selection of life moments. A simple click leads users to discover rewards tailored to their specific circumstances.
Rewards page - A focal point for reward exploration, the Rewards Page features dynamic reward banners followed by filtering options. Users can delve into new and featured rewards, engage with lead capture forms, access information on how the Rewards Club operates, and subscribe for further benefits.
Rewards page showing all rewards;
Reward modal - Enhancing the reward discovery process, the modal window provides detailed information and additional rewards from the same company when users click on the + icon. The "I want" button seamlessly directs users to the corresponding reward within the bank's app or website.
Reward page - Exclusive partnerships with premium companies unlock dedicated pages showcasing their rewards. Users can explore related offerings, engage with lead capture forms, and access a banner inviting them to become Banco do Brasil clients if they're not already.
Moment page - Tailored to specific life events, this page curates rewards accordingly. Users can seamlessly transition to the Rewards Page, engage with lead capture form, and explore becoming Banco do Brasil clients.
'How it works' page - Offering a comprehensive guide to the Rewards Club, this page outlines steps for joining and redeeming rewards. From verifying Banco do Brasil bank affiliation to navigating the redemption process, users are equipped with a clear understanding. Lead capture form and navigation links enhance user engagement.
FAQ page - Addressing common queries, the FAQ page serves as a resource hub. Users can easily access the Rewards Page, engage with lead capture form, and explore becoming Banco do Brasil clients.
4.1. UI Design - Desktop mode
After the stakeholders approved the mobile mode, I started designing the desktop mode screens.
High Fidelity Desktop Prototype
thanks
obrigado