security | csportfolio

making security easy

How can computer engineers determine which projects need security attention in just a glance?

Challenge

Create a project list page that helps security engineers and developers understand the security status of their development projects.

We wanted this to work well for both use cases and provide a lot of information in a glance, without confusing or overwhelming the user.

outcome

A new UX design of the projects list page, including the connections to other screens.

This design received great feedback from security engineers and developers, and elements may even be added to our home page.

client

team

oak9 (Cloud infrastructure security start up)

Part of a 3 person design team, but an independently led design.

strengths

Balancing technical, business constraints and user preferences

Advocating for the User

Proactivity

final design

A project list page that shows security information about development projects without being overwhelming. This page is intended for 2 different types of engineers.

This page creates value by:

providing a way to quickly see which projects need security attention
allowing users to easily sort projects
leveraging an existing UI components library
addressing the needs of 2 different use cases - security engineers and developers (DevOps)

design process

Research

Design Requirements

Ideate,
Prototype, and User Testing

Design Reviews

Final Design

Define Design for Developers

Research

As part of a larger project to create personas, I created a research plan and conducted interviews with people that completed the tasks we aimed to simplify with our product. I synthesized this research to create user personas, focusing on these characteristics:

Job roles
Goals
Frustrations
Skills
Time split
Software used

The design team and sales team also briefed me on feedback from customers, inviting me to sit in on calls with a few customers as they walked through the software. I learned what the software was designed to do, as well as what my user groups were trying to do in their day to day jobs through this research.

Design Requirements

For this particular project, the applicable job roles were:

security engineers (that determine whether software is secure and monitor for compliance with standards) and
DevOps engineers (that develop and update the infrastructure of software).

DevOps engineers would use our product to do the following:

Easily see the priority of what needs to be fixed
See past security jargon and understand the security gaps
Understand in a glance whether a project is not compliant with standards, with links for reference materials as needed
Show the projects they're actively working on

Security engineers would use our product to do the following:

See all of the security gaps in a list prioritized by security gap severity, without "false positives"
View the context on the project so they can make better security assessments
Understand in a glance whether a project is not compliant with standards, with links for reference materials as needed
Include the long list of projects they often oversee

Ideate, Prototype, and Testing

Original Screen

This was the screen in its original form. It provided a list of projects, and had information related to the creation and update date of the projects, but not much else. The "View Details" link was the only way to see more information on the project.

First Iteration

These are two of the screens that worked best after I tested them with security engineers (who worked at our company). I was focused on:

How can I make the page less visually overwhelming?
How can I include only the most important information, but enough information that engineers can understand at a glance?

I also played around with the ability to expand a project for a more detailed analysis.

Second - Sixth Iteration

We went through many rounds of designs and testing. Some of the elements I was focusing on included how to differentiate between production or test environments, as well as honing the exact information that security and DevOps engineers needed to see.

I wanted to determine how we could:

show the severity and give a feel for the number of gaps at critical and high severity
show that there are new gaps to address
provide intuitive links to the places they could edit their project
indicate that changes were made to the project or that a scan was recently done

Design Reviews

Throughout this design, we provided regular updates to the Product Owner, and I reviewed it regularly with my design teammates.
Through these reviews, I learned a lot about the constraints of development time and how best to accommodate customers who were already familiar with the previous version of the product. We had a lot of discussion around which design changes would lead to an improved user experience and which were not as impactful to include. This was an amazing experience, as I had never had these constraints before in school projects. I also learned how to leverage existing UI libraries, like Material.io.

Final Design

This was my final design.

The advantages of this design are:

Easy to identify which projects are in need of security attention, and how many new and previously flagged security gaps are in that project.
Quick navigation to read more about the project through clicking the project title.
Scrolling over the number of security gaps provides a more detailed view of a project's security gaps.
Easy to see what compliance objectives have been met and links to a detailed compliance page for more information.
Easy to see when the project was last modified and whether it has been scanned since.
Easy to re-run a security scan from this page.
"View details" link mimics the original design to ease the transition for existing customers
Able to pin the most important projects.

Define Design for Developers

After the team aligned on this design, I made the design "pixel perfect" and added Figma components as needed (with the help of my supervisor, who is very dedicated to design details). I also created the thumbtack icon to make sure it would fit stylistically within our existing design system.

After doing this, we moved this design to our Figma file that developers reference when implementing a new screen. I included instructions around the types of interactions that were needed and the connection to other parts of the product. I also was able to have a discussion with the developers, but didn't see the implemented screen before I left.

feedback

The engineers in our company, product owner, and design team were happy with the way this turned out, and might incorporate some of the elements into our home page because of their usefulness. While it will likely change as the product evolves, it provides a better experience for people who want to use the product quickly. My supervisor was happy that I was able to lead this design and seek feedback from internal stakeholders as needed.

Previous project

next project

Making security easy

UX Internship

I helped engineers get a handle on the security of their cloud infrastructure... read more

data and discounts

UX Design

We wanted to see if detailed location data could help our client enhance restaurant apps experiences... read more

lifetime learning for all

Service Design

Our client is passionate about lifetime learning. We wanted older adults to be able to learn whether joining remotely or in person ... read more

repurposing a tracking device

UX Design

Jiobit is a company that designs location trackers to keep track of young children. We explored how to repurpose that technology for new applications... read more

everyone's garden

sustainable packaging

UX, Service Design Thesis

Physical Product Design

I explored how we could make community garden participation more accessible for people with little time to devote... coming soon

Ever had a frustrating experience trying to open medicine? Medicine packaging is usually difficult to open and not sustainable. We helped our client dream up a more sustainable package ... read more

Challenge

Add differentiated value in a crowded space (restaurant apps).

Be respectful of data privacy preferences while keeping the user experience streamlined.

Integrate the new design into an existing design system.​

​

strengths

Challenge

Add differentiated value in a crowded space (restaurant apps).

Be respectful of data privacy preferences while keeping the user experience streamlined.

Integrate the new design into an existing design system.​

​

strengths

Challenge

Add differentiated value in a crowded space (restaurant apps).

Be respectful of data privacy preferences while keeping the user experience streamlined.

Integrate the new design into an existing design system.​

​

strengths

making security easy

How can computer engineers determine which projects need security attention in just a glance?

Challenge

Create a project list page that helps security engineers and developers understand the security status of their development projects. We wanted this to work well for both use cases and provide a lot of information in a glance, without confusing or overwhelming the user.

outcome

A new UX design of the projects list page, including the connections to other screens. This design received great feedback from security engineers and developers, and elements may even be added to our home page.

client

team

oak9 (Cloud infrastructure security start up) Part of a 3 person design team, but an independently led design.

strengths

final design

A project list page that shows security information about development projects without being overwhelming. This page is intended for 2 different types of engineers.

​

This page creates value by:

providing a way to quickly see which projects need security attention

allowing users to easily sort projects

leveraging an existing UI components library

addressing the needs of 2 different use cases - security engineers and developers (DevOps)

design process

Research

Design Requirements

Ideate, Prototype, and User Testing

Design Reviews

Final Design

Define Design for Developers

Research

As part of a larger project to create personas, I created a research plan and conducted interviews with people that completed the tasks we aimed to simplify with our product. I synthesized this research to create user personas, focusing on these characteristics:

Job roles

Goals

Frustrations

Skills

Time split

Software used

​

Design Requirements

For this particular project, the applicable job roles were:

security engineers (that determine whether software is secure and monitor for compliance with standards) and

​DevOps engineers (that develop and update the infrastructure of software).

​

DevOps engineers would use our product to do the following:

Easily see the priority of what needs to be fixed

See past security jargon and understand the security gaps

Understand in a glance whether a project is not compliant with standards, with links for reference materials as needed

Show the projects they're actively working on

​

Security engineers would use our product to do the following:

See all of the security gaps in a list prioritized by security gap severity, without "false positives"

View the context on the project so they can make better security assessments

Understand in a glance whether a project is not compliant with standards, with links for reference materials as needed

Include the long list of projects they often oversee

Ideate, Prototype, and Testing

Original Screen

This was the screen in its original form. It provided a list of projects, and had information related to the creation and update date of the projects, but not much else. The "View Details" link was the only way to see more information on the project.

First Iteration

These are two of the screens that worked best after I tested them with security engineers (who worked at our company). I was focused on:

How can I make the page less visually overwhelming?

How can I include only the most important information, but enough information that engineers can understand at a glance?

I also played around with the ability to expand a project for a more detailed analysis.

Second - Sixth Iteration

We went through many rounds of designs and testing. Some of the elements I was focusing on included how to differentiate between production or test environments, as well as honing the exact information that security and DevOps engineers needed to see. I wanted to determine how we could:

show the severity and give a feel for the number of gaps at critical and high severity

show that there are new gaps to address

Integrate the new design into an existing design system.

Integrate the new design into an existing design system.

Integrate the new design into an existing design system.

Create a project list page that helps security engineers and developers understand the security status of their development projects.

We wanted this to work well for both use cases and provide a lot of information in a glance, without confusing or overwhelming the user.

A new UX design of the projects list page, including the connections to other screens.

This design received great feedback from security engineers and developers, and elements may even be added to our home page.

oak9 (Cloud infrastructure security start up)

Part of a 3 person design team, but an independently led design.

Ideate,
Prototype, and User Testing

DevOps engineers (that develop and update the infrastructure of software).

We went through many rounds of designs and testing. Some of the elements I was focusing on included how to differentiate between production or test environments, as well as honing the exact information that security and DevOps engineers needed to see.

I wanted to determine how we could: