Homie
2016
UI/UX Design
OUTPUTS: Information Architecture, Prototype, User Personas,
Journey Map, User Flow, Wireframes, User Interface
TOOLS: Axure, Sketch, InVision, Excel
ROLES: UI+UX Designer, Writer, User Researcher
Background
The promise of a fully connected home has finally arrived. With the emergence of the Internet of Things (IoT), users can now control everything within their home, remotely. People can control their home’s temperature (NEST), they can control their lights, their entertainment, and much more. Connectivity will only pervade with time. Smart home technology will eventually be embedded in virtually all household devices. Mobile connectivity will be a crucial ingredient in bringing together all the pieces of the smart home puzzle.
The Problem
The technology to automate nearly any conceivable item in the home is now more accessible than ever. The fully outfitted smart home is now technically a reality but has failed to catch on with the general population. The landscape is still very fragmented because there still isn’t an integrated way for users to control their whole home.
Research
For our initial research, we sent out a survey that received 97 responses. We used the results to formulate questions for our user interviews. We interviewed a total of 13 people to get a better idea of their home environment. The demographics of those surveyed included both homeowners and renters who fell in the millennial and baby boomer age groups. My team and I interviewed both those who considered themselves tech savvy and tech novice.
We obtained a base knowledge of the space by conducting online searches, carousing tech forums, and sifting through user reviews on smart home tech websites.We also conducted a competitor analysis to get a broad idea of common user pain points within the smart home technology space.
Research Objectives
-
Gain a thorough understanding of the user's
smart home technology needs and frustrations -
Why people have failed to adopt
-
Identify patterns that contribute to smart home tech's
successes and failures -
Recognize the emotions experienced by the user
Additionally, we aimed to collect quantifiable data on:
-
Number of technologies involved
-
Motivations of current users
-
Reliability
-
Usability
-
Maintenance
-
Cost Efficiency
We continued our research by conducting a series of one on one interviews
with potential users and current users of smart home technology. We used
the collected data and interviews to work through an affinity diagram and pinpointed common frustrations: i.e. things like roommates or family members forgetting to turn off the lights, high utility bills, and safety concerns. The affinity diagramming allowed us to collaboratively zero in on relevant insights while empathizing with our users. Three distinct user pain points emerged: security, convenience, and control.
With the frustrations of our potential users in mind, we carved out our design principles. We kept these design principles in mind throughout the process of designing and re-iterating our product:
We also kept these principles in mind when designing our target users.
After analyzing and synthesizing the data from the initial interviews & the competitive analysis, I was able to craft user personas and user stories.
From these stories, we chiseled out a user persona into the ideal user for our product and mapped his journey. Plotting out our persona’s emotional landscape gave us a look into how we could use experience design to make a positive impact on our potential users.
Our primary persona, Dan, gets frustrated with the lack of control, he has over his home environment. Dan’s journey showed that while he was at work, things at home seemed to be going awry. His electricity bill was inflating and he noticed his family members leaving lights on, while they were out of the house. Dan felt concerned and felt compelled to find a feasible solution to balance his home and work life. Thus, we needed to create a seamless experience for Dan; one in which he could effortlessly manage his home remotely. This would help him ensure that his family and home were both secure. Because of Dan’s utilitarian mentality, it was also imperative for us to design a product that was clear and clean.
Concepts & User Testing
We wanted to get our initial app concepts out as soon as possible for testing. We began by sketching our ideas on paper. After sketching out these screens on paper, we uploaded them into POP to create clickable paper prototypes for the portion of users we tested remotely.
Our test objectives? Observe how testers would interact with the information hierarchy of our app and discover any possible snafus within our initial concepts.To research this, we presented users with a common task: Check to see if there was a light on in their home. Of the users we tested, half fell into the
25–34 age range. Homeowners and renters were equally represented and the majority were either sharing living space with roommates or a significant other. Everyone tested was a smartphone user.
We recruited users to test both remotely and in person. We asked the remote testers to think aloud and walk us through their thinking process. Ultimately, we discovered that testing with the paper prototypes while face to face seemed to be the better method. Testing face to face was a bit more multi-dimensional. It allowed us to more deeply observe how users worked their way through the process.
User Feedback
“AT FIRST, IT DIDN'T SEEM LIKE THERE WAS A TOGGLE.
I'M COLORBLIND. WAS THE LIGHT ON OR OFF ?"
USER #1
“IN REAL LIFE, YOU WOULD JUST GO INTO A ROOM
AND ADJUST THE LIGHTS UPON ENTERING"
USER #2
I synthesized the data that the team collected during these interviews. As a result of our findings, I made the following recommendations. We kept these in mind when further iterating our product:
-
Users need a confirmation when they complete a task. This will add to their sense of security while using our app.
-
Avoid using vague labels to categorize tasks to minimize user confusion.
Keep it clear. -
Special attention should be paid to button affordance to prevent user confusion.
-
Prevent overwhelming the user with too many features on screen.
Give all elements proper spacing and hierarchy. -
Inclusive design: Visual elements and text based elements are of equal importance. Users who aren’t fluent in English, rely on common visual cues;
just as color blind users may rely on text-based labels. By not using both, we
risk ostracizing users who may think the product isn’t meant for them. -
Users appeared drawn to the experience of using the toggles to turn on/off lights. Making the toggles vertical instead of horizontal might be useful for users; think about how a physical light switch flips up and down.
Consider incorporating skeuomorphic design elements into light toggles. -
The act of going into a room and turning on/off an item was a familiar pattern to our potential user. The architecture of our app should focus on this insight.
With these findings, we reiterated our concepts and built four mid-fidelity clickable prototypes with Axure. For this next iteration, we wanted to further explore: the architecture of rooms/categories, the way new devices would be added, accessibility to quick options, and master light control vs individual light control. We presented the new prototypes to six new testers and gave them two tasks: add a new smart device and check to see if a light was on in their home.
Initially, we conducted testing with Prototype One, Prototype Two, and Prototype Three. However, after the observations made and feedback received from our first three testers, we decided to test Prototype Four. The fourth prototype included preferred features mentioned by our testers. Thus, we felt testing it would be beneficial in speeding along our research. Additionally, Prototype Three focused solely on on- boarding and allowed the others to center testing on the use of navigation patterns.
Continuing our testing with the addition of the fourth prototype, we briefed users to assume that they already had the app. The sign in screen and on-boarding became nullified for this round of testing because we wanted to keep the focus on getting feedback about other features (the one exception being the prototype that was specifically focused on on-boarding). We were looking for how the testers understood the main screen, navigated to a Bluetooth connected device, and got to a room that controlled a light. Some prototypes intentionally had more than one way of getting to the final screen to help us evaluate what users noticed and preferred. We asked several questions after each prototype test and closed with some final questions, in which we asked the tester to reflect and compare all four concepts.
After the team had refined each individual interview for our test report, I was primarily tasked with synthesizing the collective information — connecting the dots between interviews — to pull key insights for our findings, and recommendations.
Findings
-
Smaller elements should perhaps zoom in/focus/get larger when tapped to accommodate older users and users with vision impairments.
-
Testers consistently choose to skip the onboarding process. In future iterations, prompt the user to complete tasks pertinent to using the app. Rather than making onboarding a walk through, make onboarding interactive and engaging for the user.
-
It’s detrimental that every screen has a back button or the ability to undo.
-
Giving users the option of how they would like to detect or connect items seems to spur skepticism and confusion. Regardless of the technology, the product should automatically detect new items installed within the home. The product should be intuitive enough to detect all connected devices via Bluetooth, Cloud, and wifi.
Creating a Visual Language
After much deliberation — reviewing, discussing, revising, and white boarding — our team decided on a unified user flow. Although the ability to add more rooms on the home screen prompted some questions; we decided that my radial menu screen was the best option for our app’s home screen. I intentionally designed the screen to only display six rooms at a time based on Hick’s Law that a greater amount of choices leads users to decision paralysis. We reconciled the adding more rooms concern by placing a button in the middle of the circular rooms menu so the user would be able to view all rooms and customize the rooms screen to show his preferred or most used collection of rooms.
​
With the unified user flow, we each created our own distinct look and feel for the app. This eventually led to the creation of four individual high fidelity prototypes. When crafting my visual style for Homie, I began with three distinct mood boards to express the feelings we wanted to invoke with the app. Throughout interviews and research, we found that security seemed to be an overarching concern with using this technology. Thus, I ultimately wanted to create a visual language that communicated trust. I further expanded this idea by creating a style tile. The result was a polished modern look with ample space for each element to make things clear and clean.
For the color palette, I used a deep royal blue and muted gold to evoke a sense of luxury and control while accenting with warm neutrals to convey a sense of warmth and “homeyness”. By implementing these colors in a gradient, I was able to visually communicate temperature control transitioning from warm to cool. I paired a font that embodies clean comfort with a more pragmatic crisp font for its readability. With shapes, I utilized circles and buttons with slightly rounded edges to give the user a sense of connectedness — seamlessness. I topped off the style by implementing customizable photography within the buttons on my home screen. Giving the user the option to add an image from each connected room in their own home communicates the message that this product is personal and “meant for you”.
Final Notes
Overall, the design process of continually prototyping, testing, exploring options and refining the best solutions proved to be extremely effective. Had there been more time, we would have definitely continued refining and optimizing the customization options available to the user.
Although the entire project had to be done quite rapidly, I feel our overall output would have been a lot more efficient had roles been delineated. If I could go back in time, I would have charged myself with delegating tasks amongst the team. Through this project, I learned how imperative role delineation is for successful collaboration.
I came into the project thinking that my past experience working on teams where communication and flexibility were key had fully prepared me for working in this kind
of hyper-collaborative environment. However, I ended up learning so much about collaboration and about how disparate ideas can be between members of the same team. Learning how to meld those ideas together into one well-defined idea that I could iterate upon was one of the most valuable lessons I learned in the course of this project.
