.png)
A Place to Call Home
How I redesigned a local nonprofit's website to reflect their physical welcoming atmosphere.
About
ACCESS is a nonprofit that welcomes & empowers low-income Chinese immigrant families in Boston through after-school care & community education.
The Problem
ACCESS' website failed to provide users with accessible & pertinent information. It was unclear as to what ACCESS did & the many benefits they provided to their local community.
The Solution
Redesign the website in 4 key areas:
1. Improve visual hierarchy & presentation for better user experience.
​
2. Overhaul textual content to better communicate ACCESS’ vision, purpose, & impact.
​
3. Design the website to be a tool to convert potential donors.
​
4. Design sections of the site for easy updates by directors who aren't "high-tech" and have limited time.
The Results
90%
less emails asking if ACCESS is a Chinese language school, saving directors time & effort
30%
increase in PayPal donations
100%
Staff & board members feel that the new site is a significant improvement in communicating ACCESS' value, vision, & impact.
My Role
UX Research
UX/ UI Design
Branding
UX Writing
Photography
Tools
Figma
Miro
Photoshop
WIX (client-desired platform)
Timeline
May - June 2021
Launched June 18, 2021
Shameless self plug :)
"Kim is a talented & dedicated professional. She interviewed many people and took serious consideration of their feedback, input, & even criticism. She worked closely with ACCESS teams through personal interviews, group meetings, email communication, and in-person visitation. And finally, after all of her hard work, we now have our new website, and it is accessible both in English and Chinese."
- Pasang Drolma,
Executive Director of ACCESS
Discover
Stakeholder Interviews
What do the Stakeholders want to communicate?
"I want the website to communicate who ACCESS is & what we do. I want it to capture people's eyes & hearts."
Pasang Drolma, Executive Director
Competitive Analysis
What do other nonprofit websites do? Why?
I researched best practices & conducted a competitive analysis, collecting all the data into post-its on Miro.
​
I also interviewed a web designer with 10 years experience in designing for nonprofits who summed up all my research nicely:
"Engage first the heart, then the head, then the hands."
​
-Elijah, experienced nonprofit designer
Research
Question #1
What makes people give their money & time?
I conducted a donor survey & got 22 responses
Objectives:
-
Discover the motivations behind donation habits.
-
Discover what role the website plays for donors.
-
Discover what donors believe are a nonprofit website’s most important features.
​
Results:
Belief, Assurance, Resonance
Question #2
What are the expectations & frustrations users have with the current site?
I did a Usability Test & User Interviews with 4 participants-- potential volunteers & donors. Turns out, empathizing with potential users came fairly easily, and the road ahead solidified.
In summary, ACCESS lacked a clear value proposition, impact statement, & brand consistency, leaving users confused & frustrated.
Define
Summarizing Research
Focus on Beliefs & Motivations
I created 3 personas to summarize the research and to design for user stories, especially their beliefs & motivations in order to engage the head & the heart.
How Might We...
Vision
How might we clearly and succinctly communicate ACCESS’ mission & vision, so that users can easily understand?
Impact
How might we communicate ACCESS’ value & impact on the Chinatown community in an effective way?​
Engage
How might we make the website a tool to entice potential volunteers and donors to engage with ACCESS?
Ideate
Project Planning
Feature Roadmap & Prioritizing User Needs in a Tight Timeline
I planned not just to design, but also to implement the site on the client's pre-existing platform. At this point, I was invested. I wanted to do everything for ACCESS, but reminded myself, once again, to slow down, realize your limits, & make a SMART plan based on research.
(click to enlarge)
Sitemaps & User Flows
Who needs more convincing?
I created task flows & sitemaps, covering all the bases of all 3 personas.
With limited time, I focused on the Potential Donor persona for the user flow as this persona would need more convincing & most likely explore more of the pages like Our Mission, Our Programs, & Annual Reports.
Design
Sketches
Peer & Stakeholder Critiques
Before moving into wireframes, I drew up some rough sketches and asked for critiques & discussions from peers & stakeholders.
Wireframes V1
Getting Feedback Early & Often
I learned to get feedback early & often in my previous project, so I sought feedback from two experienced designers. Both said that the homepage was a bit overwhelming & some things could be saved for later in the user journey.
​
I also got feedback from stakeholders & let them make some final decisions like the navigation bar style & contact options, and it was great to see how they referenced the personas in making their decisions.
Wireframes V2
Fixing bad habits
(warning: includes a bad pun)
Experienced designer who critiqued V1 asked, "What grid system did you use for these responsive wireframes?"
I sheepishly replied, "My gritty eyes?" (Get it? gritty = grid-dy. haha.)
​
Then I researched the 8-point grid system, bootstrap & how it's great for responsive design, & tried to apply all the feedback accordingly.
Content Strategy, Branding, & UX Writing
I also wrote content for ACCESS. See the branding guidelines & my writing process here.
Test & Iterate
Usability Tests
Using the HMW's to from the Basis for Testing
I conducted 4 usability tests with potential volunteers & donors against the three main Design Questions from the Define phase:
Vision
From this homepage, do you understand ACCESS’ mission & vision? If so, why? If not, why not?
Impact
What do you think are ACCESS' value & impact on the Chinatown community? How do you know that?
Engage
After exploring the site, how do you feel about ACCESS? Is it something you'd be interested in getting involved?
Usability Test Findings
Postive Quotes:
"I like this tagline. I want to know more."
"This infographic is really helpful. I know what programs they do and how they're run."
"I would volunteer, esp in these times of Asian hate & Chinatown businesses suffering the most."
Possible iterations & the limitations of a platform
Usability Tester:
"Is there an online volunteer form I can fill out? I'd rather do that. Writing an email feels harder."
Response:
The directors didn't want forms because it was more work for them to check yet another spreadsheet, so I left it, but I hope ACCESS grows in staff, so as to have this capacity.
Usability Tester:
"I don't use PayPal or check. Is there another way just to give directly on the site?"
Response:
I did a few iterations for donation forms, but Wix limited the number of forms allowed per plan. I told the directors to reach out when they renewed their plan, so that I can update with a form directly on the site.
Iterations
Exploring Different Donation Forms:
Final Design Decisions
Before
After
Why Quotes on Carousels?
Full Reports vs. Bite-Sized Stories
Instead of making the user click to get to 4-pg PDF report, I combed through the docs, pulling out quotes that encapsulated ACCESS' impact on the community. I placed them in an auto-rotating carousel (with a fade effect to make it visually more pleasant) with images that would help reinforce the message of building relationships & breaking barriers.
Why Cards?
Information Architecture - the programs are what makes ACCESS valuable
Before, users had to search for the programs, even though that was the main information that most users came for. So I used clickable cards with Program Descriptions & photos to clearly communicate what ACCESS offers, how the user might want to use ACCESS' services.
Navigation Bar Functions
NOT bombarding the users with info.
The navigation bar disappears when scrolling down to not overwhelm the user with information, but reappears when the user starts to scroll back up.
​
Why?
To make the language option more visible & easy to find, as well as, the Donate CTA without bombarding the user with pop-ups.
.png)
Easy access to communication -
The key to building relationships
From stakeholder experiences, many users called ACCESS directly or used WeChat to ask questions. I built in a chat option, so that the user would not have to leave the site to ask questions, and get their answers during ACCESS' office hours.
Relevant data
A visual way to represent important numbers
ACCESS' stats were buried in the Annual Reports, so I pulled out the numbers relevant & valuable to donors & made them visually easier to digest. I used Canva to create this document, so that stakeholders could easily update it every year (they already had experience with Canva) then showed them how to upload it to Wix.
Site Launch!
Translation & Lift-Off
After implementing the design on WIX, thanks to WIX's handy-dandy language option, Google Translate did most of the translating work, making it easy for the Executive Director to do final translation edits. Wrap-up went quickly & the site was launched on June 18, 2021.
Check out the live site at chinatownaccess.org
The Results (ICYMI)
90%
less emails asking if ACCESS is a Chinese language school, saving directors time & effort
30%
increase in PayPal donations
100%
Staff & board members feel that the new site is a significant improvement in communicating ACCESS' value, vision, & impact.
The Next Steps
Social Marketing
In order to truly grow in a business sense, I encouraged a social marketing campaign & increase in social content creation. Since I couldn't do it myself due to limited time, I created a position for a marketing volunteer position, & hope to volunteer myself when my schedule opens up.
Reflections
Fireworks Type of People
Coming out of social isolation, I forgot how to meet new people.
​
In the first meeting with Pasang & Annie, I skipped the intro, the warming up, and went straight into deep motivation questions like a bulldozer. Thankfully, they were both gracious in answering my deep motivation questions, & it wasn't the last meeting.
The next meeting, I made sure to slow down & remember how to talk to people, and what a joy it was. Getting to know Pasang & Annie's personal stories, their passion for people, & their love for the Chinatown community, especially the underserved, was truly inspiring. They are fireworks that lit up the sky after a long, dark year.
​
So, here's to amazing people who make this world a little bit more wonderful just by being in it, learning from them, & carrying those good vibes into my next projects.
.png)