SKRILL
Creating the ultimate dashboard experience
Leading the redesign of the homepage to improve user engagement and increase transactions.
SKRILL
Leading the redesign of the homepage to improve user engagement and increase transactions.
The Skrill home provides users with an overview of their financial information and activity. It includes several sections: available balance, pending and recent transactions, and widgets such as crypto trading, sports information, promos from merchants. We identified the need to redesign the page through data analysis and research. Being the only responsible designer for the project, I went through research, created design solutions, conducted multiple user testings to collect insights, and applied them to the design proposals. The final design was a result of continuous iteration process.
Goal
To reduce task time for transactions, and boost transaction volume by improving the visibility of key actions, simplifying navigation, and removing unnecessary complexities.
Impact
- Increased transaction volume with 19%
- 11% Increase in revenue from the launch
Problem statement
The dashboard had not undergone a redesign in a long time, and the addition of various new features and content over time had increased its complexity. We noticed a significant increase in customer support queries regarding the dashboard and longer task completion times, negatively
impacting user experience and transaction efficiency. Users faced challenges in easily accessing key actions, managing multi-currency accounts, and navigating through an overwhelming number of widgets on the dashboard.
PROCESS
Project timeline
THE DESIGN PROCESS
Let's get deeper
The project was carried away by 2 designers, 1 lead designer and 1 researcher, with the help of the whole team for the workshops. I was involved in the process end-to-end. We came up with 11 design UI concepts based on the definition of desired look and feel from which we used 8 for a comparative concept usability test to gather user feedback on emotions created from different concepts. Then, we did component analysis and concluded with a Hotjar survey for the best 3 proposals which helped us pick the final proposal.
DISCOVER
2. Research
Our research consisted of:
Data analysis
We found out that the main actions our users take are: deposit, withdraw and exchange.
research
User reseach helped to identify some user painpoints
Some of the main issues were:
1. Users struggle to find the transaction actions on the dashboard (low discoverability of main actions).
2. Newcomers don’t know how to create a new currency balance. Existing customers with multi-currency find it difficult to navigate through balances.
3. Widgets on the dashboard are too much and users can’t find the information they need the most.
research
I helped with a stakeholder study to define the look and feel we want to achieve with the new UI.
Desired look and feel for the new UI
Clustered references based on different emotions and visual trends
Challenge: We had to keep in mind our product is predominantly used by males, we didn't want the design to feel feminine nor non-serious.
TESTING
User testing helped to compare the success of different concepts
The concept on the left (Balance in focus) resonated the best with our users because:
- It highlighted key relevant actions (add, transfer, exchange)
- Featured the current balance in the most clear and noticeable way for the users
- Made it clear what changes when you switch to another balance
DESIGNING
I explored multiple different directions
Testing - Design
Evaluative testing helped to choose the direction
We found that the carousel resonated better with the users because:
- Focus on the balance
- Clearly separated the balance and actions from the rest of the content on the page
- Gives easy access to different balances without the need to open a new page
- Buttons are more visible and easy to identify
Another test helped to define preferences among Skrill users
Main insights:
- Heavy colours/gradients bring low trust, as they can be perceived as too much fun and less serious
- Balance font size plays a big role - the bigger, more financial feeling
- Colour on buttons focus user attention and are easy to locate
- Square shaped button feel more formal and trustful, while round more friendly
Challenge: Although the carousel turned out to be the best performing variant, we decided to move away from emphasizing so much on the multi currently aspect of the account and focus more on the transaction actions.
The final design was a result of continuous iteration process
DELIVER
Final design flows
I delivered a figma file including all flows both for app (iOS, Android) and web, and created new components inside the Design system to be used in the designs.
Measures
Some of the final tasks for the project, was to setup the tracking with the analytics team based on the following KPI's:
- Clicks rate of the tasks
- Task completion %
- Task completion time
- Customer support queries regarding the dashboard
- Quantity and quality of transactions
- Number of users doing transactions
Aftermath
Following up, 1 month after the release we noticed the following change:
11%
uplift in revenue
19%
uplift in transaction volume
7,1%
total increase of users with a
merchant transaction
What I've learned
Interpreting data from User testing
It’s important to take decisions based on user testing data, but also to have always in mind the project’s goals. We found out that some of the best performing designs from the testing would not always bring us closer to our goal. Thinking strategically helped us eliminate those doubts, and make quick decisions.
Exploring / Testing too many design variants
Exploring way too many design versions, even some that are beyond the vision took us more time, and at the end was hard to make decision which one to test. It also makes it harder for the user to distinguish.
Where to improve
More personalised experience
There is a need to cater individually to our main user personas, and make their dashboard experience seamless as possible, for example offering the user to select their interests before landing will help build the best dashboard for them.
Make it more accessible
I’d like to make some improvements to higher up the accessibility. Possible solutions would be adding an adjustable interface size, indicating interactivity on elements and creating animated tutorials over texts-based ones.
