Research Study - Account Redesign
The personal account section of Payments Insider was in desperate need of improvement. The goal was to simplify the number of screens and make it easier for users to access their personal information. The solution chosen for this experience will be replicated across the site where appropriate.
.png)
CLIENT
Elavon
ROLE
Lead Designer
TIMELINE
3 weeks
Overview
.png)
What is our starting point?
The experience was very cut up, and featured an initial step of having to select what section of personal information you want to view. This creates unnecessary clicks for the user and does not take advantage of the vast screen space available.
You can view the original experience below.
Our focus: streamline the experience and maximize the use of available screen space.
Testing
After doing competitive analysis and exploring different design solutions, I had three versions ready for user testing.
I conducted A/B testing with the three versions in UserTesting.com with 11 participants.
.png)
Version 1
Features:
-
Streamlined view with tabs delineating the 3 sections of Personal Information
-
Tabs have a clear background with the selected tab bolded and underlined
-
Users can update their information in-line
.png)
Version 2
Features:
-
Streamlined view with tabs delineating the 3 sections of Personal Information
-
Tabs have a filled background
-
Users can update their information in-line
.png)
Version 3
Features:
-
Consolidated view with the 3 sections detailed out on one page
-
Users can update their information by selecting "Edit" on a given section
The voice of the user is the most valuable tool for a designer
User Feedback
-
11 total
-
Age: 29-65
-
Income: $20,000 - $149,999
-
Country: United States
-
Job Role: Administrative, Business Development, Entrepreneurship, Finance
-
Web expertise: average
-
Job Level: Director, Manager, Owner
Participant Demographics
Which version was easier to navigate across information?
-
7 responses for Version 2
-
4 responses for Version 3
Which version is more visually appealing?
-
8 responses for Version 2
-
3 responses for Version 3
Feedback
"Version 2 was the clearest to navigate because you could clearly see those were three separate tabs because of the way they were highlighting."
- participant 4
Final Design
Thanks to all of the user feedback, we decided to move forward with Version 2.
The filled-in tabs presented clearly as tabs as opposed to the clear tabs.
A majority of users preferred the tabs chunking up the information to Version 3 which was content-heavy and went below the fold of the page.
Testers also commented that being able to edit in-line was convenient and would save time.
I presented my findings and final design to the project team for approval and they moved forward into implementation. The tab design will be applied across many pages of the site where it is appropriate.