Does not matter what canvas is used: web page, mobile or desktop screen or paper – the user interface is what allows people to interact with a service or app. To make sense of the UI we use text.
The text is everywhere in interfaces. Without it, the users fail to understand how to use the UI. Thus to make UI work go with clear messages, suitable typography, legible fonts and clear language.
Receiving the task. Clearing all details. Spending half of the week to design the first prototype. Work goes into the trash. Feeling of devastation. To save time, effort, nerves and make the design process structured and interesting here is a short template. This makes work useful.
Person: target audiences, viewer, customer, user.
Problem: an issue they are having. Pain or harm they are experiencing.
Benefit: what usefulness you are going to give.
Task: How are you going to achieve the benefit. A plan how to get to the benefit from the current state.
I saw a social campaign in Prague. If trash stack up near the house, tenants can ask to dispatch it out of turn. Unfortunately, the ad was used as a solution. Prague citizens have to look for a phone of administration of the house. Next step is to send their request via the administrator.
Person: citizenships of Prague city.
Problem: cluttered trash beans.
Benefit: clean and empty trash beans.
- organize out of turn despatch: hire people or buy cars
- inform people about the service: explain how it works, what are the pricing, timing, restrictions about a location
- provide tools to order service: create a web page or portal to request the despatch
- based on received data build statistics about where and when the city has most cluttered beans and prepare for the next period.
People are using banks because of strong motivation to save money or to receive more money. Money is needed for personal reasons: car, flat, school, university or business expansion.
Person: clients of the bank.
Problem: luck of money for a new car or flat. Wish to go to a good school.
Benefit: help client earn or save money for those wishes.
educate about different investment strategies or saving options,
give a client automatic digital piggy bank. If the client can name it account will have personal touch.
show a client a clear picture where their money went. Where they can stop spending money.
Making products is fun! Also, it’s like eating cactuses – painful and challenging. The goal of a product designer to deliver a working, purposeful and meaningful problem solving product for people.
When I was starting making apps – I sucked. To develop an understanding of product design I learned to boil things down to smallest pieces and try to make sense out of it. I want to share the way I see the products now.
Today I will be taking apart Revolut’s mobile app.
The first step is to understand why the product works. The key is in defining a useful output or benefits. I ask the question: „What will I get by using this app or web page?” Revolut built their product around three ideas:
- People want to save money because they are people don’t like to lose.
- People use the plastic card because it takes less space than cash (it also secure).
- People send money to friends because they need to pay for things.
In my opinion, those are the three main drivers for customers to choose R product. Saving money, using a card and moving money — three formulas.
User problems and goals
The formulas help us to define three main problems:
- How to save money? Where are people lose money?
- What is a convenient means of payment everywhere?
- How to send money to friends?
To solve those problems app sets several goals:
Exchange currency with no fees.
Use a multicurrency plastic card.
Send bank and direct money transfers easy.
Exchange currencies goal
There are servera scenarios when people need to exchange money. People want to be prepared for the future and exchanging money beforehand. They are going on holidays or travelling to meet business partners.
Or, clients have money in local currency and want to pay for something with the card abroad.
To exchange currencies there is a separate screen.
There are only four words on the screen: Exchange 2x and Balance 2x. Name of the screen and action are the same. Because the action is the button it’s not confusing.
Beneficial detail with plus and minus near exchange amounts. Helps to understand what amount will be deducted and receive.
If the user made a mistake by choosing the wrong order, currencies can be switched. Button help to fix the mistake without punishment. Also, check how huge are tap areas!
Current rate has an icon with zig-zag arrow up. The same icon is on top and leads to more rates and alerts. It can be misleading and does not help to achieve the goal. A benefit could be to show a weekly trend.
Last detail is a comma separator on the keyboard. Useful for BTC amounts.
To reach the goal of exchanging currencies on the go no UI is needed. No UI is better than any UI.
The exchange happens in the background when the payment is done.
Send money to friends
Only one word for the headline.
Revolut noticed common cases like splitting a bill in a restaurant or creating repeating payments.
The idea of friends who in the contact list helps to find receivers. Contacts are at the bottom which helps to interact with the list. Their pictures help to recognize a person by visual or colourful spot.
I am not sure about the magnifying glass. It serves the purpose to find the right person and it is far from the contact’s list. I guess people don’t really use it because first, it requires to stretch the finger to the top, click, wait for keyboard, start typing and choose a contact. Scrolling the list is much faster.
Afte separating elements, I challange myself to reach mentioned goals with less or no UI at all. Or, how to make UI more functional without significant changes.
Goal to Save money on exchange
- Previous suggestion to show a current weekly trend. Help the client to save.
- Prepare for the future for businessmen and travellers. Possible to use a calendar to track future trips and suggest a beneficial rate.
- Hide the “Exchange” button when there is no amount set.
- Can be even a radical step: don’t show the rate. It’s the best on the market in any way.
Goal to Send money to friends
- Collecting money for gifts can be another common use case. No UI changes needed.
- Show nearby contacts without pressing the button.
- Sending money to a card for example. Also a popular use case.
Doing these steps can help tomake assumptions about the usefulness of the UI. I will be happy to hear your thoughts and opinions. Don’t hesitate to contact me by mail or on Telegram.
For 7 years in design, I worked on different design projects. Some were easy and straightforward. Some had twisting bumpy turns and last minute changes which lead to a mess in my files and organisation. During those years I found a small trick on how to stay organized with my work.
A common designer’s project folder:
I rarely recall to switch on sorting by date. And sharing a project on a flash drive with a colleague will remove all soring by date and files will be in a mess.
To save time and keep project organised name all files in date format Year-month-day. My current project folder:
I name files at the end of the day. To avoid typing date manually I use action from Automator. It adds the current date to selected file or folder.
Share your tips with me by mail or on Telegram.
This concept was created in April 2017.
In future, there will be less car-savvy people. We will see cars as a technology to get from point A to point B. Some people even will not have a desire to understand how to drive. Thus car UI should be all about car related interactions. The UI needs to help you to have trust in the car and what it is doing.
UI of the car is aimed to let driver and passengers to feel most comfortable while experiencing a car ride.
The UI helps to gain trust in the car and what it does.
In the future autonomous driving will be widely spread and allowed by law.
Personal devices will stay as a screen for an entertainment and allow to do work while the car is driven autonomously. We will not write e-mails or browse the web on a car screen. Those are the duties will be given for phones or tablets.
As soon as you parked your car it connects to parking machine, receives fees information and automatically starts the parking
When you are back, car prepares a bill for you. Pay right from the screen and you are ready to go.
Car of the future will service itself, will take care of trip planing on a long ride or park in a busy city. Car of the future will not be just a tech. It will be your robot friend.
Notification and scheduling the service time.
Or pick the most convenient date.
For everybody will be possible to ride in the car of the future. However, to really drive one you still need a driver’s licence. You phone will have a driver’s licence. To drive you will need to be in your car with a phone or unlock the car with a touch of a finger.