A Design Suggestion for Treehouse.com

Part Two: A breakdown of how to design a new feature


Context

Based on the usability tests I did in Part One, I had a lot of good information on where users were getting frustrated. Being that I’m a huge fan of Treehouse, I thought it would be fun to design a solution that could help alleviate these problems.

Why?

I always like to begin with the why. Here, it’s pretty simple: although Treehouse has an amazing product, there is always room for iteration! In my redesign, my goal is to hypothesize a way to improve the user experience and make Treehouse a more enjoyable, valuable product for it’s users.

Note: As started in Part One, I am in no way affiliated with Team Treehouse. This is a personal project I did to further my learning.

Assess, then Brainstorm

First, I looked over all of the information I had synthesized from my five usability tests. Then, I brainstormed on all the possible directions one could go to improve the user experience.

Two things stuck out:

Users Love Getting Positive Feedback

In all of the tests I did, participants had extremely positive responses to completing lessons and gaining points for their progress. One direction I considered moving was designing additional gamification elements that build on these motivational drivers.

Users Want to Answer Specific Questions as they Arise

Rather than focusing on making the Treehouse experience more engaging, I decided to focus on making it more useful. This was in large part due to the fact that the majority of peoples pain points could be solved by adding a single feature: Search.

Why Search?

Looking back at my usability tests, I realized that 4/5 of the main issues users had would be alleviated if only they had the ability to easily search through courses to find exactly what their looking for in a given moment.

Note: I think one of the best things about Treehouse is the pacing and structure of their courses. I hypothesize that they have designed their courses to be taken as whole units and optimized for users to experience their platform this way. If their research has shown a market for this type of structured learning and they have decided to attack that segment, I think that is a completely valid choice. Still, given that 80% of the users I tested had the desire to learn in a more freeform style, it appears that adding more flexibility could be hugely beneficial. Adding search would allow for this increased flexibility while also unobtrusively letting users take the course from start to finish if that’s their preference.

Design Stories

I started out by writing design stories to work through the main, edge, and corner cases that might arise when adding a search feature. Design stories are incredibly helpful for starting to flesh out what exactly the feature will look like and what will need to be accounted for. I do design stories at this stage so that I don’t miss something critical later in the process and then have to change my UI to compensate for the error.

High Level

Users can search through a Treehouse course and find specific lessons that relate to their query.

Main Flow

User’s can access the search bar on the course homepage and on the search results page. Queries will return lessons that contain the keywords that were searched i.e. if a user searches “Export” in the Sketch 3 course, the results page will show all the Sketch 3 lessons that contain the word “Export.”

Alternate Flow

If users search a keyword that is not contained in the course, the results page will notify them of this and offer users to try another search.

Sketching

After working through design stories, I had a general idea of the skeleton of what would be needed to build out the feature. From here, I started sketching out tons of super lo-fi wireframes to explore layout possibilities.

I find it incredibly valuable to sketch as many options as you can possibly think of (usually somewhere between 20 and 40 depending on the complexity of what your designing), and then push yourself to sketch at least 10 more. Often, these final sketches are the most outlandish and out of the box. More often than not, they uncover interesting ideas that weren’t immediately apparent and sometimes even hit on an amazing solution that wasn’t unexpected.

For Treehouse, I knew I wanted something that would easily fit into the current Course Homepage framework which looks like this:

I also knew from the usability testing I had done that 0/5 people I tested actually took the time to read the description of the course shown above. Knowing this, I explored designs that might use this space more effectively.

Here are a few of my sketches:

After exploring a multitude of sketches for both the Course Homepage and the Search Results page, I decided on the wireframes that I felt most simply conveyed what was important while getting rid of all the extraneous course information. I did a comprehension test with some of my fellow designers at Tradecraft, and used this feedback to decide on a version to take into high fidelity.

I used Sketch to create the mockups:

Gifmaker.me is a great way to create simple gifs.

Analysis

The current description on the Treehouse Course Homepage explains where Sketch is positioned in the market, and tells users that the course will cover the basics of the program. This provides only marginal value to users. As stated earlier, 4/5 users skipped over it completely. In debriefing with these users after their usability tests, it became clear why: If someone is about to embark on starting a new course, it’s very likely they already have an idea on the subject matter.

Every user I tested showed a consistent mental model that illustrates both why users skip over the description and why it isn’t necessary in the first place: They think of something they already know they want to learn, find that subject, and begin the course.

User’s don’t come to Treehouse looking to learn anything; they have specific goals and want to achieve those goals as efficiently as possible. For this reason, I decided to eliminate the course description and include only a short byline, “Learn the basics of Sketch 3”. This distills the essence of the the entire two paragraphs into one sentence, retains the one element users care about (difficulty of the course), eliminates visual clutter, increases comprehension (I tested this with 10 people), and leaves plenty of space for a search bar, a clear call to action that let’s users get exactly where they want to go as quickly as possible.

I also optimized for efficiency, when it came to the Search Results page, allowing users to play lessons directly from the page itself, and reducing time to learning:

Conclusion

In allowing users to search through a Treehouse course for specific lessons, I am hoping eliminate the majority of the frustrations I uncovered in my usability testing. Still, this redesign in a hypothesis, and just that. Only through testing and tracking internal metrics could the success of the design be validated. As always, continued iteration would be critical to its success.

If you actually made it this far, I salute you! Thanks so much for taking the time to understand my thought process and consider the choices I made. This redesign is far from perfect, I would love feedback from the amazing community of designers we have here on Medium.

A special thanks to Zac Halbert, Michael Burkett, all my fellow designers at Tradecraft, and everyone else who helped me on this project. Also, thanks to Treehouse for being my guinea pig! You guys are awesome.

This Design Suggestion is Part Two of a two part series. You can see Part One Here.


Written by Toby Silverman

As a former classical ballet dancer, kindergarten teacher in Seoul, rap tour camera man, and VICE photojournalist, I’m a 26 year old Product Designer with a unique perspective.

I’m excited about the intersection of technology, art, and design.

I live in San Francisco.

Check out my work at design.tobysilverman.com