Introduction Goal and Metrics Research Developing the Solution Design System Validation Final Design Reflection

Revamp website for a Non-Profit Organization

The redesign and revamp of the website of Social Emotional Learning Alliance for California (SEL4CA) - an NGO aiming at improving social emotional learning awareness and practice at scale.

Duration: 2 months

Role: Solo UX Designer

Team: Matt Spaur, Project Owner

Result: Website Prototype


Build a stronger branding to attract membership adoption

Background: Social Emotional Learning Alliance for California (SEL4CA) is a regional alliance affiliated with the national Alliance. The NGO is aimed at improving social emotional learning awareness and practice at scale.

Problem: The business goal of SEL4CA is to attract more members, the website is the one and only entry for individual users to register as members. But the current website is a bit outdated and inherited text-heavy blog content from the national organization it is affiliated with. In other others, How Might We tackle the issue of a lack of branding and clarity in information to attract more members for SEL4CA?

Solution: This is a complicated website with 40+ pages, so where do I start? With the project goals in mind, I focused on redesigning the information architecture and new templates that can be used across multiple pages (i.e., templates for blogs). At the same time, I spent more effort in designing key screens that lead to success membership adoption (i.e., homepage, about us pages).View Prototype Here.

Design Goal and Success Metrics


Designing for resource center, pathway to become a member and information scanning is curcial in supporting stakeholder needs

To understand the organization itself, I conducted 3 stakeholder interviews and organization analysis, I then synthesized them into a stakeholder map to reveal key insights and design opportunities.

High cognitive load leads to lower trust and weaker brand recognition

I then conducted 4 usability testings by asking users to complete five tasks (find news, register, find resources, find training programs and donate). The tasks were selected based on design goals and stakeholder analysis.

*These results were shared with stakeholders, and Matt (my main contact) adopted some quick fixes based on my suggestion while I continued to work on new designs.

Based on the research, I identified the design challenge as below:

How Might We design information presentation and brand recognition to encourage new membership adoption?

Developing the Solution

Card sorting helps improve information architecture

I used Trello to conduct 5 card sorting, asking participants to group navigation titles into different piles. I then used R to create a dendrogram to visualize the similarity among different titles.

Based on the results, I proposed a new information architecture which has been adopted.

Building a trustworthy and professional brand

I focused on redesigning the homapge and about us page because they are the key screens leading to membership adoption.

Allow faster information searching

I redesigned the template to be used in blog pages. This allows my stakeholder at the NGO to quickly revamp a large quantity of pages with low implementation efforts

Design system

I built a design system to ensure consistency across multiple pages. It is also easier for my stakeholder to implement changes using the system.


I run eight 5-second test (actually, I set up the time to be 10 seconds) on the homepage and about us page respectively to validate if my design promotes a professional branding.

People think of the branding as a professional education organization

Final Design