Project Overview
Ygloo is a smart home system that seeks to integrate both hardware and software to create the best user experience for smart homes on the market. Ygloo will include the smart appliances that can be introduced at the initial stages of construction, which will include the following: Lights, Door handles, Doorbell, Curtains, Thermostat. We will create both the appliances and the unifying app with an effortless user experience aiming at both the B2B and B2C markets.
Responsibilities
- Plan and conduct user research and competitor analysis
- Interpret Data
- Create User Stories
- Determine Information Architecture
- Create Prototypes and Wireframes
- Conduct Usability Testing
Vision
WHY ARE WE DOING THIS?
To build a smart home system that gives our users effortless control over their homes; providing a sense of security, convenience, and awareness of their carbon footprint.
Strategy
HOW ARE WE GOING TO DO THIS?
Define
Here we will put together our insights and begin setting a clear creative brief that frames the design challenge.
Deliver
Here we will begin to finalise the designs and the product is ready for the initial launch. We will also begin phasing the product out, and set a feedback loop process in place.
Discover
At this stage we enter the users world, the aim is to look at things with a new set of eyes, gaining insights that could not be seen before.
Design
At this stage we begin to rapidly generate creative solutions, ideas and concepts. This iterative process allows us to refine our product.
Discovery
Understanding People
I began by interviewing 10 smart home users and asked them to take me through the process of installing, boarding, and controlling their smart home systems.
​
Understanding Products
I then carried out an analysis of our competitors to assess how they built their apps and products.
Insights
Learnings From People
After interviewing the smart home users there were three clear problems that they were facing.
Difficult First Time Setup
The onboarding process was not intuitive for the different apps.
No Umbrella Application
There were too many different apps for different appliances in the smart home system.
Learnings From Products
From the competitor analysis there were a few clear points that needed updating.
Inconsistent Control Illustrations
Every product had a different system for control which caused confusion.
No Uniformity In Hardware Design
There was a lack of visual uniformity across their home with the different appliances from different companies.
Define
Personality
Modern. Reliabile. Elegant.
Both the products and the app had to be something that users desire to keep in their homes.
Colours
We created a pallette based on whites, blues, vibrant, and pastel colours.
Primary
Sapphire Blue
#006494
Capri Blue
#41BBFC
Columbia Blue
#C4DAE3
Neutrals
Eerie Black
#272727
Sonic Silver
#707070
Spanish Grey
#989898
Cultured White
#EFEFEF
White
#FCFCFC
Supporting Colours
Flickr Pink
#F4147A
Mount Majesty Purple
#996EB2
Corn
#FFEE59
Magnolia
#F9EFFF
Mint Cream
#F5FFFF
Ivory
#FFFEF2
Typeface
We exclusively used Open Sans as our typeface for the Ygloo app. The key typefaces are shown below:
Heading Focus H2
Heading H1
Body Text B1
Menu Selected M1
Menu Unselected M2
21px
21px
19px
7px
7px
Semibold
Semibold
Regular
Regular
Regular
Sapphire
Sonic Silver
Spanish Grey
Sapphire
Cultured
Buttons
The buttons were designed to stand out clearly and adhere to the brand colours.
Primary
Allows the user to move onto the next key step in the app. This is the primary direction that the user should take.
Primary
Secondary
Tertiary
Elements
Allows the user to use an alternate route or to go back. This is the secondary direction that the user may take.
Allows the user to use an alternate route or to go back. This is aimed mainly to allow the user to return.
Used to interact with different pieces of hardware.
Secondary
Tertiary
Elements
Product Specifications
To create a premium feel for the products, the highest quality glass and plastics were used.
Colour
Materials
Finish
Design
Board
Build
Integrate
Control
Board
We tested two different methods of onboarding; a single page boarding and a multi-page boarding. After testing with our end users we decided to have a multi-page boarding process in an attempt to reduce any potential cognitive overload.
Method 1
Method 2
Build
We explored two different methods of building the floor plan. After taking user interviews we determined that the floor plan did not need to be highly accurate so we implemented the creation of boxes to determine room position and size - This led to a 3-step process per room.
Add Room
Name Room
Adjust Size
and Position
Integrate
The easiest existing method of integrating a new product into a smart home app was through the scan of a QR code, We decided to go one step further and use a simple touch of the mobile phone onto the product to integrate the product using NFC tagging.
Control
To create uniformity across the app, a consistent circular design was used to feature as the controller of all of the different smart components.
Lights
Curtains
Thermostat
Deliver
We tested both the app and the product designs at every step in the creative process and received very positive feedback througout. Adobe XD prototypes were created and shared with a control group and surveys were taken to continuously update the design. Feel free to test one of our working wireframes here.
Key Project Lesson
Process is Paramount
It was clear when I started the project that I was not adhereing to the process as much as I should have and as a result it caused me to redo some of my work. I quickly identified this as a problem and established a clear process for design iterations.