Conversion Ranking Tables
As part of a redesign and improvement task for an Affiliate Marketing site, we're tackling the most important conversion element: Ranking Tables.
- Lead Product Designer
- Preliminary Research
- UX Audit
- User testing
Project Overview
Following our UX audit, these Ranking Tables were redesigned to increase conversion and reduce user frustration. Our goal is to provide users with more details to help them make informed decisions and convert by signing up to the options reviewed on our site.
Ranking Tables are the main conversion element. They provide an easy and quick way to rank the different fintech options offered to our users. These options are ranked based on our expert reviews and ratings.
The Problem
Our goal was to improve conversion rates and reduce user frustration. Finding a way to include more detailed information to help users make informed decisions while maintaining a clean and uncluttered design.
The Solution
To tackle this challenge, we conducted user research to gain some insights into the needs and preferences of the target audience. We did this by testing the previous Ranking Tables with a sample of 10 users from the UK (5 males, 5 females). Using UserTesting we gathered enlightening information about the details more relevant to our users.
After several rounds of testing and iteration, we developed a solution that managed to achieve the desired balance between clarity and simplicity. The resulting redesign led to significant improvements in conversion rates and user satisfaction, by providing the important details but keeping the tables clutter-free and beginner-friendly.
Process
Research, preliminary info…
During the preliminary research phase of the project, we compared a few competitors and gathered information about the most important details for our website users by running a test with UserTesting to get to know real users.
We began by analyzing the ranking tables of other websites in the industry to identify best practices and areas for improvement. And then conducted surveys and interviews with current and potential users to gain deeper insight into their needs and preferences. By using data-driven insights to guide my decision-making, I was able to identify key areas for improvement in the current ranking tables (lack of important details, inconsistencies, etc) and develop a plan for implementing these changes.
This research laid the foundation for the successful redesign of the ranking tables, which resulted in improved conversion rates and greater user satisfaction.
Wireframes
As part of the iterative design process, I began by creating a few low-fidelity wireframes to explore different structures and layouts for the ranking tables. I then went through several rounds of iteration, gathering feedback from stakeholders and conducting user testing to identify areas for improvement.
As the design began to take shape, I created high-fidelity wireframes with proper UI styling to more accurately reflect the final product. Throughout the process, I remained focused on creating a design that balanced clarity and simplicity, while providing users with the information they needed to make informed decisions.
The iterative design process allowed me to refine the design and achieve the desired balance between form and function, resulting in a successful redesign that achieved our goals of increased conversion and user satisfaction.
As we redesigned the structure of the Ranking Tables, we also took the opportunity to revamp the UI and make it more modern and engaging. For this new choice of colours, we focused on vibrant colours and rounder shapes. Making this conversion element more friendly (especially for novice users) and accessible to anyone. With an important focus on contrast with the new colours and typography.
Prototype
.gif)
Results
After several rounds of iteration and testing, we arrived at a final design for the ranking tables. To validate our design choices, we conducted a UserTesting session with 10 participants based in the UK. These users were asked to complete a set of tasks designed to test if all the information was clear and easy to find, and if the design eased the comparison between the operators displayed in the ranking tables. Tasks such as finding a specific fintech provider that offered a special deal, a specific shop with rewards, or finding how we rate these options.
The feedback we received from the user testing was very positive and extremely promising. Indicating that our choices were successful in achieving our goals. Next, I'll hand the design over to the development team to be implemented online. The successful outcome of this project demonstrates the value of a user-centred approach to design and the importance of incorporating user feedback throughout the iterative design process.
