La tech4good's splash image on desktop and mobile mockup

LA Tech4Good: Website Redesign

Role: UX Designer
Duration: In Progress
Team: Angel, UX Researcher | Karen, Organization Head
Deliverables: IA Audit, Site Redesign, Design System
Detailed Case Study Here

Contents

LA Tech4Good is a nonprofit organization at the intersection of social impact and technology. We amplify voices and data initiatives within the greater Los Angeles area to support and inspire equitable change.

Roadmap

One of the very first tasks we had on the agenda before stepping into anything research related was aligning on work expectations and teamwork. Very quickly, we ran into some resistance from our stakeholder on our first iteration of the roadmap.

a little something like this...

picture of initial roadmap

The main issue was that the development of the new site rested on the belief that Angel and I would stick around until the end. As fairly new volunteers, we had not yet built up that level of trust.

...to this!

picture of revised roadmap

We formed a middle-ground to develop bits and pieces of the site at a time. This way, we had shorter project timelines and the overall project could be picked up easily by another volunteer should life happen to us.

Information Architecture

Right when I joined the team, Angel had already been finishing up a heuristic analysis of the site. She ran a couple interviews with people in the LA Tech4Good team and reviewed her research with me.

picture of old information architecture
The original site architecture.

There were multiple heuristic violated, but the main ones that pointed us to revisit this site map were an inconsistent match between the system and real life, a lack of aesthetics and design that supported use of the site, and difficulty in discovering help and documentation.

Basically, the site was lacking a lot of consistency and clarity.

The most important goal for any nonprofit site is to be clear about their mission. LA Tech4Good was a bit all over the place. So we decided to start our remodeling from the very foundation: the structure of the site.

But First, Some Good Ol' Research!

To dive deeper into site visitors' mental models, I decided to run a card sort. I designed it as a hybrid to understand more of what people expected while keeping the test 100% remote and independent.

# of Participants: 15
Type: Hybrid Card Sort
Audience: Folks unfamiliar with LA Tech4Good
Goal: Understand visitor mental models and expectations when visiting a new site
picture of UX Tweak's user interface for users taking the card sort quiz
User Interface for the card sort by UXTweak.

After we reached our respondent limit on our free plan, we got down and dirty with analysis. UX Tweak gives breakdowns of your responses, but since our tests were split up into two groups (perks of free plan), we had to create our own workarounds.

We both had very different ways of looking at data. My methods were qualitative in nature since that has been my main experience thus far and my insights were action based. Angel had a far more quantitative standpoint. (Not going to lie, I reached peak confusion more than once when she pulled out the math on spreadsheets). Our efforts came together to detail insights that formed our suggested changes to the site architecture.

1. Ambiguity of Special Words

picture of data for point one: ambiguity of special words. reads: 87% grouped 'homelessness', 'climate change', 'immigrations&refugees' labels together. 49% correctly placed individual labels 'homelessness', 'climate change', 'immigration&refugees' under "initiatives". 40% could not group or made new groupings for labels 'homelessness', 'climate change', 'immigration&refugees'.

Insight: Visitors were able to categorize labels around "initiatives", but were unclear on what the category meant.

Image highlighting changes on the sitemap for point one: ambiguity of special words.
Solution: We changed the label "initiatives" to "Our Social Causes", a more universal and self-explanatory phrase.

2. Stick to Simple Meanings & Language

picture of data for point two: stick to simple meanings and language. reads: 80% grouped workshops & data equity workshops together. 63% categorized 'data equity workshops' under "events".

Insight: Visitors do not understand special meaning you assign to typical words.

Image highlighting changes on the sitemap for point two: stick to simple meanings and languages
Solution: We moved "Data Equity Workshops" with the rest of the workshops under "Events".

3. Make a Clear Call-to-Action

picture of data for point three: make a clear call to action. reads: 63% categorized individuals labels 'sponsor', 'subscribe', 'donate', 'volunteer' under "contribute". 47% grouped labels 'sponsor', 'subscribe', 'donate', 'volunteer' together. Additional interview data concurred on a lack of context on "Sponsor" and "Donate" pages, which led to confusion about page purpose.

Insight: Visitors could associate all labels as a form of contribution, but were unsure of the relationship among the labels.

Image highlighting changes on the sitemap for point three: make a clear call to action.
Solution: Provided separation amongst different kinds of contribution by targeting specific audiences.

The new site map is a live document in Figma, so changes may occur as we continue to test and iterate on the site.

picture of la tech4good's new information architecture for the site.
New and improved information architecture of the site.

Interested in reading more? Look into our detailed case study here ↗