Namescan Pricing Page

Browse MemberCheck Website
Project tools
Figma

Illustrator
‍
wORK WITH
CEO

Product Manager

Marketing Manager

Front-end Developer

Backend-Developer
Deliverables
User Research
Wireframing
Illustrations
Project Duration
2 Weeks
Project Overview

The Product

NameScan.io is a PAYG platform for AML and KYC compliance, helping businesses screen customers against watchlists, PEPs, and adverse media to ensure compliance and prevent financial crimes.

Browse Namecan.io Website
Project Overview

The Problem

The introduction of a new pricing model (Verification Credit) led to a noticeable drop in sales for three consecutive months

how do we notice this ?

The CEO raised a concern about the significant drop in sales during the sales report session.

wHY THIS IS A PROBLEM ?

A significant drop in sales impacts revenue, challenges growth targets, and may indicate issues with the new pricing model. If not addressed, it could affect customer retention and overall business performance.

Project Overview

The Solution

We simplified content, removed extra CTAs, and made the purchase process intuitive, improving usability and helping users make informed decisions.

ADDRESSING USER NEEDS

01 Minimise Content & Reduce CTAs

02 Guide users through the service purchase process

03 More strategic and logical layout.

Design Process

My design process wasn’t always linear; sometimes, I built on existing work and jumped between stages due to time, resource and technical constraints.

01

Understand

Conduct the user research to understand the user's needs

02

Define

Identifying the problem and brainstorming with my team

03

Ideate

Hypothesise the question and lead to the potential solutions

04

Validate

Use usability testing to refine solutions and improve them for user needs.

Understand the User

User flow

The Namescan purchase flow offers a simple journey from the homepage to checkout. By mapping the entire user journey, I anticipated user needs at each step, ensuring smooth interactions with the product.

Understand the User

User Journey Map

I created a journey map to analyse the touch points between the user and the product. This helped me empathise with the user, highlight frustrations and improvement opportunities.

Key Insights

Pain Points: Users struggle to find clear product info, feel uncertain about solution trustworthiness, hesitate with payment security, and may find final scan results lacking.
‍
User Emotions: Predominantly uncertain through the journey, with satisfaction only at the final scan stage.
‍
Improvement Opportunities:
Detailed Guidance: Provide clear product descriptions early on to build trust.
Free Trials: Offer sample scans to reduce acquisition uncertainty.
Secure Payments: Highlight security and transparency to ease payment concerns.
Quality Assurance: Ensure scan results meet user expectations, with promotions for loyal customers.
‍
Addressing these areas can enhance the Namescan.io user experience and build confidence throughout the journey.

define the issue

Production design Critique

This critique reviews the production design to assess its effectiveness and find areas for improvement. It focuses on how well the design works in its context and explores ways to enhance its impact.

Major Feedback

01 Illogical & misleading layout

02 Confusing Pricing Model  

03The user has too many choices to make

STARTING THE DESIGN

Accessibility

Products and features that are created for people with disabilities often end up helping everyone. Designing for accessibility helped me consider all users’ journeys, keeping their permanent, temporary or situational disabilities in mind.

Colour contrast

To ensure maximum readability, the page adheres to the WCAG AAA colour contrast ratio guidelines, with a minimum contrast ratio of 7:1 for normal text and 4.5:1 for larger text. This helps users with low vision or colour blindness, as well as those viewing the page in various lighting conditions, to easily read and interact with the content.

Font Size

For readability, the desktop version uses a 16px base font, while the mobile version increases to 18px to ensure clarity on smaller screens. Both sizes support text resizing up to 200% without loss of functionality.

Responsive Design

The whole namescan website has been optimised for responsiveness, ensuring a seamless experience across a wide range of devices and screen sizes. Whether viewed on desktop, tablet, or mobile, the layout adapts fluidly, maintaining clarity and usability for all users, including those using assistive technologies.

STARTING THE DESIGN

Applying UX Laws

I reviewed key UX laws, which are best practices for creating user interfaces. Applying psychology in design clarified user expectations, enhancing the overall experience.

Miller’s Law & Progressive Disclosure

Miller’s Law states that people can process only 7±2 items at a time. To apply this, group related options and use progressive disclosure to present information in smaller, manageable chunks. For example, display a summary with the option to expand for more details.

Hick’s Law

This law suggests that the more choices people have, the longer it takes to decide. To apply this, simplify options by categorising or limiting the choices shown at once. Use filters or toggles to help users narrow down their options.

STARTING THE DESIGN

Design Principles I followed

Design Principles: I focused on minimalism, consistency, and guided navigation to ensure a simple and user-friendly experience.

Minimalism

I prioritised simplicity by removing clutter and focusing on essential elements, creating a clean and intuitive user experience.

Consistent

I ensured a cohesive design by adhering to a design system, using consistent styles and components throughout the interface to provide a unified and predictable user experience.

Guideded navigation

I implemented clear navigation cues and step-by-step instructions to guide users seamlessly through their journey, enhancing ease of use and reducing confusion.

Ideate the solution

High Fidality Wireframes

After collecting insights from the previous section, I started designing the high-fidelity wireframe in Figma. I used sticky notes in the Figma file to explain my design rationale.

VALIDATING THE DESIGN

Usability Testing

In my usability testing process, I utilise Hotjar and Typeform to gain comprehensive insights into user behaviour and gather valuable feedback.

Hotjar: I use Hotjar’s heatmaps (click, move, scroll) and session recordings to analyse user interactions. These tools highlight popular areas, scrolling behaviour, and attention focus, confirming usability effectiveness and revealing areas for improvement to enhance the user experience.

Typeform: I use Typeform to create user-friendly surveys that capture detailed feedback from users. This qualitative data complements the behavioral insights from Hotjar, providing a well-rounded understanding of user needs and preferences.

tHE rESULT

Project Outcome

Fewer Questions Regarding Pricing

Customer support inquiries about pricing dropped 20% thanks to a more intuitive layout, helping users understand the pricing model better than before.

Better Sales

The redesigned pricing page led to a 10% increase in conversions within three months. Simplified layout and improved readability made navigating pricing options easier, boosting sales.

More Positive Reviews

Customer feedback improved steadily, with a 12% rise in positive reviews. Users appreciated the clearer design and ease of navigating pricing information.

Lessons learned

Takeaway


Went Well

  • Collaborated effectively with product managers, engineers, user researchers, CX, and marketing teams.
  • Launched the MVP ahead of schedule, ensuring a swift go-live while upholding high-quality standards.
  • Incorporated data-driven insights and user-centric strategies for informed, impactful design outcomes.

To improve

  • Clarified technical constraints early to ensure alignment from the start.
  • Conducted A/B testing before major changes, like the pricing model, to validate effectiveness and optimise outcomes.
  • Some minor visual design decisions were not approved by the CEO and product manager.

2024 © All Rights Reserved.

- Project Overview -

01 | Project Objective

To create a solid base with our Minimum Viable Product (MVP) that satisfies our initial launch criteria—including essential IDV functionality—while ensuring a smooth expansion pathway for future features.

02 | Role & Deliverables

In this project, my role encompassed the complete UX and UI design process, working collaboratively with a Project Manager, two developers and another designer. My responsibilities ranged from identifying and defining the core problem to delivering the final visual designs, ensuring a seamless end-to-end user experience.

03 | Challenges

This project involved numerous technical dependencies across different teams and products, requiring careful coordination and prioritisation. Our goal was to efficiently manage these complexities to ensure the on-time delivery of a Minimum Viable Product (MVP).

04 | Outcome & Impact

We successfully launched the MVP within a six-month timeframe, resulting in a significant improvement in our overall metrics.

  1. +20% Increased User Completion Rates
  2. -50% Reduction in User-Reported Confusion
  3. -60% Less Customer Support Queries
  4. +80% Positive User Feedback Surge
  5. Accelerated Development Cycles
  6. Enhanced Scalability