Blue Liquidity
Finance product that makes it easy for users to understand their money.
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.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.
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.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.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.
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
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.