By: Jason VanLue, Design Lead
It was the night before SuperConf 2011 in balmy South Beach when we first wrapped up our little side project, Code School. We were all squeezed into a rental house, working to get everything pushed before announcing the beta at the conference.
That was a year and a half ago. Our team was much smaller, and we were just happy to get something live and tangible. Over the next nine months or so, our vision for the product began to take shape. The more users would join, the more we would solidify features and tweak the platform and interface.
Moving into 2012, we pushed out a large update with several refinements to user accounts, course interfaces, and the main Code School platform. After juggling ongoing feature development, course creation, and larger platform iterations, we finally realized that in order to better serve our users and follow our vision, we needed to make a substantial overhaul to the platform.
And so, after many months of planning, sketching, user flow researching, wireframing, designing, committing, copywriting, and testing, I’m incredibly proud to announce Code School Version 3.
We’ve listed a few of the major updates below, along with the reasoning behind each modification:
1. Ease of Starting a Course
At Code School, we highly value our users and our content. Our old interface made it difficult for users to quickly start a course, and to therefore see the value in learning by doing. Because we have several free courses, and free first levels for most courses, we wanted to remove all barriers to free content.
In the redesign, users are now one click away from being immersed in a course interface. This also helps us showcase the branding and unique theme for each course. Now you’ll be able to try out our content, and dive into each experience.
2. A Simpler Sign Up
We provide our content through a subscription model—become a member of Code School and receive unlimited access to all of our past, present, and future content. But if you’re not yet a member, we still want you to experience what Code School has to offer.
In our old interface, users could sign up for a free Code School account, but it was no easy task to find the sign up page. We wanted to change that. Now, it’s incredibly easy to sign up for a free Code School account with the added bonus of social sign-in. Users also get a redesigned account dashboard, and have access to free courses and free levels.
3. Reason to Join, Reason to Stay
We value all of our users, but our members have a special place in our heart. In our old interface it was difficult to make sense of our enrollment features, why you’d want to join, and what’s involved in becoming a member. We completely redesigned our Enroll page, and built our enrollment form from the ground up. Now it’s easier than ever to find out about enrollment, and to become a member.
But wait, there’s more. Once you become a member, staying in school is a no brainer. We’ve rethought everything about user accounts so that each feature is intuitive and easy to use. You can get a snapshot of your progress, start and resume courses, and manage your entire Code School experience.
We’ve also restyled your Public Profile and renamed it so that now each user has a “Report Card." You can set your Report Card to be public, but new user Report Cards default to private. It’s up to you to determine how much you want to brag about your skills. Keep an eye on this, as we’ll be rolling out more features to the Report Card in coming months.
4. We’re Comfortable in our New Skin
There are a lot of changes under the hood that you might not notice right away. But one thing you’ll notice for sure is the new visual design of Code School. Since each course has a unique brand, theme, and style, we wanted to simplify the main Code School interface to highlight the individual courses. We wanted to create a simplified visual style that we can carry throughout the site, but to also have flexibility for future development.
The design is still uniquely Code School, but a little more subdued, and shall we say a bit more mature? It’s sort of like our upperclassman UI.
5. A Personal Touch
Code School is created, run, and developed by real people. Real developers, designers, copywriters, and project managers just like you. In addition to creating immersive experiences for each of our courses, we want to add a human element.
Our courses are developed and taught by the same people who built Code School, and who use these languages, frameworks, and skills daily. These are not just nebulous concepts taught by stuffy professors on soapboxes—these are relevant concepts and skills that are taught by folks who are in the trenches day in and day out. We think that matters.
In our new interface we’ve devoted more space to introducing you to the people behind Code School. Each course page includes pictures and bios for each of our professors, and now include teaching assistant roles for each person who’s helped out on the course. Feel free to send any of us a tweet, or chat with us at conferences—Code School really is a platform built by designers and developers FOR designers and developers.
That’s just a snapshot of the new upgrades in Code School V3. We’re excited that the new interface is built in a way that allows us to rapidly ship new features and updates in the future—so keep your eyes towards the front of the class; we’ve got some great things in the works.
I would be remiss if I didn’t talk about the amazing people behind this effort. The entire team at Envy Labs contributed, but there are a few specific people that deserve to be recognized. Hats off to Drew Barontini who carried more than his share of front-end development work with help from Nick Walsh and Dan Denney. Adam Rensel, Adam Fortuna, and Eric Allam had the unenviable task of making the new interface functional, and they did an amazing job.
And all of this wouldn’t be possible if it wasn’t for our users—we love all of you, and everything we do on Code School is motivated by the desire to make your experience easier, more enjoyable, and more fun. We hope you’re as excited about this as we are.