Penn Spark Redesign

Leading a full redesign from design to deployment

Penn Spark is Penn's student-run community of designers and developers, where teams build software together, from passion projects to client work for real organizations and non-profits. As project lead for the website redesign, the work spanned both ends of the stack: leading a team through a Figma-first design process, then rebuilding the site from the ground up in code.

The existing site ran on Gatsby and hadn't been meaningfully updated in years: inconsistent branding, outdated content, slow performance, and a codebase that was hard for non-technical members to maintain. The redesign was a chance to fix all of it at once.

A public face that didn't reflect the club's quality

The site is the first thing potential members, clients, and partners see, and it didn't match the quality of the club's actual work. Four issues needed fixing:

• Stale visual design: dated, with inconsistent brand colors, type, and layout across pages.
• Poor information architecture: hard to grasp what the club does, who's on the team, or how to get involved.
• Outdated Gatsby stack: slow to build, hard to update, no shared component system or structured content.
• No case-study content: past project work had no showcase; the club's impact was invisible.

Design-first, then build

It started in Figma, not code. Wireframes set the structure and hierarchy across the key pages (Home, About, Projects, Join, Contact), with a component system built alongside: typography, spacing, color tokens, and reusable patterns like cards, nav, and CTA blocks.

Once the team reviewed and approved the hi-fi designs, development moved to Next.js + React, a deliberate choice: better performance than Gatsby for a marketing site, and a component model that maps directly to the Figma structure. Tailwind kept styling fast and consistent; shared components (NavBar, ProjectCard, TeamMember, Footer) were built once and reused. Case studies were structured as data files so future members can add projects without touching component code.

A faster, more cohesive site the club can maintain

The redesigned pennspark.org launched at the end of Fall 2025. It loads significantly faster, has a consistent identity across every page, and finally surfaces the club's project work through dedicated case-study pages.

Because content is structured as data, future project leads add case studies, team members, and events by editing data files, not components. Both the Figma design system and the code component library are documented and handed off. Leading this end to end, from research and wireframes through design system and deployment, was one of the most complete product experiences in my work so far.