Project-based learning

Treehouse – Techdegree Program

Project-based learning

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. 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

In-browser Design

Code-first process

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
Project-based learning
Project-based learning

Second iteration

Illustration and refinement

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
Project-based learning
Project-based learning

Project reviews

Structured collaboration between students

After we had students actively creating projects, we decided another important skill for them to learn was how to properly critique their peers work as well as receive feedback and improve upon their work. For this, we decided to implement a review system where students would receive feedback from both their peers and professionals.

Reviews meant allowing a somewhat complicated process, so I started out with a userflow detailing all the steps a student would take to complete a peer review while including the content I thought was necessary to each page or state.

As before, I did most of my work in code, occasionally using Sketch to create new design patterns quicker and see how those would look before implementing. This approached was much faster and allowed for quick iteration.

Project-based learning

Project-based learning
Project-based learning
Project-based learning

Takeaways

As I had access to two slack rooms where students were actively collaboration on projects, I was able to quickly understand their goals and how they worked to create systems that would benefit them. Easy access to students allowed me to interview and test ideas on real users, which helped me gather actionable data.

These projects helped inform most of the work that was done over the span of a month to create Treehouse Techdegrees, as further iterations of both projects and reviews were added to the new Techdegree program.

Project-based learning

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.