codepen.seesparkbox.comRedesigning CodePen | Sparkbox + CodePen

CodePen CodePen plus Sparkbox Logo Redesign In early 2015, Sparkbox and CodePen started working together to redesign CodePen. Since its launch nearly three years ago, CodePen had only undergone small design iterations and evolutions. It was time to reconsider things with a fresh outlook and process. Follow along as we document the redesign process. 2015 Feb Mar Apr May June July August September October February 2015 How It All Got Started Sparkbox and CodePen have had many awesome conversations over the years. We’ve laughed together at conferences, and Sparkboxers are huge fans of CodePen as a product. After several conversations, the natural evolution of combining forces for an amazing redesign made sense. And thus, we began tackling an extremely fun design challenge. Research & More Research We began the project with a thorough research phase to gain a complete understanding of CodePen. There are so many power-user features we weren’t even aware of, and it is quite a robust product that we needed to gain perspective on. As we both work in the same industry and many of CodePen’s users are our peers, we wanted to make sure we included as much input from the community as we could. We knew we had to dig deep in research. Stakeholder Interviews It was important to include stakeholder input, so we knew where to focus our efforts and discussions when we talked to users. The very first thing we did was just get to know the guys at CodePen a little better. We sat down with them (well, we sat down at our respective monitors) to see what they were hoping to get out of our engagement. This helped us to not only know where their heads were at for their future, but it also showed us quite varied perspectives on what CodePen means to them. We used Google Hangouts to talk with the team (a free and easy way to talk with anyone face-to-face). When talking to the three of them, there were definitely some common themes emerging. This was exactly what we were after—a jumping off point. Knowing their priorities directly influenced the scripts we used in our user interviews. Here are some of their takeaways when asked what would make this project successful : Tim: Important people in community expressing positivity about the site. Having a design language. Chris: A design we’re excited about. Users associating CodePen with good design/UX. Alex: If it becomes more valuable to put your work on CodePen because it is highly visible—resulting in users finding better work/becoming more influential. Increasing social interaction and participation in the community. User Research To get the most out of user research, we needed to first carefully plan exactly what we hoped to get out of it. We knew we wanted to get _some_ opinions and feedback about the product, but individual interviews weren’t the place for that. We decided we needed to set very specific goals and purposes for three different kinds of research: user survey, user interview, and ethnographic observations. User Survey For feedback, we knew the numbers were our biggest asset, so we sent out a survey so that we could pull common themes from 500 people, instead of specific cases from just one person. The only caveat that we kept in mind was the proportion of Pro users who responded to the survey was higher than site average, so we considered the feedback to be more from that user base. View the Survey • View the Results User Interviews For our one-on-one interviews, we prepared a script of questions based on three main types of users (browsers, creators, and teachers). We interviewed 10 users from all over the world. Each interview was 15-20 minutes, conducted over Skype or Google Hangouts. Our user interviews were mostly to get to know the actual people, so we could learn how CodePen fits into their lives. We tried to steer these conversations away from specific feedback and more about their current usage. This created a sense of empathy for us, and left an impression on us as we moved into design decisions. Here’s an example interview: Interview with Nick Hehr on February 18, 2015 Ethnographic Observation We also knew we wanted to see CodePen in action. There’s so much nuance to the interface, we wanted to get a holistic understanding of what our users actually do on the site. We knew we had to observe people (outside of Sparkbox) using it. We met with a few local users to actually watch them use CodePen. This type of research was intended for us to watch for weird workarounds for certain tasks. We also saw what kind of weird stuff might happen around our users. Being in the users’ own environments took our insight to new levels of understanding and helped us identify user experience issues we may have missed without this type of hands-on research. These controls were hidden by this users second monitor. February Resources Stakeholder Interview Script User Survey User Survey Results User Interview Script March 2015 We gathered the information we needed to get and felt good about the themes we extracted from our research. We got everyone together to have a kickoff meeting to discuss our findings and prioritize our efforts. We set out to leave the kickoff meeting being equipped to hit the ground running (or rather, designing). Everything we gathered up until this point hadn’t been shared with CodePen, so we created an agenda that let us explain everything and our recommendations moving forward. We knew it was important to have the kickoff not just be us talking at the CodePen crew, so we came up with several design exercises to break up the day and allow everyone to have a say in what we designed. We spent a lot of time discussing all of our findings (and what surprised them) and talked about what was important and where to focus. The last bit of the day was spent with everyone sketching their ideal homepage, after knowing what all we knew now about our users. Really exciting day spent on the @CodePen redesign kickoff! pic.twitter.com/csxv3dItt5 — Katie Kovalcin (@katiekovalcin) March 2, 2015 We created user personas that represented typical CodePen users that emerged from our research. Each user was a fully fleshed out person complete with a backstory, job, needs, and typical behaviors. Here’s a taste of some of them: PERSONA 1: Trey Watson The Connected Helper Job Title: Freelance developer + college teacher Location: Leeds, England "It would be nice if it was more of a social network, rather than just faceless pens." Trey is a freelance developer who also teaches. He’s very connected both in his hometown and across the internet. He loves to help people, whether they’re students in his classroom or strangers on the internet. PERSONA 2: Emma Mason The Boundary Pusher Job Title: Full Stack Developer Location: Boston, MA "Halt new features and fine tune everything that’s there. Get that solid—you’re already light years ahead of the competition." Emma is a full stack developer on a product team in Boston. She wears many hats at her job, covering frontend design thinking to backend integration. She uses CodePen frequently both at work and at home. Everyone got a packet, which contained the day’s agenda and kept everyone on track. Some of the most interesting sketch results came from an excercise where we had everyone sketch out an idea for the homepage. No holds barred. Lots of interesting ideas came up during sketching. Those of us who tend to be more conservative with ideas were coming up with very out-there ideas and vice versa. The ideas were really flowing—proof this was a very worthwhile excercise. Even as we’ve moved forward with the design process, these sketches are referenced. After our kickoff meeting, we planned how to best begin tackling the design challenges. So much of CodePen is intertwined with other aspects of CodePen, so figuring out ways to break up our efforts while still being cognizant of the relationships between features was important. Wireframes While we typically don’t like to start with a...