OneBrick
Designing platforms for financial APIs provider: website, widget, and customer-facing dashboard.
Designing platforms for financial APIs provider: website, widget, and customer-facing dashboard.
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 UX & UI design of the Brick website, widget, and user dashboards. When Brick approached us for the complete redesign of their platforms, 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.
Industries
Startup, API, Financial Technology
What we did
- Stakeholder interview
- Requirement study
- User research
- Usability testing
- Information architecture
- Wireframe
- Userflow
- UI design
- Design System
Website
Website
- Introduction about the company and their products offering
- Demo to try the Brick’s widget
Widget
An API with interface format that can be used by customer to build their app / web.
Customer Dashboard
Tools to monitor and control the APIs that is used by customer
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:
- Website
- Widget
- 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.
Obejctives
To investigate the user’s behaviour in relation to Brick’s services
To understand the needs and the expectation of users and potential customers of Brick
To assess the experience and pain points of users when interacting with the website and widget
Participants
Segment 1
Decision makers
Segment 2
Developers
Segment 3
End-users
Methods
Qualitative
In-depth user interview
Moderated usability testing
Supported Documents
Research plan
Interview script
Testing scenario
Unrecognised brand identity.
There seemed to be a diconnect between the brand identity and how Brick was represented on the digital products like the widget, and the website.
Difficult to understand.
Some users found it difficult to understand the information displayed on the demo and the widget. This made users perceive information incorrectly.
Rough userflow.
Users found that the widget demo was placed out of context in the overall userflow. The difference in the visual interface of these products, made this issue even more evident.
Unclear product introduction.
User feel unsure what kind of products that Brick try to offer to them. It seems advance but still confuse how to use it and what is the benefit for them.
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.
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.
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:
Developers
Availability of complete technical information about the API throughout the product
Decision Makers (CXOs)
Credibility and trustworthiness for the product comes through via valid client testimonials
End users of the API
An easy to use Brick API widget that will enhance the end user’s experience
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.
Intial Design.
What has been improved:
A clearer tag line explaining the products offered by Brick.
The CTA to try a widget demo is placed at the top of the page prominently so that users can learn the product by trying them directly (learning by doing).
The widget illustrations and code snippets represent an API.
There is an overview of the product and the use case example as an explanation of how to use the Brick widget/API in various fintech applications.
Build user trust by displaying positive statistics and logos that support Brick legality, such as the Fintech Indonesia logo, Kemenkominfo, and ISO 27001
The user's understanding of the products is one of the key points of how a business can be successful. Without a good product understanding, users are reluctant to buy the products offered.
Explaining products in the form of APIs and Widgets is one of the biggest challenges in this project. Based on insights from users and also the results of discussions with clients, we have to create product designs that have sequential and complete content so users can easily understand them.
On each product page, we add a code snippet section so that developers can immediately try the API offered. If a developer needs more detailed information about the code, then in this section we also provide a button to open the documentation.
All of the design results here are created based on the developer's insights when we conducted the usability testing and interview with them.
One of the important factors in products related to finance is trust. Some users state that the company profile that offers a product like this greatly influences their decision to process a further transaction/agreement.
Realizing that point, we created an attractive, elegant, and professional company profile design in order to build good trust with users. Apart from that, we also provide information regarding investors and founders of Brick so that their track records can be recognized.
As explained above, the main product of Brick is the API and widgets. When we did user research for the first time, we learned that there were lots of design errors that made users reluctant to use the widget. So we have improved the widget design as below:
Intial Design.
User’s Insights.
User feel anxious.
Why am I suddenly being asked to grant persmission?What are they triying to do?
User doesn’t understand the button purpose.
What does this button do?
Should I input my Contact Data?
My data doesn’t seem very secure
Unsure to continue.
It seems convincing, let me try to click this. A tooltip and short info appears.
Hffft After I click this, the info is not quite helpful.
What has been improved:
Add security information upfront.
The security information is very important to build the user trust.
Bahasa Indonesia as the default .
Most Indonesian users prefer Bahasa.
Get it clear.
Clear message about what Brick is, and what is the function.
Keep it compact and secure.
No “cincong”, to the point to the security informationKeep it short, most Indonesians don’t read a lot of text.
Legal information to strengthen the trust.
Most Indonesians are concerned about legal laws (Kominfo, BI, & OJK).
Improved Design.
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. Secara iteratif, kami terus melakukan research dan design improvement untuk menemukan formula terbaik pada design produk Brick.
No matter how much time you spend on ideating and prototyping your design solution, you should always test it with real people. The feedback from the testing session will help you understand what part of your design requires improvements. (Nick Babich - UX Planet)
Very important for us to maintain design consistency not only for the UI & UX but also for the product branding. The design system would become basic guidance for all related people to work like designers, developers, marketing, etc.
Project Owner
Year
2021 - 2022
Design Lead
Design Team
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
