How can the website serve as a gateway to our community?

Responsive web redesign for BLISS Care Foundation

Project type

Client project

My role

UX/UI design, UX copy

Project duration

3 months

Background

BLISS Care Foundation is a 501(c)(3) nonprofit organization based in Southern California. It provides free non-medical in-home care services to underserved seniors by connecting them with licensed care provider partners. The foundation would like to have a modern and updated website to serve as a gateway and tool for its communities to share information and resources, as well as to drive more traffic and donations.

Problem

The existing website is outdated and non-responsive, lacks information and hierarchy. It does not serve the need of the foundation and their target audiences.

Design goals

The goal is to have a clean, simple, and effective website where users can navigate the site and see relevant information easily. The redesign focuses on 3 main aspects:

1.

Optimize page layout

2.

Streamline user journey

3.

Increase user engagement

Research and analysis

To further define the issues of the existing website, I started auditing the key pages’ content and interface, combined with conducting user interviews. The responses showed:

  • Participants took a long time to learn what BLISS does and how they work

  • They had trouble understanding the goals and values of BLISS

  • They were confused about ways to contribute and how volunteering or donation works

  • They did not feel the website showed legitimacy of the organization

  1. Heuristic evaluation

  1. Mapping the target user journeys

The most important use of BLISS’s website is to attract volunteers and donors, who support the foundation by contributing either time or money. The journey maps of these two target users helped the client understand their motivations and needs.

  1. Defining the redesign goals & priorities

Supplemented by topical research on design for nonprofit websites and discussions with the client, I chose to focus on the following design priorities:

  • Present the foundation’s mission, goals, work and impact in a clear and simple way

  • Navigation between pages should be easy and intuitive

  • Provide factual information for donors and volunteers upfront

  • Improve content quality to ensure seamless user journeys

The redesign process

  1. Redesign how content is organized

The new site map categorizes content into 3 main sections:

About Us (what)

Give information about the foundation itself

Our Impact (why)

Show the foundation’s work and community influences

Get Involved (how)

Provide ways for users to support and connect

  1. Streamlining the homepage narrative

The existing homepage does not present visitors clear information about BLISS nor guide them to find it. During user interviews, participants had trouble understanding what BLISS does and had a hard time navigating the site.

The new homepage is designed with a narrative approach and user-friendly navigation in mind. Each section follows the same structure and provides essential information in a narrative, continuous flow. Visitors are first introduced to the core concept of BLISS, then guided through a storytelling experience.

The new design simplifies the user’s journey and ensures that critical information is readily accessible. Furthermore, by framing the content in a coherent story, it helps engaging users on a personal level and fostering an emotional connection between visitors and the BLISS community.

  1. Apply the same content structure to other key pages

Homepage

Vision & Mission

Our Story

Our Work

Community Stories

Get Involved

Donate

Volunteer

  1. Refresh the visual identity

As a local service for seniors, BLISS wants every visitor to feel welcomed and part of the community. I helped the foundation to define a few keywords to guide the visual design, which are warm, soft, and family. The color scheme is kept consistent with the brand logo but optimized for accessibility.

Prototyping and testing

5 participants interacted with the initial Figma prototype to complete 3 key task flows:

  • Learn the foundation’s vision & mission, state what BLISS does

  • Make a donation on the website

  • Look for volunteer opportunities and sign up

Overall feedback:

  • All participants were able to complete the 3 tasks

  • Some participants did not understand the role of “partners”

  • All participants tend to use the CTA in the navigation bar to “donate” & “volunteer”

  • Community content & impact are considered very important for making decisions to support

Based on the feedback, I revised the prototype and presented the final designs to the client.

Iteration and final design

  • “The new design is much more visually engaging as I navigate through different screens. It conveys the core mission and services of BLISS effectively.”

  • “Navigation is so much easier and the call-to-actions are clear. Beyond the design, the clarity and completeness of the content itself is crucial.”

  1. Desktop screens

Homepage

Vision & Mission

Our Story

Our Work

Community Stories

Get Involved

Donate

Volunteer

  1. Optimizing for mobile screens

Homepage

Vision & Mission

Our Story

Our Work

Next steps

  • Develop an effective user-centered content strategy and keep the website's content fresh and up-to-date

  • Further usability testing with stakeholders and continue to collect feedback

  • Payment portal integration & SEO optimizations

  • Work with the engineer to help launching the new site

  • Measure the performance and impact of the website redesign using web analytics tools to identify what is working and what needs improvement

© 2025

All rights reserved.