Hugs fOR BRADY
Enhance usability and engagement, supporting a non-profit focused on cancer awareness.
Project: Hugs For Brady - Non-profit organization website redesign
Project type: Bootcamp Project
Date: October 2023
Date: 2.5 weeks
Tools: Figma, Adobe Photoshop, Google Suite
Member:
Jack He - UI/UX Designer
Alexandria Winters - UI/UX Designer
Brian Chan - UI/UX Designer
Max Freeborn - UI/UX Designer
​
My responsibilities were -
> Synthesizing User Feedback
> Conducting User Research
> Delivering solutions through UX Design methods and techniques
Introduction & Project Context
Our team at the Columbia Boot Camp took on a project with Hugs for Brady, a non-profit aiding children with cancer. Our goal was to redesign the site to be more user-friendly and effectively communicate their mission, using the skills we've honed in our boot camp. This project was not just about applying our design knowledge; it was about making a real impact on a critical cause.
The problem
Despite Hugs for Brady’s dedicated mission to support children with cancer, potential donors and supporters find it challenging to navigate the current website, understand the full breadth of donation opportunities, along with feeling as if the interface is outdated, leading to missed opportunities for support and engagement.
The Solution
Implement a user-centric website redesign that streamlines the donation process, clearly presents the diverse ways supporters can contribute, and encapsulates the heartfelt mission of Hugs for Brady. This approach will increase donor engagement, optimize support channels, and amplify Hugs for Brady’s positive impact on children and their families.
The Process: Empathy, Ideation, and Execution
Understanding the User
We started to think about the users that would use the current website. Being that it’s an organization that deals with childhood cancer, our first thought was that probably a parent that was dealing with the stress of their child being diagnosed with cancer like the founders’ and their child Brady were, would look for a website like Hugs for Brady. So we created Monica Silvia. Though we had a good idea of creating a user who may be looking for support and connection through the website, we realized as we researched the website more that our proto persona wasn’t looking for a organization that really dealt with what Hugs for Brady’s mission was, to raise awareness and donations for childhood cancer research.
Empathy Work Click here to see all the work
Survey
We created a survey to understand public perceptions of nonprofit organizations and their role in supporting children with cancer, garnering 16 responses that highlighted:
-
A unanimous willingness among respondents to donate through nonprofit websites.
-
A strong belief in the credibility and convenience of nonprofit websites for making donations.
-
The importance of sharing personal and impactful stories to motivate donations.
Interviews & interview plan
To dive deep into the user experience and gather meaningful insights for the Hugs for Brady website redesign, we developed a comprehensive interview plan. The interview plan and donation are focusing on a donation user flow.
Target Interviewees: We aimed to engage a mix of stakeholders (if possible), potential users, and individuals from families with young children, ensuring a wide spectrum of perspectives.
Objectives: The focus was to understand their familiarity with the website, their reasons for visiting, and to elicit candid feedback on the current design and content, particularly the donation user flow.
Feedback Collection: We sought to uncover their experiences, pain points, and any constructive feedback that could inform the redesign.
Expectations Gathering: Understanding users' expectations and desires for the revamped site was crucial to ensure the new design aligns with user needs while keeping the essence of the original site.
Key Insights from Interviews
-
Received many positive feedback on visuals, navigation, and overall design.
-
Notable demand for more engaging and contemporary content.
-
Many areas, such as stories and processes, lacked clarity and transparency.
Following the interviews, we synthesized the feedback using an affinity diagram to categorize and analyze the collected insights, helping us identify key themes and areas for improvement in the Hugs for Brady website redesign.
.png)
Heuristic Evaluation Checklist
Our heuristic evaluation of the Hugs for Brady website revealed several key insights about its usability and design:
​
-
The website performs well on various devices, offering a satisfactory cross-platform experience.
-
The overall design of the website scored moderately, indicating room for improvement in aesthetics and user engagement.
-
Essential features and information crucial for user tasks were either hard to find or absent, significantly impacting the overall user experience.
Competitor Analysis
Going through the competitors we researched, a few key things stood out in the comparisons. Most were well known or international renowned, had a longer history, and worked on a much larger scale than Hugs for Brady, like the Make-A-Wish Foundation. Their website were more modern and streamlined with stronger information organization and transparency, interesting color pallets and elements to keep users more engaged on their website.
User persona
Please meet our user, Monica Summers. She is a user with a strong, empathetic, and altruistic spirit especially after losing her younger brother to cancer when she was young. After the emotional turmoil she went through dealing with the loss of her brother, she’s dedicated her life to helping children, volunteering and donating to all causes assisting children especially those who focus on childhood cancer. Which we felt would make her the ideal user for this redesign.
card sorting
We felt that the info on the original website could be reorganized in a more straightforward way similar to what our competitors had, especially when it came to the different ways to donate. Some of the menu options that we and others that we interviewed found that some pages weren’t under a tab they thought it would be or they were repeated on different areas on the site, and so we made sure to pay attention to how things would be grouped and structured
Storyboard
a series of drawings showing how users might use our website, step by step.
.png)
Designing the Solution
Lo-Fi Prototype Low Fidelity Prototype on Figma
The initial prototype put a spotlight on Hugs for Brady’s mission stories and provided a clear depiction of the fund's utilization. This phase involved mapping out a fresh, contemporary look to engage a modern web audience and setting a flexible foundation for future content.
-
In the low fidelity prototype we wanted to put an emphasis on the Hugs for Brady’s mission stories, and a clear idea of where the money goes.
-
We mapped out a fresh and contemporary look to engage today's web audience.
-
Establishes a foundation that is adaptable for future content and feature additions.
.png)
Test on the lo-fi prototype
.png)
Based on the feedback received after testing the initial prototypes derived from sketches, here are some actionable points for improvement:
​​
-
Introduce a section featuring stories from individuals who have benefited from the organization's support, adding a personal touch and emotional appeal.
-
Add testimonials from volunteers to highlight the community aspect of the organization and encourage user participation.
-
Less texts on donate page picture.
-
CTA Button "Donate now!" replace it on "Continue".
UI Style Tile
The UI Style Tile was a crucial component of our design process. It encapsulated the color scheme, typography, and interface elements that define the visual identity of the redesigned website. This style guide ensured consistency across all design elements, aligning with Hugs for Brady’s mission and brand values.
hi-Fi Prototype (desktop version)
High Fidelity Prototype on Figma
The desktop design was crafted to draw users immediately into the core of the organization with engaging mission statements and facts about pediatric cancer. Strategic placement of call-to-action buttons ensured effortless user navigation towards supporting the cause.
​
-
The desktop design immediately draws users to the heart of the organization with the mission and facts about pediatric cancer
-
It also provides thoughtfully placed call-to-action buttons, guiding users to effortlessly supporting the cause.
hi-Fi Prototype (mobile version)
High Fidelity Mobile Prototype
With mobile users in mind, the design was optimized for fast loading times, ensuring users could easily access donation options. The navigation was streamlined with intuitive hamburger menus, adapting to the mobile interface without overwhelming users with content.
​
-
For the mobile version we considered mobile data constraints, the design ensures rapid loading times, offering users quick access to crucial donations.
-
The menus now collapse into intuitive hamburger dropdowns, providing full navigation without cluttering the mobile view.
-
Images, videos, and graphics are optimized for mobile loading, adjusting to various resolutions without sacrificing clarity.
Reflections and Future Directions
Takeaways
-
Enhancing visual elements and ensuring emotional resonance in content can effectively communicate the organization's mission and stories.
-
With a significant percentage of users accessing sites via mobile devices, ensuring the redesign is mobile-friendly is essential for outreach and accessibility.
Next Steps
-
Engage with key stakeholders from Hugs for Brady to ensure the redesign aligns with their vision and goals.
-
Connect with development teams or web agencies to ensure the design can be translated effectively into a live site. Ensure they understand the design's nuances and user-centric features.
Engagement with Stakeholders
Plans to engage with key stakeholders from Hugs for Brady to ensure the redesign aligns with their vision and objectives.
Collaboration with Development Teams
Strategies to work with development teams or web agencies to effectively translate the design into a live site, emphasizing the importance of understanding the design nuances and user-centric features.
Thank you for taking the time to explore this project.
Your interest and feedback are greatly appreciated.
more projects
Omakase Restaurant Website Redesign
Website Redesign enhancing customer interaction with clear navigation and increasing booking conversion rates.
_edited.jpg)