LeuPay (iCARD): Case study
-
Type: UX research & Redesign
-
Period: 5 months
-
Year: 2016/2017
-
Devices: Web
-
Company size: Large enterprise
-
Team size: 20+ people
What is LeuPay/iCARD?
LeuPay (later renamed iCARD) is an e-wallet platform which has the best features of an online banking without the need a real bank office.
What was the lagacy?
It was an outdated system full of usability issues, illogical informational structure and visual inconsistency. Here is a snapshot:
What was the task?
The team was set with the task to re-work the account interface of the application in order to find and address some usability issues as well as to introduce some visual appeal.
Business goals:
-
Growth of our client base
-
Increase of retention rates (Decrease of inactive accounts)
The process
Our team decided to follow a user-centered approach to discover of as much as possible about:
-
How people are using the platform
-
Where are the user's pain points
​
Planned UX research activities :
-
heuristics evaluation (to discover any obvious issues)
-
competitor's research,
-
users interviews,
-
card sorting (to define any problems with the information architecture),
-
online surveys,
-
analytics data reports
-
user tests
1. Heuristic evaluation
We started the process with a heuristic evaluation. The result was a comprehensive lists of usability issues.
​
Some of them included:
-
visual and logical inconsistency in icons, styles and color scheme
-
long and poorly designed forms
-
unclear and confusing pages
-
unclear and confusing functionalities
​
2. Competitor’s research
We had a list of competitors we had to checked, researching about:
​​
-
The possibility to create and account from Bulgaria (some of them were only available from certain countries)
-
organisation and functionality of their account part
-
The navigation architecture and taxonomy
-
The look & feel of their account part
-
Features we might include in our product
​
The result was a vast documentation, including audits, screenshots and ideas.
3. Card sorting
We used open card sorting where we wrote down all the content of the application on colored cards. Then we asked the users to group the cards in piles that make sense to them. After that the participants had to name these piles accordingly.
Some of the results:
The taxonomy (language & terms used) of the application was too difficult to understand by users. Our application used “system” language instead of “people” language.
​​
Some of the changes:
-
“Transfers” became “Send money”,
-
“Funding “ became “Add money”, etc.
-
Some menus change their place
4. User interviews
To take interviews from LeuPay users was challenging. We had several obstacles:
​
-
Hard to reach users.
-
Sensitive financial information.
-
Not English speakers.
​
So we came up with a few different approaches to the problem:
​
-
Interviews with company employees (who use the platform as regularly)
-
Interviews with Support Center operators (who know our users' pain points)
-
Support Center interview template
-
Ranking bonus system (loyalty program)
​
a. Company employees interviews
Some of the findings were:
-
The card’s option to allow/block your online transaction was used regularly
-
The mobile application was preferred over the web application.
-
Some of the options they don’t were: Automatic Withdrawals, Standing Orders, Templates)
-
Card options were not visible and distinguishable enough;
-
You can't delete the number of your deactivated cards from the filter menu
​
After that a persona was created:
b. Support center operators
The next approach was to interview the people that speak on a daily basis with our users - Customer Support call center operators. They know the user’s problems and pain points better than anyone.
On the interviews I asked them what difficulties users most commonly encounter. There were many findings and all were systematized and arranged in a file according to their priority.
Some of the most common included:
-
Users often don’t see their IBAN
-
Users don’t know how to change their wallet’s currency and how to add new money accounts
-
User’s want to see their account limits and how much they have left with
​
c. Support center interview template
One of the ideas was to teach some of the call center operators how to conduct interviews with users on the phone. They would have a template and instructions about what follow-up questions to ask. This idea doesn't see implementation.
d. Ranking bonus system
An option I proposed was to make ranks for our frequent users: bronze, gold, platinum, etc.
They will give bonuses such as:
-
free ATM withdrawals,
-
lower transfer taxes,
-
more features, etc. for a period of time.
This gamification would have:
​
-
encouraged our users to work with the application even more,
-
engaged them with our brand
-
be a great reimbursement for further user interviews
-
it will be useless for scammers.
This idea doesn't see implementation.
6. Online Surveys
Along with the marketing team we have developed several surveys using limesurvey.org to gather qualitative and some quantitative data. Some of the questions included:
​
-
How often do you use the following options?
-
How do you find the process of sending money by using LeuPay?
-
What is the main reason for you to use LeuPay?
These are some of the conclusions I’ve made:
​
-
Users were usually looking to check their balances and recent transactions.
-
Users wanted to perform basic functions such as transfer funds and pay bills.
7. Analytics Reports
During my researches I have worked closely with the SEO team to gather information about our users - their demographics, functions they used and how often they use them. We used Google analytics and later piwik.org
From all my findings I determined the following high-level objectives for this redesign (later broken down to smaller objectives):
​
1. Reorganize site-architecture to allow quick and easy access to desired information which serve as intuitive methods of navigating to more detailed information.
​
2. Utilize typography, spacing and visual elements to quickly convey information to a user.
​
3. Ensure that the same intuitive interface and easy access to desired information were translated across both desktop and mobile layouts
8. User stories, scenarios, case and flow
It was time to fill the gap between research and visual design. All the data I collected from user interviews, studies, surveys and analytics had to be processed and integrated into design workflows. Later these workflows were used for creating test case scenarios for our usability testings.
I started with writing user stories associated with our personas - brief statements that identifies the user and his/her needs.
The use cases were made - long list of steps a user take to get something done in our application.
Activity map was created - a visual documentation what are the possible ways of interaction with the application.
​
Finally the user flow showed all the tasks the user can performa within the system in a visual way.
9. Wireframing
I updated my wireframes often right form the beginning of the project so I can share my ideas across the team and keep everybody on the same page.
10. Prototyping
I used Invison to prototype some parts of the design and to gather some quick feedback from other team members and stakeholders. The purpose was to test how the product might looks like and what might the experience be.
11. Styleguide
11. Deseigns
The final design was made form the gathered efforts of 4 graphic designers (me included), 3 product managers, 2 business analysists, 10 + developers and 2 QAs.
Enjoy!
​
12. How the UX research and findings impacted the final design
Comming soon...
​