Maria Meireles
Designer

Pocket Home

Live your home from your pocket

Image alt tag

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. 

Pocket Home

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. 

Pocket Home

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. 

Pocket Home

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. 

Photos of home management physical devices

Photos of home management physical devices

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 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

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

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. 

Pocket Home
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

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. 

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

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

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.