Background

The MyBricks platform allow investors use crypto currency to invest in tangible property assets that make up property ‘Funds’.
They were looking for designing their responsive website for crypto-newbies to understand the project concept and interact with their token.

Main tasks

I was the lead designer in this project and was in charge of creating brand identity for the project, the responsive interface design and generated design system so other UI designers could use it to scale the interface.

Researching and understanding user flows of interacting with 'Bricks' token and translated it for crypto beginner was also the focus of this project.

Timelines

12 weeks

Tools

Figma

FigJam

Deliverables

Responsive website design

Brand identity

Design system

User flow

Design process

Understanding the project

Innovative way to invest in property assets for crypto beginners

'Why' we design &
Design 'what' for 'who'

The value difference

MyBricks was trying to build an innovative solution for people who wanted to invest in properties but can only afford small amount of shares.

It wanted to appear as innovative, fun but still trustworthy.

Our user

Crypto beginners and have some knowledge of investment. They wanted to invest and be part of something innovative, fun and safe.

The real estate industry

It impressed people as strict, boring & unaffordable. Things like roads, concreate, bricks normally came to mind first.

Mybricks brand want to outturn the stereotype.

Understand the business model &

brand vision

The project started with understanding the why Mybricks is different than other property investment company. This help me to understand

🔸 Difference of business model

Mybricks token holder who's under a certain level will have access to their renovated holiday property like airbnb style in the UK.

🔸 Brand vision

They want to be a impactful and appealing company to offer people investing in property with small shares and make everything super easy to understand and secure to operate.

Defining the user

The client's market team had a basic understanding of their customer but nothing in details. I talked with their marketing members to form a better picture of the primary user's goals and pain points, added more story and background into it so it could help us in brainstorming brand attributes later.

Primary personas

Research competitors's brand and visuals

I gathered and hand-picked some Mybricks direct competitors (doing the same business model) and secondary ones (property investment companies), used these as visual reference. Showed these screenshots within a 10 mins sessions with Mybricks members and asked them to tell me how they felt about the visuals. All these helped me to gain an ideas of what kind of brand style are they looking for.

Direct competitors website (left), Secondary competitors (Right)

Define and design challenges

Time to prioritize, plan and ideate

Design for awareness, engagement &
crypto-beginner-friendly

Breakdown website functionality + define design challenges

🔸 Ask client to think about content early in the project

Based on the experience, it is important to think about the content strategy as early as possible, so I raised this perspective in the second weekly meeting with the client so they could have time to curate content that was tied nicely into their brand strategies and considering what other medias we will use on the website. The benefit of this is to understand the needs/goals of the project better and create information architecture.

🔸 Use information architecture to plan the design

The IA is fluid and ever-changing, so at this point, I used IA as a reference to guided me planning my next movements. I started sketch some layouts for section that is easy to get started, like 'Home', 'Property portfolio'. Meanwhile, I started research sections that are highly connected to crypto like 'Dashboard', 'Buy', 'Transfer' to gain more ideas of how it should look like and what's the common user flow.

The 1st version of information architecture

Focus 1:

Design a website for better awareness and conversion

🔸 Business goals

After discussed with client, the business goal in this project was promoting MyBricks business, engage more prospects and raise awareness.

🔸 Website objectives

I translated these business goal into more actionable guidances.

We wanted to make the website that:

Increase awareness and credibility of MyBricks project
Easy to read/understand MyBricks' business idea (how the business model works).
Visually guide the user through the website and make them feel they are in control and comfortable to explore further
Visually engage viewers to understanding the benefits of holding Bricks token
Convert potential investor to sign up with the website (CTA)

With these ideas in mind and informed by the IA and website content, I started sketch layout of the design for 'Home' and 'Property profile'. These objectives will also be used to help make design decisions.

Part of the sketch for 'Home' and key components within the page

Focus 2:

Design flows for secure operation & visualise key data

After analysis the IA and some research in crypto-related platform, I aware the challenge and the sections I should spend more time in. I categorised them into these two categories: (need an infographics below)

🔸 Security

The tasks/flows that related to money and crypto/tokens need to designed in a secure and easy way for the crypto-beginner to operate. This involves flows like 'Buy', 'Swap', 'Transaction' etc.

🔸 Key data visualisation

For crypto project, it is important to highlight the key benefits of holding this token, key metrics to sell the project and also a clean display of wallet which shows how much money people have.

Below shows an examples of the user flows of 'Dashboard'.

Design exploration

Brand attributes & Project objectives

I set and aligned these objectives upfront with client so I could start design the website framework with the ideal outcomes in mind.

We want to create a brand and website that can:

Delivery the brand voice: Confident, uplifting, genuine
Easy to read/understand Mybricks business idea (how the business model works)into bite-size content
Visually guide the user through the website and make them feel they are in control and comfortable to explore further

We added more objectives and goals later on, but with these initial goals aligned, it helped us better discuss design directions and value what design solution is better.

Brand attributes exploration

Part of the homepage design explorations