TreeHouse: a UX Case Study
How SeaLab helped create a fumbling-finger-friendly interface
Main Problem Overview
In 2017, TreeHouse, a home improvement company based in Austin, Tx, known for “thoughtful, sustainable, and healthy homes”, approached SeaLab to construct an intuitive and clean design system that could be used to scale and grow their on-boarding process.
TreeHouse had previously made a substantial internal team investment to build an interface for the Performance Project section of their website and wanted to build on that foundation. The “Performance Projects” segment covered features like lighting, roofing, air conditioning, and more. This portion of the data collection website allowed consultants to discuss these specific utility & HVAC projects with clients but still left a huge hole when it came to discussing the aesthetic and technical details of “Design Projects”, specifics related to color choices and paint selections, countertop upgrades, floor and carpet selection, and installation, window treatments, and smaller design details.
The existing Performance Project flow also lacked a customer/consultant communication platform and dashboard. This required back and forth communication to be done through phone calls and sending links and images through email, resulting in project files scattered across different platforms which lead to confusion and frustration for both customers and consultants as time spent searching for assets and the likelihood of details being missed increased.
Problem #1: How will SeaLab optimize and streamline both the customer and consultant experience of the Design Projects section, while integrating the updates TreeHouse invested in the Performance Projects section made the previous year?
Problem #2: How will SeaLab reduce the touchpoints for communication & file sharing between consultants and customers and unlock the full potential of both a company-facing and client-facing dashboard application?
To comply with our confidentiality agreement we have omitted and appropriated confidential information. These designs are a reinterpretation of the original.
Project Goals and Objectives
We identified a few objectives to make our sprint successful:
- Create and deliver a tablet interface following all modern design standards for TreeHouse design consultants, defining projects for customers through data input while out in the field.
- Produce and transfer a fully responsive customer-facing dashboard interface for clients to check on the status of their home projects — both “Design Projects” and “Performance Projects” in addition to previous projects, upcoming projects, and “suggested” projects.
- Optimize the consultant tablet interface for touch (large buttons, intuitive navigation, no hidden hover functionality).
- Brainstorm and propose methods to combine the “Performance Projects” section and the “Design Projects” section.
- Maintain and build upon existing TreeHouse branding guidelines.
Initial Research
After initial research and interviews with TreeHouse employees, consultants, and customers, we discovered a disconnect in understanding between “Performance Projects” and “Design Projects”. While the TreeHouse team internally knew the difference between the two, homeowners found the two funnels confusing — especially when they wanted to partake in one of each project — the original UI required users to consider them as completely separate transactions and ultimately backtrack all the way out to choose a project type before being able to select between the options of a “Performance” or “Design” Project.
Our first exploration was around combining “Design” and “Performance” project types into one unified “Create Project” flow on the customer-facing side. By presenting end users with a single dropdown of projects for them to choose, we were able to eliminate confusion between “Design” versus “Performance” without disrupting the categorization of each while simultaneously allowing consultants to create projects quicker and with language the customer understands.
Low-Fidelity Wireframe Creation (progressive enhancement/mobile-first)
Initial testing of our single “Create Project” funnel was a success. From there we designed the information architecture of the flow both for the consultant side as well as the customer-facing side to better reflect the combined approach.
Once we had refined the low-fidelity wireframes, we focused on concepts for the predominant device for the contractor’s interface, landscape tablets, and dove into wireframes — honing in on the different components and inputs of each project “type”.
With 10 individual project types ranging from wall painting to carpet fitting to roofing, it was essential for us to come up with a research plan to help us create a design system for the different categories of inputs required for each individual project type. For example, a wall painting project (defined as a “Design Project” on the TreeHouse side) requires consultants to enter wall height and width, where the room is located, indicate size and placement of windows, determine if the customer wants the paint to stop halfway on the wall, and any other details that may affect how much paint is required to cover the wall. Versus when a user engages in a solar panel project (considered a “Performance Project” on the TreeHouse side) which requires consultants to input details for the roof and general housing structure.
By breaking down the design language into inputs, sliders, text boxes, checkboxes, buttons, drag and drop items, upload sections, etc. we were able to create a unified design system that simplified the UI for consultants while creating consistency and limiting confusion regardless of which details or project type data are entered.
Once pulled together, we created several flows which we then hooked up and used to create live prototypes that allowed TreeHouse and their consultants to play around with the interface, testing the flow themselves.
High-Fidelity Visual Design Creation
Once wireframes were tested and approved by all, we moved into visual design. We worked within TreeHouse’s already beautiful brand guidelines and with our wireframe skeletons to create reusable components that can be implemented by the TreeHouse team as the types of projects they offer eventually grows.
As TreeHouse already has a well-established brand, implementing their visual identity into the project was a seamless exercise — once the bite-size components had been identified, we were able to tackle one at a time — focusing on unifying the look and feel of all buttons, inputs, dropdowns, and forms across the site.
Our largest challenge on this side of things was making sure users knew whether they were on an admin page, a customer-facing page, or a consultant page. We used different forms of navigation and color-changing headers to reflect these changes and found a solution after a few iterations and internal tests with TreeHouse customers.
The Final Result
Language the Customer Understands. While on the TreeHouse administrator (or consultant) side of things it made sense to separate project types into two different UIs, SeaLab found after testing that the same separation confused customers more than it helped them (“Where do I need to go if I want to install solar panels?”). By changing the flow of the project creation and unifying both “Design Projects” and “Performance Projects” to be under one single dropdown, customers found they were more easily able to begin the project process with TreeHouse consultants without needing to call for help.
Fumbling-Finger-Friendly. From inputs to buttons to sliders, the consultant data-capture flow has been optimized for the official landscape tablet issued by TreeHouse. Whether consultants are entering data quickly for the first time, or the 200th time, the interface is easy and quick to navigate on-the-go.
Future-Proof Design. As we worked with the TreeHouse team, we made sure to ask and keep in mind their future goals with this application in regards to consultants and clients. This allowed us to create a system with the most flexibility which in turn allows the team and software to evolve together, rather than needing to rebuild for different features and audiences in the future.
Clean, Easy to Navigate Interface. TreeHouse consultants and clients use the software to collaborate on projects. Streamlined and familiar project organization and layout persist throughout, which allow for easy uploads and access to documents, fast views of project specifics, the ability to send and receive status updates on the fly, and a feature to clearly view and discuss uploaded files, photos, and integrated Pinterest boards.
“ SeaLab’s wireframes and interactive walkthroughs were great and really impressive. Seemed very put together” — Graeme Waitzkin, Chief Operating Officer, TreeHouse
Treehouse intended to implement this unified “Create Project” data-capture flow in new stores opening in Texas. This flexible system will allow them to expand quicker than before and take on more consultants than in previous years, due to the future-proof design and layout.
Unfortunately, TreeHouse closed its doors in 2019 after 8 years of successful service here in Austin, TX. We super enjoyed working with the TreeHouse team and are very sad to see them go and wanted to release this case study as a testament to the project itself as well as the TreeHouse team and their vision that they allowed us to be a part of. We hope to work with the team again in the future under another high-quality green brand.
