Visitor Register & Smart Access Control

A SaaS solution for front desk managers to register visitors and manage access control easily

Register visitor information and give access fast with only a few clicks. 

The Team

Analyzing customer records to define the market scale and find the potential interviewees,  interviewing the front desk managers, creating wireframes and user flows for desktop Web devices, creating rapid-prototype, and performing usability testing.

Wendy (Me) - UX Designer/Researcher (Web)

Joy - UX Designer/Researcher (App)

Dora - Project Manager

Van - UI Designer

Other 5 Developers

Smart Daily is a smart apartment application. Aiming at the Real-Name Registration Policy the government imposed during COVID, our team developed a new SaaS service, Smart Access Control, in Smart Daily that allows the managers to register visitor information easier through the desktop Web; meanwhile, allows the residents to control the visitor access through the mobile App. Smart Access Control consists of a Web for managers and an App for residents and a Web form for visitors.

Overview

me and joy.png

Duration

Mar. 2021- Jun. 2021 (18 weeks)

1. Visitor fills out a form before/at arrival.

2. Front desk manager confirms arrival and gives access.

Final User Flow

Final User Flow
Miro

Click To View In Miro

 

My Role - UX Designer/Researcher

My Design Process

Deisgn Process.png

00

Problem Space

A glimpse into the problem we are trying to solve

Background

Taiwan's government carried out the Real-Name Registration Policy, which means apartments are required to make visitor lists with visitors' contact information, so the authorities were able to track the patients and the contacts. 

User Story

Wayne(visitor) is visiting Wendy(resident) today. When Wayne arrives, the front desk manager asks him to leave his contact information on a paper form. After writing down, the manager escorts Wayne to Wendy's unit. The manager walks back to the front desk and manually registers Wayne's information to the digital form in the computer

Why does

the front desk manager register the visitor information twice?

wrench.png

Because

the manager is not provided with a collaborative tool that is easy to use.

line 1.png
line 2.png
annoyed.png
 
easy-way.png

How might we

help the manager to simplify the repetitive works by tool requiring the least learning curve?

line 3.png

an interface simulating the traditional visitor list in paper form!

We can create

contact-form (2).png

Understand the access control industry and empathize with users

01

Research

In order to understand front desk managers, I familiarized myself with the industry by PESTEL, competitive, and five forces analysis. After learning the system, I conducted interviews to verify the pains I identified.

Screen Shot 2021-10-20 at 2.47.29 PM.png

PEST Analysis

Front desk manager is a low-paying job in Taiwan, and those who negotiate with the low wage are mostly the elders that re-enter their second career or the jobless without specialized skills. As a result, many managers are not capable of handling complex tasks. As the government and entrepreneurs advocate digital transformation and smart service, apartments start to seek technological solutions to replace human labor.

competitor survey.jpg
Cometitive Analysis

Competitive Analysis

Among all the smart apartment applications, Smart Daily is one of the two that built an application for the residents, which is a chance for us to launch the smart access control first.

Challenge

The information is not transparent online and the price is based case by case

My action

Approached the sales as a customer to require quotes

Five Forces Analysis

Five Forces Analysis

The key is to be the first to launch the smart access control service and bind with other existing services Smart Daily provided.

Interviewee List

Semi-Structured Interview

From 5,000 Smart Daily's customer records, I categorized the apartments according to scales and half/full day front desk services (the left graph below). I selected six apartments to conduct semi-structured interviews following the questions (the right graph). 

 
 

Identify user's pain based on the research and specify the design requirements

02

Define

target.png

Pain Points

Repetitive and complex works without adequate tool

dart (1).png

Requirements

  • Support various types of access control, such as access cards, QR codes, and keys

  • Allow quit/end the record during any part of the registration

  • Not slow down the working pace

  • Serve pre-registered/ non-registered/ regular visitors

  • Serve individual and group visitors

Flexibility

Create flowchart and wireframe

03

Design

Complete the register, confirm arrival and leave on one page!

Ideation

Line 0.png
Ideation

1. Register

The manager can manually select or fill in the visitor information in the upper box. After clicking [Register], the visitor information will show up in the second box, Visitor List. 

2. Confirm Arrival

The manager can confirm (a) the visitor information he just registered (b) the pre-registered visitor information at the below box. After clicking [Confirm Arrival], the visitor arrival time and the [Leave] button will appear.

3. Leave

When the visitor is leaving, the manager can click the [Leave] button, and the leaving time will appear.

 

User Flow

Line 0.png
Line 0.png
User Flow 1

click the image to view

Challenge

The history, the current visitor list, and the coming visitor are mixed together, which makes the managers hard to tell the visitor's status

My action

Seperated the current/coming visitor list and the history

User Flow 2

click the image to view

Challenge

(a) When the visitor fails to open the register form, the register can't be completed

(b) It does not support every type of access control systems

My action

(a) Separated register {by visitor form} and {by manager}

(b-1) Divided the register process into {contact information} and {access control}

(b-2) The access control page will be built differently based on each apartment's system

User Flow 3

(a)

(b-2)

(b-1)

click the image to view

Wireframe

I should have...

started from low-fidelity wireframes, so that I could start testing earlier.

Create rapid-prototype and conduct usability testing

04

Prototype and Test

Prototype

I created the prototype with Adobe XD.

Usability Testing

Despite I thought everything was well-prepared and simulated the test with my colleagues, but I still faced a situation out of my expectation.

Screen Shot 2021-11-17 at 5.30.31 PM.png

" How to click here?"

-- Lao Wang, Front Desk Manager

Challenge

The manager did not know how to use a laptop without a mouse!

The testing ended up being interrupted a few times for technical problems.

My action

Terminate the testing and instruct him on the features before restarting the testing.

I should have...

created a testing scenario close to the real world and checked the hardware device the participants are familiar with.

Finding

The manager does not like to use the keyboard and it slows down the process and increases the error rate.

324FDABD-B84A-421A-BE16-5E04D5094500.jpg

" I do not give access to the normal visitors, how can I skip access control?"

-- Jenny, Front Desk Manager

Finding

Managers sometimes register visitor information without giving access. 

 

Adjust user flow and wireframe

05

Iteration

Final User Flow

After usability testing, I came back and re-adjust my design.

Challenge

Every apartment has installed different access hardware, and our system should be flexible to adapt to different scenarios.

 

My action

I created two different flows for apartments using access cards and QR codes, and I added skip options for both.

Within the process, I had a lot of discussions and meetings with Joy and Dora, the project manager.

 

Joy is amazing. She took care of the logic part. She never directly pointed out the nonsense of my design. Instead, she always asked me to persuade her. When I failed to persuade her, I realized the problems myself. She made our discussion open and helped me spot the problem fast.  

 

After error and trials, the user flow was finalized.

Screen Shot 2021-10-20 at 6.50.30 PM.png

click the image to view

Final Wireframe

During finalizing the wireframes, I optimized the UI design and rewording to make the the phrase precise and consistent.

Visitor List
History

click the image to view

click the image to view

 

String Table

Ven, our UI designer, taught me the consistency of contents, not just throughout your own project but also considering other team members' projects. 

Even we could not make any change to the products that were already on the market, we could start to be aware of this rule in our future products. We figured not everyone realized this problem. Thus, my supervisor Joy and I promoted this idea by creating a united string table that categorizes and numbers every string

 

Based on the table, I added string tags to my wireframe. It helped me re-check the consistency of contents and helped the R&D team align the wireframe with the elements the UI designer delivered.

Screen Shot 2021-10-20 at 9.07.05 PM.png

present the works to the project manager, the UI designer, and the R&D team

06

Deliver

 I had many meetings with the engineers from the R&D team throughout the project to make sure the design was technically feasible.

 

There was no big communication problem until the pandemic broke out and we started to work from home. Our business development team used Microsoft Teams to communicate, and the R&D team used Skype. I used to walk to their office straightly and find the engineer I'd like to talk to. However, with different communication platforms and intransparent contact information, I found it difficult to find the R&D team. To solve the communication problem, I tried to reach out to them more actively through their communication platform and email or ask their manager to spread the message for me, and it worked.

After the flowchart and wireframe were completed and approved by my supervisor Joy, who is also the PM, we had to hold a bigger meeting to finalize the project. I gathered10 R&D engineers and the UI designer in one day to make the final discussion.

Finding

Activeness is the key to efficient communication. 

 

CONCLUSION

What I have learned the most in this project is communication. When it comes to team discussion, instead of proving others wrong, ask them to prove themselves right. When it comes to the conversation with customers, show your enthusiasm that you are willing to learn their life and stories, and you are eager to solve their problems. 

This is my first on-hand UX project. There is a lot of space for improvement, but I am still very proud of my final design. At last, I would like to thank my wise mentor Joy for guiding me whenever I was stuck in my brain.