Summary UNDERSTAND THE PROBLEMS Developing the Solution Final Design Evaluation 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

Summary

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

Through research, I identified information design, branding & trust-building, and appearance are three main blockers for membership adoption. In other words, How Might We tackle the issue of a lack of branding and clarity in information to attract more members for SEL4CA?

Solution

Roadmap

Here is my workflow for this project. As the only designer, I collaborated with the project owner Matt (who is a content writer and marketer) to determine goals and scope, review the designs, and implement them in WordPress.

Goal and Metrics

The business goal is to attract new memberships using the website. The problems I identified lie in information, visual and branding design. Based on the requirements, I set up some metrics that I can measure:

I am able to see a decrease in bounce rate for “about us” and blog pages, yet I also see an increase in bounce rate for the homepage. This is pointing a direction for my next steps in this project.

Understand the Problems

Who are key stakeholders of the website?

Understanding who are we designing for is crucial - it helps me determine my design priorities, communicate ideas better, and understand the key use cases for the website.

By the time I started this project, the membership idea is just getting started. There were very few users I could reach out to. So I started interviewing with three internal members to get an idea of who the website is primarily targeting.

I used a stakeholder map to synthesize the interview results. I didn't use more traditional approaches such as persona and task analysis because I was designing for a new type of user that hasn't fully emerged yet.

What are the blockers that hinder membership adoption?

My second step as a designer is to evaluate the current experience. After a content audit and a heuristic evaluation, I identified key areas for usability testings: Register as a member, Donate, Find out organization mission, Find resources

Besides presenting specific usability issues to my client, I synthesized the problems and found three main themes - information architecture, branding and trust-building, and visual consistency.

Synthesizing the problems to higher-level themes allows me to broaden my solution space to enhance the site as a whole, as opposed to fixing individual smaller usability bugs.

How to strategize to redesign a 40-page website?

Clearly, I need to prioritize how to redesign a complex website. The content audit informs me that the design of some pages (i.e., the resource pages) require strong domain knowledge. In other words, they need more content strategy. Other pages, especially key pages in the user journey of membership adoption, require a closer examination of user experience and visual design.

In order to make content strategy and user experience go hand-in-hand, I consult in pages that require strong domain knowledge and take a lead in those focus on UX and visual.

Developing the solutions

Improve information architecture with card sorting

Doing card sorting with Trello is fun and affordable. To make good use of quantitative data, I used R to analyze the results. To communicate my findings, I created a dendrogram and proposed new architecture. My client quickly implemented my suggestion!

Experimenting with visual language to promote branding and trust

Not gonna lie - improving visual appealingness is tough. It took me many trials and errors to understand that visual design is not about translating "text" to "visual" but about translating "meaning" to "visual".

Final Design

A design system from 0 to 1

The original website has at least 6 different buttons. It uses only one font in the entire site, so sometimes it is hard to separate titles from paragraphs. The design system not only gives the site a more consistent yet engaging style, but also gives my client a handy tool to design new pages accoarding to the system.

Enhance informational design to promote trust building

Improve readability of blog pages

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

Evaluation

While I'm still observing quantitative data from google analytics, I ran small "5-second" tests to evaluate the website in terms of branding and visual appeal.

Here are the three main findings:

Reflections

Build a website that is "alive": consider future updates and design maintenance

Design is about trade-off and balancing

During the project, I made many trade-offs - between efficient and "fancy-ness", between user goals and organization goals, etc. The key lesson I learned is to keep trying and find a delicate balance at the end.

Next steps: Learn, build and test again

Based on the preliminary data I gathered, there's still room for improvement for all the pages. Take about us page, for example, a bounce rate of 60%, although is an improvement, still means that people are less willing to engage with the website. Could it because there are few interaction points? Is the UX copy still too hard for users to read? Or are we not providing the correct call-to-action to our users? These hypotheses can be tested with qualitative user testing.

The results of homepage is actually very interesting. Although I thought the new design significantly improved the User Experience, it is not inviting users to engage with it. This also calls for a closer examination of the first screen a user sees and a qualitative analysis to understand the "why" behind qualitative data.