Dismantling racial inequities through non-profit advocacy.
UX research and a full website redesign for the Children's Alliance, a Washington State nonprofit that advocates for racial equity for marginalized youth. I worked on it from November 2022 to January 2023, and built the new site to increase donations and support for the organization's policy work.
An outdated website holding back donations and advocacy.
The Children's Alliance website was outdated, and it no longer made the organization's work or its value clear to potential donors. Efforts to attract donors, advocates and policymakers all ran through that site and were held back by it. How might we redesign the Children's Alliance website to enhance user experience, engagement and impact?
-
Donors
Want Children's Alliance objectives clearly displayed and donation methods clear and accessible.
-
Community advocates
Want a logically organized site, current events and blog posts prominently displayed, and legislator contact information easy to find.
-
Staff members
Want to update and maintain website content simply after deployment.
-
Coalition partners and board members
Want donation and non-monetary involvement methods clear and accessible to website users.
My goal was to design and build a user-centric website that communicates the Children's Alliance mission and values clearly enough to grow engagement and donations.
Researching five stakeholder groups, then building from the findings.
30 stakeholder interviews and a survey of 35 stakeholders were reduced to seven areas of improvement. Those seven areas set the requirements for the sitemap, the choice of site builder and every page that was designed and built.
01Discover
Sampling five stakeholder groups.
I identified a representative sample of the primary stakeholders across five groups: community members, staff members, coalition partners, board members and donors. I selected 30 participants from those groups for live interviews.
- Community members
- Staff members
- Coalition partners
- Board members
- Donors
01Discover
Conducting contextual inquiry and generative interviews.
I ran each of the 30 interviews in two halves. The first 15 minutes were contextual inquiry, with the participant observed using the current website. The second 15 minutes were a generative interview covering why and how the site was used and where it caused friction. I scheduled observation first so I could compare answers in the second half against what the participant had just been seen doing.
01Discover
Surveying the wider stakeholder base.
I supplemented the interviews with a self-guided survey sent to 35 Children's Alliance stakeholders who opted in. The survey asked about the organization's brand as well as the website, and I kept the two kinds of feedback separate through analysis.
02Define
Segmenting interview insights by theme.
I organized the interview and survey insights with affinity mapping, first by stakeholder group and then into website feedback and brand feedback within each group. Six insight themes came out of the map.
- Confusing website navigation
- Arduous website maintenance
- Distracting text and visual elements
- Unclear mission and vision of Children's Alliance
- Hidden call-to-action elements
- Lack of website accessibility features
02Define
Mapping empathy across stakeholder groups.
I then built an empathy map for each stakeholder group to understand how its members used the existing website. Community members, staff, coalition partners, board members and donors each came to the site with different needs, so every finding that follows names the group it came from.
02Define
Identifying seven areas of improvement.
I consolidated the six themes and the empathy maps into seven areas of improvement, covering both brand representation and website usability. Each one became a requirement for the information architecture, the site builder and the page designs that followed.
- 01Logical information architectureCommunity members want a logically organized site with useful information prominently displayed.
- 02Clarity in organization objectivesCommunity members, advocates and donors want Children's Alliance objectives clearly displayed.
- 03Interactive visual elementsCommunity members want the website to be visually interesting and to keep users engaged.
- 04Simplified content maintenanceStaff members want to update and maintain content simply after deployment.
- 05Reimagined blogCommunity members want current events and blog posts prominent and visible on the site.
- 06Find-my-legislator featureCommunity members want to easily find contact information for their legislators.
- 07Promoted ways to get involvedAll members want donation and non-monetary involvement methods clear and accessible to website users.
03Develop
Auditing and consolidating the sitemap.
I audited the sitemap first, because confusing navigation and the request for a logical information architecture both pointed at the site's structure rather than at any single page. I grouped similar sections and consolidated them into a proposed sitemap, which I validated iteratively with a selection of Children's Alliance users.
03Develop
Selecting a capable and cost-effective site builder.
With the structure set, I shortlisted four web builders and compared them on aesthetics, usability, accessibility, cost and time to launch. I weighted staff editing heavily, since simplified content maintenance was one of the seven findings. I selected Squarespace as the best balance of those requirements against the budget and the timeline.
03Develop
Drafting low fidelity wireframes.
I then drafted low fidelity wireframes in Balsamiq from the proposed sitemap, before any work began in Squarespace.
03Develop
Defining modular components and page guidelines.
I defined components and page guidelines using a mix of native Squarespace elements and custom CSS, and assembled pages from these modular components so that staff could update and rearrange content after deployment without rebuilding a layout, which answered the simplified content maintenance finding.
03Develop
Iterating mid fidelity wireframes with staff.
I held daily stand-ups with Children's Alliance staff to guide design decisions as the wireframes moved to mid fidelity. The mid fidelity set served as the proof of concept and was validated by staff before development started.
04Deliver
Transitioning wireframes to the site builder.
I developed the site in Squarespace from the validated mid fidelity wireframes, which set the structure of each live page. The homepage is shown here as it moved from sketch to wireframe to mid fidelity to the final design.
04Deliver
Refining the build with staff and user feedback.
I then reviewed the built pages with Children's Alliance staff and users. Their feedback led to custom UI elements and changes to the placement of sections, shown here on the home, Our Mission, Reports and Community Updates layouts.
04Deliver
Adding interactive visual elements.
I added interactive visual elements and plug-ins to answer two findings: a site that keeps users engaged, and an easy way to find a legislator's contact information. I user tested each one to validate its functionality before deployment.
Seven pages, each answering a stakeholder finding.
The final design is shown across seven pages, each of which I built in Squarespace from the modular components so that staff can keep it current after launch.
The landing page states the Children's Alliance mission in the hero and follows it with the organization's impact figures, answering stakeholder feedback that the mission and vision were unclear. I placed latest updates, the ways to get involved and the mailing list sign-up in the page flow rather than in the footer, so the calls to action that stakeholders found hidden on the existing site are seen without searching for them.
Mission, Vision and Values gives the organization's purpose a page of its own, with the mission and vision set as two cards and the four core values below them. Stakeholders described the mission and vision as unclear on the existing site, so each value carries one highlighted phrase that can be read at a glance.
Our History presents the organization's work from 1983 to 1999 as a vertical timeline that draws itself as the page scrolls, opening on a collage of archive photos. Community members asked for a site that is visually interesting and keeps users engaged, and the timeline is one of the interactive visual elements I built for that request.
Events lists the non-monetary ways community members can take action, with upcoming and past events split into tabs. Registration is completed in place and confirmed on the page, in response to the finding that every stakeholder group wants ways to get involved beyond donating made clear and accessible.
- ca-community-desktop.mp4Community Updates
Community Updates collects the organization's news and legislative updates in one place, opening on a photo collage of the communities the Children's Alliance serves. The updates are laid out in a carousel and feature rows built from the modular components, so staff can add and reorder content after deployment, which stakeholders described as arduous on the existing site.
The blog brings current events and policy reports forward, with a featured report at the top and topic filters such as Early learning to narrow the posts. Community members want current events and blog posts prominent and visible on the site, and new posts are published by staff through the Squarespace blog.
Find Your Lawmakers integrates the Washington State Find My Legislator feature, returning a visitor's elected officials and their contact details from a single form. It answers the community request for an easy way to find legislator contact information, so a visitor who reads about a bill on the site can contact their lawmaker without leaving it.