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

  • Homepage

    1. Lack of information and content

      • The homepage does not clearly present the mission, goals, objectives and work of the foundation

      • No information on how donation works

      • No section for volunteering information or link to the volunteering page

      • Partnership is not clearly defined or explained

    2. Lack of hierarchy

      • Only partners section is shown on the page

      • The images and texts are not arranged to present information intuitively

      • Navigation is not clear

    3. Poor accessibility and visual design

      • Lacks visual hierarchy and balance

      • Texts lack contrast with the background color

      • Images are too small

      • Inconsistent spacing

  • About Us

    1. Lack of visual hierarchy

      • Text styles are not consistent and lack a clear hierarchy

      • Video is placed at the bottom but auto plays after opening the page

      • Layout and style in each section is inconsistent

    2. Poor navigation and user flow

      • Navigation is not clear

      • Content on the page does not call for action or direct users to next steps/other pages

    3. Poor accessibility and visual design

      • Content is not visually designed and organized

      • Lacks padding and spacing

      • Content is not aligned on the page

  • News and Events

    1. Lack of information and content

      • Not enough content for news and events

      • The text content does not offer effective information

    2. Poor accessibility and visual design

      • No text or visual hierarchy

      • Inconsistent spacing

      • Overall layout is not organized or easy to read

  • Get Involved

    1. Lack of information and content

      • No information provided for target users

      • Poor image quality

      • Terms in the links are not clearly defined

    2. Poor navigation and user flow

      • Links do not work

      • The page does not direct users to find information

      • Navigation is not clear

    3. Poor accessibility and visual design

      • Text lacks visual hierarchy and balance (footer texts are more prominent than CTA buttons, etc.)

      • Images are too small

      • Lacks padding and spacing

  • Donate Now

    1. Lack of information and content

      • “Donate Now” button directly opens a payment form without given more information on the process of donation

      • Monetary donations are labeled with time which is confusing

    2. Poor accessibility and visual design

      • The popup window lacks contrast with the content in the back

  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.

  • “If I can quickly grasp the organization's purpose and the people it serves, it's more likely to resonate with me.”


    “As a potential donor I need to find details easily about how I can contribute, whether it's through donations, volunteer opportunities, or other forms of support.”

  • “Real stories and testimonials from the seniors BLISS has helped could be very compelling.”


    “If BLISS collaborates with other local organizations, I want to know about these partnerships. It's a sign that they are well-connected within the community.”

  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

  • Proposed site map

  • Previous site map

  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

PROTOTYPE FOR USABILITY TESTING

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.”

FINAL PROTOTYPE

  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

Next

How to bring three schools into one unified campus?

© 2025

All rights reserved.