Skip to main content

Case Study: Redesigning CodePen

04-13-15 Melissa Taylor

It’s a chance to find new ways to solve problems better. It’s a chance to share our process. It’s a chance to build a better playground for inspiration, education, and sharing. Sparkbox is redesigning CodePen, and you get to watch us every step of the way.

At Sparkbox, we love making the web a better place. Sometimes, we’re lucky enough to get to work on projects that share our love for giving back to the web design and development community. That’s why we jumped at the chance to work with CodePen on redesigning their site and product. Most of our team members are already CodePen users, and we love their mission of helping the web community by creating a playground for inspiration, education, and sharing.

In February of this year, we officially began the redesign process with in-depth research with both CodePen founders and its users. Not only did this give us an opportunity to discover ways to improve the CodePen product, but it also was a great project for Sparkbox to experiment with our own design process. Since we expanded our design team late last year (to include the talented Katie Kovalcin), we knew this was a perfect opportunity to explore new techniques and steps in our current design process.

Most importantly, we wanted to open up our process to the broader community and share what we’re learning and how we’ve approached the project. To do this, we’ve set up a dedicated page where anyone can follow along, view our resources and questionnaires, and see the design pieces and prototypes as they are created.

Join Us in the Process

This project is still in the works, but we’d love for anyone who is interested to join our progress on the open design process. Here are some ways to connect with us:

Follow Along with the Redesign

Visit the CodePen redesign microsite for updates, resources, questionnaires, and other tools we’ve used to refine our design process. We’ll also be writing Foundry articles that share our reflections on various stages in the process.

Attend Our Design Workshops

Jeremy & Katie have created a design workshop on designing for today’s modern, responsive websites. Check out the dates and locations at the Build Right Design Workshop page.

What’s Next

Stay tuned to the project site for more updates, and follow the Sparkbox and CodePen Twitter handles for more in-the-moment action. And don’t just follow along—share your thoughts. We really do want your feedback on the process—this is a chance for us all to learn from each other. And to hold true to the CodePen way, we’ll be doing our best to make sure we “demo—or it didn’t happen.”

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development