Project-based learning & the Techdegree program

Treehouse

Project-based learning & the Techdegree program

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

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
Project-based learning & the Techdegree program
Project-based learning & the Techdegree program

Second iteration

Illustration and refinement

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
Project-based learning & the Techdegree program
Project-based learning & the Techdegree program

Project reviews

Structured collaboration between students

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.

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.

After we agreed on the flow and the basic designs, I started refining the visual designs and certain parts of the user experience. I ended up creating three custom icons that would start grayed out and get filled in with color as a student progressed further by manipulating svg elements.

Project-based learning & the Techdegree program
Project-based learning & the Techdegree program
Project-based learning & the Techdegree program

Takeaways

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.

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.

Project-based learning & the Techdegree program

I’m always looking to connect with fellow designers and am open to speaking opportunities. Let’s grab a coffee and chat if you’re in Seattle!

Send a DM on Twitter
Two people standing on the outside deck of a Washington State Ferry.