Mobile Center

iPhone, Android, Tablet App

Overview

Mobile center is app which allows the IndigoVision customers to maintain an eye contact with cameras from anywhere and control video surveillance activities on the go using iPads and iPhones. Surveillance and management personnel can be in touch with what happens on a site from their mobile devices by immediately accessing accurate information without having to communicate with a central control room again.

The Problem

IndigiVision provides security management solutions to the users by establishing the control room with all hardwares and softwares needed. But now IndigoVision wanted to extend the surveillance capabilities of Control Center way beyond the control room so that the security personnel can monitor their system remotely from any location over mobile and wireless IP networks using a mobile phone or tablet.

My Role

UX Research and analysis, User flow, UI Design & Prototyping, Usability Testing

Tools: Axure, Photoshop, paper, pencil

Design Process

My process will be different inn different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.

Discover

Before doing any ideation I started to analyzing the existing web application page by page to get an in-depth understanding of the field of security and Surveillance. My aim was to understand the existing features and the workflow to gather insights about it. I listed down all the existing features.

Competitive Analysis

Research and analysis was then followed by competitive analysis, in which I identified existing competitors to IndigoVision and took stock of the features they offered and evaluated their strengths and weaknesses. The current leader security solutions like ExacqVision, Y-Cam, iCamViewer, Asianwolf etc. so I started by assessing these product and then moved on to examining its competitors.

User Interviews

I then conducted 1:1 user interviews as primary research in order to learn directly from potential users about their habits, how they spend their whole day, methods of monitoring activity etc. The interviews were conducted remotely and all participants were from security domain.

Number of Participants: 5
Gender breakdown: 4 male / 1 female
Age: 25 – 43

Takeaways:
1. Users want to monitor their surveillance video on the move.
2. Users expect to maintain visual contact with cameras from wherever they happen to be.
3. Users look for the most accurate information immediately without having to communicate back to a central control room.

Persona

The previous research and analysis was used to develop a primary persona, a fictional representation of my target user. Brad Scott emerged from the primary research findings, with her goals, frustrations, and motivations drawn from the trends observed in user interviews, while his needs came from the empathy map.

Group Brainstorming

In order to generate a wealth of ideas for potential solutions, I conducted a group brainstorming session. I gathered 3 participants, provided project background and introduced them to Brad’s persona. I asked the participants to brainstorm answers to each of the How-Might-We questions and facilitated a discussion of their ideas to develop a range of concepts that might address Brad’s needs. Once I understood the security domain and different stakeholders involved, I conducted a ideation workshop at Spring Computing, India to kick start a process of exploration.

Persona

I asked the product managers, domain experts and Developers to brainstorm answers to each of the How-Might-We questions and facilitated a discussion of their ideas to develop a range of concepts that might address Brad’s needs. After reviewing the ideas that emerged from the brainstorming session, I determined which features best met the shared goals identified earlier.

App Map

The next step in the ideation phase was to focus on building the app structure. I created an app map, planning out key screens and determining where the main features would be located and how they would relate to each other within the app.

User Flow

Considering Brad’s needs and the project goals, I created a diagram that described the pathways users might take while interacting with Mobile Center. This process helped me to identify the key screens and actions users might require.

Task Flow

I also considered several key tasks that a user like Brad might need to complete using Mobile Center. This further helped me to determine the screens and actions that were necessary for accomplishing the tasks.

Sketches

The first step of the design phase was to take pen to paper and sketch ideas for some of the main Mobile Center screens. These low-fidelity wireframes helped me to determine layouts and establish visual hierarchy, while exploring common design patterns and figuring out how to integrate the app’s key features.

Mid-Fidelity Wireframes

I followed up the sketches by creating mid-fidelity wireframes, translating the sketches to a digital form and preparing for usability testing. By building the wireframes in grayscale, I was able to focus on the functionality of the features.

Prototype

Before applying the branding and visual style to the wireframes, I needed to test the design of the features to determine if they could be successfully used to accomplish key tasks. I created a prototype using the mid-fidelity wireframes and recruited participants to test it. This helped me evaluate the ease of use of the app and identify any potential points of confusion.

Usability Testing

I created a test plan in preparation for conducting usability testing. I developed 4 scenarios and 4 tasks that I asked users to complete using the prototype in order to evaluate the design. Participants were recruited from the local community and recorded each session so I could later synthesize my findings.

Number of Participants: 5
Age: 35 - 55
Gender Breakdown: 3 male / 2 female
All participants described themselves as familiar with iPhone/iPad usage

Usability Testing

Tasks:
Select/setup cameras for viewing
View camera streams
Perform operations around cameras to Pan, Tilt, Zoom etc based on permissions
Take snapshots of the Streams
Share the snapshots
Record the streams
Play, Stop, Rewind, Forward the streams
Bookmark a recorded stream
Respond to alarms
Operate relays

Branding

I began to develop branding for Mobile Center by identifying 3 brand attributes that captures the intended look and feel of the app: Delightful, Trustworthy, Contemporary. With these adjectives in mind, I sketched out the required icons, before digitizing the concept that fit the attributes most effectively. Next, I created a style tile as a guide for the visual design of the app, establishing a color palette, typography styles, and imagery that would then be applied across the mid-fidelity wireframes.

High Fidelity Wireframes

The visual design and branding defined in the style tile were applied to the mid-fidelity wireframes to create high-fidelity wireframes. The recommendations identified above were implemented as well, in order to address sources of confusion and frustration that emerged during usability testing. Those specific changes are outlined in the wireframe annotations below.

Revised Prototype

Those high-fidelity wireframes were then used to create a revised prototype. This version captures the intended look and feel of the app and improves upon the mid-fidelity prototype by including the recommended revisions determined from usability testing.

Click to see the prototype

UI Design

Finally, having applied the Mobile Center style and branding to the layouts defined in the mid-fidelity wireframes, I created a UI Kit. This is a living document that can serve as a resource, ensuring that the visual design remains consistent as the app is further developed.

iPad

Definitely it was not the end of the project. Each and every step of the design process went into many iterations with lots of modifications to enhance the features and overall functionality to make it better user experience.