Security Management iOS Application
UX & UI Design - 2016/2018
CenturyLink is one of the world's largest telecommunications companies, and growing. They were trying to determine a way to make security apps more engaging, simple, and easy to navigate. Sourcing incidents through their proprietary investigation engine, we were able to expose a pattern which we used in helping us determine an easier way for consumers of all technical levels to be able to handle incoming investigations with ease, while allowing a user the ability to determine the importance of an investigation and its worth in promoting it to a higher level of severity.
CenturyLink was looking for a way to help the common non-security analyst navigate the space of their own personal digital security. That could mean the difference between knowing when networks are down, when problems arise on physical and/or software devices and having to handle it oneself, which is technically infeasible in most cases, or having experts on call ( based on a subscription tiered service plan), handle it for you.
The power to be able to make decisions about your technology will surface the way consumers interface and customize their digital devices in ways that were never obvious to them before, because of their lack of being unable to identify a technical problem on their networks to begin with. We sought to change that.
Surfacing actionable events to consumers, results in more meaningful engagement
The idea that consumers, both enterprise and residential, have the same desire to understand when things go wrong, and a deep desire to source information to solve a problem is one of the behaviors evaluated in determining how to target and apply a user interface that would reduce the friction between being alerted to something, but also being given the tools, and actions to take, so the user can escalate an incident to have something done about it. What we see emerging is a need for users to be notified when events occur. And, the winners in the digital space will be the ones that can help consumers solve their own problems in a non-intrusive, solutions driven, and performance-focused way.
Surfacing selective incidents to engage user participation in helping to determine their importance to train the engine.
Originally there were multiple options conceived for a bottom action button bar
iOS from conception with Android support in the ranks
While we knew that there would eventually be an Android version, the strategy was to start with iOS only and then expand to iPad, followed by Android. But the decision to go native first was driven mainly because of being able to later leverage the iOS ecosystem of watches, TV's, and iPad Pro's. The initial path was to go with a 6 and plus sizes 6,7,8 which required different concepts when considering constraints, stack views, and table views. The pattern that proved easiest to use , included a card stack where swiping right would "Promote" an incident, and swiping left would "Dismiss" an incident. Cards were colored based on severity and each card has a category, and other descriptive information that a user could gather information at a glance, and swipe an option for the card, or press and investigate it to get more context.
How would security be at all engaging let alone interesting to the average user, it shouldn't matter one's technical ability but whatever a solution could look like, it would have to include information that was relevant and important to the user, and thus work as a utilitarian system but pipe data that was relevant to your network. Sound obvious, how that information is surfaced, how the user understands its importance instantly, and how you capture your users interest to where they want to check their network security? Then you have something potentially huge to explore there, and with that a very large untapped market for the self-service security users.
NCQA had a few rough ideas of what some of their most important core functionality, vital to their business revenue, would look like in a UI; which we used to start the conversation.
The anatomy of the security feed & the incident card
The idea of using a card really came from a discussion that involved an engine that would algorythmically detect incident's it deems interesting ( I'll leave it at that since there are proprietary processes of how CenturyLink trains the engine), but once those incidents are selected, they are spit out on to a card stack in chronological order, and can be filtered to only render incidents of a certain severity. The ever-ready stack is there for users to quickly go through (as a working operation) where they classify if incidents are important or false positives, and the engine learns with the users inputs, through their qualitative assessments of the incident. There's more to it, but at a high level the cards show what it thinks matters, and learns from the users what really matters to them, and adjusts its efforts in assisting, and predicting, by getting smarter.
The card stack involves a reverse counter (not shown in this mock up) that indicates how many cards are in the stack. The users tasks are simply to begin swiping, investigating (pressing on a card), or pinning (saving for later review); they have other options too, but the basis is to get the user to start taking these very actions. And change the behavior to once was formerly to take information that was once being only populated on boring tables in some dashboard of an analysts' office, and surface it to an entire organization, to gain insight on what incidents matter and which don't. This creates a work force of many that each play an important role in the collective process of making their security (in the office or at home) that much more secure.
Initial concepts for the activity feed exploring buttons, and card views after a few iterations
Part of surfacing information is providing context to frequency of an incident occurring
The Security Feed was born from the need to surface important incidents to a user, but also to be in direct communication with a dedicated response team, that creates an instant two-way channel allowing a professional analyst to look over a customers situation, offer a potential solution, and wait for customer approval. In order to have anyone participate in using a service, the service must first be easy enough to understand, empowering enough to be useful to consumers, and basically free to use, we really thought this would shake up the security consumer industry.
Focus on what matters to a user, and the user will focus
In order to engage the user, to actually make them care about their cyber security, it would have to matter to them. This is a process, for example by surfacing an incident in a way that provides context about what is effected, begins to draw associations as to what things tend to go wrong when a CROSS attack happens, or where these incidents stem from. All this contextual information that otherwise may not have been on a users radar, suddenly becomes part of their vernacular, they start referencing, DDoS attacks, firewall configurations, and other technical terms as every day language, leveling the playing field of understanding. The card informs of what is happening, but the second action is that the user is aware of matters as they occur, and even if they never want to know any technical terms or issues that arise, they can still handle any incidents with an analyst, effortlessly.
Severity ranked in 5 hues
Activity Report - card anatomy
Activity Report - Updates panel for two-way communication with analysts
Ultimately we opted for a lighter version to match a corporate branding effort to make all apps match brand support across product lines. What didn't change was the UX and the design of the app itself, which held up to simple thematic switches at the last minute, giving testament to a product that was well crafted, and designed. Part of creating UI systems, whether for Desktop, responsive, or iOS native, is that if there isn't a proper underlying design system that guides you through each design decision, it won't hold up to stylistic scrutiny. But if designed in a modular fashion in anticipation to how the design will be coded (working closely with the developer), then you get a product that