How SeaLab helped create a fumbling-finger-friendly interface for TreeHouse's home improvement consultants and customers.
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 onboarding 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 and HVAC projects with clients — but still left a huge hole when it came to discussing the aesthetic and technical details of "Design Projects," including 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 — leading to confusion and frustration for both customers and consultants as time spent searching for assets increased and the likelihood of missing details grew.
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 the previous year?
Problem #2: How will SeaLab reduce the touchpoints for communication and 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.
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 to choose from, 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
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 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. Versus when a user engages in a solar panel project, 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 and test 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 had 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. 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 was 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 — allowing 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, allowing 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 would 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 in Austin, TX. We thoroughly enjoyed working with the TreeHouse team and are very sad to see them go. We wanted to release this case study as a testament to the project itself, as well as to the TreeHouse team and their vision that they allowed us to be a part of.
Ready to build something your users will love? Let's talk.