Arlo Baby is a baby monitor released under NETGEAR's Arlo product line in 2017. This product received the Innovation Awards Honoree in 2017 CES's Smart Home category. I was the principal UX designer for this product's companion application for the iOS, Android, and Web platforms from April 2016 to Jan 2017.
Prior to the addition of Arlo Baby, the original Arlo product line is comprised of four smart surveillance cameras: Arlo, Arlo Q, Arlo Q+ and Arlo Pro. I participated in the design process of these products through various support tasks.
When it was decided that Arlo Baby will be the next product to add to the Arlo line, my task was to integrate all the baby camera features into the existing Arlo eco-system and ensure the same mobile application can support baby monitoring use-cases without affecting the home security use-cases.
Step 1 | Research
I always started my design projects with research. While the product manager and marketing team had already generated a list of attractive features that will likely sell the product, I still believed it's the UX Designer's job to verify how relevant these features are from the user's perspective.
The timeline of the project was very aggressive, but I took any opportunity I had to do my own research. All the parents and parents-to-be in my social circle were my primary sources. I tracked them down to chat about babies and baby monitoring. For secondary research data, I read through an extensive amount of parenting articles, Amazon reviews, and news articles.
From this I concluded there were 5 key user groups that would engage with a baby monitor:
- Expecting Parents: this user group may buy or think of buying a baby monitor. But, they would not actively use one until their baby was born.
- New Parents: their baby monitoring behaviour was highly dependent on the age of their baby and the size of their home.
- Parent Guardians of Bedridden Kids: this group would use this camera to monitor their children when they were away.
- Seasoned Parent Guardians: having more than one child and living in larger spaces greatly increased the parents' need for a baby monitor.
- Gift Buyers: this group of people may not be actual users of the baby monitors, but could introduce the camera to other user groups.
I summarized my findings with a User Journey Map (see below). This document served as the cornerstone reference for my design. The journey map highlighted the needs and pain points experienced by potential users.
Note On Project Scope: pet owners and people with elderly parents may also need monitoring camera. However, the other Arlo cameras would also satisfy those needs. For this design project, we wanted to focus on baby monitoring.
USER JOURNEY MAP
Step 2 | User Tasks, Feature List, Project Schedule
The final outcome of the research phase was a list of relevant user tasks. For the Arlo Baby project, I cross reference my list of user tasks with the product manager's user tasks and the development team's user tasks. I categorized these tasks into more contextual feature list through referencing the user journey map.
Using this final feature list, I created a high-level task flow and planned out the order in which I will need to design the features (within the time constraints I have).
Features are rated based on implementation difficulties and relevance to users. Difficult and highly relevant features get the highest priority. Difficult but irrelevant features get the lowest priority or are pushed back. I then worked with the product manager, project manager and lead developers to draft out an appropriate project schedule for design.
USER TASK FLOW & FEATURE LIST
Step 3 | Detailed User Flow
Once the project schedule had been finalized and the design phase kicks-off, I began investigating the in-scope features in detail. Referencing the journey map and the relevant user tasks, I will create a detailed user/system flow that highlights the interaction between the user and the app.
The necessary screens are then determined based on this detailed flow. During this phase, I conducted various review sessions involving different stakeholder groups including product manager and development team to review the assumptions, feasibility, and conceptual accuracy of the flow.
DETAILED USER + SYSTEM FLOW
As can be seen below, through iterations, the user flow evolved to a simpler flow to better reflect the interactions between the user and the system and the technical constraints.
Step 4 | Wireframes, Prototypes & User Tests
When the detailed user/system flow had reached a mature stage, I will begin wireframing. Once I have all the relevant screens wireframed out, I will create another wireframe flow and a clickable prototype.
During this phase, I leveraged cognitive walkthroughs with key stakeholders, usability evaluation with internal employees, and rapid user tests via Usertesting.com for validation.
My preferred prototyping tools during this phase are InVision and Axure.
Sample wireframe flow.
Step 5 | High-Fi Prototypes, Mock-ups, & User Tests
Once the wireframe had been iterated on and approved, I will convert them into high fidelity mockups. During this phase, additional design iteration will occur. I will convert my design into high fidelity prototypes and conduct additional usability evaluations to validate the design.
My preferred design tool during this phase is Sketch, and my preferred prototyping tools during this phase are InVision and Flinto.
Hi-Fi prototype sample.
Sample mock-ups for iOS, Android, and Web.