TEAMTREEHOUSE.COM | TEAMTREEHOUSE.COM | TEAMTREEHOUSE.COM |

Experience Design, Art Direction, Project Management

BackStory

Treehouse is an online learning platform that helps teach people about different skillsets related to the tech industry with topics ranging from Front-end Development, JavaScript, UX Design, business and project management, and more.

The main goal of this project was to lead a modernization of their brand narrative, aesthetic, and how they connect with their audience through their digital channels. 

Objectives
  • Develop a new pre-purchase user experience through establishing new consumer journeys, user flows, and navigation
  • Art direct a brand refresh for the Treehouse brand and visual languag
  • Work on the establishment of a new site OKRs and CRM system through Hubspot 



Discovery


tools:
  •   Website Audit
  • SWOT Analysis
  • Competitor Analysis
  • Stakeholder Interviews

Key takeaways: From the website audit and competitor analysis, I discovered a lack of consistency in the pre-purchase experience. The key cornerstone elements such as navigation and footer stood out to me from a structural sense, and I saw an opportunity for a clear voice, tone, and language from a content strategy standpoint.

The internal analysis made me realize that the value proposition that leadership saw to differentiate the brand was not clearly communicated on the website (which they heavily rely on for new clientele). And there was an opportunity to highlight the learning platform since it is something customers advocate for in reviews and it has not been highlighted as a differentiating asset over the years.



UX Design


The goal of the UX design phase was to refocus the brand’s message back to the consumer’s needs while highlighting the level of care and support the brand provides their customers.  Over the year’s the brand’s homepage became so focus on selling and converting the user into a free trial. Because of that, it lost its character and emotional touch that the brand has lead with over the last 10 years.

Also, as found in the SWOT analysis, the site’s UX design was confusing and lacking clear paths for the user to discover the product offerings. To counteract this, I looked at three key aspects of the site that could help clarify the experience:

Reestablishing the product offerings: One of the objectives that came out of the stakeholder interviews was that each product presented on the website should be equally elevated. I took a step back and rebuilt the basic understanding of each product since over time they began to blend and hard to differentiate between one another, and especially the competitors’ offerings.

Information architecture for the core product landing pages


Guiding the experience: With a broad catalog and a user base with a limited understanding of the tech field, I saw an opportunity to make an entry quiz to help potential students find a starting point for their learning journey. It focuses on student needs and pre-established goals of looking for a learning program and serves as a continuous learning opportunity for the Treehouse team to collect data to help them understand the users interested in their offerings.




New guidelines:  I also worked on developing new guidelines in regards to the language and tone used to talk about each product offering. For example, for all Techdegree related CTAs, we should use the word “enroll” instead of ”join” to help the user better understand which product offering the CTA was connected to. Plus the change in language better aligned with the Bootcamp/Scholarly vibe that the brand was trying to achieve with their Techdegree program. 



UI Phase


Reshaping the brand: Over the years, Treehouse had a consistent brand mark and a soft and friendly tone, yet the visual styles have not been established past that. There was an opportunity to streamline the style treatment of the imagery, color, and other visual nuances.

I worked with the company’s illustrator to build a visual guideline with a new bold high contrast color palette, streamlined use of typefaces, new illustration style, and a full set of new icons. This partnership also opened up new opportunities for unique creative background textures and framing elements that really allowed us to continue the narrative in a visual way.




Differentiating products:  One of the most confusing aspects of the old Treehouse website was there wasa lack of visual differentiation between Treehouse’s self guided product (Courses and Courses Plus) and their more premium bootcamp product (Techdegree). User feedback also highlighted this misalignment, so to remedy this confusion, we completely rethought the visual direction and branding of Techdegree. 



Comparsion between the new and old Home, Techdegree and Teams pages




To Be Continued


A website redesign is never finished, especially when you work on it in-house. Currently, we are rolling out each feature with an A/B test to make steady steps forward. So far the testing showed positive results, ranging from a 10-20% gain in conversation rate (note: some data was affected by COVID-19), and 15% in social interactions on content that was created with the new brand guidelines. But this story is yet to be continued.