TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE | TREEHOUSE |  


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
  • Project manage, research, design and execute a new pre-purchase user experience
  • Create a refreshed brand through a modernized visual language
  • Developing new site OKRs and consumer journeys while establishing Hubspot as the company’s new CRM  



Discovering CX & Brand Challenges



Research Tools:
  • Website Audit
  • SWOT Analysis
  • Competitor Analysis
  • Stakeholder Interviews
Inconsistent Brand Tone and Messaging
Before this project treehouse had a wide range of visual directions and tone for their digital channels. Social was fun and unfiltered, the landing pages were focused on sales, and emails were serviceable but lacked the Treehouse tone and voice. 

Fundamental UX/UI Inconsistencies
Before the pre-paywall project, Treehouse’s core UX elements of the site experience lacked a sense of consistency. Depending on the page, the user would be exposed one of the many navigation or footer designs that the company has elected to used over the years.  Eliminating this experience was one of my earliest goals. 
Repositioning The Value Propositions
A internal analysis made me realize that the value proposition that leadership saw to differentiate the brand was not clearly communicated on the website. Value props such as promoting diversity in tech, teaching soft skills, and different teaching style helps Treehouse stand out against their competitors. 






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




Branding and UI Phase







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. For the brand refresh I felt that it was paramount to reinforce but and maintain the characteristics and values that the brand was original built on:
Be Approachable
Friendly and easy to talk to, Treehouse is a welcoming place for everyone.

Be Knowledgeable
Smart and well informed, Treehouse is a trustworthy educational resource.

Be Genuine
Authentic, straightforward, and sincere, Treehouse gets right to the point without any gimmicks.





UI Opportunities


Establishing A New Visual Direction
I worked with the company’s illustrator to build a visual guideline with a new bold, high contrast color palette, along with bolder use of typography to helped establish a new sense of energy and diversity for the brand.
Uniting UI Kits
Before this project Treehouse has two oddly unique UI styles between their pre-paywall, and their web app. The two environments looked so different that it confused many users, so I took this project as an opportunity to take the first big step of many to help unify the two UI systems together.  


Modernization
Before this project all of Treehouse’s webpages were built for screens that were designed for 1280 x 720px screens, and 320px wide cell phones. That approach and format is usable but the portions and scale unfortunately made the brand look dated. 
Accessibility
To ensure Treehouse was approachable for all, we focused on ensuring all digital marketing materials maintained a 4.5:1 (WCAG AAA standard) contrast ratio .







Differentiating Products


One of the most confusing aspects of the old Treehouse website was there was a 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 16% gain in conversation rates (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 to be continued.