Compassionate Service Society

A website redesign for a non-profit organization that offers a variety of programs aimed at cultivating the innate wisdom and inner peace in individuals.

Problem

During our research and analysis of this website’s pain points, we discovered that the current navigation was unclear, there were missing pages and “call-to-action”s, and the color scheme and branding had no consistency. These issues prevent users from effectively engaging with the website.

Solution

Throughout this project, we revamped the navigation, incorporated a registration section, and developed a fresh color scheme and ambiance to ensure users to feel welcome and engaged.

Team

4 Team Members

Role

UX/UI Designer

Duration

3 weeks

Sneak Peek

This is a short preview of the homepage we redesigned. Changes includes a navigation bar redesign, addition of a search bar, and implementation of a sliding hero image. These enhancements aim to facilitate user access and engagement to registration, volunteering and program browsing.

Overview

The Compassionate Service Society (CSS) is a non-profit organization dedicated to unveiling the light of wisdom and compassion within each individual. Their initiatives include meditation retreats, integral tai chi classes, vegetarian cooking workshops, as well as the annual World Peace Gathering. For this project, we tackled the navigation system, introduced a registration page and redesigned the website's tone to better reflect CSS's mission.

Stakeholder Meeting

We conducted a Zoom meeting with our client to gain a deeper understanding of how this organization wanted to present themselves. Below are some of the questions we posed during our meeting:

What do the you want your website to achieve?

  • Provide information about CSS activities

  • Inspire people to join via different activities: physical exercise, dharma, meditation, charity, volunteering, etc.

How do you want your website to look? How do you want to present CSS to the world?

  • Enhance the visual appeal of the website by incorporating more engaging and uplifting images

  • Clean, minimal, and modern

  • Materials on the site need to be updated

What do you want users to focus on?

  • The provided programs

  • Volunteering

  • Registration

What kind of people do you want to attract?

  • Vietnamese Americans

  • Elderly who want to maintain and improve their spirituality and inner peace

  • People interested in spirituality

    Parents who want to better their lives, situations, relationships

Proto Persona

After analyzing who would be our ideal target audience for this organization, we developed a proto persona that we believed would be the most ideal candidate.

Research

Meet Ray Nguyen!

Retired + 63 yrs old

Behavioral Demographic

  • Elderly Person (55+)

  • Has a lot of free time on her hands

  • Enjoys meditation

Needs/Goals

  • Wants to find a community with the same  interests 

  • Wants to find therapeutic sessions that help with her spiritual health

  • Wants to give back to the community

Pain Points

  • She feels stiff in her body and wants to feel more relaxed and flexible

  • Not tech-savvy so has a hard time navigating new technology 

  • Has a hard time finding a close knit community with similar interests

Interviews

We conducted user interviews to identify user pain points in the navigation system and other website issues. To do this, we prepared tasks and interview questions, including task-specific questions.

Key Takeaways

From the user interview, we discovered that users encountered difficulties with the navigation, locating the registration section, and noted inconsistencies in color, typography, and branding.

Interview Questions

Tasks:

  • Task 1: Find the schedule for Tai Chi sessions

  • Task 2: Find information on an upcoming vegetarian class 

  • Task 3: Find the Meditation Student Login Page

  • Task 4: Register for an event of your choice 

Interview Questions:

  1. What would you like to see on the website?

  2. Is there anything you feel is missing from the current website? 

  3. What was your overall feel for the website in terms of color and design?

  4. Did you feel that this website gave a reliable vibe? (if not, what specific parts made it seem unreliable?)

Task-specific questions:

  1. Did you find it easy or difficult to complete this task?

  2. How did you feel as you navigated through this task easily?

  3. Was there anything particularly confusing in completing this task?

  4. What would make completing this task easier and more intuitive for you?

Problem Statement

The Compassionate Service Society website aims to inform visitors about the organization and inspire them to get involved in their initiatives.

We have observed that the current navigation system is confusing and prevents users from easily accessing information about upcoming events and programs. (This hinders their ability to successfully engage with the organization.)
How might we improve the navigation system to make their website easier to locate critical information about programs and events?

Ideation

Based on our feedback from the user interviews, we constructed a storyboard focusing on the issues with the navigation and our solution.

Storyboard

Sketches

Each team member created sketches of a few pages to propose website reconstructions. From this, we compare our sketches to determine the most effective designs and identify areas that require revision.

Card Sorting

To combat the navigation issue, we merged the “Activities” and “Programs” primary navigation tabs and replaced “Volunteer” with a “Get Involved” tab accompanied by a search bar. Our research indicated that activities and programs were essentially identical. By introducing the “Get Involved” tab, we aimed to enhance user notice and interaction with the organization. This tab allows users to explore volunteer opportunities and registration, which was absent in the original navigation.

User Flow

After conducting card sorting, we developed a user flow centered around users locating and applying on the registration page. There are various pathways that lead to the registration page. While our initial user flow was more complex, we simplified it to showcase the primary path we were focusing on.

Design

Desktop Low Fidelity Wireframes

In the beginning, our primary objective was to simplify the navigation for users. we began by reconstructing the navigation bar to enable seamless program browsing and registration on both mobile and desktop platforms.

Mobile Low Fidelity Wireframes

To improve user access to the registration section, we implemented several enhancements, including multiple registration buttons and a dedicated registration page.

UI Style Guide

We designed a UI Style Guide with a calm and inspiring tone to align with our website’s goal. That is why we selected primary colors within teal and green spectrums for our website.

Desktop Iterations: Homepage

Some users were unaware that the pages were scrollable due to the large hero image that covered the entire screen. Additionally, some users disliked the lack of white space on the pages.

  • We shortened our hero image and implemented a sliding image animation.

  • We resized the cards to be smaller and rounder.

Mobile Iterations: Hamburger Menu

Users encountered difficulty accessing the ‘About’ page and other primary navigation pages as clicking on them only revealed the drop-down menu.

  • We included an additional row in the secondary navigation of the mobile device.

High Fidelity Desktop Mockup

High Fidelity Mobile Mockup

Interactive Prototype