Entering and leaving gated areas isn't easy...
Especially with a vehicle. You have to roll up to the parking gate, roll down your window - and if you didn't park close enough - sometimes you even have to open your door to reach the kiosk or give money to the attendee. Perhaps, if you reserved with an app like SpotHero, you'd also have to navigate through an application to get to a QR code to scan at the kiosk, close your door, and enter the building. Not to mention the possibility of impatient drivers in queue behind you getting frustrated about the hold-up.
So, what's the problem here?
There are a lot of stop points in the SpotHero parking lot entry experience. The goal is to design and create a seamless entry user experience for a driver to enter a gated area. Since we, the Chamberlain Group, are putting time and effort to create the tech and to design the solution for SpotHero, how could we apply this solution to our own gate openers?
Visualizing the possibilities
Storyboards help me connect concepts of a solution to the human element. This storyboard depicts one of the old solutions to reality. You can see how, originally, we had entertained the idea of pin authentication following a pop-up module as a solution to the problem.
Lets see for ourselves.
I had lead the team to Chicago to test out the current gate entry experience at paid parking lots for some good ol' empathic modeling. We had ran into a few problems:
The Glaring Issues
The whole scanning process was just not cutting it. Other than the awkwardness of having to roll down the window or perhaps open the car door, the application didn't raise the screen brightness when the QR code was brought up, and frankly doesn't scan well with a cracked phone screen. If the phone was too big, the red light bar wouldn't reach the QR code and it was impossible to scan. Just having to open the app and navigate to the ticket itself wasn't pleasant, especially if there was a driver behind us. We had such a bad time with this experience, I wanted to throw the whole phone part of the experience away.
Wait... Could I do just that?
Who are we making this for?
To solidify a design direction, I had established two personas that would also apply to the Chamberlain version of the developed technology; One who lives in a gated community, and one that works with and uses paid parking garages frequently.
Customer-facing Experience: SpotHero
In essence, my solution for the SpotHero part of the project was to actually get rid of the whole "let's tap through the app for an unscannable QR code" experience. Through collaboration with the engineers and developers, we were able to create an additive software for SpotHero where, with the retrofit dongle in place at the parking garage, the user would be able to drive up to the gate, and through Bluetooth ID technology, the app would detect the dongle and prompt this pop-up on the user's phone. The tech we had developed is then sellable to other applications or companies interested in those capabilities.
Now, time to apply this tech to Chamberlain Group's developing products.
Having established a general design direction with the same personas, user analytics and feedback in the existing MyQ application, I had begun to organize the thoughts and information into a series of rough sketches of screens and some affinity diagrams. This was the time where I got really involved with the developer to make sure that certain design decisions were well-made along the way.
Let's keep in mind here, how the empathic modeling made me feel. I wanted to throw the whole phone interaction away. I had also thought, that perhaps security may be an issue; should we prompt PIN authentication? Touch ID? Perhaps drawing a pattern? Or just allow the user to enter?
Around this time, we had another closely related project where we had integrated the usability options for the entry experience. I had assisted with creating the prototype for this experience, where we had tested different use cases for entering a garage. You can see more details of the stages in the following link.
The test was ran with the user in the drivers seat, attempting to enter an IoT-enabled garage. We had surveyed the users for feelings of safety, security, and the most seamless experience overall. We had found that one-point interaction and confirmation was the safest and smoothest form our test subjects had experienced.
The Ever Handy Affinity Diagram
Integrating this experience to Chamberlain Group's developing line of residential and business gate openers was a challenge. I had to consider not only the driver's experience, but also the administrator's (either a landowner or site manager) web portal. The administrator had to be able to manage employees/residents, manage both basic and subscription information, and be able to run live diagnostics on the dongles in their system, as well as manage those dongles. The affinity chart becomes the heart and soul for the developing wireframe to come. I had decided that the administrator's experience would be through a web portal, due to its complex nature.
After collaborating, we had decided on a system where the retrofit, application, and the web portal would all connect and communicate data using Amazon Web Services (AWS). The mobile application will sense the retrofit device within a certain range and prompt a module to confirm entry, while, if applicable, the administrator would use the web portal to register a user into the system and manage permissions.
A Simple Style Guide
The service itself is created under one of Chamberlain's brand names, LiftMaster. Liftmaster traditionally brands itself as a very Arial Bold, strong, and industrial brand. One with a very dark theme with red as the accent color and white from time to time. After being told to be free to create variants on the theme, I had kept their "large, blunt, and wide" red LiftMaster logo, but aimed to create a slightly softer, cleaner, and simpler web portal model to give the user a sense of simplicity and ease.
I had adopted a soft, yet dark grey-scale, with red still as the accent color. I've changed the main title fonts to Titillium Web, Semibold, to keep a sense of that angular, strong, and bold branding, but with a more modernized look. I kept the card shapes to be sharp and clean to help hold up the strong, industrial feeling.
Web Portal Wireframes
Based off of the affinity diagram from earlier, creating screens made the design process much more efficient. Following the original sketches and the style guide, I was able to format the following screens. I wanted to use a navigation side portion to allow the user to access the different major pages of the website.
Integrating the technology into MyQ was simply taking the general form of the application and creating medium fidelity wireframes for the Senior UX Designers to work with in the future. With the wireframe on the left you can see the process I had adapted to allow the user to authenticate a guest's entry into their gated community, by giving them a pin to enter when entering the gate in a time window. This decision allows a level of security for both the resident and the landlord, while providing the latter with a way to know when guests visit.
Customer-facing Experience: GoldenGate
In essence, despite the complexities of the system, the user will mostly experience this screen when they drive up to their gated community. Having conducted thorough user testing, user analytics, and checking user feedback, we can be rest assured that we have achieved our goal of creating a solid solution to have a seamless and comfortable user experience for both SpotHero and Chamberlain Products in the future. Changes will be in effect in 2019.