Code School
The Elements of Web Design is a Code School course on UX aimed at teaching developers the fundamentals of user-centered design.
Project Goals
To create a new design course supplementing Code School’s existing Fundamentals of Design course. Code School had gotten a lot of traction with the Fundamentals of Design content and wanted to build on that success. We decided to create something focused on user-centered design that spoke to developers.
Levels
Videos
Course Challenges
Project Strategy
The strategy was straightforward. Code School has a proven formula for creating course content, and we tapped into that formula to create something to help developers create products focused on users’ needs.
Strategy
Kick-off Meeting
Course Outline
Framing Mechanism
Design
Course Theming
Content Design
Slide Creation
Challenge Design
Production
Video Shoot
Challenge Development
Course Promotion
“I liked this course very much! It gave me new ideas for web design and development. Great teacher.”Kulamburas
Code School Student
The Kick-Off
Meeting
The kick-off meeting is a fun first step Code School takes with all their courses. We convened with designers, developers, and the marketing team to identify a theme for the course. We pitched a lot of ideas — from a retro oil can look to a play off Mario Kart. We ultimately decided on a retro science theme. The style was fun and had a loose connection to the UX process.
Creating the
Course Outline
When creating the outline, I started by listing out all areas of UX I wanted to cover — everything from user interviews and journey maps to task-based analysis. When I brought my outline to Gregg Pollock, the founder of Code School, he said it was great but too in-depth. This was supposed to be a UX primer course for developers. “Of course,” I thought, after going back and reflecting on my own UX skills. I then wrote a new outline that made sense for a developer who may be working on a side project and wants to take basic steps towards creating a better product for their end user. After a few rounds of revisions and sharing the outline with developers in the office, we landed on the final version.
Ideation
As we worked through the content and challenges, we ideated on what would have the most impact for our users. We explored simple tips and tricks around experience design as well as techniques that could be carried out by one person.
We also wanted to make sure the course played well with others. We knew this was only meant to be a primer course, and we already had a great design course on the platform. Making sure these courses fit together was important.
The Framing
Mechanism
Code School always does a terrific job with their framing mechanisms, and the students love them. The Elements of Web Design course was no different. To continue building on our science theme, we created a fictitious blog called ChemCraft. This was used as a tool to explain concepts in the course like navigation, information architecture, and mobile best practices.
The
Course Art
When I got the course art back from graphic designer Cher Cloude, I was blown away. It was absolutely amazing. The incredible design team at Code School really brings the courses and platform to life with beautiful theme art. Below are some of the detailed backgrounds used for marketing, headers, and challenges. Cher also created the theme for my keynote slides as well as the course badges.
*See more of Cher Cloudes work here.
Lesson One:
User Discovery
In lesson one we focused on user discovery. I started by encouraging learners to validate an idea before developing a product. I walked through suggestions for basic persona development as well as for sketching and testing ideas with possible users even if you’re not a designer.
Lesson Two:
Navigating Sites
Lesson two focused on navigation and basic information architecture. I explained common IA patterns found on the web as well as how people typically search sites. I also dove into card sorting techniques and common navigation structures for websites.
Lesson Three:
Usability Design
The usability lesson focused on three key areas of web design: forms, home page design, and pricing pages. These are three common areas that require user conversion and usability best practices. Topics included error feedback, confirmation messaging, and choice paralysis, among others.
Lesson Four:
Mobile Best Practices
Lesson four focused on mobile sites. After going through some best practices around web and web content, we felt it was best to have a lesson dedicated to addressing the unique challenges of creating mobile experiences. We covered topics like wayfinding, icon best practices, and user onboarding.
Below are a handful of screenshots from the course videos. Shooting the videos was a lot of fun, and having Gregg there to offer tips and words of encouragement was helpful. I was quite surprised by how vulnerable it feels to look down the barrel of a camera.
Prepping for
the Launch
After all the hard work from so many talented people, it was nearly time to launch the course. Gregg wrote some lyrics and had a songwriter create a jingle, and we had a course intro video created. I put together some post-course content and a course teaser video, and we were ready to go live! Below are videos of the course intro and course teaser.
Final
Thoughts
Creating the course was far more work than I imagined. In fact, it took nine months from start to finish. One of my biggest takeaways was that I love learning and I absolutely love teaching. After the course launched, I started a new meetup group to help tech startups learn about building and scaling companies from successful entrepreneurs in our community. I also became a much more active mentor for students and young professionals.
The Code School site has been redirected to Pluralsight post the acquisition. The Code School courses are currently unavailable at this time. Once the courses are ported to the Pluralsight platform I will post the new links here.