Project-based Learning & the Techdegree Program

As the sole designer on the Treehouse Career Program, I had control over the entire design process, working with a small team of two developers and a program manager specializing in career coaching. In interviewing close to a dozen potential applicants, I saw a unique opportunity to add project-based learning to improve the customer's experience and portfolio for potential employers. The program was so successful in its initial run that it was expanded into the Techdegree program, becoming the flagship product promoted at Treehouse for the next several years.

Problem

The Treehouse Career Program was an existing program when I joined the team, but it still lacked helping students develop fundamental job skills to help them get hired. Through auditing and talking with students, I identified that Treehouse students still lacked real-world skills and did not have a portfolio of work to show they were capable of the skills they knew. This problem could be solved by directing students to build projects, at first on their own, to gain problem-solving skills, and then with teams, to gain skills in working in a team dynamic.

Process

First Iteration: Sitemaps, User flows, and Research
In-browser Design: Code-first process
Second iteration: Illustration and refinement
Project reviews: Structured collaboration between students

Treehouse Techdegrees is an in-depth program aimed at getting students skills to land jobs in the tech industry. Over the course of the program, students complete 12 peer-reviewed projects to create a polished portfolio.

I concepted, designed, and tested a project-based learning platform for the career program and then later merged this work together with IDE work syncing tools and an exam system to complete the Techdegree program.

I started the process by creating user flows for how a student would typically navigate through the projects portion of the career program. After that, wireframes are usually created to win over key decision makers and help them understand the experience without getting influenced by the design.

However, the key decision makers were already very familiar with the look and feel of our app. Since we already had a well-defined set of styles to use throughout the Treehouse app, I choose to prototype most all of my designs in code for quicker iterations. This helped me working with the developers on my team and to get ideas tested sooner rather than relying on assumptions.

First Iteration

Sitemaps, User flows, and Research

I started out by designing a userflow to figure out how our students would complete the projects. These userflows documented both the entire career program and also the project learning portion. They helped inform business decisions on how to expand and redirect this program to become Treehouse Techdegrees. I advocated for building out the project-based learning system because my user research conducted with students found projects to be the fastest way to comprehend and grow new skills. Project-based learning & the Techdegree program

In-browser Design

Code-first process

Project-based learning & the Techdegree program

Second iteration

Project reviews

Structured collaboration between students

From there, I began mockup up the screens in code using our existing stylesheets. Using our own code made it really easy for me to get a sense for our system as a new team member and show in real-time what projects might look like to stakeholders. These screens created a prototype I used to pitch our leadership about the strengths of the program.