loader image

Mall Security Systems

 

 

 

 

ROLE UX-UI DESIGNER     CONTEXT ADVANCED SECURITY     DATE Jan 2017

Copyright: jackethead / 123RF Stock Photo

INTRODUCTION

As part of my UX studying experience lately, we were given a task:
to UX-design a whole camera-security system for a shopping mall.

ABOUT THE SYSTEM

 

  1. The system is used for continuous monitoring of the stream coming from the cameras scattered throughout the mall. In addition, the system feeds information from different sensors (heat, movement, theft)
  2. The system is a shelf product and needs to accommodate different customers
  3. The system has about 100 cameras spread over three floors
  4. The system will provide real-time alerts
  5. After handling the event the user will enter an event report into the system

 

Copyright: stnazkul / 123RF Stock Photo

POTENTIAL USERS

In order to understand the needs of the user, I was asked to analyze who the potential user was going to be…

Security Guards

Shift Managers

Mall Managers

However, for this task, I needed to specifically target the security guards / shift managers in the security room, and those spread around the mall.

WORKING ENVIRONMENT & CONDITIONS

The system will use two 17 “screens in a resolution of 1366 x 768 px.

The screens support Multi touch, but there is also a mouse and keyboard.

The system also has a tablet version designed for the following users:
1. Guards in constant motion
2. The shift manager and the mall manager

ROLE ANALYSIS

So, focused on our security guards – those inside the control room, and those spread around the mall – we spoke and brainstormed together to identify the end-user better…

AND THIS IS WHAT WE GOT…

Part of the pictures I used must be credited. So here are the links to them:

Designed by Freepik  Designed by Freepik  Designed by Freepik

THE SYSTEM SPECS

  1. Scanning cameras for events
  2. Response to alerts received from sensors
  3. Response to alerts received by mobile phone from other security guards / visitors / store owners
  4. Event tracking and management: Locating the event at the mall and observation point, alerting various entities in the mall and outside it, typing in queries and reports about events

THE SYSTEM REQUIREMENTS

  1. Touch screen support
  2. Support for quick orientation around the mall (support for several modes)
  3. Support for two different modes of work: routine, and event management
  4. Possibility to organize the video-stream screen according to the user’s needs
  5. Support for different levels of skills and computer literacy
  6. Coping with information overload and graphic load
  7. Fast switching between cameras and mall areas
  8. Minimum information entry

HANDS ON, THEN!

From beginning to end. And the beginning was just that…

1. The first screen mockup shows a sidebar with all the numbered cameras in groups of 10. I thought it would be good to organize the cameras ordered by number. A quick SEARCH BAR, to search for a specific camera, and the main area of the screen showing the 10 cameras of the selected group.

Once there’s an event, the little square of the camera catching it, would start calling the attention somehow, as well as showing the kind of event (in this case fire) as an icon at the bottom of that square.

2. When the screen is touched on the event happening, it zooms in to see the picture better.

When an event goes off, the system will show an alert, as well as make a sound alert. All events are automatically recorded and registered, including sound and visuals of all the cameras involved, as well as all the actions performed by the guard sitting on the computers, the guards “on the field” that were involved, and the interaction between them.

BUT, HOLLLLD YOUR HORSES!

I soon realized that numbering the cameras wasn’t going to help here…after all, no-one remembers where each camera goes! Rather, the user needs to find THE AREA of the event very quickly, to be able to act right away.

3. So I went back to my pencil and papers, and changed the sidebar from camera numbers to areas.

Each area would show its name, the floor it’s located in, and the nearest exit to the street or parking lot.

In my drawing there’s a fire event happening in area C1, which is the FOOD COURT, located on the 2nd floor, and which is near Gate 8 (North East of the Mall).

2. When the screen is touched on the event happening, it zooms in to see the picture better.

When an event goes off, the system will show an alert, as well as make a sound alert. All events are automatically recorded and registered, including sound and visuals of all the cameras involved, as well as all the actions performed by the guard sitting on the computers, the guards “on the field” that were involved, and the interaction between them.

2nd SCREEN MOCKUP

The second screen would immediately show the area of the event on a mall map, zoomed in to the event.

Its sidebar would show the event area highlighted with a small icon showing the kind of event happening (in this case a fire), as well as the cameras involved in the event. In order to highlight the event even more, I thought it would be good to have this icon repeated horizontally along the top of the screen.

The main functions of the second screen would be:

1. Clearly showing the fastest way to the area of the event, and the secondary access routes possible, as well as the nearest gates out of the mall.

2. Detecting where the nearest guards are positioned on the field, with the possibility of making instant contact with them by tapping or clicking on the screen. Then, a sort of talk bubble would show next to the guard character, showing his details I(name, security guard nb, and real-time location in the mall).

3. Accessing the three main emergency services by a tap/click on the screen (police, ambulance, firemen).

4. Allowing a quick “cancel call” button in case of false alarm, and a shortcut to report the event.

DESPITE AXURE

(there’s also Powerpoint…)

YES, YES… OUR MENTOR INSISTED

I would have never thought of Powerpoint as an efficient prototyping tool. But this was the deal: Powerpoint or die… so I took the challenge.

 

The following are a few prototyped screens I designed in Pow@#!)*&^point (lol)

AND WHAT’S WITH THE GUARDS “ON THE FIELD”?

Well, we thought of them too.

Remember the system’s specs requiring a tablet for each guard to patrol with?

Well, from observing different guards at shopping malls and public areas, I quickly understood that running around with a tablet in a pocket or pouch, and having to take it out to start answering to an incoming call from the control room, or even when asking for security back-up in case of an event, wasn’t practical.

Tablets are bulky, and in order to use them you need both hands. In case of an event, the guard needs to run fast while looking at all sides and corners, and while -maybe- even asking for some back-up.

That’s why I thought a regular mobile phone or a phablet would be better. Our mentor couldn’t agree more.

AT A MOCK-UP LEVEL

Assuming there would be an app for mobile devices connected directly to the main security system, I thought of the simplest and fastest way a guard in action should interact with the app.

Thanks for watching!