CASE STUDY

Lifewire Web Transformation

Redefining the website Experience through clarity, mobile frist Design.

Overview

LifeWire needed not just a website redesign, but a clearer content strategy to help people quickly find support in urgent situations. I improved the site’s structure, mobile experience, and content governance system so information was easier to manage, easier to find, and more actionable.

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

%

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

pp

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

%

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

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

%

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

pp

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

%

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

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

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

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

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

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

%

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

pp

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

%

Perceived Clarity (1–7): 4.2 → 6.0

Based on usability testing with 5 users

Click to Try The Demo

The Process

Discovery

Project background Scope

Understand the client’s goals

LifeWire audiences and needs

Evaluate

Current State Analysis

Best Practice Reaserch

Comparative Review Findings

Content Audit Findings

Redesign

Content Design / Strategy Implementation

IA Redesign

Testing Phase

Visual Design Update

Deliver

Recommendations for Information architecture Content updates

Desktop Design

Molible Design

Editorial Standards

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

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

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

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.

A group of people sitting around each other

Project Focus

Outdated Website

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.

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 Current state

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 fouse on:

Current State Analysis
Best Practice Reaserch
Comparative Review Findings
Content Audit Findings

Evaluating Current state

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 fouse on:

Current State Analysis
Best Practice Reaserch
Comparative Review Findings
Content Audit Findings

Evaluating Current state

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 fouse on:

Current State Analysis
Best Practice Reaserch
Comparative Review Findings
Content Audit Findings

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.

Comparative review findings

Before & After of Carnival HubApp

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.

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 ?

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

Redesigning Content & Structure

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

Reasearch fouse on:

Content Design / Strategy Implementation
IA Redesign + Testing Phase
Visual Design Update

Redesigning Content & Structure

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

Reasearch fouse on:

Content Design / Strategy Implementation
IA Redesign + Testing Phase
Visual Design Update

Redesigning Content & Structure

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

Reasearch fouse 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.

TestPhrase01

Card sorting

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.

Version 3.0 IA

With the card sort confirming our top-level structure, we moved into the next phase of validation — tree testing. Where card sorting helped us discover how people group information, tree testing helped us confirm whether users could find what they needed within our proposed structure.

TestPhrase02

Tree Testing

Why Tree Test?

Card sorting is exploratory — it opens up possibilities. Tree testing is confirmatory — it tells you if the foundation you've built actually works for real users.

We followed a key principle: test when you're at least 80% confident in your tree. Testing too early means testing the wrong thing. Testing too late means expensive redesigns. Our card sort gave us that confidence threshold, and we moved forward.

Study Design

We ran a pilot tree test using Optimal Workshop's Treejack tool, with two distinct groups to understand how familiarity with content affects navigation behavior.

Two test groups:

Internal Group — LifeWire team members and collaborators familiar with the organization's content and mission.

External Group — Thurston County survivors who had been community activists and donors; real users with no prior knowledge of the site's structure.

Why separate groups?

We needed to distinguish between how people who know the content navigate, versus how people who need the content navigate. The gap between these two groups is where the most critical design insights live.

Writing the tasks

Tree test questions work like riddles — they describe a user's goal without using any of the words that appear in the navigation. If the task says "where would you find Services," we've already given the answer away.

We wrote 4–5 task questions modeled after real audience scenarios, then revised them repeatedly until none of the questions contained any labels from the tree.

What We Found

Finding 01 — "Get Help" needs its own spotlight

For Task 1, users navigated between Get Help and Services — they understood the destination but weren't confident about the path. This told us that "Get Help" shouldn't be buried as a sub-item under Services. It needed to be surfaced as a primary entry point, with eligibility information visible directly on service pages.

Finding 02 — Audience-specific content had no clear home

Task 2 asked users to find resources for immigrants in abusive situations. Users consistently struggled — not because the content didn't exist, but because no label in the tree signaled it clearly.

Key quote from a participant: "I don't know if, as an immigrant, I can find an answer that suits me in this option."

This opened a broader design question: population-specific content (immigrants, teens, men, LGBTQIA2S+) needed either a dedicated filter system or a rethought categorization — not a standalone page buried under a vague label.

Finding 03 — "Take Action" vs. "Community Advocacy"

This was our most significant label conflict. Internal testers and external users responded to these two labels very differently:

"Take Action" — users interpreted this as something I personally do

"Community Advocacy" — users interpreted this as what the organization and community are doing together

The external user group — people who had actually lived through the situations LifeWire serves — navigated the tree with fewer errors overall, but this label distinction was where they diverged most strongly from internal expectations.

Finding 04 — "Learn" wasn't landing

Across both groups, "Learn" remained the weakest label in the tree. It was too passive and too broad — users didn't know if they were learning about LifeWire, about domestic violence, or something else entirely.

What Changed Because of This

Tree testing didn't just validate — it gave us specific, evidence-backed reasons to revise our foundation before moving into visual design.

TestPhrase03

Core Modeling

From Structure to Content

Tree testing confirmed where things should live. The Core Model helped us figure out what should be on each page, and in what order.

Core modeling is a content strategy exercise that starts with a simple question: Where do business goals and user needs meet? Those intersection points are your core pages — the ones that matter most to get right.

Our Four Audiences

Before mapping any individual page, we grounded ourselves in the four audience scenarios we'd identified in discovery. Each audience comes to LifeWire with a different level of urgency, different prior knowledge, and different goals.

Survivor Arrives in crisis. Limited time. Cannot browse extensively. Needs: Immediate clarity on services, eligibility, and next steps. No dead ends.

Caregiver Researching on someone else's behalf. Has time and motivation to read deeply. Needs: Context on what abuse looks like, how to start conversations, what LifeWire can offer.

Activist Motivated to create systemic change. Wants to engage beyond a single visit. Needs: LifeWire's mission, training and advocacy opportunities, ways to volunteer.

Donor Willing to give. Wants to trust before committing. Needs: Impact proof, transparent fund use, stories from real people, ways to give.

How the Core Model Works

For each core page, we mapped five elements:

Inward Paths → How does someone arrive here? (Search, main nav, email link, CTA from another page?)

Business Goals → What does LifeWire need this page to accomplish?

User Tasks → What is the visitor trying to do when they land here?

Core Content → What content must exist on this page, in what priority order?

Forward Paths → Where do we want users to go next? Where will they likely go?

Example

Get Help Page

The Get Help page sits at the intersection of LifeWire's highest-priority business goal and its most urgent user need. Getting this page right meant getting the whole site right for survivors.

Inward Paths Search ("domestic violence help Bellevue"), homepage hero CTA, main navigation, referrals from partner organizations

Business Goal Connect survivors to LifeWire's helpline or services as quickly as possible. Reduce time-to-help.

User Tasks Confirm if LifeWire can help them → Understand what services exist → Know what to expect → Take action

Core Content Priority

Helpline — visible above the fold, always
Service overview — what LifeWire offers and who qualifies
Eligibility information — inline, not buried in a separate page
Other resources — for those LifeWire cannot directly serve

Forward Paths → Call the helpline → Individual service detail pages → External resources / partner organizations

Other Core Page

Homepage — Four audiences, one viewport: surface Get Help, Donate, and Volunteer as immediate entry points before anything else.
Services — Answer the question survivors are actually asking: "Does LifeWire help people like me, and am I eligible?"
Donate — Multiple giving options up front, supported by impact numbers and donor stories to build trust before the transaction.
Volunteer — Two clearly separated tracks (Admin vs. Direct Service) so users self-select without burdening staff with mismatched inquiries.
Community Advocacy — The direct result of renaming "Take Action": a dedicated home for activists that reflects what the organization does together, not just what an individual can do alone.
Organizations & Resources — For everyone LifeWire cannot directly serve — ensuring no one leaves the site empty-handed.

What Core Modeling Confirmed

Running the core model exercise across our priority pages surfaced a pattern that ran through every audience scenario: the existing site was organized around what LifeWire wanted to say, not around what users needed to do.

Survivors needed a path, not a paragraph. Donors needed a story, not a statistics page. The core model gave us a content blueprint that put user tasks first — and that blueprint became the foundation for every wireframe and design decision that followed.

What We Deliver

With a validated IA and a content blueprint in place, we were ready to move into design — not with blank screens, but with a clear map of what every page needed to do.

Delivered:

Final Information Architecture
Desktop Version Design
Molible Version Design
Editorial Standards

What We Deliver

With a validated IA and a content blueprint in place, we were ready to move into design — not with blank screens, but with a clear map of what every page needed to do.

Delivered:

Final Information Architecture
Desktop Version Design
Molible Version Design
Editorial Standards

What We Deliver

With a validated IA and a content blueprint in place, we were ready to move into design — not with blank screens, but with a clear map of what every page needed to do.

Delivered:

Final Information Architecture
Desktop Version Design
Molible Version Design
Editorial Standards

What We Deliver

With a validated IA and a content blueprint in place, we were ready to move into design — not with blank screens, but with a clear map of what every page needed to do.

Delivered:

Final Information Architecture
Desktop Version Design
Molible Version Design
Editorial Standards

New Sitemap

Before

After

LifeWire Editorial Standards

The redesign didn't end with a new sitemap. We developed Editorial Standards to ensure LifeWire's team could maintain the service-first experience over time — covering plain language guidelines, mobile-first writing principles, and content governance for different page types.