Cyber Security Reporting
Cyber Independent Testing Lab (CITL)
A redesigned website that presents complex cyber-security report data in a visually engaging and digestible format for both security professionals and informed consumers.
The Cyber Independent Testing Lab is a non-profit that analyzes and reports on the security of software products. Their goal is to be a Consumer Reports of software security, providing scientifically tested data that can help consumers make smarter decisions about their software usage.
They came to Palador looking for help in designing their software security reports to be more accessible to a non-specialist audience. They wanted these reports to be incoporated into a new custom website with new branding that would convey their helpful and trustworthy nature. Our team of 4 led them through the user-centered design process starting with user interviews and competitive analysis that was followed up by prototyping, data visualization, and development.
My Role: Design Team Lead
- Led check-in meetings with the client to communicate design decisions and progress
- Set up and ran user interviews
- Led the design of the information architecture, wireframes, and data visualization concepts
- Provided critique on visual and motion design
- Created the responsive HTML & CSS page templates for the Jekyll platform
- Managed development of the D3.js and JSON reports
2 Designers, 1 Developer, 1 Project Manager
Nov 2017 - Sep 2018
Appeal to different levels of technical
knowledge across target user groups
I suggested we create proto-personas to help align and narrow the client’s focus to more specific user targets to design for.
I led user interviews with users from each target group to verify the assumptions in our proto-personas.
Our 3 target user groups had a wide range of needs from the site from high level software scores to detailed software testing data.
Wants to see a high-level score for easy product comparison.
Wants actionable takeaways for issues their team can fix.
Wants to be able to dig into data and verify security issues.
Use progressive disclosure to present high-level scores up front
and reveal more detailed reports data on deeper pages
User Task Flows
My team and I created tasks flows to show how much information each persona required based on our research and illustrate how they might go about answering questions as they move through the reports. It became clear that all 3 personas might start with the same underlying questions, but only the more technical personas need the ability to dive further into the data.
Security Reports Flow (wireframes)
Home page presents high level product comparisons
(Targeted to Informed Consumers)
Product comparison pages compare products by category in more detail
(Targeted to IT Directors)
Product detail pages let users dig into the data with individual binary scores
(Targeted to Security Professionals)
Security Reports Flow (Final)
The final reports are brought to life with visual and motion design that convey CITL as smart but approachable tech consumer advocates.
The same site can cater to users with different levels of technical
expertise by showing higher level information up front and exposing more details progressively for users who want to dig deeper
Introduce users to CITL’s
software scoring methods
We had several stakeholder meetings to help us understand their complex security scoring methods.
I jointly performed competitive analysis to see how other scoring and educational sites introduced users to their content.
It was important to the client to be transparent and accessible with their original security scoring framework so that both industry professionals and consumers could understand their rating system and be able to jump into and follow their product reports.
Use the home page to walk users through the main
scoring categories before linking to reports
Home Page Iterations
I created variations of the home page layout to discuss with the client, offering different ways their scoring methods might be presented and introduced. We agreed that the layout option which introduces their scoring categories and explanations of product comparisons with radar charts was the best compromise between CITL’s priorities and user needs.
Final Home Page Flow
The home page was used to introduce users to CITL’s mission, scoring categories, how to read their charts, and finally the product comparison reports. Visual iconography, page sectioning, and animation were used to make this educational walk through engaging and easy to follow.
CITL’s new scoring methods and complex technical data required
explanation. By using the home page to introduce these concepts,
users are prepared to explore the meat of the site, the reports.
Present data in a way that is
engaging and approachable
In user interviews we presented CITL’s current charts to understand where there were points of confusion.
I jointly researched other data visualization sites to gauge what methods might be most effective for showcasing CITL’s report data.
CITL had been using histograms and tables to show detailed binary score distributions to audiences of security professionals, but it was clear from our research that if they wanted to target consumers or IT directors, they would need more approachable visuals to represent their scoring methods.
Utilize a number of data visualization techniques
to present different scoring categories
CITL was previously only presenting their findings to audiences of security professionals. In order to appeal to their desired target audiences of informed consumers, my team and I needed to propose a way to present their overall findings simply.
As the client put it, they wanted to create “nutrition labels” for software security. We discussed letter ratings, number scores, health sliders, or labels of security excellence. In the end we agreed on a star rating system using lock icons for both its recognizability and ease for visually scanning.
The client was hesitant to show just high level scores, as they wanted to make sure people understood their scoring categories. To show these category comparisons across products we utilized radar charts, allowing users to see at a glance where a product’s security is stronger or weaker.
Animation was used strategically to highlight score differences across products and reports and encourage users to engage with the data.
Product Comparison Charts
I brainstormed with the team to create visualizations for each of CITL’s scoring categories so that more technical users can see a breakdown of a products security features that factored into their overall score.
- Lock icons are used like star ratings convey how products scored overall.
- Bar and pie charts show a more nuanced break down of how products compared across CITL’s scoring categories.
- Products are assigned a color to be used consistently throughout the site for easy recognition across comparison charts.
- Tool tips provide links to more detailed score breakdowns or relevant definitions.
Appropriate data visualizations can make complex
technical data approachable to a wider audience.
Increased Usability Testing
Due to time constraints, we used internal resources to run our usability testing. Ideally I would’ve liked to do more extensive testing with closer representatives to their target users. Our testing was also done at the wireframe stage and I would’ve liked to test it again once live data and animations were in place.
Client Business Needs
In focusing on introducing CITL to new users on their homepage, some of their other business needs were neglected. After seeing how they actually use the new site, I would make adjustments to add some of their company news content to the home page.
For the sake of scope, we decided to focus on designing for the report data they had already generated, however this prevented the site from scaling gracefully to new reports that included a much larger breadth of software being compared.
This was our first project to incorporate user interviews that I had consistently rallied for as part of our process (past projects relied on subject matter experts to fill in for users). It was necessary on this project as neither the design team nor the client had a good understanding of how much security information the users needed to make informed decisions. I was happy to be able to apply the user research techniques I was learning in grad school to a real-world project in order to elevate the user’s voice in our design decisions.
Selling Design Benefits
We were able to sell a sometimes skeptical, development-minded team on the benefits of good design. They were quite impressed with the resulting design and changed some of their own presentation practices because of it including the use of more visual charts to display their data.
Translating Technical Terms
I’m proud of the design team for being able to work with such unfamiliar, technical terms. It took some repeated explanations from the CITL team, but it was important that we understand their data so that we could design for other less technical users and help translate their reports in both content and visual presentation.