CASE STUDY

Lifewire Web Transformation

Redefining the website Experience through clarity, mobile frist Design.

Overview

I led the UX design for LifeWire’s website refresh to better support mobile users and help people self-serve quickly. The existing site was built around a knowledge-first, informational model about domestic violence, which made it harder for visitors to find the actions and services they needed. In the redesign, I shifted the experience to a service-first structure—prioritizing key tasks, simplifying navigation, and creating a slimmer site that’s easier to use and maintain for all audiences.

Client

LifeWrie

MY role

Research & Discovery, Information Architecture, UI/UX Design, Visual Design, Design Systems

team

LifeWrieTeam Collaborated with a user researcher

Duration

8 Weeks

year

2025

Challenges

  • Rising competition led to feature creep

  • Information overload and fragmented UX

  • Low engagement and missed opportunities

Objectives

  • Mobile-first and fast to navigate.

  • Surface top tasks; reduce time-to-help.

  • Enable quick, safe self-serve for all audiences.

  • Simplify for easier upkeep.

the Solution

  • Switch to a service-first IA.

  • Simplify nav and reduce pages.

  • Add clear CTAs and task-based entry points.

  • Improve mobile readability, hierarchy, and accessibility.

Key Results
2

%

Time-to-Help (median): 78s → 32s

2

pp

Overall task success (Help + Donate + Volunteer): 47% → 87%

2

%

Perceived Clarity (1–7): 4.2 → 6.0

Based on usability testing with 5 users

CASE STUDY

Lifewire Web Transformation

Redefining the website Experience through clarity, mobile frist Design.

Overview

I led the UX design for LifeWire’s website refresh to better support mobile users and help people self-serve quickly. The existing site was built around a knowledge-first, informational model about domestic violence, which made it harder for visitors to find the actions and services they needed. In the redesign, I shifted the experience to a service-first structure—prioritizing key tasks, simplifying navigation, and creating a slimmer site that’s easier to use and maintain for all audiences.

Client

LifeWrie

MY role

Research & Discovery, Information Architecture, UI/UX Design, Visual Design, Design Systems

team

LifeWrieTeam Collaborated with a user researcher

Duration

8 Weeks

year

2025

Challenges

  • Rising competition led to feature creep

  • Information overload and fragmented UX

  • Low engagement and missed opportunities

Objectives

  • Mobile-first and fast to navigate.

  • Surface top tasks; reduce time-to-help.

  • Enable quick, safe self-serve for all audiences.

  • Simplify for easier upkeep.

the Solution

  • Switch to a service-first IA.

  • Simplify nav and reduce pages.

  • Add clear CTAs and task-based entry points.

  • Improve mobile readability, hierarchy, and accessibility.

Key Results
2

%

Time-to-Help (median): 78s → 32s

2

pp

Overall task success (Help + Donate + Volunteer): 47% → 87%

2

%

Perceived Clarity (1–7): 4.2 → 6.0

Based on usability testing with 5 users

CASE STUDY

Lifewire Web Transformation

Redefining the website Experience through clarity, mobile frist Design.

Overview

I led the UX design for LifeWire’s website refresh to better support mobile users and help people self-serve quickly. The existing site was built around a knowledge-first, informational model about domestic violence, which made it harder for visitors to find the actions and services they needed. In the redesign, I shifted the experience to a service-first structure—prioritizing key tasks, simplifying navigation, and creating a slimmer site that’s easier to use and maintain for all audiences.

Client

LifeWrie

MY role

Research & Discovery, Information Architecture, UI/UX Design, Visual Design, Design Systems

team

LifeWrieTeam Collaborated with a user researcher

Duration

8 Weeks

year

2025

Challenges

  • Rising competition led to feature creep

  • Information overload and fragmented UX

  • Low engagement and missed opportunities

Objectives

  • Mobile-first and fast to navigate.

  • Surface top tasks; reduce time-to-help.

  • Enable quick, safe self-serve for all audiences.

  • Simplify for easier upkeep.

the Solution

  • Switch to a service-first IA.

  • Simplify nav and reduce pages.

  • Add clear CTAs and task-based entry points.

  • Improve mobile readability, hierarchy, and accessibility.

Key Results
2

%

Time-to-Help (median): 78s → 32s

2

pp

Overall task success (Help + Donate + Volunteer): 47% → 87%

2

%

Perceived Clarity (1–7): 4.2 → 6.0

Based on usability testing with 5 users

CASE STUDY

Lifewire Web Transformation

Redefining the website Experience through clarity, mobile frist Design.

Overview

I led the UX design for LifeWire’s website refresh to better support mobile users and help people self-serve quickly. The existing site was built around a knowledge-first, informational model about domestic violence, which made it harder for visitors to find the actions and services they needed. In the redesign, I shifted the experience to a service-first structure—prioritizing key tasks, simplifying navigation, and creating a slimmer site that’s easier to use and maintain for all audiences.

Client

LifeWrie

MY role

Research & Discovery, Information Architecture, UI/UX Design, Visual Design, Design Systems

team

LifeWrieTeam Collaborated with a user researcher

Duration

8 Weeks

year

2025

Challenges

  • Rising competition led to feature creep

  • Information overload and fragmented UX

  • Low engagement and missed opportunities

Objectives

  • Mobile-first and fast to navigate.

  • Surface top tasks; reduce time-to-help.

  • Enable quick, safe self-serve for all audiences.

  • Simplify for easier upkeep.

the Solution

  • Switch to a service-first IA.

  • Simplify nav and reduce pages.

  • Add clear CTAs and task-based entry points.

  • Improve mobile readability, hierarchy, and accessibility.

Key Results
2

%

Time-to-Help (median): 78s → 32s

2

pp

Overall task success (Help + Donate + Volunteer): 47% → 87%

2

%

Perceived Clarity (1–7): 4.2 → 6.0

Based on usability testing with 5 users

Discovering the Vision

To make sure the redesign addressed real goals and user needs, we aligned on project scope, success metrics, and audience priorities from the start.

Workshop fouse on :

  • Project background Scope

  • Understand the client’s goals

  • LifeWire audiences and needs


Background
LifeWire：Support for Domestic Violence Survivors

LifeWire is a nonprofit organization based in Bellevue, WA, that provides support to survivors of domestic violence.

However, the website was last updated four years ago, and the cluttered content makes it difficult to navigate, leading to a frustrating and inefficient user experience.

A group of people sitting around each other
A group of people sitting around each other
Project Focus
LifeWire Website

We uses best practices from Content Strategy and User-Centered Design to help organizations improve communications. Streamline website content for improved user experience.

The Process

Discovery

Current Challenges

Understand the clients goals

what success looks like

Empathize

Find the problem

Current state analysis

Initial recommendations


Revision

Content Design

Information Architecture


Deliver

recommendations for Information architecture Content updates

LifeWire Goals

01 Content Simplification

Reduce pages and posts to help visitors find information more easily while lowering maintenance costs

02 Inclusivity & Accessibility

  • Use clear, universal English that's easy to understand for all age groups and backgrounds

  • Language should reflect audience diversity with empathy and respect

  • Content should be translation-friendly

03 Technical Excellence

  • Mobile-First Design: Ensure seamless functionality on small screens and devices

  • Fewer Clicks: Improve information architecture and navigation for efficient browsing

  • Self-Service: Enable visitors to quickly access services, support, donations, and volunteering information

04 Strategic Content Development

  • Useful Landing Pages: Create targeted pages highlighting key audience needs that staff can share

  • Contributor Support: Provide guidelines, tools, and resources to help content teams create, publish, and maintain content efficiently

Persona
Audiences and Needs

We conducted content audits and stakeholder interviews to understand how different audiences interact with LifeWire's website. We identified key behavioral patterns and information-seeking needs.


Survivors

Needs: Clear, immediate information about available help

Pain Points: Information overload, unclear next steps, inaccessible language

Supporters

Needs: Proof of impact and transparent donation / volunteer pathways

Pain Points: Difficulty finding credibility markers, unclear how support helps

Evaluating the Current Experience

At this stage, our main tasks are to understand the current status of the Lifewire website, and to collect the best practices in the industry and content areas.

Reasearch

Reasearch fouse on :

  • Current State Analysis

  • Best Practice Reaserch

  • Comparative Review Findings

  • Content Audit Findings


A group of people sitting around each other

Overview website from evaluating

Before & After of Carnival HubApp

Current State Analysis
Technical & Content Audit Findings

We used Screaming Frog to scan the website for SEO and accessibility issues, analyzing all URLs, pages, posts, and files.

Key Findings:

  • Website functions well by technical standards

  • Primary improvement areas: readability and file size optimization

  • Content structure needs refinement across blog topics, categories, tags, and WordPress-generated pages

  • Content organization doesn't clearly align with audience segments (survivors vs. supporters)

Opportunity: These issues can be resolved by applying content best practices during the redesign, creating clearer pathways for each user group.

Current State Analysis
Comparative review

Reviewed peer organizations to identify effective design patterns for serving survivors and supporters.

Key Findings:

  • Prioritize "Get Help" and "Donate" CTAs in navigation

  • Use visual differentiation (color/shape) for primary actions

  • Provide detailed help pages with clear next steps

Gap: LifeWire's site lacks actionable pathways—users struggle to move from browsing to taking action.

A group of people sitting around each other

Comparative review findings

Before & After of Carnival HubApp

A group of people sitting around each other
Best practices
Mobile Readability Principles

Based on our content audit, we developed editorial guidelines prioritizing mobile-first readability. Research shows users scan rather than read — they focus on the first 2-3 words and follow a layer-cake pattern across headings and subheadings.

What users fixate on: Headlines, subheadings, summaries, captions, hyperlinks, and bulleted lists

Priority: Revise headings and text layout to capture attention immediately and guide users to the information they need.

Best practices
Mobile Design

We recommend applying these principles across visual design, layout, and information architecture to optimize the user experience.

Apply especially to key pages:

  • Homepage

  • Landing pages

  • Menu / navigation design

  • Donation and sign-up flows

Goal: Create a scanning-friendly experience that reduces friction and drives users toward action on the pages that matter most.

A group of people sitting around each other
Problem statement

LifeWire's website currently creates barriers for both survivors seeking help and supporters looking to contribute. The site lacks clear user pathways, suffers from poor mobile experience, and fails to guide users toward meaningful action. These issues prevent the organization from effectively serving those in crisis and engaging potential donors and volunteers.

How Might We

How might we move from informing people about LifeWire and domestic violence in general to a site where audiences get instructions and know how to take action ?

How might we move from informing people about LifeWire and domestic violence in general to a site where audiences get instructions and know how to take action ?

How might we move from informing people about LifeWire and domestic violence in general to a site where audiences get instructions and know how to take action ?

Key painpoint
Poor Visual Hierarchy & Mobile Experience

Site lacks mobile optimization, has inconsistent branding, cluttered navigation, and busy backgrounds that reduce readability.

Confusing Menu Structure

Menu organization makes it difficult for users to find information—confusing sub-categories, lack of clear organization, and poor accessibility for diverse users.


Unclear Messaging & Weak CTAs

Content organization is confusing with repetitive word choices, lacks clear calls to action, and doesn't guide users toward next steps

Opportunity areas
Streamlined, Mobile-First Design

(1)Redesign with mobile-first approach, (2)focused color palette (Purple/Teal), (3)clean headers/footers, and (4)simple backgrounds for improved accessibility and user guidance.

Intuitive, User-Centered Navigation

Restructure IA based on user needs and tasks, create logical categories aligned with audience segments (survivors/supporters), and ensure accessible navigation for all users.

Clear, Action-Oriented Content

Implement plain language guidelines, structured content aligned with user journeys, and prominent CTAs that direct users to Get Help, Donate, or Volunteer

Design& Validation

Reimagining Content and Structure for Clarity

This phase focused on simplifying the site hierarchy, updating outdated information, and creating clear editorial standards that align with user needs and organizational goals.

Design Focus on：

Content Design / Strategy Implementation

IA Redesign + Testing Phase

Visual Design Update

The Original sitemap
Drafted initial categorization

We will clean up current organization of pages and posts on website 

  • Remove or condense pages for easier user experience and staff maintenance 

  • Reorganize and relabel pages and posts for more user and mobile-friendly approach 

The Original Mobile hamburger menu
Card sort brainstorming

Based on best practices, multiple content audits, and reviews of comparable organizations. Then, we brainstormed and tested new arrangements.

New topic-based Infomation Architecture

We set out to test a new topic-based arrangement. We testing to get a Foundation and assess its strength by 4 factors: (1) Content accuracy(2) Client goals and top tasks (3) Best practices(4) Users - last.

Testing with a card sort 
Why We Tested

To validate our proposed menu structure, we tested it with both LifeWire team members and external users through a card sort study.

This helped us confirm whether our labels and groupings would guide users effectively.


How We Tested

Hybrid Card Sort Participants organized randomized menu labels and page titles into groups that made sense to them.


Two Test Groups:

  • LifeWire team: Familiar with content and mission

  • External users: No prior knowledge of the organization

Success Criteria:

60%+ agreement = valid structure;

80%+ = strong confidence

What We Found

Strong Agreement (80%+):

Both groups aligned on About, Support Us, and Our Services structure

Split Decision:

Population-specific pages (Immigrants, LGBTQIA2S+, Men, Teens) divided 50/50 between Services and Education/Advocacy


Key Insight:

Users see these as educational and advocacy topics, not direct services


How This Shaped Our Design

Testing revealed we needed to:

  • Separate Education and Advocacy into distinct categories

  • Place population-specific content under Education & Advocacy

  • Keep contextual links (training, resources) within relevant sections


These insights directly informed our final information architecture, ensuring clear pathways for all user types.