Homepage Redesign

Designing a homepage that tells the brand's story, engages visitors, and provides enough information to drive conversions using reusable patterns and components.
Project hero image of a desktop layout
Details
Project Length
6 weeks
Role
UX Architect, Project Lead
Collaboration
Development, IT, Key Product Owners & Stakeholders
Overview
Objectives
  • Internal
    • Reduce time-to-market for a new homepage design from 4-6 weeks.
    • Leverage reusable components and patterns to increase ability to optimize and A/B test.
  • External
    • Improve User Sentiment & Brand Perception on the homepage.
    • Increase or hold conversion rate steady on the homepage as its' primary goal is not conversion, but it as a factor.
    • Better inform the user about Compassion's mission, values, and impact than the current homepage as recommended by Nielsen Norman Group.
Approach

I elevated impactful stories, testimonials, and trust-building accreditations on Compassion's homepage to create an emotional connection and answer potential donors' questions. By using a mini-design system of reusable components, we achieved speed, consistency, and a data-driven approach for ongoing optimization of performance and usability.

Results
↑ 9.12%
Lift in user sentiment and brand perception on the homepage
3-5 days
Reduced time-to-market from 5-6 weeks to 3-5 days
No Change
Held conversion rate steady, proving there was no net-negative conversion impact
●
Current State

The Starting Point

Compassion's homepage was....dated. It had been A/B tested successfully, but it was essentially used as a 'craigslist billboard' for various marketing teams within the organization – each fighting for real estate to achieve their business goals and KPI's. The homepage was treated as an ad space without considering the users' journeys, intentions, or needs.
‍
Key Issues:
- Too many asks
- Custom =/= speed; changes are resource intensive
- Hard to test and optimize
- Not enough information for potential supporters

Balancing internal and external user needs

  • Internally, we knew we had to approach the homepage differently – it had to be more flexible, faster, and respond to prospects' needs.
  • Externally, we didn't yet know exactly what those user needs were. We had some hunches based on previous user journeys and persona research, but we needed more data.
a vintage computer mockup displays the old compassion homepage
●
User Research

Generative Research

Objective: Uncover the underlying needs, motivations, and behaviors of internal and external users in order to validate or challenge existing assumptions.

Qualitative Research

  • I conducted several rounds of moderated user interviews in order to gather data around prospects' experiences, needs, pain points, and thoughts & feelings in order to empathize with them.
Slide showing four zoom users and a description of the 5 second test exercise
Slide showing a card sort mockup and a description of the exercise
Slide showing a competitive analysis and screenshots of other websites
Slide showing a mockup of a co-design exercise and a description of the co-design exercise

Synthesis & Analysis

Unearthing and identifying trends, patterns, and key takeaways to help construct user-validated problem statements

a mockup showing a web browser with the miro board used for synthesis

Key Quotes from the Interviews

The consensus that uses landed on was that they most valued the qualities of Trust, Transparency, and Purpose and needed to be able to easily locate this information when it comes to deciding to donate to a nonprofit or charity.

Trust
“If I can’t trust you, you won’t get my money. SHOW ME I can trust you, don’t just tell me I should.”

‍

Transparency
“...Show me what you are doing is working. Where is my money going? What tangible benefit is it creating for these kids?”

‍

Purpose
“What am I supporting? What exactly does your org do?”
●
Key Takeaways

Generating Problem Statements

Objective: Draw out internal and external user problem statements in order to clearly define the specific issues or challenges that need to be addressed, ensuring that the design process remains focused on solving the right problems.

Internal Stakeholder Problem Statements

Identifying the key needs of internal stakeholders that will be utilizing the homepage for achieving business goals.

A moving gif showing slides outlining the internal problem statements

External User Problem Statements

Identifying the key issues to solve for external users who may be new to Compassion or returning.

A moving gif showing slides outlining the external problem statements
●
Concept Generation

Establishing a Framework

Objective: Establish a framework and strategy that allowed our team to rapidly meet internal stakeholder needs while simultaneously responding to the issues & opportunities discovered during the initial user research phase.

Creating a design system...from scratch

  • I collaborated closely with our Digital Production and Brand leads to ensure that I give the homepage an aesthetic facelift while still adhering to the Compassion brand (albeit, fairly dated).
  • This project required an intensely close working relationship with our frontend development team as there was no existing, full-fledged design system for Compassion’s digital products. Additionally, our dated CMS system didn’t allow for easily reusable components (i.e. React, Vue), so we had to work closely to create a workaround strategy.
  • The homepage framework needed to allow for both quick changes to rotating, seasonal content and more evergreen, semi-permanent content.

Documentation for Internal Use Cases

  • One of the most-requested features from internal stakeholders during our interviews and research was documentation for each slot component.
  • Marketing teams and creatives wanted to be able to quickly see content constraints such as character counts, CTA limitations, image aspect ratios, etc.
a desktop and mobile screenshot of mid fidelity wireframes

Based on the key discoveries from our research and the common needs of internal stakeholders, we started building out components for the new homepage.

These components:

  • Fit into our overall funnel strategy
  • Fulfill a variety of needs for our stakeholders & neighbors, from donation widgets to blog posts to sponsorship
  • Asks are easily swappable using ‘variants’ within Figma that allow us to scale and future-proof as much as possible
a desktop and mobile screenshot of mid fidelity wireframes
A graphic showing the results of the usability test
●
Concept Validation

Concept Validation

Objective: Learn whether or not the design direction successfully fulfills the internal and external user needs
a mockup of the desktop navigation with a short description of the changes

Creating a design system...from scratch

  • I performed the same research as last time with a new set of prospective customers.
  • This time, I tacked the new concepts on to the end of the competitive analysis.
  • Essentially, I asked users if these new concepts addressed their results from their own card sort results and asked them to compare these concepts to the competitors they had just looked at.
  • Overall, the response was overwhelmingly positive – enough to move forward with an A/B test in the wild.
A mockup of two mobile devices and a few icons and descriptions outlining changes
A mockup of two mobile devices and a few icons and descriptions outlining changes
A mockup of two mobile devices and a few icons and descriptions outlining changes
●
Final Designs

The Finished Product

A product is never really finished – but in this case, we had the framework ready, validated, and built out. The only remaining step was to deploy, monitor, and continue to test.
A graphic showing the results of the usability test

In with the new

The new homepage has slots for campaigns that are interchangable based on marketing need. It also has informational sections to inform, show success stories, and feature more trust-building content than we ever have before, responding directly to user feedback gathered in the research & validation phases.

A mockup of two mobile devices and a few icons and descriptions outlining changes
A mockup of two mobile devices and a few icons and descriptions outlining changes
A mockup of two mobile devices and a few icons and descriptions outlining changes
A mockup of two mobile devices and a few icons and descriptions outlining changes
●
Results

Deployment & Results

The new homepage design has been an overwhelming success for internal teams and for visitors to Compassion.com.
↑ 9.12%
Lift in user sentiment and brand perception on the homepage
3-5 days
Reduced time-to-market from 5-6 weeks to 3-5 days
No Change
Held conversion rate steady, proving there was no net-negative conversion impact

Other key results:

  • Internal marketing teams have been extremely pleased:
    • They can now pivot rapidly to address urgent field needs such as when disaster strikes a field office and they need to ask for donations.
    • Content creators and copywriters now have clear guidelines for what information they need to collate without having to ask, speeding up accuracy and reducing back-and-forth.
    • A rich but concise set of components has allowed for accurate A/B & optimization testing that can be replicated across other areas of the site that share components.
    • Far less development time and resources are being used per page update.
  • The tabbed sections on the homepage allowed for SEO changes – showing better SEO performance than before, driving more organic traffic through the top of the funnel and increasing first-touch exposure for the brand.