Back

Home Assistant - an unofficial redesign

October 2023

Intro

For this study, I redesigned the home page for Home Assistant.

My goal was to improve product clarity —what is it, who is it for— as well as improve the visual design and hierarchy to reduce cognitive load.
The website stood out as a particularly good problem to solve, as I personally found it overwhelming, cluttered and lacking a clear direction. However, I don't want to undermine the fantastic work they do on their free product.

This study was a short, time-boxed weekend project to kick start my portfolio. As such, I won't be strictly adhering to a full 'design thinking' framework here.

Update! Home Assistant have since redesigned the original website, but you can still see the original below (thanks to the wayback machine).

To view my redesign, please click the button's below to open in a new tab:

Step 1 - So, what is Home Assistant?

My first step was to understand what it is Home Assistant offers. The homepage itself is quite technical and that was something I wanted to address to make it clearer for non-technicals. In addition to the information on their website I queried Chat GPT and Wikipedia to gain a better overview.

Summary:

Home Assistant is free, open-source software that allows you to create your own DIY smart hub, serving as an alternative to conventional products from big companies like Google and Amazon. It can be used to control the same smart devices (lights, plugs, etc.) that are commonly found in a smart home.

It's unique ‘selling’ points are it's flexibility and privacy (all the information stays local to your home).
Typically, users would build their own hub (server) making for an interesting and highly customisable project for tech tinkerers.
They do however also sell their own smart hub with the software preinstalled. I wanted to put extra emphasis on this off-the-shelf solution as it felt like a missed opportunity to appeal to a wider audience.


Step 2 - Personas

Using this understanding, I created two personas to help target the new design to the right audience.

Persona sheet 1 Persona sheet 2

Step 3 - Analysis

With a good grasp of what the platform offers and who their target audience is (or could be), I analysed the website with a more critical eye to identify areas for improvement.
This included noting what information is important for the homepage, what information isn't, and making note of product branding/styling guides. Being a 'visual thinker', I made note of these on a Miro.

Summary:


Step 4. Competitor Research

Miro board screenshot

Snap shot of my working Miro board

To understand the competitor landscape I analysed the competition's homepages, both the indirect professional sector and direct 'DIY' competition.

Direct competition
  • Jeedom
  • Homebridge
  • Gladys Assistant
  • OpenHAB
Indirect competition
  • Samsung SmartThings
  • Google Home
  • Apple Home App

Understandably, the professional websites were considerably better designed and more engaging than the direct competition; if Home Assistant could match their quality it could easily put them above their direction competition.
On my miro board I pasted the homepages from each competitor and annotated them with the positives and negatives.

To summarise, the best examples had:


Step 5 - Design

Building on my understanding of the product and the insights gained from the competition, I began crafting my redesign, ensuring the same blue product theme was maintained and increasing the focus of the purchasable hub option.

Usually, at this point, I would break out the wireframes; however, since I knew I wanted this to be a minimalist single-column website, keeping with the tradition of most product homepages, I decided to skip this step and instead simply break down the hierarchy of the sections by priority order and got to work in Figma.

If you haven't already viewed my new design, I'd encourage you to do so here:

Desktop Mobile

Redesign overlayed with numbers, identifying the key points labelled above

Break down of my design by section

  1. Condensed some of the top bar items into a single 'Resources' dropdown to avoid too many options, and added a new 'Store' option
  2. Catchy title to attract new users with a key selling point
  3. Engaging image to draw the user in and set a positive first impression (AI generated with editing)
  4. A clear description of its functionality and usage, with the purchase option receiving more focus and prominent call-to-action buttons
  5. Brief smart home compatability list to build confidence the product is relevant and supports well established services
  6. Features section take a more prominent stage, in a horizontal carousel to reduce cognitive load
  7. The purchasable smart hub gets it's own section for increased visibility and focus
  8. Blog posts are condensed into their own section and with lower priority so to not disengage new visitors
  9. In the press section for good product validation
  10. Footer with the usual required information in conventional format

Future improvements

As a short time boxed exercise, naturally there are a few improvements I would make had I given it more time:

Thanks for viewing my study

🙏