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
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
Click To View In Miro
My Role - UX Designer/Researcher
My Design Process
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?
Because
the manager is not provided with a collaborative tool that is easy to use.
How might we
help the manager to simplify the repetitive works by tool requiring the least learning curve?
an interface simulating the traditional visitor list in paper form!
We can create
.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.
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.
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
The key is to be the first to launch the smart access control service and bind with other existing services Smart Daily provided.
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
Pain Points
Repetitive and complex works without adequate tool
.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
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
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
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
(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.
" 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.
" 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.
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.
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.
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.