Surveillance Software UCD Consulting

监控安防企业咨询项目 - UCD咨询与概念设计

Time (时间) :
07.2015-09.2015

Role (职责) : 
User research; 
UX Design

MT Team (团队成员) : 
Fang Chen (UX Director)
Jianlong Fan (Senior UX designer)
Libo Song (Senior UX designer)

The client is one of the market leaders of IP video surveillance in China. The client was looking to UCD development process to create efficient and superior user experience. At meantime, the decision-making level expected input of up-to-date design thinking and design approaches for the development department.

In research part: I conducted secondary research; facilitated and documented stakeholder interview; conducted heuristic evaluation and user interview with the UX lead;

In design part: I analysed the data and co-created with senior designers and researcher. I created several pages of wireframes and Hi-Fi prototype for the concept design. I also made the framework for design guideline with other team members.

Challenge

项目挑战

Challenge

The project started with unclear statements so the team firstly conducted field study in clients QA test environment. At same time we carried out stakeholder interview to dive deep into the project requirements.  Throughout interviews with decision makers and stakeholders, the challenges and the exceptions were located at different levels.

  • Review and evaluation of the current product lines;
  • Conduct user research with distributors and clients;
  • Conducted concept design with internal design team, show case the UCD design process;
  • UCD training with engineering, development and design departments;
  • Based on the concept design, come out with interaction and visual design guidelines.

User Research

用户研究

Secondary Research

二手资料研究

  • Investigate the market and the trends;
  • Analysis of user and environment;
  • Research into the latest techniques;
  • Research into the HCI and surveillance software design reference.
Stakeholder Interview

利益相关者访谈

The MT team conducted stakeholder interview with decision maker, product owners; designers and marketing managers. There were several levels of expectations from different stakeholders.

In nutshell, there was very limited UCD impact in the current development process, and the decision makers and design team realized it. Therefore, the MT team decided to invite the client design team to collaborate in the following process to show how to conduct user research and how to transfer the research insights to concept design.

Based on the stakeholder interview, the team found:

  1. Designer's pain points: The designers worked in different products and lacked design guidelines, they lacked a uniformed design guidelines or principles.
  2. The workflow: The marketing and engineering department were in charge of requirements and function design, which means the designer's impact was missing at early stage of the development process.
  3. The silos: Designers had limited information from the end-users, the software architecture and the enough information about the requirements, which created a barrier in the communication process.
Interview

用户访谈

The process of field study and remote interview.

  1. Offering recruiting and screening standards to client;
  2. Visiting the police surveillance center to observe the context and typical use cases;
  3. Visiting typical end-user to conduct interview;
  4. Remote interviewing distributors in Turkey and Beijing;

User A 
Op Software

Focus and driven: Effectively exporting data and creating daily data report and monthly data report. 
Behaviour:  Customised his work flow based on his tasks; No wish to discover new functions; 
Taste: Simplicity and clean UI style; Willing to try out latest geek stuff in everyday life;
Daily used function: Feature A, Feature B.
Typical task flow:

During the interview, participants was asked to select UI style and showing their task flows. Back to office, the team printed out the interfaces and review them.

Evaluation

评估现有产品

  1. The team had limited time to conduct walkthrough all the software in test environment, thus we selected two significant products as sample to carry out Heuristic Evaluation.
  2. Field visiting in QA department to walk three products through, including NVR system (Network video recorder ), mobile surveillance app; police surveillance system.
  3. Conducted heuristic evaluation.

Product A
Surveillance Software (PC)

This software was integrated into best selling surveillance system. The team tried out METRO style in UI design. The customer of the system was corporation, school, hospital or factory. The end-user various from security guard to property owners. The most typical task flows included reviewing video, managing hardware and editing surveillance plan.

The team walked the software through both in QA environment and in MassThinker office. Therefore, we were able to evaluate it in detail. The 10 Usability Heuristics for User Interface Design by NN/g was followed.

The screenshots of the surveillance software

Product B
OP Management Software (PC)

The Operation and maintains software was called IMP (Intelligent Management Platform). This was a synthesized information system. The users of this platform consisted of : 1. Technical engineer from client's support department who installs and updates the system for customer; 2, Operations engineer who is in customers' company; 3, Non-professional users from customer's company. Therefore, the product was a mixture of different features developed by separate development teams. The basic UI style was not consistent, and the information architecture was not able to support the new features.

The screenshots of the IMP software

The 7 CATEGORIES of usability problems founded:

  • Feature priorities  & categories was unclear
  • Confused  interface layout
  • Logic problem in IA and navigation design
  • Language and information problem
  • Lacking visibility of system status
  • Aesthetic design and clarity problem
  • Lacking consistence with UI style

The sample of the heuristic evaluation report:

The heuristic evaluation and cardsorting. Teasing out the current information architecture and re-arrange them.

Concept Design

概念设计

Design Goal

设计目标

  1. Based on research, the team collaborated with designers from client company and sorted out a new information architecture. Meanwhile, a design goal for IMP came out from discussion. The heuristic evaluation uncovered a diverse set of problems. The concept and sample design was conducted to present a design thinking instead of a deliverable interaction design or UI design.
  2. Therefore, with the agreement achieved, the MT team proposed the following design goals:
  • Customized & Addable navigation
  • Clear information architecture
  • Enhancing the frequently used function
  • Sequential and consistent task flow
1

Menu Bar

LOGO, Tab switch, Admin and frequently used options.

2

Nav Sidebar

New navigation utilized vertical Nav Menu with submenus. User could edited the tabs and add new tabs, at same time the two-level side bar shows the current page.

3

Content & Operation area

The new concept highlighted the data visualization and redesign the task flow, which starts from interactions with the diagram.

The original page

Design Sample

页面设计示例

1
Data visualization

Pie chart was inappropriate to used here when user focused on the figure. The diagram lacked connection with the table below and wasted screen space

Redesign the form of data visualization and the make the chart clickable to show detail.

Medium
2
Operaion area

Mixed the screening and export functions in same area. The  screening tables were not designed based on task flow.

Relocate the two function.  Design the widgets according to user task flow and frequency

Medium
more common problem:

Inappropriate UI element;
The location was not indicating the operation objects.
Complicated table design.
Visual Design.

Redesign the sub task flows and replace the UI elements.
Re design the table.

Low

The Concept Design

1

Nav Sidebar

Following the design sample, embedded submenu into vertical menu.

2

Task Management

Task management is common function that each subpage shares. Integrating the task management into second column allows user navigation based on the task. They can efficiently control the diagnosis process instead of jumping between pages.

3

Redesigned Monitor Bar

Highlighted the figure, which really matters, and by clicking the figure, users will go to the relative page for details.

4

Table/Chart

Tables were redesigned based on tabs and some contents were hide here. User could check the details by clicking the icon inside the table. 

5

Screening & Export

Drop-down box was utilized to save screen space. Meanwhile, it offer the clear and consistent operation sequence.

The screen options were also designed with more user friendly layout.

6

Visual Details

Based on the visual design guideline, I added visual design to the wireframe.
The UI elements were extracted from the UI library created by the senior designers.

Learning

Systematically enhanced the practical skills from user research to concept design;
Gained the hands on experience of heuristic evaluation and the concept design for PC software;
Experienced the UCD consulting in B2B context;
Obtained the experience in reviewing design guideline.