Website Redesign for Nonprofit
When I joined Ada's Cafe in March 2016, the non-profit organization was making huge strides towards its mission: helping people with disabilities achieve employment and independence. While employees were benefiting, the organization was struggling from a business perspective. They were barely breaking even with large grants and donations, their digital presence was lacking, and in-store purchases were barely covering the cost of high-quality ingredients and the fair wages they paid their employees.
The Navigation too complicated, and didn't satisfy users' needs (menu / catering were not featured), the information architecture was unclear, and Ada's received few donations through the website. With regards to look and feel, the site looked out of date, and the visual design was unappealing. It didn't convey Ada's true purpose and identity.
Improve appearance and usability of website: Increase professional feel in order to enhance web presence and encourage donations / the success of grant applications
Increase in-store traffic through digital presence
- Increase and improve social media presence in order to increase awareness of Ada's Cafe
We performed background interviews with the owner and manager of the cafe, followed by generative and evaluative initial customer research. We then researched how similar organizations (Philz Coffee, Coupa Cafe, Peet's, Starbucks, Palo Alto Cafe, and Blue Bottle) designed their websites and social media presences, before creating some initial prototypes and using the RITE Method to user test.
The main website users are Palo Alto and surrounding areas residents (middle-aged (30s-60s), parents, affluent, goals: Want to know the hours / address / menu), followed by small business owners / event coordinators who want to cater office events, and finally VCs and philanthropic foundations looking to fund nonprofits doing good in the local community.
Jeannine is based on the majority of the customers we observed, met, and interviewed at the physical Ada's Cafe location. While there were a few fathers, teenagers, and seniors, about 70% of the customers were Palo Alto mothers with their young children in tow, looking for a good cup of coffee, healthy food, and a family-friendly environment.
KEY ACTIONS DESIRED
- Plan Visit (Locations & Hours / Menu)
- Request Catering
Review of current website
User testing on existing website with three users
"The text and image look old school"
“I don’t think they will use my donation as effectively as other charities.”
“There should be some clarifications on the contact form — like 'Fill this in and we’ll get back to you in X time'”
“Why is there no tab for catering?”
"The slideshow below looks a little clunky. I don't like the buttons — I expected a centralized command center”
Developed Prototype 1 based on insights from first user testing round
Chose Weebly as a platform: staff already used to it, easy to maintain without coding knowledge
User testing round 2 + RITE method
Interviewed 7 people
Final iteration based on compiled insights
Review with Ada's Cafe owner & managers
Small changes — font size on a few pages & photo changes
HOME — BEFORE & AFTER
Final iteration of Home Page
Prioritized important information in the nav bar: menu, catering, locations/hours
Large photo that better conveys Ada's look, feel, and identity ("sharing, helping, and good coffee")
Replaced "Donate Now" with "Learn More"
Users did not want to immediately donate (especially without knowing about the NGO), and were much more likely to donate or visit after reading the "About" page.
Moved social media icons to the bottom, as users never clicked on them at the top of the page.
Requires no maintenance, which is more appropriate for the Ada's Cafe team — they don't have much time to update time-sensitive notices.