Demand first —UX second
The project is an e-wallet that allows users to buy, keep, and transfer their cryptocurrency assets, as well as exchange cryptocurrencies within one service. The client came to use with a working MVP that had a basic interface built upon a Themeforest template (such templates are used for websites created with the help of WordPress). Besides the app, they had a simply designed landing page.
By the end of August 2020, the client knew there was a call for his app — that’s why he decided to upgrade it by developing a well-thought-out UI/UX design and a proper landing page. When the client began looking for an agency that would successfully meet his needs, he lucked into a relatable reference: the UI/UX design of Fintarget which is an app for investing. The app caught the eye thanks to the easy-to-get interface we created to help newbies in the investment field. The client was impressed by our approach to solving problems.
Giving up on sprints
At first, the task seemed pretty simple — to redesign the service. However, it turned out to be much more difficult: there was a bunch of new features that required reforming screens, so we had to give the service architecture a makeover.
We decomposed the project into small tasks, planned the sprints, and started with UX design. But something went wrong, and we got stuck. When it is about a niche product (no one can deny the cryptocurrency is not a subject people discuss at lunch), you need to have a proper understanding of it. Most people associate cryptocurrency with mining and a sharp increase in bitcoin but in fact, it has a lot of pitfalls and nuances that require digging deep into the niche to be clear. We didn’t have such a background, so it was impossible to work in sprints.
It’s misleading to think that you can spend a whole week working on the interface of an app that causes you a lot of questions.
We decided to dig deep in the industry and schedule regular (really regular) calls with the client. The designer was to carefully examine the competitors, stay in touch with both the client and me, and validate decisions.
Studying the niche
We stepped back and devoted 8 hours to studying the market and the existing solutions. Our project manager got accounts on all platforms and became a real cryptocurrency fan: over several weeks, she tested the functionality to understand the logic, cream off advantages and avoid mistakes.
As a result, we managed to build 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 frustrate existing users.
The client was totally into the project and patiently explained to the designer how every feature works. We’re lucky, I guess, the project became a case when we’re really happy with such a close involvement of a client.
This project was not about thinking out the IA from scratch. It was about applying our UI/UX knowledge to deliver what the client came for.
Balancing between dullness and brightness
Once we finished the express course in cryptocurrency, we finally got to start the project. We began with wireframes. The team included:
- project manager
- UI/UX designer
- graphic designer
The client took the example of the best user flow patterns existing among the competitors — Binarix and Mercurio. Binarix had a well-executed widget, Mercuio was great at placing elements (on the landing page, the widget was placed at the same spot as it is located in the service). It’s good when the user can try out the feature on the landing and continue using it at the same interface in the service.
It was pleasant to see our project among references provided by the client.
Before working on the UX, we discussed each screen with the client — this way, we managed to avoid any mistakes and dig deeper into the industry. Here are some examples of how we rework the interface:
In the original design, the main screen was quite complicated. It had two buttons: ‘Replenish’ which allows the user to top up an account and ‘Accept payment’ which was needed to receive cryptocurrency from merchants. To transfer money to another account, the user had to go to the ‘Withdraw’ tab. Plus, there was no ‘Exchange’ feature.
We grouped all action-buttons on the main screen — so the user won’t waste his/her time looking for it on other screens, added the ‘Exchange’ feature, and split up the functionally of ‘Replenish’ into ‘Replenish’ and ‘Buy’.
The settings screen had two ‘Submit’ buttons: one to change email, another — to change the password. The screen felt overloaded, that’s why we rebuilt it and left only one ‘Submit’.
Formerly, the landing page had no widget. Now there is the widget that allows you to type in a sum, see how much cryptocurrency you can get from it, and proceed to the registration. The widget is designed to motivate the user to perform the action.
Alongside working on wireframes, we created 4 UI concepts:
1. Minimalistic and simplified concept. Although we loved it, the client wanted something brighter and more colorful
2. Keeping it in mind, we moved on to the second concept. This time it was really bright with additional art objects. The client liked this version but it seemed unserious to him
4. We were to make the last turn and came into the straightaway. We got the client’s feedback: ‘I want it to be darker, like Fintarget’, and made the latest step to the final version. To be safe, we added 3 extra concepts with minor changes.
Landing page within two iterations
In the end, we got a subtask to rework the landing page for the app. The client decided that the first version was too bright and frivolous.
By this time, we had a solid understanding of the cryptocurrency and the client’s tastes — he wanted it to be bright, but precise and serious. Although there were no requirements for the landing page, we knew that it should be a transparent and clear landing page that would help users get where they are and why they need it.
To develop the landing page structure, we examined the competitors — studied through their information architectures, identified strengths and weaknesses, and documented what they lacked. As a result, we came up with patterns and broke the page down into 4 parts:
- Hero page
- Interactive cards with customized illustrations
- Guide on how it works
To understand the landing page structure, we studied competitors and analyzed the market. We managed to create a unique look, ditch humdrum colors, and make it minimalistic.
All in all, the landing page underwent 2 iterations: we reworked the blog (added labels to simplify the search) and added s’more illustrations that help to attract users’ attention to the most important parts. We put aside the hackneyed colors (black, green, and neon) and turned the interface into minimalistic cyberpunk.
While working on the landing page, our graphic designer changed the cryptocurrency icons. The client liked the idea, and we moved on to change them in the service too.
We added a custom illustration to the authorization screen — the designer wanted to leave a mark of the Purrweb team. The client liked the idea and approved the cat. 🤘🏻
Handing over design to the right people
It took us 1,5 months/6 weeks to complete the project. In November, we handed the UI kit over to the client’s development team. The design of the app and landing page cost $8,700.
The design is finished, and we’ve already started implementing it with our own development team
They have already started implementing the design. ‘We got what we wanted. The Purrweb team completely reworked the way navigation works and streamlined the core user flows, which made our service more intuitive for users. They successfully managed to accomplish all of the tasks and developed a high-quality UI/UX interface. They thoughtfully listened to me and did a great job understanding the industry,’ the client noticed.
- Svetlana Kolpakova
- Julia Vakulenko Victoria Minaeva
- Daria Lobacheva