The Pink Cloud Foundation is a nonprofit organization that assists individuals reintegrating into society after recovering from substance abuse. The aim of this project was to redesign their website to evoke a different emotional response while improving usability for its visitors.
Background
Role
Problem
Goal
User Interviews
To better understand people’s experiences with NPO‘s (Non-Profit Organizations) and how people find resources in recovery, we conducted 5 user interviews utilizing video conferencing. One of these interviews was with Travis Winship, the CEO and founder of the Pink Cloud Foundation. From Travis, we gained valuable insights into the website's functionality and his vision for the design.
“I like when I can see that the work they do is creating a positive impact on the audience that they are trying to serve.”
-Chris, M
“With non-profits, it feels easier to have an impact. I donate when their missions align with my beliefs, and then I feel part of it.”
-Matt, C
“When people leave treatment it is a delicate time…we found that recovery begins at housing.”
-Travis, Founder
- Most of the site’s users are patients or healthcare providers who are navigating to the application page.
- All donation efforts are funneled through the site, so the donate breadcrumbs and functionality need improvement.
- The site needs to remain as simple, clean, and easy to navigate as possible. Many of the patients using the site are not tech-savvy and need assistance.
Please continue to the end of this case study to read more about my thoughts on this matter and how I would handle a similar situation differently .
Our persona is centered around a social worker at a drug and alcohol rehab facility. This caregiver needs an efficient way to access recovery resources for patients transitioning out of rehab.
USER INSIGHT STATEMENT
PROBLEM STATEMENT
- Simple, inviting features
- Emphasize the “Donate” feature
- Statistics on helping people
- Certifications / awards legitimizing non-profits
Mobile Mid-Fidelity Wireframes with Iterations
One of our main goals in creating mid-fidelity prototypes was to gather ample feedback on our design and quickly iterate. As you will see, we didn’t make many iterations on our mid-fidelity wireframes. However, this doesn’t mean our prototype was perfect. One thing I learned from this experience was the importance of crafting effective questions for user research to extract the most valuable insights from each interview. This approach would ideally lead to more iterations in the mid-fidelity version, rather than in the high-fidelity stage where changes tend to take longer to implement.
“ABOUT US” PAGENo iterations were made at this point in the process.
HOSUING APPLICATION + DROPDOWN One issue we identified with our “Programs & Services” dropdown was the wording of several programs sponsored by the Pink Cloud Foundation. We discovered that many users couldn't find the pet program, "PINK CLOUD PETS", because they were confused by the preceding "PINK CLOUD". As a result, we decided to rename this program to “Pet Assistance” to enhance usability.
HOMEPAGE
No iterations were made at this point in the process.
Iteration #1: Support Link (Navigation bar)
Users testing our mid-fi prototype mistakenly believed that “Support” was a link for them to find personal support. However, the link was intended for supporting the foundation through activities like donations and volunteering.
In our next iterations, we wanted to be sure this issue was resolved and decided to change “Support” to “Support Us.”
Users testing our mid-fi prototype mistakenly believed that “Support” was a link for them to find personal support. However, the link was intended for supporting the foundation through activities like donations and volunteering.
In our next iterations, we wanted to be sure this issue was resolved and decided to change “Support” to “Support Us.”
Iteration #2: Pet Support Link (as seen previously)
One issue we identified with our “Programs & Services” dropdown was the wording of several programs sponsored by the Pink Cloud Foundation. We found that most users couldn't find the pet program, “PINK CLOUD PETS”, because “pets” was not one of the first words in the title. As a result, we decided to rename this program to “Pet Assistance” to improve usability.
One issue we identified with our “Programs & Services” dropdown was the wording of several programs sponsored by the Pink Cloud Foundation. We found that most users couldn't find the pet program, “PINK CLOUD PETS”, because “pets” was not one of the first words in the title. As a result, we decided to rename this program to “Pet Assistance” to improve usability.
Style Guide
HIGH FIDELITY PROTOTYPE
VIEW HERE (MOBILE)VIEW HERE (DESKTOP)
Link to Desktop High-Fidelity Prototype
A/B Testing - “Which header do you prefer?”
I wasn't surprised to see that the results from this A/B test favored "Option A". At that point in the iterations, I wasn't particularly satisfied with "Option B", but I believed the concept had potential. I took the results of this A/B test into consideration as I continued to iterate on the header, which ultimately led to our final iteration.
The most significant change in functionality from "Option A" to the final iteration was the removal of the donation button from the global navigation. We felt that this change would be offset by being certain there were several other areas for users to make donations, and the task wouldn't be too burdensome.
Option A - 77.8%
Option B - 22.2%
Final Iteration
Link to High-Fidelity Prototype
A/B Testing - “Which search bar do you prefer?”
Each member of our team felt that the site, in its current state, was not bold enough. Reflecting on the original issue with color selection, we believed we hadn't done a good enough job in portraying a more serious tone. Therefore, darkening the borders in certain spots was an effort to address this concern.
A/B Testing - “Which search bar do you prefer?”
Each member of our team felt that the site, in its current state, was not bold enough. Reflecting on the original issue with color selection, we believed we hadn't done a good enough job in portraying a more serious tone. Therefore, darkening the borders in certain spots was an effort to address this concern.
Option One - 25%
Option Two - 75%
Reflection
This project taught me many things, but the most impactful lessons were about teamwork and stakeholder interactions.
I pride myself on being a team player who communicates effectively to complete tasks efficiently in a group setting. This project taught me a valuable lesson about the challenges of working on a shared Figma file with different organizational styles. Without discussing naming or framing conventions beforehand, the file became difficult to manage. This experience underscored the importance of establishing organizational strategies upfront. Moving forward, I am committed to implementing these measures from the start to ensure a smoother collaboration.
During our research phase, we had the privilege of interviewing the CEO and founder of the Pink Cloud Foundation. This experience taught me the challenges of navigating shareholder suggestions that might not align with optimal design decisions. For instance, I felt strongly that the site should not have been pink, as it didn't convey the right emotions. While "Pink Cloud" refers to the early recovery period in Alcoholics Anonymous characterized by optimism and euphoria, I still believed that this did not justify a pink website. Despite my reservations, we delivered a satisfactory design that met the founder's requests.
Moving forward, I plan to trust more in my design expertise and take creative liberties when appropriate. I realized that during this project, I constrained myself too much. By being more confident in my design skills, I believe we could have created a more professional-looking site that still satisfied the founder's vision.
Moving forward, I plan to trust more in my design expertise and take creative liberties when appropriate. I realized that during this project, I constrained myself too much. By being more confident in my design skills, I believe we could have created a more professional-looking site that still satisfied the founder's vision.
Key Lessons Learned
- Group work (organization)
- Shareholder interactions
- Time management
FUTURE ITERATIONS
- One of the founder's suggestions that we couldn't implement in this iteration was to have the “Pets Program” page function as a bulletin board for pet owners. In a future iteration, we aim to develop a feature where pet owners can post their pets, similar to job postings, and allow pet sitters to choose the jobs they are willing and able to take.
2. The current donations are filtered through a third party and that creates an unnecsary step for the founder. Travis mentioned this was a concern of his and in a future iteration, we would like to bring the donation function in-house.
3. One of the key insights from our user research is that donors enjoy feeling connected to the nonprofits they support. To foster this sense of community, we plan to implement a forum where members can communicate and engage with each other.