LightCommand

My Role: UI & UX Designer

Overview

Product: Website, L700 Door Handle, and Wallreader

Company: 1aim GmbH, DAC (Digital Access Control) GmbH

DAC (Digital Access Control) GmbH acquired 1aim GmbH in May 2019. DAC GmbH was the daughter company of FSB GmbH (Franz Schneider Brakel).

Date: May 2019 — Jun 2020

Duration: 1 year

About the Product

LightCommand was designed as a desktop website to provide advanced digital access management features of the mobile app: LightAccess Pro.
‍The LightAccess Pro lets our customers open any door with any phone in a highly secure way through a digital key: LightPass. It works together with L700 or Wallreader(electrical device) mounted on the wall/door.

The LightCommand lets our customers monitor and manage access to their building/s with a full suite of administrative tools covering every situation. Any co-living or co-working spaces manager can manage door settings, passes (digital keys), and people in the Place(building/s).

My contributions

UX Research & UI Design

I brought the Human/User-centered design (HCD/UCD) approach: stakeholder and user interviews, usability testings, and customer visits. So, I converted the pain points into actionable design goals. I had a key role with my manager; we collaborated closely with cross-functional teams to bring effective design solutions to the product. We improved the information architecture, user flows, and UX patterns on the mobile app(LightAccess Pro). I implemented these updates into the LighCommand to have consistency in both platforms. I improved visual design consistency by re-designing the UI based on FSB design branding(mother company).

Let's start!

Search User Created by Ben Davis, Search Created by sahla hamidah, persona by Valerie Lamm , Manual Testing Created by SBTS, pop up by DailyPM, Palette Created by David, Flow Chart Created by Ramakrishna Venkatesan, from the Noun Project

persona by Valerie Lamm, Success Created by Econceptive, Fast Created by Fuse Studio, Communication Created by Oksana Latysheva, Lamp light by verry obito, from the Noun Project

Data Gathering & Defining The Goals

Starting Point

When I joined the team, LightCommand was already in the market. Stakeholders had the target groups defined and created assumption personas. In addition to that, the sales team already received a lot of product feedback and complaints from the customers. The plan was to conduct usability testings based on this information. In that way, I could determine the reasons for complaints and pain points to find design solutions. Refining assumption personas during the research process was also on our long-term plan.

Guerilla Usability Testing

Legacy App

User & business goals

As an HR manager, I want to give administrator rights to other HR team members. So, I build a company hierarchy and share the workload.
‍
As an HR manager, I frequently want to issue bulk and batch passes to new employees. So, I provide multiple users per pass or various passes per user in one step.

As a facility manager, I want to ensure that each door is installed successfully with correct information. So, employees and guests can access places without any problems.

As a smart homeowner, I want to let a guest or a cleaner in my house when I'm not home. So, I share restricted access to my house.

The business goal was to reduce customer frustration, mostly on pass sharing feature and managing access rights, that the sales team receives negative feedback.

Testing the legacy app

Guerilla Usability Testing

I conducted a guerilla usability testing and interviews to gather user insights and identify the usability problems in the legacy app.

Create a New Pass page

How a participant performed "Create a Pass" task:

Task 1.

You use LightCommand at home. Imagine that you've decided to get a house cleaning service for one month. You signed a contract with a cleaning lady, and she's starting this Saturday. However, you are not going to be at home when she arrives. So, you're going to use LightCommand to let her in.
So, how would you let her in between 10 am to 3 pm on Saturdays through LightCommand?
Her name is Alice Flores.
Email: flores88alice@gmail.com

UX Metrics

Difficulty Rate

3 users

How would you rate the difficulty of this step/task from 1 to 7, 1 being easy, 7 being very hard?
Average Difficulty Rate: 5.6
Highest Rate: 4.5
Lovest Rate: 6.5

UX Metrics

Task Completion Time

3 users

Task Completion Average: 8:50 mins
Fastest Participant: 4:28 mins
Slowest Participant: 11:16 mins

Participant

Share/create a pass

"I think it would be easier if it would be visualized with like timelines etc. Also, the terms are complicated."

Access Point (Door) Details page

Task 2.

Imagine that you're a facility manager at "DL Tech" and "1aim Headquarters".
You just installed the product in a conference room door at DL Tech. You named the door "Conference Room".
How would you ensure that you entered the address of the Conference Room correctly?

UX Metrics

Difficulty Rate

2 users

*How would you rate the difficulty of this step/task from 1 to 7, 1 being easy, 7 being very hard?
Average Difficulty Rate: 5
Highest Rate: 7
Lovest Rate: 3

UX Metrics

Task Completion Time

2 users

Task Completion Average: 4:10 mins
Fastest Participant: 4:12 mins
Slowest Participant: 5:08 mins

Participant

Find the address of Conference Room

"I would not expect to find the address information under a submenu of an access point. I would expect to see it directly on the list."

Overview of the Insights

Legacy App

According to the information gathered, overview insights of the app are listed below.
Pros:
Consistent error/success feedbacks (most of the time)
Consistent language
Cons:
Unfamiliar terms
UI Design mistakes
Hidden features
Discoverability issues
Inconsistent interaction patterns

Key findings

Some of the participants couldn't discover the "Create Pass" button on the sidebar
Some of the participants attempted to share a pass by the filter (the text fields on the top part).
Most of the participants selected "Temporary Pass" on the Pass Type section to create a pass for a guest. However, this feature is meant to create a single-use pass that can not be valid for one month.
Most of the participants had difficulties understanding the pass recurrence options: Continuous, Daily, Mon-Fri, Sat & Sun.
Most of the participants expected to be directed to the Passes page after a successful pass sharing.

To do's

Add the "Create Pass" button as a CTA on the top of the page and remove from the sidebar. In that way, we also have a consistent interaction as we updated on the mobile phone
Hide filter options under a "Filter" button as a secondary button. Keep the search textfield.
Make the naming clear for the temporary pass: "Single-Use" can be an option
Provide more clear namings and descriptions
Direct users to the Manage Passes page with a confirmation feedback.

Next Steps

My next steps are to work on personas, pass sharing features in parallel, and implement the information architecture that we improved on the mobile app.

Insights & Pain Points

Some of the participants are below the average level of technology competence.
For some of the participants, "Create Pass" button was not discoverable on the sidebar and terms were unclear like what "Holder" means on Pass Type section.
Some of the participants were not sure if they created a pass successfully since the system didn't direct them to the "Passes" page" after they click to the "Send" button.
Some UI elements of the legacy app like Pass Type and Pass Recurrence are not clear for participants that they have to select an option. It looks more like a tab than a radio button.
Since FSB GmbH (Franz Schneider Brakel) handed over 1aim Gmbh, we must update the LightCommand UI based on their visual design guidelines.
Since we updated the pattern consistency an information architecture on the mobile app, we must apply them on the LightCommand to provide consistent experience to the users.

Design Goals & My Tasks

Goal #1

Iterate the Personas

Personas

When I joined the team, LightCommand was already in the market. The stakeholders and Sales team created the features based on the meetings with clients and potential customers' needs. I interviewed with Sales team and stakeholders for gathering information about the target group. After site visits and some interviews with our customers, I could itreate our personas for LightCommand. After that, I could do more meaningful iterations on the product. The defined personas are below:

Target Groups

The defined target groups are:
Offices, co-working spaces, co-living spaces, hotels, houses and hospitals. However, we planned to focus on hospitals after publishing the version 2.0.

Assumption Personas & Iterations

The assumption personas are:

HR manager
Building manager
Security/team lead
Security member
Font-desk

Persona iterations are:

HR manager
Security lead & building manager
Team Lead
Font-desk

Persona Iterations

Before

Usually highly educated.
Might have brief experience with other management platforms - depends on country.
Average level of technology competence.
Very busy with organizational tasks.
Usually people friendly, with good communication skills.
Potential to be an super admin in absence of building manager.
Also could just have distributor rights - but more of a power user then normal team lead level distributor.
Main point of communication with new external users (interviews, office visitors).

After

Confirmed.
More research is needed.
More research is needed.
Confirmed.
Confirmed.
Should be considered a manager in the new Information Architecture (IA).
Not necessary with the new Information Architecture (IA).
Main point of communication with new employees, candidates and sometimes office visitors.

Photo by Christina@wocintechchat.comon Unsplash

Sophie Garner

HR / Office Manager

Photo by LinkedIn Sales Navigator on Unsplash

Frank Bergmann

Security Lead

& Building Manager

Martina Watkins

Front Desk

‍

Before

Often highly educated.
Received special "building manager" training.
Very aware of building and tenant needs.
Average level of technology competence.
Usually very busy "chasing fires".
Could be in charge of a multi-tenant or multi-building campus.
Usually good at "DIY" fixing.
Can be considered an owner or super admin.
Involved in Access Point planning and development.
Might work in a team with other building managers.

After

Occasionally highly educated.
More research is needed.
Confirmed.
Usually below average level of technology competence.
Usually very busy "chasing fires" or "moving outs".
Confirmed.
More research is needed.
Can be considered an owner or manager in the new IA.
Usually involved in Door planning and installation.
Confirmed.

Before

Low level of education.
Mainly learn from training and experience.
Aware of building and tenant needs.
Average to low level of technology competence.
Managed by Building Manager.
Have distributor rights.

After

More research is needed.
Occasionally highly educated.
More research is needed.
Confirmed.
More research is needed.
Can be considered an owner or manager in the new IA.

Goal #2

Increase pass creation discoverability & success rate

User & Business Goals

As an HR manager & front desk, I frequently want to issue bulk and batch passes to new employees or guests. So, I provide multiple users per pass or various passes per user in one step.

As a smart homeowner, I want to let a guest or a cleaner in my house when I'm not home. So, I share restricted access to my house.

The business goal was to reduce customer frustration, mostly on pass sharing feature and managing access rights, that the sales team receives negative feedback.

Challenge

As I mentioned above, according to the usability testing I conducted, the key findings are:
- Some of the participants couldn't discover the "Create Pass" button on the sidebar
- Most of the participants selected "Temporary Pass" on the Pass Type section to create a pass for a guest. However, this feature is meant to create a single-use pass that can not be valid for one month.
- Most of the participants had difficulties understanding the pass recurrence options: Continuous, Daily, Mon-Fri, Sat & Sun.

Manage Passes page (Before)

Manage Passes page (After)

Increase Discoverability

Consistent CTA buttons

I added the "Create Pass" button as a CTA on the top of the page and removed it from the sidebar. In that way, we also have a consistent interaction as we updated on the mobile phone.
‍
33% of the participants also perceived the filters as pass creation because they were used to take action on the flight or hotel booking websites. So, a "Filters" title was added and the search option only provided by a "Search" textfield.

I added the icons on the essential elements: door name and shareability status for a quick eye scan.

Create Pass page (Before)

Task Diagram for "Share a pass" feature.

More details about pass sharing restructure can be found on LightAccess Pro (mobile app):Goal #4.

Create Pass page (After)

Consistent patterns among the platforms

Desktop website & mobile app

We increased pattern and UI design consistency among the platforms by implementing the consistent interaction design and FSB brand guidelines. Thus, I aimed to reduce the task completion times regardless of platforms (desktop/mobile).

More details about consistent patterns can be found on LightAccess Pro:Goal #3.

A step by step guide

Clear instructions.

After creating a pass for a guest, 42.8% of the participants were unsure if they could successfully share access.
After creating a pass for a guest, 100% of the participants were sure they'd sent the access.

Distinct Names & Placeholders

Collect input with clear questions.

Before

Pass Details
Select Existing User & Add a New Contact
Pass Details
Select Access Point

After

Who're the recipient/s?
Enter Recipient & Add New Member
Which door are you creating a pass for?
Select Door/Gate

Create Pass page, Time Restrictions Step (Before)

Create Pass page, Time Restrictions Step (After)

Distinct Names & Placeholders

Collect input with clear questions.

Before

Pass Timing
Select Starting Date / Select End Date
Pass Recurrence
Continuous / Daily / Mon-Fri / Sat&Sun / Weekly

After

How long will the pass be valid?
Start Date / End Date
What are the time restrictions?
Home / Work / Weekend / Custom

Visualized Time Interval

Multiple time intervals for each day

We added multiple time intervals for each day based on customer requests.
I displayed the time intervals under each day; thus, it's visually apparent for users to set multiple intervals each day.

Create Pass page, Custom Time Restrictions Step (After)

Different states (all day)

"All day" option

UI & InteractionDesign

I visually made clear that the user can not set time intervals if the "All day" option is selected by disabling the text fields rather than removing them.

No access

UI & InteractionDesign

After the user sets a time interval, it's displayed with a blue text (all inputs we got from the user) under the weekday. By adding the "No access" gray text under the weekdays that the user hasn't defined any time interval yet, I highlighted that the access impossible on these days.

"Reset all" option

UI & InteractionDesign

I added a "Reset all" feature to provide tech-savvy personas like HR Managers more control and flexibility during the pass creation process.

Validation and Impact

Next Steps

UX research

The next steps are to conduct meCUE or SUS usability questionaries, add an in-app user satisfaction survey, and to follow customer reviews on the app stores.

Goal #3

Implement the new Information Architecture (IA)

User & Business Goals

The user's goal was to intuitively navigate throughout the app, including finding the features they need; the business goal was to reduce customer frustration moreover adding the value of the user-friendliness of the products in sales and marketing.

Challenge

According to customer feedback stakeholders received, users have difficulties in discovering:

- If they can share a pass (digital key) with someone else
- From which page to install a new door
- If they can log out from other logged-in devices

As I explain below, I validated the feedback in the first round of guerilla usability testing.

Determine the problems

The information architecture is improved based on UX research insights and in collaboration with interdisciplinary development teams.

Overview

App Features (Before/After)

Open Door & Share a Pass
Manage Doors
Install a Door
Manage Accounts
Manage Passes

Open Door
Manage Doors & Install a Door (improved)
Manage Place & Account (new)
Manage Passes & Share a Pass (improved)
Manage People (new)

Icons designed by attoma Berlin.

Before

One user account can have multiple buildings; each door belongs to one building. The user can have multiple accounts and switch between their home and office accounts. The user can not have multiple accounts with the same email address. For example, one employee can not create multiple accounts with his/her work email to access the other branches of the company.

Icons designed by attoma Berlin.

After

The information architecture had a direct effect on users and software architecture. So, I improved the information architecture in collaboration with the software development teams. We changed the structure from account-based to workspace-based. So unlike the previous structure, we provide the user can have multiple accounts with the same email address in a different workspace (Place). For example, an employee can create multiple accounts to access the other branches of his/her company with the same work email. In that way, the employee can log in to the Berlin and Munich offices with the same email but different accounts; the passes are automatically filtered based on the logged-in Place, the user can have different roles (member, manager, etc.) in each Place.

Before

The relation between door and pass was confusing; a door has a name, but a pass also can have a different name. For example, a door can be named as "Hawaii Conference Room" in the app and physically at the door entrance, on the other hand, an HR Manager can give a different name to the pass while sharing with an employee. He/she can name it "Conference Room" or "Temporary Interview Access" while sharing with a candidate. However, the employee or candidate can not know which conference room he/she can access since it named differently. This decision was made to provide users flexibility. So, they can give different pass names for the same door, but in fact, it generates chaos and risks that the user can't find the right door.
The door address is displayed on each pass, but if the user wants to update it, he/she should go the address book and figure out which address belongs to which door/pass.
Neither a door nor a pass has the floor information, which is crucial for user to find the door.
While the user creates a pass, he/she must give either owner, admin, issuer, user-level permission to the recipient, or select the pass type as temporary. Regarding the usability testing findings, this information group confused most of the participants. First, they're two different categories under one choice: recipient permission type and pass type. Secondly, the terms are unfamiliar to most of the participants.

After

As I mentioned the problem on the legacy app, being able to give different pass names to the same door confuses the user and makes it challenging to find the right door. So, I removed the pass names. While the installer sets up the door, he/she selects a door type and enters a door name. The system uses the door type icon and name while creating a pass. In this way, each door has a consistent pass matching with the door. For example, if a door named "Hawaii Conference Room" during the installation in the app and physically at the door entrance, the system designates the pass name as "Hawaii Conference Room".
In addition to this, I provided a description field for the temporary passes. So, an HR Manager can describe the meeting "Temporary Interview Access" and the recipient still gets the door name and description together.
I removed the door address and added the floor information on each pass. The user can display the address under the pass and door detail page and edit it under the door detail page if he/she's a manager level member.
I changed the permission settings into can share-can't share since we defined user levels(owner, manager, member) of the Place. I separated the pass type at the beginning of the pass creation wizard as normal-web and included more information about the options.

New Information Architecture

Site map with user rights

I created the new sitemap for the app and desktop app based on my findings.

Updated IA & Consistent Patterns

Manage Doors page (Before)

Manage Doors page (After)

My Places & Accounts page (Before)

My Places & Accounts page (After)

Consistent patterns among the platforms

Desktop website & mobile app

Validation and Impact

Next Steps

UX research

The next steps are to conduct meCUE or SUS usability questionaries, add an in-app user satisfaction survey, and to follow customer reviews on the app stores.

NEXT Project →← PREVIOUS Project