Case Study: Treehouse
Project Overview
In October 2019, I was hired by Treehouse to create content for the UX, Front End Web Development, and Full Stack JavaScript Techdegrees.
In two years at Treehouse, my accomplishments include
- Restructuring the UX Techdegree. I led a card sorting exercise with my Treehouse teammates to improve the delivery order of UX Techdegree content, and to replace the nine disparate projects from the previous UX TechDegree with three case studies, consisting of three projects each.
- Focus on accessibility. This including creating new accessibility courses for both design and development students, working with the engineering team to make the Treehouse website more WCAG compliant, and creating an instructor-led caption review for more accurate video captions.
- Improving documentation. In order to keep the teaching team working more efficiently, I created new documentation for processes including requesting contractors, reviewing captions, uploading project files to AWS, and conducting Quality Assurance on courses and workshops before launch. In addition, I led an effort to improve documentation on Treehouse’s educational philosophy.
- Professional development resources. I led an initiative to offer more professional development content, and to open Slack to trusted recruiters to help Treehouse graduates with their job search.
Below are highlights from the content I created at Treehouse.
Data Visualization Foundations
In Data Visualization Foundations, I discuss the difference between data and information, list four steps to undergo before creating a visualization, cover a number of common charts, and offer tips on how to create more accessible and ethical visualizations. I also spend a solid portion of the course talking about Dennis Rodman.
The course is followed by a practice session in which students identify their audience, decide on a story to tell with their data, create a set of rough sketches, review a variety of data visualization tools and plugins, and create a choropleth map documenting 2019 auto fatality rates in America using Figma.
Accessibility courses
When I arrived at Treehouse, there was no accessibility content in any Techdegree.
While creating the following two courses, I convinced Treehouse to hire three contractors with a range of disabilities to review our content, conduct quality assurance, and make recommendations.
Accessibility For UX Designers
In Accessibility For UX Designers, students look at WCAG requirements from a designer’s perspective. The second stage of the course covers the principles of designing an accessible form, and students apply those principles to a food delivery checkout form designed in Figma.
Accessibility For Web Developers
Accessibility For Web Developers is a fairly similar course, but this time students examine WCAG requirements from a developer’s perspective, and use semantic HTML to develop an accessible version of the same food delivery checkout form.
CSS Basics
While Treehouse had an existing course on CSS Basics, at nearly eight hours long its length was proving a pain point for students. Plus, the course featured some outdated CSS techniques.
I divided up the larger course into three smaller courses:
CSS Basics
In CSS Basics, students learn to style their pages while keeping HTML content separate from CSS presentation. Topics covered include basic selectors, values and units, and the CSS cascade.
Students will apply their new CSS knowledge to a resume for a fictitious Treehouse grad named Developer Diane. And while the finished result might not be the most legible resume, the goal here isn’t to create a portfolio-ready product. Students will grow comfortable with CSS syntax, explore the impact of various selectors and measurements, and gain confidence in controlling the style of their HTML document.
CSS Layout
In CSS Layout, students learn the parts of the CSS Box Model, and gain more advanced control over their layout using CSS properties like display, position, and float. This course also introduces CSS Media Queries, so students can adjust their layouts for display on a variety of screens and devices.
Students continue working with Developer Diane, this time on a blog post that remains legible on both a mobile and desktop display.
Enhancing Design with CSS
In Enhancing Design with CSS, students improve their page’s typography by importing fonts and learning type-specific properties such as line-height. They’ll learn advanced visual effects like type and box shadows, rounded corners, and gradients, and even learn to insert decorative content using CSS. Students will add background images to their document and manipulate the color of those images using background blend modes.
During this course, students style a promotional website for Lake Tahoe, California. In doing so, they’ll use the knowledge gained throughout all three CSS courses to create an appealing visual design and a legible typographic experience across a variety of screens.
Design Patterns
While Treehouse already had a course on Design Patterns in the UX Techdegree, it was insufficiently thorough and contained outdated information.
In my new version of the course, students examine the psychology of web users and learn the difference between System 1 thinking, which is automatic, instinctive, and emotional, versus System 2 thinking, which is deliberate and logical. Students learn why taking advantage of existing patterns keeps cognitive load to a minimum, study examples of existing navigation patterns, and learn to format body copy to encourage meaningful scanning.
Introduction to Design Systems
In Introduction to Design Systems, students learn how a scalable, repeatable design system leads to more efficient design. Students learn the components of a design system and how to work with existing documentation.
The course is followed by a practice session in which students use Adobe XD to wireframe a homepage for votingrights.gov, an imaginary website for the United States federal government that informs citizens about their right to vote.
Students begin with a problem, a set of research, and some design explorations in the form of rough sketches. They then use the United States Web Design System to ensure the look and behavior of their designs are consistent with other federal government sites.
Getting Started with Human Interface Guidelines
In Getting Started with Human Interface Guidelines, students learn how to work with Apple’s Human Interface Guidelines documentation, and to apply Human Interface Guidelines principles when designing iOS applications.
Students additionally design screens for a running app that adheres to Human Interface Guidelines design standards.
Getting Started with Material Design
In Getting Started with Material Design, students learn how to work with Google’s Material Design documentation, and to apply Material Design principles when designing applications for the Android platform.
Students additionally design screens for a mobile cooking and recipe app that adheres to Material Design guidelines.