Strike Graph
Web App Revision
A Story of Embracing Imperfection
Client: Strike Graph (Cybersecurity Compliance SaaS)
Team: Amanda Snyder, Annie Donegan, Kate Arneson, Rylie Lonetti, Miriam-Rachel Oxenhandler Newman
Roles: UX Research & UI Design
Methods: Contextual Inquiry, Cognitive Walkthrough, Sketching, Prototyping, Annotations
Tools: Figma, Google Docs
Project Overview:
CLIENT INTRODUCTION & PROBLEM STATEMENT
Strike Graph is a SaaS (Software-as-a-Service) product company that builds tools to help other businesses establish trust with their customers by achieving and maintaining cybersecurity compliance programs. With pre-built content, automations, integrations, and easy workflows, Strike Graph makes it possible for any business to manage compliance and maintain audit-readiness for frameworks like SOC 2, ISO 27001, HIPAA, PCI-DSS, GDPR, CCPA, and NIST 800-171
Screen Shot of Strike Graph’s existing website
Don’t understand what any of this means?
Unfortunately, neither do a significant number of Strike Graph users, many of whom are brand new to the compliance process.
Currently, Strike Graph relies on a dedicated team of customer service representatives to onboard users to the website and educate them on all that is required to achieve and maintain compliance. This process can take at least a month or more.
In this project, I sought to integrate a more user-friendly and accessible onboarding process within the website itself to ensure that users are able to efficiently and confidently use Strike Graph to protect their company from liability.
Beginning Research:
ONBOARDING & PROJECT UNDERSTANDING
Our clients were lovely enough to share the initial onboarding experience that they provide their new users. They presented their slide deck with brief explanations of some of the most important vocabulary around compliance and an overview of the process. The customer service representative then walked us through the beginning steps of using Strike Graph.
Screen Shot of Strike Graph’s onboarding presentation
I left this meeting feeling only about 5% clearer about what compliance is and how to use Strike Graph to achieve and maintain compliance.
Many of my teammates felt the same! One who had a slightly better grasp of things drew us an explanation. Now I was about 10% clearer.
Image of me looking confused (note the furrowed brow) as a teammate patiently explains compliance
Lunchtime conversation turned into a mini-lesson on the compliance process, complete with helpful doodles
In these early stages of trying to understand who our client was, and the service they provided, I imagined how overwhelmed a new user, who is relying on this product to protect their company from liability, must feel.
More Research:
COGNITIVE WALKTHROUGH & CONTEXTUAL INQUIRY
My teammates and I conducted a cognitive walkthrough of the key tasks that Strike Graph identified for the website.
These tasks included:
Signing in and setting up an account
Inviting and managing ‘contributors’
Activating and assigning controls
Tailoring control or evidence description(s) to organization
Adding evidence attachments
Updating expired evidence
Scoring and mitigating a risk
We noted a number of concerns that would prevent a first-time user from understanding the next step to take as they complete various tasks. These issues were related to the design principles of consistency, visibility, feedback and matching users’ mental models.
Our team then prepared to conduct remote 1:1 contextual inquiry interviews over Zoom. Due to the expedited nature of this project, we prepared our script with very little idea of who we would be interviewing, as the client sourced existing users for us. We confirmed our list of interviewees just minutes before starting our first interview. What was supposed to be two 60-minute interviews with time in-between to regroup, ended up being three 30-minute back-to-back sessions. What a scramble! To make matters even more complicated, 2 out of the 3 users we met with were current Strike Graph employees.
In the end, we had 30 minutes apiece with:
Strike Graph’s Product Manager
A Developer on the Strike Graph Team
A relatively new Strike Graph customer
Image of teammates and I preparing to conduct contextual inquiry
In spite of feeling less prepared than we would have liked, we gained some great insight from these interviews. Our initial hypothesis that the main challenge new users face is independently managing their own work proved true.
Specifically, users don’t know WHAT to do, WHEN to do it, what to do NEXT, and WHO else needs to be involved in the work.
Additionally, an accessibility concern was brought to light. One of the users we interviewed has color vision deficiency (commonly known as ‘colorblindness’) and struggles to interpret the meaning of several charts and feedback indicators due to the use of red and green. Though these colors match the majority of users’ mental models (red indicating something bad and green indicating something good), these colors are not meaningful to this user.
Screenshot of our interview notes
Design:
EARLY IDEATION & SKETCHING
With these findings in mind, I began to ideate a plan to create a prototype that would guide users through the process of using Strike Graph’s website to achieve and maintain compliance, keeping accessibility in mind. I began by creating two user stories and a scenario that would combine these stories into one flow.
User Story #2:
As a user with color vision deficiency (“colorblindness”), I want to understand the status of my Risks, Controls, and Evidence at a glance, so I can more efficiently determine the next steps in my workflow
Scenario:
Imagine you are a leader in a start-up company, and are learning about compliance for the very first time. You are completely unfamiliar with the requirements, terms, and other components that are associated with achieving and maintaining compliance. You have created an account on Strike Graph, but don’t know where to begin. You have color vision deficiency and are unsure of the meaning of some of the icons and graphs that you see.
User Story #1:
As a brand new user with little knowledge of compliance, I want to be guided through the steps needed to achieve and maintain compliance so that I can more easily understand what is required and I can feel confident that I am protecting my company from liability
My desire was to create a flow that would guide a first-time user through the initial process of assessing a risk, activating a relevant security control, and identifying necessary evidence. I wanted this flow to feel as clear and straightforward as possible, with explanations that would be easy to understand by novices rather than using “insider language” or having customers continue to rely heavily on customer support.
I created a few rough sketches of the main screens that would be included in this flow:
Design:
HIGH FIDELITY PROTOTYPE & ANNOTATIONS
Using the sketches I had created, I then began to digitize these designs using Figma. I annotated each frame to show the updates to the existing site, and to explain the reasons why the changes were made.
Screen 1: Template with updated Side Panel, Account location & Chat Option
The first screen I made was a background screen with an updated left side panel to enhance findability of key features of the site - including the Help Center and Settings. I moved the account icon to the top right corner and included a chat feature on the bottom right. These would match users’ mental models and ensure that they are always able to access support.
Screen 2: Welcome Screen
This is the first screen that users will see after creating an account. The elements on this page are meant to give a simple explanation of the compliance process. The descriptions are all meant to be written in a friendly tone with clear, conversational language to help users of varying levels of expertise feel confident in their understanding of what to expect.
Screen 3: Intake Form
A part of the current onboarding process includes customers filling out an intake from that lives separate from the website. This screen will integrate that into the site, allowing users to select the options that are relevant to them. Again, explanations are included to ensure that users understand the insider language they may not be familiar with. The site can then be tailored to show information that is relevant to that user depending on their role, the type of company they work for, and the compliance goal they are trying to reach.
Screen 4: Risk Assessment Intro
The first step in the compliance process is assessing potential risks. Strike Graph provides a Risk Assessment within their site, but this is not immediately clear to those who don’t know where to look for it. After the intake questions above, users will be taken directly to the Risk Assessment. This introductory screen explains what a risk is, and what users can expect from the assessment.
Screen 5: Risk Assessment
The Risk Assessment takes users through the 30+ risks that are relevant to their company and their compliance goal. This page continues to provide users with clear explanations of what each risk is, how it might be scored, and recommendations for mitigation. This page also includes prompts alerting users to the existence of the chat option, if users feel that they need the support of customer service as they are filling out the assessment. Users have the option to continue working through the assessment or view the relevant security controls to the risk they just assessed.
Screen 6: Security Controls
On the existing website, when users wish to begin activating or editing security controls, they are shown a list of all possible controls for each risk listed in alphabetical order. Not all the controls are relevant, depending on the user and the goal they have. This re-designed controls screen starts by showing users the controls that are relevant to them. They are also shown a separate list of other controls, with explanations of why they may or may not choose to activate those as well. From this screen, users can also access a pop-up that lists the evidence they will need for each control, even if they are not yet ready to begin collecting this documentation.
Screen 7: Settings
Though it is not technically a part of the onboarding flow, I thought it was important to address the accessibility issues that was brought up during our research. I created a new addition to the current settings page that would allow users to customize the way they view the site, allowing users who are visually impaired or have color vision deficiency to change the site colors and font size in a way that would be meaningful and helpful for them. This will help all users navigate using the site with more confidence and efficiency.
Conclusion:
NEXT STEPS & REFLECTIONS
Were I to continue with this project, I would take the concept of walking users through the compliance process step-by-step and apply it to more areas of the site. I would start by enhancing the Dashboard to give users a clearer sense of where they are at in the compliance process, including the progress they have made and how much work is left to do. I would also include a tour of the Dashboard so that customers know how to interpret and interact with the features there.
Though I did not walk away from this project as a compliance expert, this experience was an incredible opportunity to practice building empathy and persevering through less-than-ideal circumstances. I am confident that the redesign I created for Strike Graph will allow users who are unfamiliar with the world of compliance to feel confident as they navigate this complicated but important step in running their business.