SAFIRE EASYVIEW: a universal video-surveillance app


Introduction

Visiotech is a wholesale company that sells security cameras and other security products, and most recently, smart home products (by the brand Fibaro).

The main workforce in Visiotech was the salespeople. But they decided to invest in research and development and created a new department, knowing that the future is with the new technologies. I was hired to be part of a 5-people-team as a solo UI/UX designer.

The two main manufacturers are Hikvision and Dahua. These manufactures had their own app, but they were not easy to use, because of the use of technical words and confusing icons. So, our main objective was to create an universal app to control and watch security cameras in an easy way.

I wasn't familiar with CCTV products, so from the beginning I decided to learn as much as I could about this topic and apply this knowledge to my research.

I use my own Sharpies, Sketch, Axure, Illustrator, Photoshop, Invision and Marvel depending on the project phase.


Benchmarking

  • IVMS-4500 (Hikvision’s app)
  • iVideon
  • Foscam
  • iSmartViewPro

I decided to compare the most important screens/elements of these apps: home screen, main menu, add device, edit device, live video, records, alarm and notifications, image/video gallery, app settings, device list and help/about/info. I evaluated the apps, usability and visually, pros and cons.

This benchmarking would help us to take decisions about our own app.

UX Benchmarking

Information architecture

UX Information architecture

CUSTOMER JOURNEY

One of the best tools that can help us understand the customer experience, inherited from design thinking, is the customer journey map.

Now we have some questions that we have to solve:

Do we have access to installers to prescribe our app? Yes, we have our salesforce and they will inform and advice about our app.

What are the benefits of our app over current applications for the installer to recommend and help us in the discovery process?

Can the user use the app from start to finish to configure their cameras? If not, how can we help him/her?

UX Customer journey

Surveys

I wanted to check the knowledge of the normal people about security cameras and apps.

First, I used my own colleagues (35 people) to do the surveys, but most of them are people related with the business and they knew the technical stuff. So, I decided to repeat with people unrelated to Visiotech (42). We wanted to check what kind of devices they used: mobile, tablet, PC, Android, iOS, Windows.

I found some interesting results in both groups:

A 60% of Visiotech’s workers had a security system in their houses or they had to install one, so they had used an app to watch their cameras. I asked them about the pros and cons of these apps.

Q. What did you like about the security apps you used?

  • Easy to use.
  • Quick to set up.
  • Push notifications.

Q. What didn't you like about the security apps you used?

  • Unintuitive and small icons.
  • Bad translations.
  • Slow.

A 88,1% of non-related with Visiotech people never used a app to set up their cameras or security system, but we could check the knowledge of some technical words (like IP or QR code)


UX Personas

Personas

When we speak of people in the context of UX, we are not referring to the definition of human beings inhabiting the planet earth, but rather to archetypal profiles that represent the needs of segments of users. These profiles are typically fictitious, created based on previous research, surveys or interviews.


Wireframes and prototypes

We have to design/develop for the tree main platform: Android, iOs and Windows. I have to research the different guidelines: Material Design, Human Interface guidelines and Windows 10 guidelines. We had different iterations to improve our design (we had user tests and a lot of feedback from our clients).

FINAL PRODUCT: Download Safire EasyView

Material Design for Android
iOs guidelines
Windows 10 design

Other examples:

During my time in Visiotech, I had the opportunity to help with other types of design and illustration.

packaging
Segway illustration
Camera Interface web
Visiotech HR vynil

Contact Me

Thanks for stopping by //