Introduction
Hometree’s mission is to provide a hassle-free way for consumers to install energy saving products within their home. Their vision is to bring trust, openness and transparency to a market that is inherently difficult for consumers to understand.
As part of a small team, consisting of myself and one developer, I worked directly with the CEO and CTO to prototype an MVP version of the product. The aim was to get something built to demonstrate the idea to investors within 3-4 months.
The approach
- 1. Discovery - work with CEO and CTO to define goals and scope of the project
- 2. Prototyping - design core functionality in the browser using Webflow
- 3. Developer hand-off - prototype hand-over for integration with a custom CRM
1. Discovery
Workshops and collaborative sessions were held with the CEO and CTO to understand their ideas and intended outcomes for the project. A roadmap for sprint based design was created and timelines for inclusion of features within the prototype were agreed.
The HomeTree founders had a vision for the product but were happy to let the direction of travel be influenced through the design process.
The high level goals of the platform were as follows:
Simplify the process for consumers - build a platform that makes it easy for consumers to book the installation of energy saving products
Empower tradespeople - build a platform that makes it easy for tradespeople to connect with consumers and carry out these installations
2. Prototyping
The product was prototyped exclusively in the browser using Webflow. Designing in the browser enabled me to demonstrate complex functionality to the team, without the need to build the functionality first. It also allowed us to focus on the behaviorial aspect of the experience early on in the design process.
I prototyped two distinct journeys, one for Hometree’s consumer audience (B2C) and one for their trade audience (B2B).
B2C Journey
Product selection tool - a wizard to help customers make informed choices about which energy saving products suited their needs
Customer dashboard - a centralised location where customers could track their orders, arrange installation dates etc
Checkout process - a fast and convenient way for customers to pay for the installation of their selected products
B2B Journey
Trade dashboard - a centralised location where tradespeople could track appointment information and communicate with customers
Invoicing and quotation - a fast and convenient way for tradespeople to provide quotes and create invoices for customers
Mobile journeys
One of the benefits of prototyping in the browser was that it allowed me to see how the product would behave accross different device sizes. The entire journey was optimised to work on mobile, which was particularly important for tradespeople as they would be interacting with the platform on the go.
3. Developer hand-off
Designing in the browser using Webflow meant I was able to export the prototype as raw HTML/CSS. This code was then handed over to the developer who integrated my design as the front-end for a custom CRM that he was building.
As new features and functionality were prototyped, I would provide him with a fresh export of the code for integration. Things would often break in production using real data, which exposed flaws in the design. This gave me an opportunity to continuously re-evaluate my ideas as things progressed.
Outcomes
Hometree secured a round of seed funding in late 2016 after demonstrating their business model to investors. Since then they have enjoyed growth and success, recently becoming one of the top 50 London startups to work for.
https://www.hometree.co.uk/