Codesmith Website Redesign
Case Study
My Role:
Website & Product Designer
Focus:
UI/UX strategy · Visual refresh · Website implementation
Team:
Director of Product and Growth, Illustrator, Copywriter, Developer, Stakeholders
Status:
Website & Product Designer
(Aug 2024 – Mar 2025)
Codesmith is a leading software engineering bootcamp, but when I joined, its website felt outdated and overly corporate. It highlighted career outcomes, but it lacked warmth, personality, and storytelling. Most of all, it missed the chance to reflect the diverse community and the real experience inside the program.
In a competitive bootcamp landscape, that disconnect risked losing prospective students. My role began as a contractor with a very different task: creating decks, books, social assets, flyers, and even a founder site after Codesmith’s brand refresh. Their new identity had fresh colors, custom illustrations, and a bold retro-futuristic vibe. I was simply meant to extend that system.
Problem
The old website felt static and corporate, disconnected from Codesmith’s warmth, community, and forward-thinking spirit. Students often struggled to find essentials like free resources, events, and clear information on programs. Instead of sparking curiosity about tech’s future, the site made navigation frustrating and left users uninspired.
Goal
Redesign the website to feel approachable, modern, and student-centered, while keeping trust and outcomes front and center. The new experience also needed to reflect the voices of all stakeholders, including students, instructors, alumni, and staff. It had to highlight The Codesmith Method, a framework built on three pillars: timeless pedagogy, frontier tech, and curated community.
Now… the full (and a little unexpected) story of how I redesigned Codesmith’s entire website
I joined Codesmith as a contractor right after they refreshed their brand identity, which introduced fresh colors, custom illustrations, and a bold retro-futuristic vibe across communication channels. My initial work was focused on creating slide decks, books, social media assets, flyers, and even their founder website.
The turning point came with a small design test that had no brief, no research, and no design system. Out of curiosity, I started experimenting with medium to high fidelity mockups for the website. I explored layouts, interactions, and ways to translate the new identity into digital form. What began as a playful exercise quickly changed everything. The team responded strongly to these concepts, and they soon became the foundation of a complete redesign. My role expanded to leading the visual transformation of Codesmith’s digital presence.
Proposals without a brief (a rough redesign of selected sections) you can see the seed of a lot of the finished proposals
Foundations and Research
Some foundations were already defined, such as the sitemap, typography, color palette, and product journey. Many other elements, including copy, illustrations, and overall design direction, were still in flux. We approached this with weekly check-ins, research, competitor analysis, and open brainstorming sessions. Every round of feedback pushed the design closer to what felt authentic and future ready.
Colors
Illustrations
Typographies
Wireframes
I produced multiple wireframes for each section of every page with a focus on speed and clarity. In each session I presented options, gathered input, and refined them further. This rhythm built momentum and kept the process collaborative and engaging.
High Fidelity Wireframes
Once layouts were approved, I advanced into high fidelity wireframes, weaving in the brand’s colors, typography, and illustrations. This step gave the site a distinct personality and allowed the team to imagine how the final product would feel.
Prototyping and Handoff
To bring the experience to life, I created interactive prototypes in Figma. This allowed the team to test flows, animations, and hover states before development. I carefully documented every component, state, and layout, creating a design system that ensured a smooth transition to engineering. Annotated prototypes eliminated ambiguity and helped the developers build with confidence.
Reflection
This project showed me how small experiments can grow into transformative results. What began as a simple contractor assignment evolved into the full redesign of Codesmith’s website. Collaboration was at the core of this success. Feedback from students, instructors, and staff shaped the final design into something larger than any individual contribution.
Although I would have loved more time to measure impact with data, I am proud of how the new site captures Codesmith’s energy, warmth, and community while keeping outcomes visible and trustworthy. The lesson I carry forward from this project is simple: keep refining, keep collaborating, and never underestimate the power of curiosity to spark change.