1. Design Sprint
In one week, Intrepid worked closely with Procter & Gamble to brainstorm and determine the app’s core concept and functionality. We did a lot of discussing, whiteboarding, rapid prototyping and testing out different ideas before arriving at one main direction to push the project further.
2. App flow & Wireframing
Thanks to P&G extensive user database, we were able to analyze and validate our information architecture regarding the users’ goals, needs, and demography for air freshener consumption and smart devices. Our main persona is a tech-savvy, mid-career person who owns a Nest device, and our secondary persona is a stay-at-home mom who owns Febreze’s normal air freshener. We then move to doing task analysis from unboxing to setting up the app, writing user stories, creating app flow, and determining the precise functionality of each stage.
The goal of this process was to create an experience that was both simple to understand, considering the existing technological requirements and constraints in setting up an Internet of Things device. We also wanted the user to have a fine-grained control over the scent level with the dial element, a shout-out to its partner Nest and an advantage compared to the normal air freshener.
After sketching out wireframes for the flows, we had a day-long user testing. The testing was extremely helpful. For example, at the beginning we let the users manually adjust the setting for every room as they installed the air freshener, from scent level to temperature to light mode. However, we realized during our testing that it took up too much time, which would create a barrier each time they wish to refill or install new devices. Therefore, we went with a master scent control on the home page with a default setting based on room type (ie. high in bathroom, low in bedroom). The users could change this afterwards if they wished.
3. User Interface & Visual Design
Collaborating with the designers at Creable, we developed key visual elements, new iconography and the overall look and feel that fit within the Febreze visual identity. We customized the visual design associated with each scent based on its original packaging in order to delight the users each time they try out a different scent.
4. Interaction & Animation
We prototyped the interaction and transition between each screen while working closely with developers to make sure that our design is feasible to implement.
As we were designing the interaction, we realized some of our visual elements did not quite make sense architecturally. For example, the room list on the home page used to be vertical, yet the way we go from room to room was to swipe left-to-right. We went back and change the design on the home page so that the spacial structure stayed consistent.