top of page
Frame 1 (2).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."

IMG_0605.JPG.jpg

- Pasang Drolma,

Executive Director of ACCESS

MOCKUP_Phones.png
Discover

Discover

Stakeholder Interviews

What do the Stakeholders want to communicate?

IMG_0605.JPG.jpg

"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:

Screen Shot 2021-06-22 at 4.10.24 PM.png

"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:

Screen Shot 2021-10-15 at 11.38.11 AM.png

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.

Screen Shot 2021-06-22 at 5.11.31 PM.png

In summary, ACCESS lacked a clear value proposition, impact statement, & brand consistency, leaving users confused & frustrated.

Research

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?

Define
Ideate

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)

Feature Roadmap - ACCESS Redesign
Project Timeline - ACCESS Redesign

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.

IMG_20210827_141515219.jpg
IMG_20210827_141456784.jpg
IMG_20210827_141503430.jpg
Screen Shot 2021-06-24 at 1.28.46 PM.png

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.

Design

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.

Test

Iterations

Exploring Different Donation Forms:

screencapture-chinatownaccess-org-donate-2021-07-14-09_20_43.png
Screen Shot 2021-07-14 at 10.54.57 AM.png
Final Design Decisions

Before

After

Comparison.png

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.

Final

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.

Device - Macbook Air (6).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.

Screen Shot 2022-01-13 at 6.36.07 PM.png

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
Launch

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

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.

Read the Next Case Study:

Inclusive

Admin portal design for startup

Frame 1.png
Read More
Stay Creative

App Design for venture idea

Frame 24 (1).png
Read More
bottom of page