“Big Brother” in the Palm of Your Hand
Bet you hardly noticed the last time a surveillance camera recorded your presence. You may have been walking down the street, entering a store, or ordering fries with your burger. While cameras are so ubiquitous that they are easily ignored and no longer deter all bad behavior, they do provide valuable intelligence for retail operators focused on improving their bottom-line and protecting their business from fraud and theft.
Problem to Solve
Envysion® provides cloud-based video surveillance that marries point of sale (POS) data with video for quick serve restaurants and retail stores. Area managers and franchise owners are on the road a lot, and need visibility into what’s going on in their stores when they aren’t there. Is the manager on duty spending too much time in the back office instead of helping guests? Is the kitchen prepared for the lunch rush? How fast is the speed of service, and what is the customer experience? Are cashiers manipulating the register to steal cash or give away food?
Usage statistics indicated that the existing mobile web application was responsible for more than 40% of all traffic to the site. Customers clearly found value in the convenience of checking in on their stores remotely via their phone, and put up with the clunky and slow interface for 3 years. However, the poor customer experience was becoming a competitive disadvantage in a market that demanded fast and easy access to video on their mobile devices.
The majority of current users accessed the web application from an iPhone, making the first priority delivering a native iOS app, followed by Android. Many different types of hardware devices would need to be supported, including 360 degree cameras that can be dewarped and manipulated with intuitive gestures. API modifications would inevitably be needed, yet we did not want to shift the experience too far from the existing paradigms of the web app. The intended users are not very comfortable with technology, and they don’t want to train their staff or support complicated applications. Above all, the experience needed to be performant and simple to use without any instruction.
Optimize for most common use case
To get on the same page with project sponsors and stakeholders, I designed a task-flow diagram highlighting in red the most common path the user is expected to take. While we optimized the design to support quick access to a single camera playing live video, users would also be able to search for recorded video by date/time, and view up to 4 cameras at once from multiple stores. This diagram documented our conversations around what we believed was critical functionality for a beta release to get early feedback from users.
To help the (outsourced) development team understand the scope and estimate costs, I created a screen flow diagram that illustrated the templates needed for each view and how they were connected. The major parts of the app were numbered to indicate their relative priority to roughly inform the release plan.
Daily whiteboard sessions with product management resulted in a collection of wireframes that documented the interaction design patterns. A review of competing apps on the market revealed a trend towards overcomplicated UIs with customization options best suited for IT professionals. We intentionally focused on meeting the needs of the non-technical area managers and operators in the most intuitive and simplistic way possible. A quick and dirty interactive prototype was then created with Invision to test out the flow of screens on mobile devices.
The color palette and look and feel of the app was coordinated with the marketing team. Screen by screen, I documented the visual and interactive design in a google slide deck to facilitate weekly conversations with the developers. Graphic assets were also provided in various resolutions for iOS. Design modifications were made to the Android app to more closely follow the design conventions expected by Android users, most notably the placement of the tab bar under the header.
Test prototypes with users
The visual design was then applied to clickable prototypes and tested with target end users, most often in person using a scripted scenario for task completion on a mobile device. Since users told us that taking snapshots (still images) from live video and sharing them via text or email was the most important action they’d want to take on their phone, we modified the design to encourage that behavior.
Using iTunes Connect and TestFlight, I invited 49 customers to participate in the beta program, and collected feedback via web surveys to gauge their experience. Interviews were conducted remotely and in-person with 9 beta testers to better understand how different personas were using the app in the context of their work. Their feedback helped us refine the design and identify critical functionality for the first market release.
The App Store approval process was surprisingly quick and painless, yet releasing the app required a lot of coordination between the developers, stakeholders and marketing. Customer permission was requested to show camera views of their restaurants in the preview screens for the App Store, in addition to the quotes we had gathered from our beta testers. My client’s sales and support staff needed to be enabled on the functionality of the new app before it was released to the market. Lastly, we needed to add a way to capture usage analytics via Firebase to monitor how customers were using the app.
Early feedback from customers was key to understanding the mindset of our target users and their needs. We tested various ideas for selecting cameras, and every time simple won over sexy. They loved the simplicity of the UI, and found it easy to navigate. The gestures for manipulating the timeline were intuitive and obvious: the pinch, zoom and pan gestures made it easier for them to find the footage they were looking for than on the web application. With the app, area managers and franchise operators can virtually be 5 places at once, and know what’s happening at their stores.
Many thanks to the collaborative design efforts of:
Brandon Line, Director of Product Management
Christian Ellis, VP Engineering