Recently we had the opportunity to develop an innovative financial application powered by blockchain technology! Many of us may be using it already.

This ongoing project is called HyperPay. It is essentially a multi-purpose wallet to hold all your crypto coins/money in the same place. What we will be discussing today, however, is how our product team and design team work together to design a next-gen payment solutions that can help customers better organized their crypto finances and increase control of upcoming digital payment options. 

The Brand

During the kick off meeting, it was decided that the wallet app should have a unique HyperPay brand look and feel which are youthful, innovative and futuristic. A style guide was created by our branding designer along with the HyperPay logo and our adorable brand character HiBabe who is an adventurous dreamer about how blockchain technology can reshape the world. Later on in the UI design stage, this guide became the base and foundation of the evolving HyperPay design system.

HyperPay branding: mascot, logo uses, colors and typography 

Challenge & Ideatation

So what does a cryptocurrency wallet app have? 

How do people use it? 

What can be improved?

These were the main questions for which the team was trying to find a solution. After conducting a competitor analysis for various wallet apps out there, the product team made a list of top features which are a must have in our own wallet app.

1. The Dashboard/Home/Overview

2. Coin Price Market Trends

3. Simplified transaction

However, we don’t want to obsessively fixate on what others have built and end up with a “me-too” product that doesn’t solve the problem better than what’s already out there, so we also decided to add some cool new features that the cryptocurrency holders have been expressing their needs for to the HyperPay app, including:

1. Earning profits from current crypto holdings 

2. A portfolio value chart to show if one is investing wisely

3. Using cryptocurrency off-line in the real shop

Prioritizing features:  team members used open card sorting to consider which features are most important and used most frequently 

Prototyping & Testing

In the previous stage, everyone in the team has a chance to express their ideas, the project goals have been identified. So this stage is all about creating tangible design outputs which can be shared with the team for discussion and usability testing.

In order to create a smoother user experience, the UX team created low fidelity prototypes which could be quick sketches linked together to make a clickable user interface. These are used for demonstrating ideas to the rest of the team and stakeholders. Then our amazing UI designers will go from there and create high fidelity UI screens and Specs which to then be used to create a more realistic clickable prototypes. 

The home screen

To further demonstrate the process, we’ll use the home screen as an example. Home screen is where the user will be seeing his overall portfolio.

Data to show in this page:

1. Overall Wallet Balance

2. Individual Coin/Token Portfolios

3. Recent Market Trends in the 

These are some initial variations for the home screen:

Initial wireframes for the home screen

Once we have the options laid out, we discuss the pros and cons as a team: The first one gives the main balance at the top and the individual coins as cards that scroll vertically. But the individual coin cards are smaller in size and it’ll be a great challenge to fit in higher numbers and bigger name balance. 

The second one has bigger individual coin cards, but the user has to slide to move through and see other coins.  As HyperPay is an all-in-one kind of crypto wallet, limited amount of data at a single glance is not what we are after.

The third and forth are a more compact view, giving space to the main balance since that is what the user will need to focus on more. Other coins are split up as a scrollable vertical list. We also add high frequent action buttons the last one.

Final Mockup & Animation

Based on the HyperPay brand style guide mentioned above and the wireframes and clickable prototypes from the UX team, UI and motion designers are able to deliver the final mockups. Ideas are better conveyed when stakeholders can see the end results and the process. 

Hi-fi interactive mockup for the home screen

What's Next?

While working on this project we had a lot of questions on blockchain technology and usability, the right layout for our users, and people's general responses to a new look and feel from HyperPay. We are currently in the process of designing the merchant side of HyperPay, doing usability testing and getting useful data for the current version. Here is a sneak peek for the app, which allows merchants to accept cryptocurrency payment from the customers directly :

HyperPay Merchant App Prototype