Photos of home management physical devices
Maria Meireles
Designer
Pocket Home
Live your home from your pocket
What is Pocket Home?
Pocket Home is a digital concept for a home automation interface.
Home automation refers to the automatic and electronic control of household features, activity, and appliances.
Imagine a home where everything, from lighting, climate, air conditioning, appliances, even the alarm system, can be controlled with one tap...
Why a Smart Home?
I work for a software company that develops critical projects for industry. We work with industries like aerospace, defence, government, medical devices, finance. My division specializes in energy, smart infrastructure solutions to industries inside the energy market.
Our way of making UX shifts a bit from the traditional UX Design services: our clients have "demanding design requirements of critical systems and the industry standards they need to meet". As you can read in this amazing article.
I wanted to train my skills set by trying to develop a project on my free time, in this case not for the industry but directly for clients, something to do with energy. Showcase some of the stuff I've learned in the first 9 months as a UX/UI Designer.
Smart Home was the best challenge I could find.
Research
Before starting...
Competitive Analysis was needed not only to understand what other smart home products do and how but also to study different home management physical devices that can be a good addition to Pocket Home.
The smart home market has software for 3 main devices: Tablet, Desktop, and more recently Mobile.
What to look for?
The comparative assessment tried to understand the following questions:
Understand why each device type was used
Users within the app
Different devices have different goals, therefore different features?
What features each device type has
Main management areas
Type of info shown on the main page and how
Visual design + images + copy mood and fonts
Most of these products are paid so navigation and interaction were difficult to evaluate but based on some images and videos of the interface was possible to assume some main points.
Tablet
Tablet used as a family device. The management of the house is made only on that device, no users needed. But in some cases, the ones with mobile app integration, it's possible to have users.
Found some programs with more features of Climate and others of Security, but all with a lot of settings available to be edited by the user. They allow adaptability to the house by the user.
Home page with a dashboard with buttons for the main features + hour/date + temperature and other important info like sound and light.
The design is serious, some almost with an enterprise look. More focused on giving a sense of safety and control, on a few cases, closer to the look of a physical tech device.
Mobile
Mobile as a personal device. Usually personalized to the user that has the phone, so most cases a user account is a feature. The ones that do not have a user account creation feature also exist but have more generalized and fewer features.
Some mobile devices' products are extensions of desktop/tablet programs. They are a personalized and/or simpler version of the desktop/tablet program.
Mobile features are more focused on climate, wi-fi, lights, and turn on/off appliances and sound. Showing info on climate and security (camera live). Things that have more immediate use.
The design is clean and relaxed. Giving a sense of coziness and harm but still practical and functional.
Desktop
Desktop as an all-in-one device. Users are seen in most cases (and some cases integration with mobile).
It's the device type with more features and that allows more freedom of edition and creation by the user. In most cases, devices (not appliances) like sensors, alarms, and others can be added and configured via the desktop by the user.
The home page usually has a dashboard with a variety of info, a summary of settings, and info from the difference pages. Like for example, the Rooms section on the dashboard has a card for each room with info of appliances connected, sound on/off, temp, and detection of people inside.
The design is closer to the mobile but I've also seen some examples of more serious and strict design. Especially when the desktop is very focused on configuration and editing of settings.
Home Management Physical Devices
Some physical devices provided more info about features that can be integrated with digital devices. A good example: the alarm board on the bottom left. It's possible to call directly the firefighters, emergency or police, and possible to set which number to call when the alarm goes on. Also found on the market some smart home packs with physical devices like cameras, smoke detectors, sensors, alarms. They also provided a physical "central" interface.
Solution
Devices
In the beginning, a Tablet device was the solution selected: a family device with freedom of edition and adaptable to the house. After a few interviews, it was possible to see that it would not be practical for most families. The families interviewed that have a tablet use it as an entertainment device, especially for children: the parents did not enjoy the idea of possibly having the alarms turned on while their kids were supposedly playing Candy Crush.
So looking back at the competitive analysis it was possible to see a more convenient solution: a main desktop program with all features and freedom of configuration, edition, and creation for managers + a mobile app that all users (created on the desktop program) can enjoy depending on their permissions.
Desktop + Mobile App
Features gather from research.
Features
After selecting the device types was necessary to gather the main areas and features. Check the image on right to see the ideas gather around Miró.
Main Page
Desktop: a complete dashboard
Mobile: simpler dashboard desktop that changes if the user is inside or outside the house
Visual Design
Since the mobile app is going to be used as a personalized extension of the desktop program it makes sense to follow the clean and cozy look of the analyzed mobile apps.
New Feature
While I was researching and analyzing the smart home's products I notice that there were important members of the house that are completely left out... the pets.
So I hold on to this idea and asked about it on interviews, it was very well received. There are a lot of pet-specific home appliances and some pet owners refer to the fact that on work hours the pets are alone in the house. They gave me a lot of ideas to be used, and some just to have fun listening to.
Pet Section
Integrate a Pet Section where the users can schedule walks and feeding, give that responsibility to a specific user, watch the animal while alone at home, control sanitary places, turn on specific media/sound to the pet.
Site Map for Pocket Home
What will Pocket Home do?
The content strategy plan was developed based on the opportunities found when analyzing the market. Most of these features are based on 3 main actions: view, turn on/off, and edit. Secondary actions being: change levels, create, delete, schedule.
Creating the Site Map was essential to understand the content strategy and where those actions could be possible.
Since the desktop is the backbone of the project, with all features included, I started by understanding what could be done on desktop and then think about what made sense to be available on mobile. Not forgetting that mobile features depend on permissions given on the desktop for each user.
Personas created for Pocket Home
For whom?
Interviews were made to understand the potential personas that could use the app. I spoke with people that use home management systems at some level, at least have the technology to control security or climate.
I notice that usually 1 or 2 people would take care of that home management and others would use it only for small issues, especially if the responsible person is not home.
The home management could be divided between a more tech-savvy person and another but if only 1 person is responsible usually is the most tech-savvy of the house's adults*.
Two personas were found:
- The Adult responsible for Home Management
- An adult that lives in the house
*I'm only comparing between adults and not kids since none of them was allowed to make decisions. In one case an adult son was responsible.
What will the personas do?
The two devices have different goals, different personas!
Mobile > Living > Person that lives in the home
Desktop > Management > Home Owner
First, it was necessary to understand what both users would do, think, and feel before thinking in the flow for each own. This exercise is really important to understand opportunities and where the users can feel more difficulties.
The story
Grandpa is going to help take care of the kids and pets while the parents go on a small weekend vacation.
The mother is the manager of the house, she needs to add Grandpa as a new user and send the app link for him to download.
Grandpa needs to download the app and check the pet needs.
Design
Wireframes
Wireframes
Designing the features on the desktop was an important part of the design phase. I started by the low-level wireframes to understand how I could organize all the features gather on research in order to make sense to our personas and their journeys.
Main Page with dashboard: editable on desktop for a manager, on view mode on mobile for a normal user
Interior, Users and Pets sections follow the same logic: the users can create new objects. These pages gather cards of all objects created with possibility of edit, delete and change settings.
Testing
Tests were made not only to small components, to see if they were easy to use/understand, but also to some flows - mobile is to be used by the entire family.
The goal of desktop testing was to understand not only usability but also to check if the features met their needs. Since this idea was created from scratch it was really important to validate the features and how they were designed:
- features value for user (and hierarchy)
- the difference between view and edit components
- understand what is editable
- order of items show
- the difference between alert colors
- permissions on the app
Example: the appliances edit mode change depending on the type and allow remote control of the most commonly used interactions, this was something a house manager felt it was missing from the first iteration. It was added to the wireframes.
Logo created for Pocket Home on Sketch
Styleguide
The styleguide (image above) was created after the low-level wireframes were designed. I started by experimenting with the color palette. Creating the logo helped me visualize the color palette and its application on the prototypes.
Styleguide created on Figma
Final Screens
Prototypes
Prototypes
What to prototype?
The wireframes were designed in the process of understanding the features and how they should work within the persona's needs and troubles. I made the decision of designing desktop as a showcase to the management abilities of the device. Show each section and their pages, all the configuration and editing strength of the desktop. On the other hand, mobile could show a phone of a user with very few editing permissions.
Desktop prototype. Click on the top right corner icon to expand and interact with the prototype.
Mobile prototype. Click on the top right corner icon to expand and interact with the prototype.
Final Thoughts
Amazing... but not complete!
There's still a lot to do.
A smart home is a complex and critical program that demands safety but also usability for everyone in the family. Most features needed some research and understanding of the context and the way they are used.
Because of this, I left out some features to research, design, and test in the future.
To do in the future:
- Creating rooms, users, appliances, etc.
- Other pages inside General beside Security
Do I achieve my goal of showing what I do at work?
Overall, I was able to integrate some of the design patterns, features, and processes I use in my last year of work. It's more client-focused and less enterprise like. In a way, it added more to the challenge of creating this idea.
And I did something new...
The process of thinking a product from scratch all by myself was a good learning experience.
It made me value research and testing as the building blocks of design: they gave me all the info I needed to understand how to design a better product for different users. If I had questions I would test, grab a tester, and try this feature, ask questions, experiment with other products.
I did not have other UX Designers, POs, Devs, to help me. Yet, the answer was always out there.