JumboCode Website Redesign

Jul 2024 - Feb 2025 · Shipped

JumboCode website redesign 1 JumboCode website redesign 2

CONTEXT

Led the design of JumboCode's new club website

I oversaw 12 UX designers creating web apps for Boston non-profits and led the end-to-end site redesign, increasing student applications by 35%.

JumboCode is a student-run digital agency at Tufts University that builds free software for nonprofits, with over 175 annual members and 75 shipped web apps. The old club website didn’t reflect JumboCode’s work quality or effectively attract prospective students and non-profits so I initiated a redesign and built the new site alongside fellow board members.

Role

Head of Design

Team

Product Manager
UX Designers (2)
Developers (5)

The new site highlights JumboCode's impact and makes it easy to get involved

Increase applications icon

Increased student applications by 35%

Increase applications icon

Created and documented the first design system

Increase applications icon

Implemented 15 new case studies, 8 testimonials, and 150 member photos

Before: lacks key details and social proof

Old JumboCode website

After: informs and encourages applications

New JumboCode website

PROBLEM

The old site limited JumboCode’s ability to grow

There wasn’t enough information about what the club did, how to get involved, or outcomes from past projects. JumboCode needs high interest from Tufts students and non-profits to sustain 12 annual web app projects and over 175 members, yet the club website was unfinished.

Old project showcase
Old Project Showcase
Thumbs down icon

Each project only showed a title and short blurb, leaving out goals, outcomes, and final deliverables

Thumbs down icon

Without UI screenshots, projects felt incomplete and failed to showcase web app quality

Old apply page
Old Apply Page
Thumbs down icon

Application process was unclear and scattered across multiple pages

Thumbs down icon

Lorem ipsum text signaled an unfinished site, making the club look less professional

GOAL

Build a new platform to showcase the club's work and make applying easy

We focused on adding social proof and specific details about our annual projects to encourage applications. It was also important to build something club members could be proud of.

How might we better communicate JumboCode's impact to encourage more students and nonprofits to apply?

SOLUTION

We shipped a new site to highlight annual projects and the application process

The updated platform will support JumboCode's mission to create free software for Boston non-profits by drawing more members and clients. I led the redesign from end-to-end and created the first documented design system, supporting developers through sprints and contributing to a 35% increase in student applications.

Check out the full site here!

01 - Homepage

Making our mission clear from the first scroll

A modern platform with 4.5x more content and refreshed branding that clearly explains our mission and gives visitors the context to understand our work.

02 - Project Page

Showcasing projects with proof of impact

A selection of projects that tell complete stories through goals, outcomes, and final UI screens, building credibility and trust with nonprofits.

03 - Apply Page

Streamlining applications for students and nonprofits

An application flow with clear roles and timelines to simplify applying and drive a 35% increase in student applications.

PROCESS

Research

Users wanted clarity on what JumboCode actually does

We spoke with students, nonprofit clients, and club members to understand what information was missing and what would have helped them when they first discovered the club. Later, we validated our near-final designs through informal usability tests, pulling key quotes and insights.

Tufts Sophomore

"I couldn't really tell what JumboCode did or how I was supposed to join"

JumboCode PM

"The site felt so old and incomplete that I didn't even want to show it to people"

Nonprofit Client

"The project page made me unsure about what the final work would look like"

Other university clubs highlighted gaps in our content

We analyzed peer organizations like Blueprint and Commit the Change, borrowing effective patterns around structure, impact metrics, and community storytelling to inform our own site direction.

Blueprint, a UC Berkeley digital agency
Blueprint, a UC Berkeley digital agency
Target icon

Mission first hero with one clear line that orients visitors and drives action

Compass icon

Clear navigation and consistent page patterns drives user discovery and builds trust

Atlas Digital, a student consulting org at UMichigan
Commit the Change, a UC Irvine tech consulting org
Arrow right icon

Speaks to nonprofits directly and highlights the next step, lowering friction to reach out

File text icon

Proof of work lives in a PDF portfolio, easy to share but difficult to scan for outcomes

Prototypes

We restructured the site around a clear information architecture

The old website buried critical details. I created a new content hierarchy to ensure prospective students and nonprofits could easily find what they needed.

Homepage prototype

Home Page

Projects page prototype

Projects Page

About page prototype

About Page

Apply page prototype

Apply Page

Iteration revealed what didn’t work (and why)

Through testing, many early designs were set aside. Below is a 'graveyard' of unused home and about page sections showcasing some of our design explorations.

Iteration 7
Iteration 8
Iteration 1
Iteration 3
Iteration 6
Iteration 2
Iteration 4
Iteration 5

Design

We chose a design direction that balanced visuals with clarity

After rounds of iteration, we landed on a design that communicated JumboCode's mission clearly while also showcasing its people and impact in a more engaging way.

Before

Old JumboCode website

After

New JumboCode website

A design system ensured smooth handoff and lasting impact

I built JumboCode's first design system and created a dedicated Figma file for the club. This streamlined developer handoff and left future members with a structured foundation to build on.

Figma structure diagram
Figma file structure

35%

Increase in student applications
(2023 vs 2024)

4.5x

Growth in case study content
(old site vs new)

1

Design system for handoff
(no prior documentation)