Case Study
June 28, 2021

Designing Brick’s Brand Identity

Gilang Fadilana

Overview

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. Their single unifying API allows fintechs to connect with just one line of code, without the need of building the infrastructure themselves.

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. A brand identity is a collection of tangible brand elements that come together to create one brand image.

When most people think of “brand”, the first thing that comes to mind is a logo. While a logo is indeed a key brand element, and typically the most immediate visual association with a company, there’s much more to a brand than just a logo. A brand is how people perceive your company. The brand is in essence your company’s reputation.

Brick’s current brand identity required a refresh because it wasn’t adequately justifying what the company stood for and didn’t incorporate the product’s vision into the logomark and logo typeface. In 2020 when Brick was first introduced, the company had a Lego brick icon as the logomark to convey that ‘Brick is the infrastructure layer to build seamless fintech services’.

Brick’s old Logo

While this logo managed to create a strong introduction for Brick in the fintech landscape, the logo implementation might have been a little too rigid for all platforms to easily adopt the Brick brand. Looking back at the old logomark and logotype, both look disconnected and don’t form a cohesive unit, almost giving the impression that two separate components are placed next to each other. In addition to that, the website and Brick dashboard didn’t follow a consistent design style and there seemed to be a disconnect between the brand identity and how Brick was represented on the website.

All of this and more led us to design a new brand identity for Brick that would be more effective in the sense that the customers would be able to associate with it with a high level of credibility and quality. In addition to that, the new brand identity should reflect the company’s vision and also represent the Brick product.

Process

Defining the Brand Personality

Our first step in the brand design process is to define the brand personality. By defining this, we can understand the company’s values and can better represent these values in a visual form.

As we approach this task, we start with the first step of any design process: Empathize.

We began by understanding and learning more about the company — their story, how they got to where they are today, their business goals, the company’s values, and the overall company vision. We used a simple questionnaire to gather this information from Brick’s key stakeholders. Our key questions revolved around the following points:

A questionnaire sent out to Brick’s key stakeholders to learn about the company

In order to understand brand perception and visual identity traits, we put our questions on a Semantic Differential scale in order to get more context on what the stakeholders think of their company/brand and drill down on the specifics that will define a strong brand personality.

The responses helped us arrive at an overall direction for the brand to move towards. Based on the responses we received, we started to define the elements that would make up the brand identity :

1. Brand perception

Brand perception is defined by how a company would like to be perceived by its target audience. For example, how will the company describe its brand to its colleagues/network. From the survey, we gathered that the Brick brand and product had to be leaning towards being Exclusive, Affordable, and Mature.

Brick’s brand perception
2. Visual identity traits

To help us incorporate visual elements in the logo that would represent the company’s identity, we asked Brick’s employees and stakeholders to describe how the brand should look and feel whenever the customer interacts with the brand. The responses we got were leaning towards Delightful, Literal (meaning literal visual representation to the brand name - ‘brick’), Dynamic, and Simple.

Brick’s visual identity traits
3. Brand identity keywords

Using keywords to describe the company’s identity will help us design a logo that conveys the company’s values. We gathered the most frequently mentioned keywords from the survey as the brand identity keywords :

  • Connection
  • Bridge
  • Dynamic
  • Accurate
  • Fast
  • Omnipresent
Gathering the Moodboard

Now that we had all the words that represent the brand identity, we started moving towards the visuals. We started gathering a few visual concepts on a moodboard in order to define some clear visual directions that the brand could move towards.

We had a few concepts in mind, so we categorized the moodboard into two different approaches. The first concept was called Stack. We picked this approach based on the literal approach of a brick in the physical world. As bricks come together in a stack to build something great, we wanted to represent this brick stack in the brand logo.

The “Stack” Concept

The second concept called Initial is based on the first letter B from “Brick”. With the letter B as the base, there were many creative ways we could explore representing the company’s identity while also combining it with the concept of Stacks.

The “Initial” Concept

Based on the two visual directions we came up with, both the client as well as our team agreed that the Stack concept would better represent the brand personality. Nevertheless, eventually, we went on to explore both concepts at different stages of the design process.

The Logo Design Journey

We started exploring a few ideas on paper in order to get some quick concepts out for the logo which would be the core centerpiece of our brand identity. With sketches, we can have quick and explorative outputs for logo variations as well as showcase the process of a creative search rather than crafting out a pixel-perfect logo from the get-go.

Based on the sketches we explored, we began narrowing down the options which we think might represent Brick the best using the Stack concept.

Logo iterations — Round 1

Since we were in the ‘Diverge’ stage (based on the Double Diamond approach) of brainstorming as many ideas as possible for the logo, we also tried some totally different ideas which made the stacked bricks look like a Castle. This approach represents a structure with a strong foundation built by stacking bricks.

Since we follow a very collaborative process of working with the client, we discussed our rough first drafts of the logo with the Brick team to get some quick thoughts on the direction we were going after. What we came out with is that the visual identity still required more cohesiveness between the logomark and the logotype. The two didn’t feel quite integrated within each other. While the explorations were all going in the right direction, the logomark was looking a lot more prominent than the logotype itself and lacked a connection.

We continued working on refining the logo to make it more cohesive, connected, and integrated as a whole. We also tried to work with more keywords like ‘bridge’ and ‘connection’ that were shortlisted while working on the Brand Personality, which the Brick team rightly pointed out, weren’t explored enough in the first round of iterations.

We had a brainstorming session with the Brick team on how we could incorporate these two keywords into the logo. One of the ideas that came through was to make “Brick” at the center of the multiple connections, representing how Brick’s API stands at the center of multiple connections with banking institutions and fintech companies.

Logo iterations — Round 2

Based on this new direction, we proposed 2 new concepts :

Concept #1: Let’s “B” connected

We decided to revisit the Initial concept because it had some potential to incorporate “Bridge” and “Connection”. We played around with the Letter B as the main object so that the whole logomark and logotype are integrated as one component. The diamond at the center of B is an abstract representation of a Brick (API) as the centerpiece that has connections that move outwards, making up the letter B.

Logo metaphor
Logo iterations — Round 3 — Concept “Let’s B Connected”
Concept #2: One “Brick” for All

In the second concept, we wanted to embrace the concept of a ‘brick wall’. A wall that starts with the foundation of one brick, and eventually gets surrounded by multiple other bricks forming a complete wall; while creating multiple connections between all bricks. The foundation brick represents the Brick API in a more literal way, while the connections represent the integrations to clients or third parties. The logomark holistically representing “One API for ALL”.

Logo metaphor

Logo iterations — Round 3 — Concept “One Brick for All”

Last round of Iterations

Among all these concepts that were designed, the Flolab and Brick team agreed to go with the more literal approach of using a brick for the visual identity (which was also something that came out as a preferred direction from the survey results with the stakeholders). The concept ‘One Brick for All’ deemed the most suitable to represent brick’s core value. In a very simplified way, it also brought together the concept of brick ‘stacks’ and ‘connections’. The logomark and the logotype both have consistent sharp edges and corners which make the two more cohesive as a whole.

This concept ticked all the boxes that the Brick team was looking for — simple, a literal representation of a brick, and makes the logomark and logotype a cohesive whole while also representing the company’s core value and offering.

Final Concept

The next step was to explore the last set of logo iterations based on the finalized concept in order to visually fine-tune the logo. We explored things like the thickness and softness of the logomark, using lowercase vs all caps in the logotype, and also a few color scheme variations, to see which one would work best visually and also represent the brand more closely.

Logo iterations — Round 4

From all the final iterations explored, the Brick team was inclined on finalising V4. The simple and clean look along with the rounded edges showed Brick in a more modern light. The soft rounded edges represented a more friendly vibe for the brand as opposed to sharp edges which might come across as more rigid. As for the colors, we suggested that the original orange brick brand color is maintained in order to keep brand recall and recognition for existing users as well as its closeness to the color of a brick. However, we did enhance and brightened the orange tinge to bring in a more vibrant look that would call out some attention to primary visual elements when used in graphic collaterals or the user interface and would give out youthful, playful energy for the brand.

Final Logo Iteration

From the last logo iteration, we created a polished version of the final logo which could be used in the brand styleguide. In order to make the brand color more prominent, instead of just the center of the brick logomark, we decided to make the complete logomark in orange. The logomark paired with the custom logotype brings across the company’s values of being customer-centric and having strong integrity towards providing a high-quality financial API platform.

Final Brick Logo

Brand Messaging

An important aspect of brand design is to make the brand meaning consistent across all messaging with consumers. Being consistent builds consumer trust and helps with brand recognition. If these messages are consistent, we won’t contradict ourselves and it’ll prevent us from damaging the brand. And if we consistently repeat the same messaging, customers will learn to associate the message with the brand.

For Brick, this message was ‘One API for all’ which comes from the foundation of one brick in a wall that starts building multiple connections towards clients or partners as third-party integrations. This message also meant that with a single, unified Fintech API, Brick is able to connect fintechs with multiple data sources.

Brand Guideline

Our last step in the process was to create a brand guideline that can be used across teams within the company. In order to do that, we had to set out some ground rules on how the logo should be used and implemented across various platforms. We documented the usage and illustrated a few samples of these implementations which would help the Brick team visualize their new brand identity.

Logo Lockup
Office Collaterals
Website Favicon

Brand identity also plays an important role in User Interface and User Experience Design. With an established identity acting as the foundation, we can now start laying down some basic components for Brick’s digital interface. We created a UI Design Guideline to start outlining the message that the Brick interface must deliver to its users and the tone of voice in which it would be delivered. All of this would contribute to a better experience and a brand perception that matches with the brand values and messaging that was finalized for Brick.

From a visual perspective, the brand identity serves as the basis for building a design system that will be used to design Brick’s digital product that we’ve been working on simultaneously. The foundation of Brick’s visual language and illustrations are based on the logo itself. We created custom illustrations and icons using a solid style that will be used across Brick’s digital platform. For the typography, we picked a sans serif font which would make the interface easy to read on various different screen types and support Brick’s identity as a professional fintech API provider.

Brick UI Design Guideline

Conclusion

Looking back at our design process, we went through several iterations that sometimes felt a bit challenging. But we realized that multiple iterations have always been a part of applying the design thinking process. Throughout Brick’s brand identity design journey, there were many explorative and definitive processes that we went through. By trusting the process and the courage to take decisions, we hope that we established a strong foundation for an effective brand identity with a high level of credibility and quality.

The new branding was officially announced by Brick and will be updated across their platforms.

Thanks to Ritika Bhagya and Steffie Jessica

***

If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.

***

Tags
Logo Design
Brand Identity
Brick
Related Posts