UX/UI designer
UX consulting, research, ideation, prototyping, usability studies, accounting for accessibility, responsive design, establising design system.
November 2021 - March 2022
Online bank web application operating in Europe, serves middle-class customers. The app allows users to perform all finance and banking operations online. The marketing department wants to position the bank as a neo-bank to attract new clients and retain current ones. Bank requested to modernize the visual styles and refine the user experience without core changes to the informational architecture. We have to improve the overall impression of the bank and make it more competitive in the market.
Outdated visual appearance and crucial user experience issues force clients to look for alternatives and leave the service. It is difficult to compete and promote the service along present site impression.
Improve user experience without significant changes to IA. Reskin the interface and setup new design system that fits both new and existing layouts. Collect data to start mobile app development.
This is a very complex project, loaded with different tasks. We are gradually updating the design of our web application and testing improvements before the marketing campaign begins. Our approach involves starting with the web application and then moving on to the mobile app, which allows us to gather user experience data and avoid any inaccuracies in future.
We won't be able to change the information architecture significantly, but it makes it easier for us to plan the redesign. We won't change the general user flow, but will focus on the most inconvenient parts of the user experience. One important step here is to update the visual style and make everything consistent. We'll make changes carefully, so the new design system seamlessly fits the old layouts without causing conflicts. We'll introduce changes inch by inch.
To identify the most inconvenient parts of the user experience, I conducted desk research and created a customer journey ecosystem - an inventory of all customer journeys. I analyzed heatmaps, talked to customer support, and ran in-app surveys. I marked the most problematic journeys and we now have a clear plan of action so tasks were assigned to the design team. Here I'll show how we released the first update.
We identified that the most frequently used and problematic feature in the first circle of our CJM ecosystem is the money transfer feature, so we tackled it first, and simultaneously started to change the styles. We have to provide a completely revamped user experience of the transfer flow. We first need to know WHAT we're building in order to know HOW we're going to build it, so we started with user research, lo-fi prototypes and usability testing of transfer flow, and only then we start tweaking the visual framework.
Next, we began to gradually apply visual changes, starting with updating the fonts and colors, and unifying elements that were common to both - the new design of the transfer flow and the current site. We also reorganized the navigation, keeping the same grouping but moving it from the top bar to the sidebar.
The money transfer feature is the most important and widely used part of this service. Along with the dashboard, it is like the face of our product. We want to offer easier and faster way to transfer money between accounts. We have to make balance transfer less stressful for users.
During the money transfer process users are very concerned about the details of transactions - card numbers, balances, fees and terms. Users overwhelmed about security check.
Enhance user experience, make all important details of the transfer easily observable at glance, to avoid multiple double checking, make transfer flow seamless.
I conducted user interviews, which was turned into empathy maps, I gained insight into the pain points of our users. One common issue I discovered was that many users feel stressed when making a transfer because they have to perform a calculation and double check all the details of the transaction before proceeding. This makes the transfer experience cumbersome and difficult for them.
People need to pay A LOT of attention to make sure they're making the right payment, they need credentials to be accessible at glance.
Customers want to know when money will appear in the recipient account, they want to be sure that the money will arrive on time.
Users frustrated because they need to make some calculations to make sure they have enough money for the following payment.
Clients are nervous about the failure of the security system due to insufficient funds, and rejection of payment abroad.
Tall is a first generation immigrant student who needs to know if he has enough money to pay the bill because he has tight budget.
Graham is a investor-enthusiast who needs a way to pay less attention for details of transaction because she wants to spread money easier and faster.
To start the ideation phase, I collected a competitive audit to generate ideas and understand which solutions are best to avoid. Then I ran workshops with the design team and representatives from the board, marketing, and sales departments. These included brainstorming sessions, "crazy 8's," and "how might we?" exercises. We set aside half a day to ensure everyone could participate. After brainwriting workshop we came up with the idea of the "Top-up" function, a reverse transfer where people indicate the amount of money they need on a certain account. I really like this idea, so I decided to validate it, and first I need to build a flowchart - my goal was to create a clear flow that will be suitable for all our users ranging from 16 to 100 years old. By building a flowchart, I can visualize the steps involved in the process and identify any potential issues or areas for improvement. This will help me create an interface that is accessible and user-friendly for our customers.
I created paper wireframes of the flow, keeping the user pain points, credentials, and terms in mind. This method allows for quick iteration and the generation of a large number of ideas in a short amount of time. I focused mainly on the desktop versions, leaning more towards a respectful degradation approach. Once I was satisfied with the results, I created digital wireframes and incorporated real-world usability heuristics, such as making input fields look like a credit card. Then I created an interactive prototype for the first round of usability study.
To conduct usability testing for the money transfer flow, we recruited a diverse group of participants who represent the target audience of the bank and who regularly use online banking services. We provided them with clear instructions to initiate a money transfer and asked them to complete the process on their own. It was 3 tasks to complete on the desktop version and 2 tasks for the mobile version. These tasks combined very different scenarios, such as transferring from a new card to a friend, transferring all funds available, etc. We focused more on testing the screen version because the mobile app development still waits us in the future.
As participants completed the money transfers, we observed their behaviour and collect data on factors such as task completion time, the number of errors made, drop-off and conversion rates and overall satisfaction by a system usability scale. We also asked participants to provide feedback and answer questions about their experience. The insights gained from usability testing will be used to refine and improve the money transfer flow, ensuring that it is as user-friendly as possible. By conducting usability testing, we can identify and address potential issues before the money transfer feature is released to the public.
Moderated usability study with 6 participants from Europe
Based on the insights from the usability study, I provide changes to improve the flow. I've moved some buttons around, rearranged functions, changed labels, etc. I made sure to minimize as many errors users may face interacting interface as it was possible. Refinement of the interface reduced the number of clicks.
Looking for a new styleguide, we were developed few variants of design, which after a quick 5-second test were modified to 4 different layouts. Then I've ran a Desirability test where each user was shown 2 out of 4 options and was asked to determine the mood of the designs using controlled vocabulary adjectives. We chose the version that most closely matches adjectives such as professional, convenient, fresh and secure. The next round of usability studies will be prepared involving these new styles.
Moderated usability study with 6 participants from Europe
Here, we've changed a big bunch of minor details which nevertheless made a big impact on the overall experience - we've changed element states, renamed headings, and changed the order of buttons. We made sure that the chosen visual styles served our purpose perfectly.
We started updating the design system very carefully. We choose a font with the same properties and proportions as the old one. We acquire new colours that suites into the old layouts. We apply the same size and spacing to the elements of the new design system. At the first release, we updated all form and button elements - it is a major part of our layouts. Then, we experimented with existing screens and new style elements to make sure they fit perfectly. During the second release, we are planning to identify the next elements to update along with redesigning the rest of the flows. In general, the design system will be updated in three phases - we will update all specific elements in the second stage, and then polish this design system at the final stage of the redesign.
We took into account accessibility requirements - we used headings with text of different sizes for a clear visual hierarchy, ensured a high colour-contrast ratio and chose an accessible font that is very easy to read. I used landmarks to help users navigate the site, especially those who rely on assistive technology. I've provided additional documentation that describes how all elements will behave when the screen size changes.
I learned that details is very important, especially talking about such things as money. I realized that usability testing itself is not enough to develop a good banking user experience, because we need users to interact with real money to uncover any potential issues, so we will carefully collect live behaviour data.
We planning to change some approaches in the future because we realized that we will have to make more and more iterations because there are so much details and different contexts that affect the user experience. But, in final this UX redesign of the online banking platform has been a success, resulting in improved customer satisfaction and an overall modernization online banking experience.
