Redesigning Inner City Bliss
Based in Oakland, CA, director Andre Humphrey and his team have been working in trauma-informed meditation for over 5 years, and worked hard to create this 503c nonprofit. Their goal is to bring mindfulness skills to those who most need it, namely city kids who experienced trauma and stress in their young lives.
The Problem
ICB had a functional, but somewhat confusing website. They needed more engagement from high-value clients, such as partners interested in bringing ICB to their organization, or generous donors.
ICB wanted the site to feel more professional and clean. Andre said "I want to simplify the site-- I try to do too much!"
The Process
I began with a site review and competitive analysis session with the stakeholder to determine the course of action. Next, I created a redesigned site map, then moved on to full wireframes using the whiteboarding tool Miro. With everything nailed down, I created a mood board and finally redesigned the entire site in Wix.
Tools
__
Miro, Canva, Adobe Illustrator, Wix
Timeframe
__
-
February 20 - initial meeting
-
February 27 - competitive research, user evaluation
-
March 3 - sitemap and wireframes
-
March 10- mid-fidelity review
-
March 6 - final design launch
My Roles
__
Project planning, site structuring, wireframes, testing, live site design and implementation.
Breathe in: Starting the Process- Empathize and Define
__
Goals:
-
Increase donor appeal and engagement- UX
-
Update look and feel
-
Improve site usability
Donors Speak: Research
__
I spoke with 3 people who manage donations in non-profit spaces, and asked them what they thought was missing from ICB's site. The top responses:
-
Where are they?
-
Are there any testimonials?
-
Who’s in charge?
-
What are their names and bona fides?
-
Do they have a track record?
-
How did they come about?
"What is their backstory? I want to see an introduction or something."
"Who is running the program? If I'm going to invite them into my space, I want to be sure they're qualified"
"I'm not sure if they're local."
"Any endorsements? Proven results?"
Problem Statement:
"As a potential donor, I need to trust the organization I'm supporting, so that I know my money is being used effectively."
Competitive Analysis
__
In researching similar organizations, I came across a few patterns that helped solve this trust issue:
-
Lots of 1-2-3 style infographics: e.g. three tiers of donating, three data points, three benefits of meditation.
-
Donation button "above the fold", usually in the navigation bar.
-
Donation and sign-ups in the footer.
-
Videos, photos, quotes, and testimonials make the organization look active and engaged.
-
Clear, detailed information on the program and it's services, especially the kind that involve patronage and coordination.
User Persona
__
The above conversations helped me create a user persona.
I needed to keep in mind that the stakeholder and the donor need to be able to connect in several different ways.
User Journey: Making a Difference
__
Breathe Out:
Ideation
__
-
Reduce the amount of pages.
-
Flesh out the About, Support, Programs and Home pages.
-
Create a streamlined site map.
What it Was
__
Shown here, the site had a lot of pages and sub-pages.
The site needed to answer questions potential donors might have, and provide more reassurance that ICB is an active, locally engaged, and organized that has proven program results.
TOP TASK:
Funnel potential partners to donation or contact for further review by increasing confidence in the program.
Former ICB site structure
Strategy:
Create a consistent tone:
Eliminate program offerings that sounded more quick-fix self-help oriented. We wanted to focus more on trauma-informed wellness.
Donation confidence: make clear what impact financial support will do. Structured gifting, proven results, and lots of photos/videos.
Make it more personal: Show the faces of the staff members and program leaders. Explain the mission and successes fully.
The Restructure
__
I reduced the number of navigation tabs from 7 to 5, and consolidated some of the sections.
ICB's director jumped in at this point and helped define the direction on certain sections, namely:
-
Change the "Programs" section to more of a conceptual design, rather than a pick-and-choose shopping cart experience.
-
Create a graphics-heavy informational portion on the concept of Trauma-Informed Meditation in the "About" section.
-
Provide detailed and robust information in the "Support" section.
Visualize:
Wireframing and Design
__
-
Streamline content
-
Develop graphics and assets.
Wireframes
__
I took a lot of care in organizing the content to be digestible, and made sure that the CTA buttons and links were everywhere they needed to be.
Our goal was to make donations easier and the content more elevated.
You can see the beginnings of the asset development on the About and Support Us pages.
Moodboards
__
The stakeholders wanted to maintain a black and white color palate. After examining some styles, we were really attracted to the "texture" board, followed by the "nu brutalist" and "mystical" styles. The idea is to create an elevated, consistent look that projects professionalism.
I created these in Canva, and took the mood board picks to create some assets.
Styling and Assets
__
Namaste:
The Finished Product
__
-
New Features
-
Launch
New Features
__
-
Donation CTA
A nav bar based donation button makes it easy for casual site visitors to donate- previously donation was difficult to find.
A more professional presentation of ICB's offerings reassure organizations that donations are being put to good use.
-
tiered gift suggestions
-
easy to understand graphics
-
simplified course offerings
Reassurance to potential partners that ICB is a thriving organization.
-
bona fides
-
testimonials
-
candid photos
-
"About" page is more clear
Key Performance Indicators:
+ %200
New leads
With the new design, ICB has doubled new cold leads.
+ 80%
"Donate" page visits
The donate page page got a major overhaul, and people are noticing!
+41%
Site Sessions
More people are coming checking in with ICB. It looks promising!
+ 109%
"About" page visits
People want to know more about ICB, leading to more intrest and lead generation.
Final Thoughts
__
Takeaways:
This was a great collaboration with the client: I found that keeping us in contact keeps us aligned to the users' needs as well as his own. The stakeholder said this:
"I just wanted to reach out and thank you for all the amazing work you did with our website.Our team is overjoyed with the makeover our website received! "
Next Steps:
ICB hopes to grow in the future, and hopefully will have more data to share to attract larger donors. I suggest:
-
A built-out thank-you package for donors, showing the direct impact of their contributions.
-
More free resources to engage site visitors.
-
A more engaging text on the history of the program.
