Sustainable Innovation Network

A brand and a live website we built from scratch for a student sustainability organization, where I got to both design it and code it.

UI and UX designer, and web developer

A design team and a dev team, and I was on both

Figma, HTML, CSS, JavaScript, Git, Netlify

Brand identity and web development

Visit the live site
Sustainable Innovation Network brand and website

A brand starting from nothing

The Sustainable Innovation Network needed a whole brand from the ground up: a logo, a brand book and a website, so people would actually remember them.

The hard part was making sure everything looked and sounded like their values, spoke to the right people, and stayed consistent everywhere they show up. It was a really cool chance to build the foundation they would grow from.

01Logo and identityThe mark, colors and type
02Brand bookHow to use all of it, consistently
03Website designFrom sitemap to final screens
04DevelopmentCoded and deployed live on Netlify

Starting with research and the client.

We started by looking at what other organizations were doing and meeting with the client to get on the same page about their vision, values and goals. From there, we brainstormed logo ideas and put together the sitemap and moodboard.

Competitive analysis

Four other Northeastern orgs we looked at, what they do well, and what we took from each.

WISE

Does well: every team has its own signature color that stays the same on the website and Instagram, so it feels quirky, fun and approachable, almost like a scrapbook.

We took: a broad but coordinated palette, and one symbol used across everything.

REV

Does well: a really consistent black and white look, and a funny voice made for college students (their pitch workshop was literally called a “Rizz workshop”).

We took: the witty voice, but not the look. It can feel exclusive and intimidating, which is the opposite of what SIN wants.

Generate

Does well: bold color coding that stays consistent across their whole brand and website.

We took: using color on purpose, so every part of the brand feels connected.

NU Impact

Does well: a strong, simple logo and super consistent Instagram templates.

We took: a lesson. It’s more finance focused and the brand doesn’t have much personality, so there was a gap for something warmer.

What that meant for SIN

01Colorful, but coordinatedA friendly palette instead of serious black and white.
02Simple, organic shapesLess intimidating, which led to our sprout, tree and root logo sketches.
03A Gen Z voiceWitty and approachable, so everyone feels welcome.
04One symbolUsed everywhere, so people recognize SIN right away.
Moodboard, sitemap and logo sketches
Our moodboard, sitemap and logo sketches. The sprouts, trees and roots were all about SIN being a network that grows.

Lots of crits and lots of rounds.

Design critiques really shaped where this went. We kept iterating on the wireframes and refining the brand book with feedback from both our team and the client, before moving into hi fi and development.

Then I got to build it

I was on both the design team and the dev team, so after helping design the site, I got to help code it too, using HTML, CSS and JavaScript, with Git to work together and Netlify to put it live.

The live site
Visit the live site

Who made it

Project lead
  • Albee Mote
Design team
  • Xin Li
  • Rachel Chen (me)
  • Vanessa Balin
  • Gabrielle Schwarz
  • Madison Lebiedzinski
  • Grace Uecker
Dev team
  • Yuni Park
  • Rachel Chen (me)
  • Maddie Lebiedzinski
  • Heidi Eren
Next project Boozy Treats