TEAMTREEHOUSE.COM | TEAMTREEHOUSE.COM | TEAMTREEHOUSE.COM |
Experience Design, Art Direction, Project Management
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.
- 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
- 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.
Reestablishing the product: 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.
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.
Unifying the identity: In this phase, I also worked on unifying and standardizing the visual system, as well as, developing new guidelines in regards to the language and tone used to talk about each product offerings. For example, for all Techdegree related CTAs use the word “enroll” instead of joining to help the product feel more scholarly.
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: Since there wasn’t a clear distinction from the content side between different products, there was also a lack of visual differentiation between Treehouse’s cheaper and more premium products. User feedback also highlighted this misalignment, so to remedy this confusion we mirrored the product offering into a visual pattern and accompanied it with a product badge to establish each product as its own sub-identity.
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.