Explore
Need help with your project?
This field is required
Incorrect phone number
Incorrect Email
This field is required
Please fill in all fields
Next
Next
Your role in the project
Services
Budget
Please select one option in each category
Submit
Submit
several colorful figures
Request sent
Our manager will contact you shortly.
Oops! Something went wrong while submitting the form.

Pay Pay: a cryptocurrency e-wallet

Web service

UI/UX Design

2020

Cryptocurrency wallet dashboard interface
Cryptocurrency wallet management interface

About the project

When the client came to us, he already had a working app and a landing page. Both were created based on a Themeforesttemplate (a template for WordPress), that didn’t meet the case: the app lacked individuality, and the landing page didn’t sell — a case for rebranding rather than a quick facelift.

The client was looking for an agency that could handle his needs and redesign his app and landing page —  lucked into one of our cases on Behance. The case was about Fintarget.app — a project where we developed an interface that makes the app easy to get even for newbies in the investment sphere. The client liked our approach to solving problems.

New challenge for us

Most people associate cryptocurrency with mining and a surge in bitcoin in 2015. However, it’s a complicated niche with its own pitfalls and nuances that require mastering.

How we worked

The project became our internal experiment. We tried to put to work a sprint methodology: thought it would fit the design processes. But it turned out to be only our wishful thinking.

We decomposed the project into small tasks, planned the sprints,and started with UX design. Cryptocurrency is a niche product, and you cannot spend 2 weeks working on a bunch of screens without proper understanding.

Design stages

Project timeline with phases and tasksUI flow diagram for a web application process
Cryptocurrency wallet app interface and dashboard

Validating the idea

To test the waters, the client started with a simplified solution and went on with an MVP. The product was in demand, and hedecided it’s time to complete it with a proper UI/UX design and build a recognizable brand.

User portrait

Developed businesses

High security, low fees, no chargebacks, and anonymity — crypto payments have a lot to benefit users. To acceptBTC, ETH, or USDT, a business needs to integrate with a payment system. It generates a wallet address that allows users to transfer cryptocurrency.

Cryptocurrency consultants

Consulting about investing in Bitcoin, Ethereum, or Tether requires strong analytics tools. Those who monitor the exchange rate of cryptocurrencies and predict the dynamics need a dashboard to trackchanges in the rates.

Newbies who want to start earning money

You can buy or sell cryptocurrency in different ways: on the stock exchange, at ATMs, or via P2P exchanges— in any case, you will need an e-wallet. A widget that shows how the service works will help the user quickly understand the matter.

Major competitors

Nice minimal design

Convenient widgets

Difficult navigation

Use red to sell BTC, which looks more like a bug

Modern and creative landing page design

Availability of widgets

Simple navigation

There is no general dashbod on which you can track several recent activities at the same time

Mind map and wireframes

We built a detailed mind map and spent tens of hours on calls with the client. The mind map allowed us to look over the old architecture and think out how to wrap changes and not disappoint existing users.

Showing each screen to the client helped us get updates and makeedits on-the-go — this is how we managed to upgrade the user experience without damaging the product’s logic.

User flow diagram for app navigationUser flow diagram for cryptocurrency app navigation
UI flow diagram for web application navigation

Concept history

We started developing UI concepts earlyon and delivered 3 versions.

1

Simplified

We decided to simplify the interface. It was coolyet the client didn’t like the result: he wanted a “one-of-a-kind” design with many wow-effects

2

Added colors

Following the client’s recommendations, we wentfurther. This time the interface was bright. Plus, we added art-objects. However, this versionseemed unserious to the client

3

Turned into a bank app

“I want darker”  — this is where we started finishingoff the concept. The colors became darker and the whole interface is more like a banking app

What’s changed?

Puzzled navigation

The logic was unclear to the user: similar features on different pages. In the meanwhile,some of them were hard to find.

Home screen of a cryptocurrency wallet app

Now it’s clear

Now all action-buttons are available from the main screen, and usersdon’t have to spend time looking for features across the screens

Cryptocurrency wallet and transaction dashboard screen

Complicated settings

For some reason, the system and profilesettings were placed together.

Profile settings screen with email and password fields

What we changed

The screen felt overloaded, that’s why we rebuilt it andleft everything the user needs with a single “Submit”

User profile settings screen

What’s added?

Why do users need a widget

The widget can help to draw the user’s attention:it allows to see how many bitcoins the user will get if have $N.

Most of the competitors had such a widget, which showed us that it is a must-have. We addedit to the PayPay landing page — users key in a sum(both sides, to see equivalents here and now) and get asked to sign up.

Cryptocurrency exchange transaction screen

Features: Buy, Send, Exchange

Initially, the service had only one feature: Replenish. We split up the functionallyof the “Replenish” into “Replenish”, “Buy”, “Withdraw”, and “Exchange”.

E-wallet invoice input screen

Grid and Responsive

Desktop

Design grid layout with spacing measurementsMobile app user onboarding flowchart

Tablet

UI design layout with spacing dimensionsMobile app analytics dashboard screenshot

Mobile

Design layout showing spacing and dimensionsUI design layout for app screens

Landing page

We had a subtask to rework the landing page for the app.

Although there were no requirements for the landing page, we had a solidunderstanding of the cryptocurrency and the client’s tastes. We wanted to make a transparent landing page and would help users understand where they are and why they need it.

Cryptocurrency payment processing service webpage
Advantages of using our services for payment solutions
Tariffs and payment options for businesses
Cryptocurrency invoice template screenshotUI design elements for cryptocurrency landing page
Cat holding a Bitcoin symbol

Highlight

The authorization screen now has a custom illustration on it — the designer wanted to leave a mark. The client liked the ideaand approved the cat.

UI-kit and layout
structure

We carefully worked out the UI-kit and handed it off to the client’sinternal development team. Now they are bringing it to life.

Colors

Color palette with hex codes

Typography

IBM Plex Sans - Semibold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?<>./,
IBM Plex Sans - Medium
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYyZz
1234567890!@#$%^&*(){}?<>./,

Spacing Blocks

8

12

20

32

48

80

Components

To create the UI-kit we used Variants — a new feature in Figma that allows to collect allelements in one easily changeable component

Buttons

UI button design variations and statusesUI layout with various button styles
Dashboard interface with action buttons and data entries

Inputs

Transaction details table in cryptocurrency appWallet transaction history screen

Tabs

Cryptocurrency exchange interface with trading optionsMarket data trading interface screenshot

Radio

UI control options for a design interfaceUser interface settings screen

Dropdown

Language selection dropdown menu UI screenLanguage selection dropdown menus in UI design

Check

UI settings configuration options screenMobile app settings screen with options

The result

Cartoon cat holding a Bitcoin symbol

To develop the new logic for our product, Purrweb’s manager carefully studied our competitors, created a detailed mind map,and spent hours discussing interface elements with us. The Purrweb team did a great job and provided us with UI/UX design assets of the highest quality. They completely reworkedthe way navigation works and streamlined the core user flows, which made our service more intuitive and convenient for the users. The design is finished, and we’ve already started implementing it with our development team.

The client

Portrait of person

The client was totally into the project and patiently explained to the designer how every feature works. We’re happy with such a close involvement of the client.

Svetlana Kolpakova , Project Manager

Portrait of person

It was pleasant to see our project among referencesprovided by the client.

Kristina Spiridonova, Аccount Manager

Portrait of person

This project was not about prioritizing features or thinking out the IA from scratch. We applied our UI/UX skills to deliver what the client came for.

Julia Vakulenko, Lead UI/UX Designer

Portrait of person

To understand the landing page structure, we studied competitors and analyzed the market. We managed to create a unique look, ditch humdrum colors, and makeit minimalistic.

Victoria Minaeva, Lead Graphic Designer