Lead Product DESIGNER
Visitors Management System
Visitors Management System is a security service for office owners providing the ecosystem and tools to control the visitors and employees flow in and out the building
Task
Team
Solution
Create business processes to track and manage visitors' and employees' movements in an office.
Make it possible for company admins to check in and out a visitor, view reports, invite a new person.
Make it possible for visitors and employees to check in and check out themselves using a badge.
Make it possible for company admins to check in and out a visitor, view reports, invite a new person.
Make it possible for visitors and employees to check in and check out themselves using a badge.
2 UX & UI designers
FE developer
3 BE developers
2 Xamarin developers
Android developer
FE developer
3 BE developers
2 Xamarin developers
Android developer
During 4 months the whole system designed from scratch.
This process included the following:
— Web service design;
— Tablet app design;
— Badges design;
— Integration of scanners and printers into the process.
As a lead designer I initiated and was involved in the following tasks:
— Requirements elicitation and short description;
— Organization of work of designers, Roadmap, daily syncs, MoMs;
— UX & UI specifications in Figma, description of Use Cases.
This process included the following:
— Web service design;
— Tablet app design;
— Badges design;
— Integration of scanners and printers into the process.
As a lead designer I initiated and was involved in the following tasks:
— Requirements elicitation and short description;
— Organization of work of designers, Roadmap, daily syncs, MoMs;
— UX & UI specifications in Figma, description of Use Cases.
Web Application
Tablet Application
A visitor comes to a building
A description of visitor’s interaction with the tablet.
V. = visitor
S. = system = tablet
1. Visitor taps “Check-in” button at the tablet’s home screen
2. System checks if the verification step is enabled in the web app settings
3. If yes — System shows the step #4 (verification step)
If no — system considers each visitor as new (see description below)
4. Visitor finishes verification by email or by phone (see full description at the right column)
5. S. recognises if the visitor is returning or new, has invitation or doesn’t, is in the watch list or not. See description for every case below.
If the visitor is new
6. S. opens “What company are you visiting?” screen
7. V. selects the company
8. S. shows the checkmark near the company and enables the “Continue” button
9. V. clicks “Continue” button
10. S. opens “Who are you visiting?” screen
The search field is enabled by default, the keyboard is shown.
11. V. either enters the name in the search box or scrolls the list of hosts and selects their host.
12. S. shows the checkmark near the hos name and enables the “Continue” button
13. V. clicks “Continue” button
14. S. checks what fields are required for personal information (depends on the settings) and opens “Personal information” screen
S. prepopulates the email or phone used in the verification step
15. V. enters their info
16. S. validates email & phone and shows error if there is any
17. If there is no errors and all required fields are filled — S. enables “Continue” button
18. V. clicks “Continue” button
19. S. checks if the company admin has uploaded a legal doc in the web app settings.
— If yes, then the S. checks if the visitor has already accepted a company’s agreement latest version.
— If no, see step #23
20. If a visitor hasn’t accepted the legal doc before, S. opens the “AT&T Agreement” popup (“AT&T” should be replaced with the company name)
21. V. reads and accepts the legal doc, clicks the “I Have Read & Accept the Agreement” button
22. S. checks if the “Email Me a Copy of this Agreement” checkbox was checked:
— if yes, S. sends an email with the text of the agreement to visitor’s email,
— if no, see next step
23. S. checks if the photo is required
— if yes, see next step
— if no, see step #26
24. S. opens taking photo screen
25. V. takes a photo
26. S. opens “Almost done!” screen
27. V. checks info and a badge and clicks “Finish Check-in” button
28. S. checks if the printer is connected to the tablet
— if yes, S. shows the “Your badge is printing...” screen
— if no, S. sends an email with QR code and shows the screen with message: “We have sent you an email with QR Code. Please ...”
If the visitor is invited for today
6. S. opens “Please check your invitation” screen
7. V. checks the invitation info & clicks “Continue” button
— if there is any mistake, clicks “Edit” button, system opens “Personal information” screen, see steps ##14–18 above. After correcting mistakes, S. opens “Please check your invitation” screen again and shows notification “Changes saved”.
8. See steps ##19–28 above
If the visitor doesn’t have invitation, but has been here before
6. See steps ##6–14 for a new visitor
7. S. opens “Personal information” screen, the screen should have all data prepopulated
8. V. checks prsonal info, corrects it (if required)
9. See steps ##16–22 for a new visitor
10. S. checks if the photo is required
— if yes, see next step
— if no, see steps #26–28 for a new visitor
11. S. checks if the visitor has already provided their photo before
— if yes, S. opens “Almost done!” screen. Next steps are the same as for a new visitor, see steps ##26–28
— if no, S. opens taking photo screen. Next steps are the same as for a new visitor, see steps ##24–28
If the visitor is in watchlist
6. S. opens popup “You don't have access”
7. V. clicks “OK” button
8. S. opens home screen
A description of visitor’s interaction with the tablet.
V. = visitor
S. = system = tablet
1. Visitor taps “Check-in” button at the tablet’s home screen
2. System checks if the verification step is enabled in the web app settings
3. If yes — System shows the step #4 (verification step)
If no — system considers each visitor as new (see description below)
4. Visitor finishes verification by email or by phone (see full description at the right column)
5. S. recognises if the visitor is returning or new, has invitation or doesn’t, is in the watch list or not. See description for every case below.
If the visitor is new
6. S. opens “What company are you visiting?” screen
7. V. selects the company
8. S. shows the checkmark near the company and enables the “Continue” button
9. V. clicks “Continue” button
10. S. opens “Who are you visiting?” screen
The search field is enabled by default, the keyboard is shown.
11. V. either enters the name in the search box or scrolls the list of hosts and selects their host.
12. S. shows the checkmark near the hos name and enables the “Continue” button
13. V. clicks “Continue” button
14. S. checks what fields are required for personal information (depends on the settings) and opens “Personal information” screen
S. prepopulates the email or phone used in the verification step
15. V. enters their info
16. S. validates email & phone and shows error if there is any
17. If there is no errors and all required fields are filled — S. enables “Continue” button
18. V. clicks “Continue” button
19. S. checks if the company admin has uploaded a legal doc in the web app settings.
— If yes, then the S. checks if the visitor has already accepted a company’s agreement latest version.
— If no, see step #23
20. If a visitor hasn’t accepted the legal doc before, S. opens the “AT&T Agreement” popup (“AT&T” should be replaced with the company name)
21. V. reads and accepts the legal doc, clicks the “I Have Read & Accept the Agreement” button
22. S. checks if the “Email Me a Copy of this Agreement” checkbox was checked:
— if yes, S. sends an email with the text of the agreement to visitor’s email,
— if no, see next step
23. S. checks if the photo is required
— if yes, see next step
— if no, see step #26
24. S. opens taking photo screen
25. V. takes a photo
26. S. opens “Almost done!” screen
27. V. checks info and a badge and clicks “Finish Check-in” button
28. S. checks if the printer is connected to the tablet
— if yes, S. shows the “Your badge is printing...” screen
— if no, S. sends an email with QR code and shows the screen with message: “We have sent you an email with QR Code. Please ...”
If the visitor is invited for today
6. S. opens “Please check your invitation” screen
7. V. checks the invitation info & clicks “Continue” button
— if there is any mistake, clicks “Edit” button, system opens “Personal information” screen, see steps ##14–18 above. After correcting mistakes, S. opens “Please check your invitation” screen again and shows notification “Changes saved”.
8. See steps ##19–28 above
If the visitor doesn’t have invitation, but has been here before
6. See steps ##6–14 for a new visitor
7. S. opens “Personal information” screen, the screen should have all data prepopulated
8. V. checks prsonal info, corrects it (if required)
9. See steps ##16–22 for a new visitor
10. S. checks if the photo is required
— if yes, see next step
— if no, see steps #26–28 for a new visitor
11. S. checks if the visitor has already provided their photo before
— if yes, S. opens “Almost done!” screen. Next steps are the same as for a new visitor, see steps ##26–28
— if no, S. opens taking photo screen. Next steps are the same as for a new visitor, see steps ##24–28
If the visitor is in watchlist
6. S. opens popup “You don't have access”
7. V. clicks “OK” button
8. S. opens home screen
Badges for Employees
Preconditions how do employees get the badge
1. Admin adds employee in the system (Settings: Employees)
2. Employee gets an email
Email includes instructions, link to create password, QR code with instructions to scan it.
3. Employee scans QR code with his/her smartphone
4. System opens web site with a unique badge for the employee
Save badge in gallery
see 1–4 steps above (they are the same)
5. Employee taps “Save Badge” button
6. System opens default system image saving dialog
7. Employee selects “Save”
8. The system saves badge to the gallery in format .png
Save badge in a wallet app
see 1–4 steps above (they are the same)
5. Employee taps “Add to Wallet” button
6. System determines if there is any application installed — if there is no app, s. downloads the .pkpass file
— if there is an app, see next steps
7. System opens default system wallet saving dialog which consists of two options: “Add” and ”Preview”
7.1. Employee selects “Add”
7.2. The system saves badge to the Wallet in format .pkpass
8. Employee selects “Preview”
8.1. System shows a preview of the badge
8.2. Employee taps “Add”
8.3. The system saves badge to the Wallet in format .pkpass
1. Admin adds employee in the system (Settings: Employees)
2. Employee gets an email
Email includes instructions, link to create password, QR code with instructions to scan it.
3. Employee scans QR code with his/her smartphone
4. System opens web site with a unique badge for the employee
Save badge in gallery
see 1–4 steps above (they are the same)
5. Employee taps “Save Badge” button
6. System opens default system image saving dialog
7. Employee selects “Save”
8. The system saves badge to the gallery in format .png
Save badge in a wallet app
see 1–4 steps above (they are the same)
5. Employee taps “Add to Wallet” button
6. System determines if there is any application installed — if there is no app, s. downloads the .pkpass file
— if there is an app, see next steps
7. System opens default system wallet saving dialog which consists of two options: “Add” and ”Preview”
7.1. Employee selects “Add”
7.2. The system saves badge to the Wallet in format .pkpass
8. Employee selects “Preview”
8.1. System shows a preview of the badge
8.2. Employee taps “Add”
8.3. The system saves badge to the Wallet in format .pkpass
Responsive Web App for Visitors
