Efren
UX designer

Blue Liquidity

Finance product that makes it easy for users to understand their money.

Image alt tag

Overview

Thinking about online banking is not something everyone can understand. Blue Liquidity is a product that makes it easy for users to flow while making transfer funds, paying their bills, and interacting with the crypto ecosystem.

The Problem

The client wanted the team to create a landing page that will help with the flow of money. They wanted the product to be simple for users that did not have experience with DeFi (decentralized finance). The theme of the landing page is flowing water because water flows comfortably.

The Solution

As a team, we came together to build a landing page that was easy for everyone to understand. We explored different DeFi and Crytpo websites that were confusing. We wanted people to understand where their money is going and how they can use it.

Duration

4 weeks

Process

  • Client Questions

  • Competitive Analysis

  • User Stories

  • Color Exploration and Inspiration

  • Ideation

  • UI Iteration

  • Developer Hand-Off

My Role

UX/UI designer (Team of 5)

Tools

  • Figma

  • Slack

  • Zoom

  • Google Suit

1. Discovery

1.0 Team Kick off call

The team got together to understand the objective of the project and how we can meet the client's wants and needs. We created client questions to understand what they wanted on the website flow.

1.1 Client Needs

The client wanted the color to be blue to symbolize the flow of water and for the users to understand the use of their money.

Blue Liquidity

1.2 Competitive Analysis

We made a table to compare the top competitors, by comparing features and how they are presented. I took the lead on Ripple and gather information. This allowed us as a team to better understand what the competing products are.

2. Ideate
Blue Liquidity

2.0 User Stories

The team and I were able to create our user stories with the research we made. We grouped them in sections by must, nice, and not. User stories helped us see what the product was being used for.

2.1 Wireframes

The team got the ok and we started to build wireframes to help us understand what the client is looking for on the landing page. We wanted to put key features front and center. As a team, we wanted to think outside of the box and make it creative. The client actually just wanted a landing page that was simple to understand by users.

3. Design
Blue Liquidity

3.0 Color Exploration

The client emphasized the color has to be blue to match the flow of water. I came up with multiple tones of blue and some pictures that inspired me. I wanted to make sure the colors will go together for the logo as well.

3.1 UI Design

With the color exploration ready to go, we started to add colors to our wireframes. The team created UI iterations with different colors and designs.

Blue Liquidity

3.2 Final UI

After amazing feedback from the client, we came up with the final UI. In the end, he wanted something simple and very easy to understand.

4.0 Developer handoff + Reflection
Blue Liquidity

4.0 Developer Handoff

It was time to measure and make it easier for the developers. Annotations were added to make it easier for the developers to construct the landing page.

4.1 Reflection

  • Communication is key with the team and the client to make sure we are all on the same page.

  • I have learned that speaking up about designs can always help the team do better.

4.2 Looking Forward

It is always great to ask what the client wants. We thought that the client wanted something creative for the landing page. At the end of the day, the client actually wanted something simple and easy to understand. Much time could of been saved if we knew that the client wanted a simple design.

Drop me a message
Let's share ideas & discuss ways to collaborate!