Smart Home Dashboard Case Study
THE CHALLENGE
The objective of this project was to create a beautifully functioning smart home dashboard that isn't too overwhelming for the user. The user should be able to see and change the inside temperature. The thermostat should have the ability to switch to heat and cold modes. The user should be able to see and control music and the different speakers in each room. There should be an ability to control the lights in each room and control the different security cameras throughout the house. The organization, color, and typography of the smart home were up to me. The most important element the client expressed was flexibility. For example, the flexibility to be able to add as many lights and speakers as you can so I made sure that flexibility was important in my design.
TARGET AUDIENCE
The target audience is people ages 27-55. They have a significant amount of income and love convenience. They love having their entire house smartly connected for the utmost convenience when coming home from a long day at work.
DELIVERABLES
Smart Home Dashboard design
User experience interface (UI/UX)
RESEARCH & DISCOVERY
During this initial phase, I researched several smart home dashboard designs that were out there, as well as inspirational designs that other designers have made. I wanted to gather instances that I felt were working well and instances that weren’t. The following are a few discoveries I made.
Good user flow
The layout of this dashboard works well with user flow. The time and air conditioner are displayed conveniently on the left panel. Then there is a menu on the top listing essentials like the dashboard, security, devices, etc. There are also the music controls on the bottom right. Everything essential is on the dashboard but not in an overwhelming way.
Overwhelming
This dashboard has everything, but it's too crowded and overwhelming. What I learn from this is that it's probably good to separate things into categories and tabs to not overwhelm the user at first glance..
Accessible
The side menu on this dashboard is effective because it shows you all the essential categories you might need. It also works better than the menu at the top. The large menu with the white cut-out effectively lets me know which category I'm on. It is also easier to touch because the area for the nav buttons seems larger.
Competitive Analysis
The following are lists of companies that have comparable smart home applications:
Amazon Alexa App
Samsung SmartThings
Apple Home
Google Home
Home Assistant
SKETCHES
After doing initial research, I gathered all of the aspects of smart home applications that I thought were working well and put them together to create a few sketches for the dashboard and rooms.
DIGITAL DRAFTS
After initial sketches and reviews from my peers and teacher, I was able to refine the user experience and layout a bit more.
DASHBOARD HOME SCREEN
Taking notes from my initial research, I made sure to make a dashboard that wasn’t too overwhelming but had all the necessary information. I enjoyed the cutout side navigation so implemented that aspect into the dashboard. I decided to go with a dark background to make it easier on the eyes when controlling it at home.
LIGHTS
For the lights screen, I wanted to make it easy for users to control all lights in an individual room while having a nav bar at the top to easily navigate to other rooms. I also made it easy to add a light bringing in the wanted feature of flexibility.
MUSIC
My idea for the music screen was to make it look like an old-school stereo. You can control each speaker’s volume individually or have the ability to turn on/off all speakers at the top. The issue with this one was that the buttons at the top were too big and my teacher wanted me to bring in another color for the buttons.
DIGITAL DRAFTS ROUND 2
DASHBOARD HOME SCREEN
The feedback I got from my class was. (1) What if the temperature was in the triple digits? How would that fit into the display? So I only displayed 3 days of weather to fit a triple-digit number. (2) Since the date/clock/weather portion was not clickable and everything else is, I should not have a box around it to distinguish it from the other clickable areas. (3) The buttons on the music section need to be more flexible. What if the photo used by the artist was not as agreeable to allow for good readability? I moved the button controls to the bottom. (4) The temperature control dials were too small. During this point I was still brainstorming ways to fix this. (5) On most pages, I used a light grey because the pure white was too much of a contrast and strain for users’ eyes.
FINAL DESIGN
The final design brings user experience to the forefront, allows for flexibility of all different kinds of homes, and answers to all of the requirements set at the beginning of the project. It is not only aesthetically pleasing but easy to use and stands out from other designs.
TYPOGRAPHY & COLOR
Display & Body: Space Grotesk
REFLECTION
It was enjoyable to design this smart home dashboard. Thinking about all of the ways that any user might interact with this interface was a nice puzzle to solve for. I appreciated all the feedback I got from my peers, teacher, and industry people because it only improved my design. I am delighted with my design because it is clean, has a good user experience, and meets the initial challenge. If I take this project further, I would make it so that the left side menu can hide or show to allow users to see the rest of the page full-screen.