As a Senior Designer at Treehouse, my role encompassed a wide range of responsibilities across product design, engineering, and branding. Over my 5 years working on the product these are some of my notable contributions.
One of my first projects upon joining the team was to develop the visual identity for Treehouse. A primary goal in developing this brand was to have it resonnate a welcoming feeling that was versatile and accessible. Having a versatile identity meant the brand had to allow for adaptation at different scales and contexts.
The Treehouse mark drew influence from the badge, the primary reward mechanism of the product, in combination with the original product mascot, a tree frog we called Mike the Frog.
The Treehouse wordmark was set using the typeface, Rubrik Semibold. Rubrik was chosen for it's softer letterforms which lent it a more welcoming and accessible feeling.
The final brand was designed so that every core element of the logo could operate independently to allow for maximum flexibility. Additionally, the logo needed to be color agnostic and not contain metaphors that relied on color for the sake of clarity. For example, a tree requiring that the leaves be green.
Another important contribution made in collaboration with our design team was to develop a design language system for how we articulate the core functions and components of our product in a clear and consistent manner. These are just a few examples of the components and patterns we developed:
In addition to just establishing visual standards, engineering a robust frontend library to make the maintence and adaptability of these elements was key. In tight collaboration with the rest of our design team, I played an instrumental role in developing standards for how we construct common interface components, design patters, and the naming conventions to make these standards accessible to other designers and engineers at Treehouse.
The foundation for this project started with the product's core asset: the course material. Each course contains common facets and functions to allow students to find, understand, and interact with them. The primary form this took was a card which contains numerous attributes to indicate the course's topic, difficulty, progress, and actions a student can take.
A key challenge to developing the organization of our course library was to establish a visual pattern for identifying courses by topic. Our solution was to assign colors to each major topic, effectively creating topic "brands" that span across courses sharing a common topic.
When we first introduced the design language for Treehouse our course library used what we internally called "the firehose." The firehose was a constant feed of every course Treehouse offered in the order of release with options to filter the feed by a number of criteria. While it offered an easy way to immediately know what new courses had become available, it catered well to existing students looking for something new but left newer students with little context. Course releases didn't follow any kind of pattern in terms of topics so for many students, new or existing, it didn't do a great job of making itself peronally relevant to the student viewing the page. Furthermore, performance was a major issue with the page because of having to load in lots of courses and all their associated dynamic functions made the page take an unacceptable amount of time to load.
My solution to this problem started with breaking down the Library into common entry points students often take when browsing for courses and creating a summarized section for each kind of entry point. One common entry point is to start with a topic of interest and browse courses from that context. Another addition we made was to add recommendations based on implicit actions and explicit preferences students made to meet their learning goals.
With regards to the performance issues that plagued the original design, we successfully improved load performance by over 60%. Furthermore, the design improvements resulted in a 30% increase in course adoption. It was likely our most successful measurable product improvement during my time at Treehouse in terms of performance and student behavior.
View FullscreenLikely one of the more ambitious projects I took on at Treehouse was to reimagine the Home experience for our students. Home is the primary entry point for students to manage and resume the courses that best meet their learning goals. One of the many shortcomings of the existing design for Home was its lack of responsive feedback based on students' activity within the product. Our solution to build a system that would help students construct a personalized curriculum based on their behavior: what they had previously learned, expressed interest in learning, and what content would best help them achieve their goals. We called this reimagination "Home Queue", and though it unfortunately was never released due to changes in strategy, it was one of my most involved projects at Treehouse.
The primary design for Home Queue was centered around creating a single curriculum that could easily be personalized by the student with or without guidence from Treehouse. This curriculum could be constructed from Treehouse courses, workshops, and conference videos with feedback and recommendations based on previous activity made by the student. The curriculum listing was designed to put primary emphasis on resuming the top most current course while allowing the student to also easily make additions or other changes to their curriculum without having to leave Home to browse course offerings from the library.
Note: Due to the incomplete nature of this project, this is a limited demonstration from the prototyping phase.
View FullscreenBy hovering anywhere between existing courses in your Home Queue, a student can easily insert new courses by searching the Treehouse Library or by selecting context aware recommendations. If a student selects a course that has pre-requisite courses that have not been completed, the Home Queue returns feedback to suggest that the student adds those necessary courses. Two examples of this interaction and can be viewed below.
Due to the emphasis on resuming existing course progress, a more prominent treatment was applied to the top course in a student's queue to encourage following the curriculum in order from the top down. But because reordering and other changes are available to the student, this morphing transition between the current and subsequent courses was used.