← Back to projects

Designing a cryptocurrency payment system

Wyre allows you to easily send money around the world. Unlike your bank, Wyre delivers your funds in hours not days and only charges 0.75% to do it. I was hired to design the entire product from scratch. I worked closely with Wyre team to finalize specs and create actionable prototypes. Then after a few iterations the wireframes were finalized, I used the brand style created by Ramotion to design high fidelity mocks and animated some transitions to make flows smoother. Lastly, I worked with developers to help them translate my designs into the real product. We had a very tough deadline. The entire product was designed in just 6 weeks. We had to find a way to make development easier and cheaper.

Problem

People need a simple, fast and  cheap way to send money

Solution

Cryptocurrency-based payment system that allows users to send money faster and cheaper than all banks.

Start of the project

The whole project took only 6 weeks. I was working closely with 2 co-founders, a PM and 3 developers to shape the product. We started with conversations about who Wyre's customers are and what they expect from the product. We adjusted designs to work for someone who has very little or no experience with crypto but have a need to send funds electronically. We started with a list of user stories:

The user can:
1) Deposit funds using various payment methods.
2) Buy and sell currencies.
3) See their balance in different currencies.
4) See their balances combine worth in USD.
5) See a list of transactions.
6) Send funds to someone.
8) Save contact.
9) Send funds to a contact.
10) Access their account settings.
11) Find a contact or a transaction using a search.

We prioritized user stories by the projected frequency of use. The most important features that Wyre's customers would use all the time were on the home screen of the app. As a team, we went through several whiteboarding sessions to figure out how the app should be structured. To make the development faster, I came up with the idea of accordion wizards for all the main flows of Wyre. The same clear pattern would take users through different functionalities of the app, which made the user interaction very intuitive. We chose to make it like an accordion because it would have made it clear how long the flow was and how to return to previous steps. It was both perfectly scalable and easy to develop. All the wizards would open as overlays over the first level screens. We tested a few other ideas like showing all fields on the same page and having some kind of progress bar indicating how many steps a user needs to complete. Accordion looked like a perfect solution. It was scaleable, it was always clear where the user is in the process and how many steps left, they could always click on a previous step and make some changes, and tests showed that most people preferred it over the progress bar approach.



Before we started working on the wireframes we tested a couple of different ideas with potential users. For example, part of the team wanted to try out positioning the app almost as something from the future and we wanted to check how customers might react to it. User testing indicated that most customers already use some payment systems like PayPal and Venmo, and they have certain expectations from the UI. It becomes clear that we need to play safe and create a product that will be modern but easy for anyone to understand and accept.

Wireframes

Creating wireframes is the most important step in designing any interface. While designing Wyre, we went through multiple iterations of wireframes making sure we are creating an easy to use product and scalable interface. Once we were sure we couldn’t simplify user experience anymore, we focused on the product’s style.

Style

At the same time when I was working on the wireframes, Ramotion team worked hard on the Wyre’s brand. They came up with a beautiful logo and a brand book that included colors, typefaces and some examples of the style usage.

Based on Ramotion's work, I designed an initial UI style guide and kept updating it until the entire project was completed.

Dashboard

On earlier stages, while sketching, we started designing the product based on the most common user scenarios. We decided that all the essential features should be accessible easily from the main screen of a dashboard. We needed to emphasize following features: Account balance, Adding funds to account, Comparing Wyre’s rates to the midmarket, Sending money, Exchanging money, Viewing pending and latest transactions.

On the wireframing stage, we made a decision to split Send Money and Exchange Currency flows onto 2 steps - first step of the flows would be available on the main dashboard screen to make it more inviting and make it feel very lightweight. In one of the early versions we had both features presented on the dashboard next to each other but it felt too crowded and we decided to make them live in the same section with a switcher. Sending money is the main product’s feature and it’s available off the bat, but to access the currency exchange feature, the user needs to hit the switcher.

Activity

Activity is the section where the user can access  information about all completed and pending transactions. There's a simplified version of transactions on the dashboard to give the user short overview of the recent transactions. However, to see all the details and filter transactions the user needs to visit the activity section.

Contacts

User can save contacts to avoid adding all the payment details every time they send funds to the same person.

Account settings

Account settings contains the usual items: email, phone, password and MFA settings, linked cards as well as bank accounts and API keys.

Sending Funds

Sending money to another person is a multi-step process. It took us a few attempts to split the flow in right places and make the flow smooth and easy. Also we were able to make the process shorter for sending money to your existing contacts (five steps vs eight).

Linking a Bank Account

Linking bank accounts is the most important flow since it’s the first flow users interact with and decide if they would become Wyre’s customers. We had to make it as simple as possible. We did a lot of research trying to find the best practices and then we did several iterations to simplify it even more.

Depositing Funds

Wyre supports multiple ways of adding funds to an account. The hardest part of this flow was defining requirements for each type of deposit. Below is an example of user adding funds from a bank account. Other flows are pretty similar visually but contain a few extra fields.

Exchanging Currencies

The goal was to make the currency exchange as simple as possible. On the dashboard, a user has to choose what currencies they want to convert and how much they were looking to exchange (or how much other currency they were willing to receive). Wyre would show their exchange rate and the bank’s exchange rate. If the user liked the results, he/she would see a confirmation screen with a timer showing for how long the exchange rate is locked and what fees would apply to this transaction. The last step is to hit the exchange button.

Search

To simplify the search, we added a Github inspired contextual search. Users could search globally site-wide as well as narrowing their search by looking for the results in their ‘Activity page’ only. A small green pill element would indicate that the search has been done in an activity page only, but a user can start searching globally by simply removing the filter (erasing the pill).

Results

It was one of most well-planned, smooth and enjoyable projects I’ve ever done. It was a true pleasure to work with an awesome Wyre team and together we were able to achieve great results. The entire product was designed in only a few weeks. We handed it over to the development team just in time and they were able to finish it right before the launch party. These days Wyre is growing: after the launch they raised $5.8M in Series A and started to grow their team. They hired in-house product designers to continue working on the product.

Shortly after launching this product, Wyre raised another round of investment and started expanding to Asia. The product was successful on the market and changed very little since I designed it a couple of years ago. Currently, Wyre is a Series B company in San Francisco and Beijing.

Check my other projects 👇

Drop me a line  ✏️

korytsev@gmail.com

Find me on social networks  👀