Integration center
Product Design | B2B SaaS platform | Research
Create a seamless, automated, and comprehensive setup process for administrators, and monitor their status continuously
Company
Lookout - Enterprise team
Year
2018
Role
Product Designer, Researcher
The team of 1 Product Manager, 1 Product designer, 1 Developer, Customer support, and Sales engineers
Problem
The visual hierarchy and the information hierarchy are not scalable for more integrations
In the absence of integrations, the page looks empty and uninspiring, resulting in low task completion rates
It is necessary to support a variety of integrations, so admins can easily identify what needs to be configured
There are no clear steps to follow and no feedback given during setup
As configuration steps are complex and tech savvy, customers rely on Lookout's Support and Sales Engineers for initial guidance
Goal
Provide an actionable integration center that provides guidance to administrators on how setup information can be found, how to configure, when renewals are due, and what is the status.
Improve the information hierarchy and infrastructure so that more integrations can be accommodated in the future
Approach
At the start of the initial project, I interviewed five support and sales engineers who are usually in charge of resolving integration issues and questions. Although the exact setup and its requests vary, there is a general pattern: MDM (Mobile Device Management) connection setup, device enrollment setup, sync up between platforms, notification, device group management.
The entire configuration has a specific order, but not all the forms are mandatory. Here is the setup pattern at a very high level:
By simplifying the design to a wireframe level, I was able to focus on reorganizing the information. As you can see below. There is a vertical navigation menu for global navigation and another horizontal tab system for navigating within tabs. Horizontal tabs are almost halfway through the width of the interface. In order to get to the right place during the initial security environment setup, admins need to navigate vertically and then horizontally.
Explorations
I was able to pull things together quickly and get feedback from internal stakeholders because we have a design system established.
Using the old information structure, simulate the scenario where all the integrations are in place. This clearly cannot be scaled.
With this version, I explored a menu deeper in the main menu so that users wouldn't have to hunt around for the integration. Additionally, I explored different ways of showing configuration steps.
The same menu exploration, but with a different way of displaying the configuration steps
Final Design
All integration capabilities at a glance
The human eye is capable of quickly identifying familiar objects. If the administrator is currently using other mobile device management providers, they can spot them here quickly. Additionally, I categorize the vendors into categories, so if the list of integrations gets really long, the user can search by name or by type of provider.
Guidance along the way without being intrusive
In the sticky process menu on the right side, users can see where they are in the process and what to expect next. If users need additional assistance, a comprehensive walk-through and documentation links are available. Simply hover over the info next to each form for specific information.
Troubleshooting that is precise and specific
The administrator will receive feedback at each step, so they don't need to go back and hunt for errors after completing the entire configuration.
Clear integration status
A connected integration will appear at the top of the integration center page so administrators can easily find its status.
Example of integration setup
During the process of redesigning the integration center and working with the customer-facing team, we realized there were still many obstacles and setup complications outside of the Lookout product, so we documented the process for each Mobile Device Management integration. The video below demonstrates the integration process between BlackBerry Unified Endpoint Management and Lookout Mobile Endpoint Security.
(Watch the video at 5:30 to see the updated design)
Outcomes
THE WINS
Since the design was released, Lookout has grown 5 more integrations and the system has proven to be scalable for both large and small businesses.
Unfortunately, I do not have data for the exact task completion rate, but we receive both excellent feedback from the internal support team and external customers. One of the sales did mention this to me. "Thanks for the redesign! I noticed there were fewer complaints and questions regarding the MDM setup"
THE LOSSES
The configuration process is too complex and technical. This is a technical constraint that requires the industry to work together to overcome. After the redesign, some customers still need to rely on documentation links, videos, and customer support to set up properly
Lessons Learned
Hearing feedback and observations from customer-facing staff is really helpful. Even better, the team should hop on the phone with customers to get feedback firsthan