Design Challenge
Dropcam's promise to customers was to deliver an easy to use Wi-Fi connected camera with a 60-second setup process. This promise was made before "the cloud" was common vernacular and Bluetooth technology had yet to be implemented on smartphones.
Web Setup Flow
Task Flows
System Feedback
Getting the communication touchpoints right was critical in this flow, and had some unique challenges to consider.
There were several opportunities for things to go wrong during the setup flow, including camera hardware issues, server communication issues, and Wi-Fi network issues. Some of these issues could prevent the successful setup of Dropcam, and if an issue occurs prior to Dropcam being connected to Wi-Fi, the only means of communicating issues to the user would be signals from the camera itself.
The only hardware elements on the camera that could be used to communicate to the user were the camera's speaker and the status light. It was decided to use the status light to flash colored patterns to indicate the camera's state to the user.
Below is a map of the camera's status light during the setup flow:
System Usability Testing
Because ease of use was a cornerstone experience promise to our users, Dropcam's setup flow went through extensive usability testing. Not only did we need to test the simplicity of the flow, but also test the system on a multitude of platforms.
The process of testing the setup flow included:
- writing the test script, permission waiver, and NDA documents
- transferring the desired task flow into checklist to track participant's actual flow against
- prepare "test lab" with required materials for session
- recruit participants that reflected Dropcam's target user demographic
- schedule test sessions with a user, myself as moderator, and another team member from the engineering, product, or support team to take notes throughout the session
- moderate test sessions
- review key takeaways with participating team members at the end of the day
- synthesize all usability test session findings and report back to team about recommended changes
- update designs given recommended changes and test again
Results of Testing
The biggest issue revealed during usability testing was the requirement that Dropcam had to be plugged into the computer to get the camera connected to Wi-Fi.
What testing revealed:
- users very rarely read the quick start guide
- after unboxing the camera, power cable and power adapter, without hesitation users plugged the USB cable into the power adaptor and plugged it into the wall
- users struggled to find the micro-USB port on the back of the camera
- after getting the camera plugged into power, users didn’t know how to proceed and would then look at the quick start guide
- after realizing the camera had to be plugged into the computer first, users were able to quickly recover and complete the setup flow
Witnessing this, I recommended that we put labels on the USB cable to indicate where it needed to be plugged into and also flagged where the micro-USB port was on the back of the camera. This improved the success rate, but was still not ideal. This flow did not support the user’s natural process and mental model of how the system should work. A more adequate solution to this issue is discussed below under “Mobile Setup Flow”.
Visual Design
Mobile Setup Flow
After a successful launch of the Dropcam web-based setup flow, attention shifted on making Dropcam's setup experience achievable with the aid of the user's smartphone. By doing so, this would enable the user to setup Dropcam more intuitively, based on the natural flow we witnessed users going through when testing the usability of the web setup flow.
Exploring Solutions
Team-wide conversations at whiteboards were on-going, discussing what technologies were available to allow for a Dropcam to be setup with a mobile device.
Solutions that were explored included:
- could we use the camera's speaker and the phone's microphone to establish device communication?
- could we use the camera's status light and the phone's camera to communicate information between the devices to establish a connection?
- what about displaying a QR code on the phone and use Dropcam's camera to capture information from the QR code?
- is Bluetooth technology an option?
For each technological solution discussed, questions were asked around:
- what security risks were introduced and how might we mitigate these risks during the setup process?
- what does Dropcam need to do and what does the phone need to do at each step in making a connection and communicating information between each other?
- what did we need to communicate to the user during this flow and what information did we need from the user?
It was decided to move forward with designing a BTLE camera setup flow.
Task Flows
Wireframes
Visual Design
Final Thoughts
