Brick

Financial Data API for Fintechs

Brick works in the Open Banking space,  building financial APIs that brings seamless connection to various data sources, such as banks, e-wallets, and employment data.

We’ve been engaged with Brick to work on a new brand identity, as well as the UX & UI design of the Brick website and user dashboards. When Brick approached us for the complete redesign of their brand and website, they had  a clear vision in mind: To design a unified experience that represents their core business offering - a single unifying API that allows fintechs to connect with just one line of code.

Brick

Platform
Desktop Website
Mobile (Responsive) Website
Widget and Dashboard
Engagement
March 1st, 2021 - Now
Scope of Work
Ui Design
Brand Identity
Ui Design
Design System
Ui Design
UX Research
Ui Design
Product Design
Designing the Foundation
Empathize to Define the New Brand Identity

We wanted to ensure that Brick’s value and vision is communicated through the new brand identity. Thus, we kicked off the design process by understanding the company’s values and mission. We worked with the Brick team to understand how Brick should be perceived by the partners, users, team members and key stakeholders.

The Philosophy

Brick’s philosophy of ‘One API for All’ comes from the foundation of one brick in a wall that starts building multiple connections towards Brick’s partners as third-party integrations. It also means that with a single, unified Fintech API, Brick is able to connect fintechs with multiple data sources.

Read the complete case study
One core brick
With multiple conections
Design System

The Brick Design System was designed based on the brand identity. We defined a system that included bold typography, strong colors, fun but trustworthy icons and illustrations that represent Brick as a professional API provider.

View the design system
User Research
Learning User Behaviour

Understanding Brick’s existing digital product from the user’s perspective was a key step to start our design process. The digital product included four parts: Demo, Widget, Landing page website, and User Dashboard. We conducted user interviews and ran usability tests on their existing platform in order to identify some key pain points the users were facing. This process helped us while redesigning the platform as we had developed a deep empathy for the users.

Research Insights

There seemed to be a diconnect between the brand identity and how Brick was represented on the digital products like the demo, widget, and the website.

Some users found it difficult to understand the information displayed on the demo and the widget. This made users perceive information incorrectly.

Users found that the demo and widget was placed out of context in the overall userflow. The difference in the visual interface of these products, made this issue even more evident.

Understanding the User’s Context of Use

Personas and user journey maps help us understand the user’s context of use, their behaviors, goals, frustrations, emotions and thoughts while using the product. At this point we also identify the problems in more detail and the opportunities available for us to design a better experience for the users.

Defining a Consistent User Flow
Seamless Connections From One Product to the Other

The Information Architecture (IA) helps us look at all the user paths in all of Brick’s digital products on a macro level and see how each product connects with the other. This includes the website, demo, widget, and the user dashboard, and making the experience seamless while the user flows from one to the next.

Designing the Content and Information Architecture
A Product That Meets the Needs of All User Types

A website that’s catered for users focuses on providing the right information at the right time. The landing page was targetted towards three user groups and we made sure the content speaks to all user types:

  1. Developers: Availability of complete technical information about the API throughout the product
  2. Decision Makers (CXOs):  Credibility and trustworthiness for the product comes through via valid client testimonials
  3. End users of the API: An easy to use Brick API widget that will enhance the end user’s experience
Designing a Clean and User Friendly Interface
A Striking Interface to Depict Credibility and Reliability

Financial data means serious business. The Brick product needs to show reliability as it works with data from large financial institutions and makes it available to fintechs. At the same time, this product also needs to show credibility in terms of performace which comes through in a seamless user experience. A beautiful interface with striking visuals helped us achieve the goals we set out at the start of the project as well as meet all the needs of existing and potential users of the platform.

Cohesive Visual Langauge

A consistent design system ensures that users have a seamless experience across all platforms. It also helps the design and development teams focus on the product experience rather than get lost in visual multiple times over the product development life cycle.

Clarity of Information

We adopted a simple and clear design for the product to ease the user into understanding the information that was provided across the platform. In addition, we worked on custom illustrations and icons based on context of use, supporting all information displayed.

Design Iterations
Working Closely with Users to Improve the Product Experience

Testing our designs helps us validate our design decisions and ensures that the newly designed demo and widget have addressed all the pain points identified in the first round of user research.

Research Outcomes

While the newly designed demo and widget solved the initial pain points identified like clarity of information and a seamless flow between the website, demo and widget; we now started identifying problems in the design details. For example: preferred sign-up method, preferred verification method, less detailed UX copy, ignored tooltips/coachmarks, missing context of use on a couple of pages and many such smaller details that could easily be overlooked.

Design Improvements

Since design is an iterative process, there will always room for improvements no matter how detailed we’ve been while designing the product. Currently, we are continuing to help Brick design a  better experience for the user by making quick iterations in our designs by getting early feedback from users. All the insights gathered during user testing is being taken up by the design and development teams.

Read other stories on how we design for better experiences