Redesigning Product Page UI to build trust

The business wanted to increase qualified leads through direct website traffic. However, there was no consistency in the way they communicated their product offerings on their website.


* Achievers is an employee engagement software that helps companies improve employee satisfaction, resulting in higher productivity and retention.

Role

CRO UX/UI Designer

Year

2023

Duration

3 months

Team

UX/UI Designer (me)

3 Engineers

Product Owner

Product Manager

Copywriter

Deliverables

Heuristic evaluation

Competitive research

Data analysis

User research

User journey map

Mockups

Prototypes

Hi-Fi Design

User testing

This is the Final Product

I re-designed 5 consistent product pages to build trust. Results were 20% increase in qualified leads.

To understand the current state, I ran a UX audit and conducted a Heuristic evaluation of the website

I needed to uncover the root cause of this underperformance. The biggest redflag was the violation of the “Consistency & Standard” principle.

Here’s what I learned

While Achievers offered 5 products, they only had 2 product pages to communicate their offerings. The other 3 products led the user to a form landing page, instructing them to connect with our sales staff to learn more.

Violating Consistency & Standards principle.

3 constraints I Identified with my team

From the start we knew that changes had to roll out in phases considering technical limitations:

3 month timeline

Limited Dev time and resources

Any animation or complex interactions would be implemented in future sprints

Hypothesis & Success metrics we set

Based on the findings from the heuristic evaluation, drop-off rates, and other evidence-based data, I worked with my PM to formulate a hypothesis to set a clear goal.

Hypothesis

By clarifying our products and their benefits, we will reduce ambiguity and increase trust.

Success metrics/Goals

30% higher engagement with Product pages.

15% Increase in qualified leads.

Activities and outputs

Research


Website audit discoveries

Competitive Research

User Research

Jobs-to-be-done applied

Pain points across the user journey

Internal Product Research


Idea evaluation


Exploring ideas

Checkpoints with Devs

Ideation & evaluation


Implementation


Collab with PM, Dev, Copy

Implementation plan

Hypothesis/success metrics

Project timeline (birds-eye view)

I created a source of truth in Figma to communicate my process with multiple stakeholders.

Project timeline

6 must-haves from my competitive analysis

To bring impactful change to our product pages, I conducted competitive research that revealed six key elements our competitors were effectively implementing.

The top three competitors were O.C Tanner, Reward Gateway and Work Human.

Value prop

Function

Why it matters

Impact

Analytics

Integration

I discovered 2 key insights from user research

A need for transparency and comprehensive information upfront, enabling users to make informed decisions before engaging further with the platform.

They look for user-friendly platforms to ensure quick onboarding and an enjoyable experience for their employees that encourages usage.

User quotes driven from user interviews

Activities and outputs

User Persona

User journey map

Impact Vs. Effort diagram

Here are 3 Pain points I identified across the user journey

Product look, feel & benefits were unclear.

Differentiating factors were missing.

Analytics and how they showed results were not communicated properly.

I created a user journey map. Then, through testing and user interviews, I identified gaps in the customer journey that aligned with our focus.

User journey map (an artifact that provides ongoing visibility into our ideal customers' experiences)

Reflecting on all my research, it was time to define the Problem statement

Activities and outputs

Synthesizing User interviews

Ideation of possible solutions

Lo-Fi wireframes

Solution evaluation with Devs, Product manager, & Copywriter

I went over solutions that I had come up with using the Crazy 8 method for ideation. I evaluated them with my PM and Devs, we narrowed them down to 3 and picked the best one based on Effort vs. Impact criteria.

Ideas generated through Crazy 8s technique (Reducing time to push past initial ideas and get creative)

Top 3 ideas picked to evaluate with my team

And now ... Implementation Plan

I sat with my PM, and we mapped out all the required sections for each product in Miro. I then built lo-Fi wireframes inside Figma.

Product Requirement map in Miro

Lo-Fi Wireframe in Figma

To gain cross-functional alignment, I reached out to other departments

I wanted to make sure the way we communicated our product aligned with how our sales reps talked about it with prospects, how we showcased ourselves through our marketing materials, and how the product team built them.

When stakeholders pushback, transparency clears the air

Several stakeholders resisted the multi-department input process, concerned it would slow down our product launch. I addressed their worries by presenting key insights from our Sales and Product leaders that demonstrated why taking time for thoughtful design was essential. This is how I gained their approval and created overall alignment across departments.

I used our style guide and design system to prototype

Achievers style guide and design system

Final Product video

This is the detailed view of my redesign for one of Achievers’ main products, called ‘Recognize’.

Here’s the redesign of all product pages while keeping consistency in mind.

Final 5 product pages redesigned - Desktop

Final 5 Product pages redesigned - Mobile

Eye-opening discoveries from usability testing after launch

I conducted usability testing with 7 users and I shared the results with my team.

User feedback from testing the new product pages

I made these iterations after reflecting on user feedback

I collaborated with my PM and developers to plan our next steps. With their approval, I implemented targeted improvements to enhance the product's usability.

List of iterations applied after reflecting on user feedback

Impact and results

Our sales department reported a 20% increase in qualified leads in the next 3 months.

Final thoughts

Our audience needed more reassurance before deciding to connect with us—once we addressed their doubts clearly, they were eager to speak with our representatives.


Cross-functional collaboration and our unified goal of "designing to raise trust and increase qualified leads" helped us overcome disagreements and competing priorities.


The Trifecta model provided invaluable insights and saved us time in eliminating design solutions that didn't fit our constraints quickly.

Let's Collaborate

Copyright 2024 Design by - Salimeh Miller