ClearCaptions
Enhanced conversion rates achieving a double-digit growth over 8 months for ClearCaptions by optimizing their landing page.
Services
User Experience Design, User Interface Design, Prototyping
My Role
UX Designer
ClearCaptions
OVERVIEW
ClearCaptions delivers captioning services for hard-of-hearing seniors, fostering independence and fulfilling lives. I aimed to improve the website’s UX by redesigning the hero section and below-the-fold layout for clearer information hierarchy and readability, increasing engagement and conversions.
PROBLEM STATEMENT
How might we redesign captions.com to improve legibility and information flow for older, hard-of-hearing users—reducing bounce rates and increasing conversions—so they can easily understand and engage with ClearCaptions’ services?
RESEARCH
PROBLEM
How might we redesign captions.com to address poor legibility and unclear information flow for older, hard-of-hearing adults, reducing bounce rates and boosting conversions?
-
Low Conversion Rates: Seniors were not converting due to difficulty understanding or navigating service details.
-
Legibility Challenges: Cluttered text and small font sizes made it hard for older users to read.
-
Information Flow: Users quickly bounced when key details weren’t clearly presented.
User Feedback Review:
-
Conducted informal interviews and reviewed existing feedback from senior users, identifying issues with font size, color contrast, and page clutter.
-
Heuristic Evaluation: Assessed the site’s navigation and layout, pinpointing friction points in the hero section and below-the-fold areas.
-
Competitor Analysis: Examined how similar captioning services addressed senior user needs, focusing on high-contrast visuals and straightforward CTAs.
USER RESEARCH
DESIGN APPROACH
I grouped and analyzed qualitative data to uncover recurring themes, providing clear insights that guided design decisions.
Understanding Research: Clustering themes
USERS AND AUDIENCE
The primary audience comprises senior users (aged 65 and above) who need clearer legibility and easier navigation to make informed decisions. Additionally, it is also catered towards caregivers for these senior users.
Primary Personas
Margaret Thompson
Age: 72
Gender: Female
Location: Suburban area near a major city (e.g., Pasadena, CA)
Marital Status: Widowed
Children: 2 adult children (1 lives nearby, 1 out-of-state)
Living Situation: Lives independently in a single-story home
Occupation (Retired): Former Elementary School Teacher
Lifestyle & Behaviors
Has mild arthritis and uses reading glasses
Can walk short distances but avoids stairs or long walks
Takes daily medication and attends monthly doctor visits
Uses hearing aids occasionally
Prefers large-text, easy-to-navigate websites with minimal clutter
Relies on her daughter (caregiver) to help with tech, appointments, and online purchases
SCOPE AND CONSTRAINTS
The tests, conducted within a set period, aimed to increase conversion rates while navigating tracking constraints and a tight timeframe for actionable insights.
IDEATION AND PROTOTYPING
Based on research, I designed the wireframes and prototypes.
I created the revised design within Instapage to implement and A/B test the new changes. The platform allowed us to validate findings and gather performance data, enabling iterative improvements to the page design for better accessibility and usability for senior users.
1. Improved Content Legibility:
Hypothesis: Senior users struggle with reading text over complex backgrounds and small fonts due to vision impairments. Simplifying the background and increasing the font sizes will enhance readability and focus.
Design Strategy: Replaced the image overlay with a flat blue background to reduce visual distractions. Increased the font size for subtext and headlines to improve visibility.
2. Improved Layout of the Form:
Hypothesis: Positioning the form according to natural reading patterns and making key actions immediately visible will facilitate faster completion and reduce cognitive load for senior users.
Design Strategy: Moved the form to the left side of the hero section to align with left-to-right reading habits. Placed the "SIGN UP" call-to-action above the fold for immediate visibility. Included the instruction "All fields required" for clarity. Added a phone number at the end of the form for immediate support.
3. Improved Information Hierarchy:
Hypothesis: Highlighting testimonials and key service benefits visually will build trust and allow users to quickly grasp important information without reading extensive text.
Design Strategy: Elevated testimonials to a more prominent position to reinforce trustworthiness. Added icons in the hero section to visually represent additional services like free phone and free installation.
4. Enhanced Call-to-Action (CTA) Button:
Hypothesis: Simplifying the CTA design will make it stand out without overwhelming users, improving comprehension and interaction, especially for seniors.
Design Strategy: Removed the text shadow from the CTA text for a cleaner look. Added a subtle drop shadow to the button itself to increase prominence while maintaining a minimalist design.
5. Addition of Icons Below the Product Image
Hypothesis: Using visual icons to represent additional services will help users quickly understand product features without reading detailed descriptions.
Design Strategy: Placed easily recognizable icons beneath the product image to visually showcase additional services, allowing users to grasp the information quickly at a glance.
Prototyping
Certain design choices were influenced by the client's UI and brand color restrictions, ensuring alignment with their established branding guidelines while still prioritizing accessibility and user experience enhancements.
The treatment page was created on Instapage, a A/B testing platform, and data was collected for the new design.
RESULTS AND NEXT STEPS
-
The changes successfully reduced the bounce rate and significantly increased the conversion rate, achieving a double-digit growth over an 8-month period—far exceeding the initial expectations.
-
These improvements demonstrated the positive impact of optimizing content legibility, form layout, information hierarchy, and the CTA, all of which contributed to a more engaging and accessible user experience for senior users.
NEXT STEPS
-
Test different section orders to further enhance information hierarchy and guide users more effectively through the content.
-
Experiment with incorporating video in the hero section to engage users visually and convey key messages more dynamically.
-
Test various header copies to determine the most compelling messaging for driving conversions and capturing attention.
-
Consider incorporating more rounded edges and modern UI elements into the design. Rounded edges can create a friendlier and more approachable aesthetic, which resonates well with elderly users by reducing visual sharpness and complexity.
-
Additionally, introducing high-contrast UI, larger touch targets, and simplified interactions improves accessibility for seniors and aligns with modern design standards.