Net Impact UW
A sustainability chapter with an ambitious mission and a website that didn't match it. I redesigned their site to convert visitors into members & survive a full leadership turnover.
MY Role
UX/UI Designer
Duration
4 months, Winter 2024
SCOPE
Web Design
Visual Design
Rapid Prototyping
User Experience
Figma
TOOLS
Figma
Illustrator
TEAM
Khadija Dial – Designer
Jasmine Kwon – PM
Cobi Stancik – Designer
Tiffany Yan – Designer
Bell Chen – Engineer
Jason Zhao – Engineer
FINAL REDESIGN
01 — the problem
A site that made the chapter look smaller than it is.
Net Impact UW is part of a global nonprofit network empowering students to drive social and environmental change through business. The mission is genuinely compelling however, the website wasn't doing it any favors.
The existing site had no clear structure. Members couldn't find events, prospective members couldn't understand what the chapter actually did or how to get involved, and the design was inconsistent, visually flat & didn't reflect the professional, sustainability-focused organization the chapter had become.
PROBLEM 1
No information hierarchy
Members couldn't locate events, initiatives, or membership info. Everything competed for the same visual weight.
PROBLEM 2
Branding that undersold that chapter
The existing design felt dated and generic — out of step with the chapter's professional identity and its goal of attracting both new members and external partnerships.
ORIGINIAL SITE
Original homepage: no clear hierarchy, weak CTAs, no visual connection to the chapter's sustainability mission. The design made a busy organization look sparse.
02 - THE DESIGN CHALLENGE
Designing for the next president, not just the current one.
Most of the interesting design problems here weren't visual, but structural. We had three constraints that shaped every decision in our redesign.
Annual Leadership Turnover
As he chapter's executive board changes every year, the site needed to be designed so that a new president with no design experience could update it without breaking anything.
-> no complex nested structures, clear content zones, and a maintenance doc for handoff.
Recruiting is the Primary Job
The chapter recruits continuously throughout the year. The site needed to function as a conversion surface — not just an information archive.
-> membership sign-up on the landing page, not buried in a subpage.
Scale-first navigation
The chapter had years of past events that would overwhelm a standard dropdown. The architecture had to work now and still work when the content doubled.
-> consolidating past events into a dedicated section rather than the nav.
DESIGN Opportunity
How might we build a site that converts visitors into members, works for non-designers to maintain, and scales as the chapter grows, without sacrificing clarity?
SITE ARCHITECTURE
Past events were initially in a single dropdown which would have overwhelmed users as the archive grew. We consolidated them into a dedicated "Past Events" section — keeping the nav clean and the history accessible.
3 DECISIONS THAT SHAPED THE FINAL SITE
Bento box layout for the information hub
Members needed to find events, initiatives, and membership info at a glance. A standard list layout created false equality between high and low-priority content
→ Bento grid: different card sizes signal different content weights. Key actions are visually dominant. Everything scannable in one viewport.
Membership sign-up moved to the landing page
Prospective members had to navigate to a separate sign-up page. Each extra step is a drop-off point and recruiting was the site's primary job.
→ Sign-up form integrated directly on the homepage. Zero redirects. Mission statement and membership in the same scroll.
Hierarchical nav with scalable dropdown
The original flat nav would break as new content was added. Since the chapter adds events constantly, we needed something more long-term.
→ Dropdown structure organized by content type, not chronology. New events slot in without restructuring the nav.
04 — Visual design
Sustainability-forward, professionally grounded.
Net Impact has an established brand of green and blue hues and a clear connection to the environmental mission. I refined that existing branding with tighter typographic hierarchy, more deliberate use of color as function, and a visual pattern system that gives the site texture without noise.
Visual pattern system: organic leaf-form motifs used as background texture and section dividers. Keeps the sustainability reference without it becoming a cliché.
Color palette: Ocean Base (primary accent — content cards, buttons, backgrounds) · Teal Blue (CTAs and key text). Both map to the chapter's sustainability mission and pass WCAG contrast on white.
05 – final designs
Before & after, with intent.
Every redesigned page has a clear job. Here's how the three main surfaces changed and why.
Homepage — convert visitors into members
BEFORE
ORIGINAL HOMEPAGE
Flat layout, no hierarchy, sign-up buried. Visiting members couldn't tell what the chapter did or how to join.
AFTER
REDEISIGNED HOMEPAGE
Key change: Membership sign-up integrated directly on the landing page. Mission statement and join CTA in the same scroll — zero navigation required to convert.
Events tab — designed to scale
BEFORE
ORIGINAL EVENTS PAGE
Linear list of events with no grouping. As the archive grew, this would become unnavigable.
AFTER
REDEISIGNED EVENTS PAGE
Key change: Bento grid surfaces upcoming events and key initiatives at a glance. Past events moved to a dedicated archive keeping the main view uncluttered as the chapter grows.
AFTER
REDEISIGNED ABOUT PAGE
Key information broken into scannable sections with a hero image, clear text hierarchy, and the chapter's color system applied to create visual breathing room.
AFTER
NEW CONTACT PAGE
Intentionally minimal to highlight social links and newsletter subscribtion
AFTER
NEW CONSULTING PAGE
Built for a future chapter initiative! designed to exist now without confusing current members.
06 — Collaboration
This was my first project working closely with a development team. The dynamic changed how I think about design decisions. It didnt just stop at: "does this look right" but "can this be built in the time we have, and what breaks if it isn't?"
Design → Engineering handoff
-> Annotated component specs for hover states, responsive breakpoints, and spacing
-> Weekly syncs to flag design decisions that would create scope creep
Client Communication
-> Bi-weekly meetings with the chapter president to present and test assumptions
-> Learned to frame design rationale in terms of the client's goals — not design principles
-> Produced a maintenance guide for the incoming executive board
Every time I had to explain a design decision to an engineer who was about to build it, I found a decision I hadn't fully thought through. The dev collaboration made the design better.
07 – REFLECTION
What it means to design for someone who isn't in the room.
The most interesting constraint in this project was the one that felt the most operational: the chapter president who commissioned this redesign won't be running the site in 12 months. I was designing for their successor, who we'd never meet.
That shifted how I thought about every information architecture decision. Complexity isn't just a UX problem for members, it's a maintenance problem for the volunteer who has to update it at midnight before recruitment season.
WHAT WORKED
-> The annual turnover constraint shaped the architecture in ways that made it genuinely more usable
-> Moving the membership sign-up to the landing page. This was a simple structural change that showed direct impact
-> The bento grid gave the chapter flexibility to update content without redesigning each time
-> Working with engineers made the final implementation cleaner than a solo project could have been
WHAT I'D CHANGE
-> We never tested with actual prospective members. All feedback came from the existing chapter leadership
-> The consulting page was built speculatively for a future initiative that hadn't launched. This is something I'd scope out better next time
-> I'd push for google analytics integration from the start to measure recruitment conversion, not just visual quality
-> A full usability test before launch would have validated the navigation decisions with real users