Tech Tips Redesign

Improving discoverability, accessibility, and conversion for a high-traffic content hub

Overview

Asurion's Tech Tips articles attracted strong organic traffic from Google searches but struggled to convert readers into customers or keep them engaged. The original page featured an endless scroll of articles with a "Load More" button and lacked filtering, search functionality, and accessibility support. The redesigned page focused on improving user experience, accessibility, and conversion by introducing structured navigation, better content discovery, and a more intuitive layout.

Role & Tools

Role: Designer & Develoer, and Accessibility SME
Tools: React, Figma, Algolia, Mixpanel, Contentful,Typescript, HTML/CSS, VoiceOver, Wave

The Challenge

The original article layout was static, with articles listed in an endless scroll format, requiring users to click a "Load More" button to continue browsing. There were no filtering options, no search functionality, and the page was not accessible, limiting engagement. We needed to transform the article into a dynamic, categorized, and accessible experience, with seamless content discovery and better conversion pathways for users.

Goals

Turn passive readers into engaged users and customers
Enable faster content discovery through categorization and real-time search
Leverage Algolia analytics to understand user intent and behavior
Improve accessibility for all users, ensuring WCAG compliance

Design Thinking

We began with a UX audit and stakeholder interviews to uncover user frustrations and business goals. Based on this, we mapped out core improvements including clearer categorization, real-time search, and better article-level engagement. We prioritized clean, modular layouts and explored how content could support the full customer journey—especially by spotlighting trending or relevant content throughout the reading experience.

Click to enlarge

Visual Exploration

Before locking in direction, we gathered a visual board in Figma with inspiration. This helped spark ideas around structure, tone, and layout direction for a more modern and engaging experience.

The new layout introduced topic-based sections, an engaging homepage, and surfaced personalized or trending content from the moment users arrived—reducing bounce and increasing discoverability.

Tech Tips: Storyboard of pain points and new journey

Visual Design Enhancements

While much of the redesign focused on structure, accessibility, and content discovery, I also explored how to bring more visual energy into the experience. Working within our brand system, I introduced new patterns and visual styles to help the articles feel more modern, cohesive, and engaging:

Added a sticky purple header with a persistent CTA to guide focus and increase engagement

Designed a bold, split-layout endcap ad with vibrant imagery and brand color

Refined mid-article ads using softer layout, brand photography, and subtle doodles

Introduced playful doodle illustrations to enhance visual tone and editorial personality

Standardized purple hyperlink styling for improved clarity and brand consistency

Endcap Ad component using bold color and imagery

Redesigned bottom endcap ad using purple imagery split for clarity and visual contrast

Mid article ad block redesigned with colorful imagery and doodles without distracting from content

Sticky header on scroll with call to action

Product Design

We improved search engine optimization (SEO) by shifting from infinite scroll to paginated results, enabling crawlers to better index our content. Combined with Algolia analytics, this gave us insight into what users searched for—and what content we should highlight or improve.

We also introduced small category "pills" at the bottom of each article, helping users identify the topic at a glance and allowing internal teams to tag, organize, and analyze content more effectively across themes.

The final design introduced a responsive layout with a search bar, curated landing experience, and revamped article pages.

Click to enlarge

Coninued Exploration

Each article now features a sidebar of related content to encourage continued exploration, social sharing tools for deeper engagement, and relocated ad placements to avoid interrupting reading flow—replacing the intrusive middle-of-article ads from the previous design.

Click to enlarge

Mixpanel Analytics User Journey

Mixpanel revealed that many users dropped off quickly after landing, with few progressing past the first set of articles. This validated our hypothesis that infinite scroll and lack of categorization were creating decision fatigue. These insights directly influenced our pagination strategy and homepage restructuring.

Development Work

I became the SME on Algolia and worked to integrate it for fast, real-time search capabilities and added analytics for Mixpanel for tracking user behavior, both of which provided critical insights into content performance. This also laid the groundwork for potential future site-wide search functionality. Additionally, we developed new sidebar components to enhance content discovery. These components were built using Contentful for easy content management, allowing non-developers to update and manage the content dynamically, without needing to modify code.

Click to enlarge

SEO Friendly

We added persistent search query parameters to the URL when using Algolia-powered search. This allows users to copy, share, or return to their exact search results—improving usability and supporting external referrals and SEO indexing.

Accessibility

Accessibility was a major focus of the redesign. I led the implementation of WCAG-compliant fixes including semantic markup, ARIA roles, keyboard support, and contrast enhancements, making the articles usable for all users. Originally, the landing page lacked basic accessibility structure—keyboard users couldn't navigate through article listings efficiently, and newly loaded content offered no context or announcements. There were no live region updates or skip links, and users were forced to tab through every article just to reach key content.

The redesign introduced accessible pagination, clear heading hierarchy, and screen reader-friendly announcements for dynamic content updates. Regular audits and testing ensured compliance and real-world usability.

Click to enlarge

Designing Accessible Pagination

What looks simple often isn't—pagination has to do a lot to meet accessibility standards. I redesigned the Tech Tips pagination with POUR in mind, ensuring clear focus, hover, visited, and current states using more than just color. I added visible labels, screen reader-friendly ARIA attributes, and intuitive keyboard navigation including arrow key support. Each pagination element—including page numbers and arrows—was built with a minimum 44x44px touch area to ensure a comfortable and accessible experience on mobile and tablet. Every control was designed to be perceivable, operable, and usable by all.

Impact & Results

Increased time on site with improved engagement
Improved content discoverability via categorized articles and search
Actionable insights from Algolia analytics refined content strategy
Enhanced accessibility expanded the article's audience
Higher engagement with on-page ads and CTAs boosted conversions

Noteworthy

First step toward implementing site-wide search
Created a dynamic content hub that drives both engagement and business outcomes