My internship at Codean started in September 2022 and finished six months after, in March 2023.
I was the company's only UX/UI designer, but soon I learned how to collaborate with developers and security experts. The review environment is a very sophisticated and complex software that security experts use to discover vulnerabilities. The product's core is the codemark, so I focus with my boss and the security expert on making new features to help the user finish the codemark's flow in less time and with less frustration.
I also built the UI design system and the UI library with a beneficial collaboration with a senior designer.
My approach to the project was to put the user front and center.
I divided the five design phases during these six months. I started empathizing with the user, trying to understand where the frustration was coming from to devise a solution to make their life easier.
I brainstormed every week with the team, and I made low-fidelity and high-fidelity prototypes, and week after week, phase after phase, I arrived at the end of this cycle. I made a product that the users tested through an unmoderated usability study, and the company's developers will build it to put it on the market soon.
The goal
My goal for this project is to ensure that the security expert would have a better flow while searching for vulnerabilities and a better UI design system that will give the review environment the consistency it misses.
Pain points
- Branding, identity, consistency: UI design system
- Easy flow organization: the review environment must show the clients and the market more design and brand identity.
- UI design system: the review environment misses UI language, graphic elements, color, interaction, and a better bug interface.
- Easy flow: a clear, consistent & universal path across the review environment.
Organization: files organization, UI language for more consistent work in the files, in the folders, and in the codemarks.
The problems
The review environment needs UX/UI
language. It misses consistency and needs more features necessary for a smooth flow.
The review environment is a tool that is tailored for security work. It is used by security experts, white-box ethical hackers, and everybody who wants to find more code vulnerabilities in less time.
The project
User stories
Persona
User journey
Competitive audit: two direct and two indirect competitors.
Visual Studio Code
Brackets
Hex-rays IDA pro
Ghidra
It is a streamlined code editor
supporting development operations like debugging, task running, and version control. Software developers use it. It has the tools developers need for a quick code-build-debug cycle, leaving more complex workflows to fuller featured IDEs, such as Visual Studio IDE.
It's a free, open-source code editor for the Web. It is built in HTML, CSS, and Javascript. It is used by front-end, web developers, and software developer.
It allows you to see a live previous of the changing you are making as you edit your HTML and CSS document.
It's primarily a multi-platform, multi-processor dis-assembler that translates machine executable code into assembly language source code for the purpose of debugging and reverse engineering. It has been used by a security expert. IDA pro has become the de-facto standard for the analysis of hostile code and vulnerability research.
Ghidra is a free and open-source reverse engineering tool developed by the National Security Agency of the United States.
Security experts use it.
Ghidra is seen by many security
researchers as a competitor to
IDA pro.
I focused for this project on two specific pain points to be solved:
1. Branding, identity, consistency
The review environment needs to show the client and the market more design and brand identity.
2. Easy flow
A clear, consistent & universal path across the
review environment.
To be fast and to make something that was immediately understandable
from the user's UX point of view, I made wireframes and quick low-fi prototypes from a screenshot: the existing interface of the review environment.
I drew every element at the top of the screenshot.
I tried to solve the codemark flow in many different ways.
Here there are some screenshots:
Actions underneath the codemarks.
1
2
Choose the codeamak type from a dropdown menu on the codemark itself.
Box with type and information that collapse between the lines.
3
.png)
4
Again, another box with information collapses by clicking the drop-down icon.
Wireframe after wireframe, I developed a consistent idea: have a specific action from a vertical panel on the right.
1
.png)
2
.png)
During an important brainstorming with the team, the users explained to me the importance of having a structure and how they imagined the possible flow through layers, sublayers, and filters; we came up with a better idea to show consistency in a specific flow: the codemark's flow.
Layers
Sublayers
Filters
1
2
3
The last low-fidelity prototype
There were many low-fidelity prototypes with many tentatives to better show the codemark's flow through the layers, sublayers, and filters.
After much study on the possible new interfaces, I realized that the better way for security experts was to have the layers at the top as a new toolbar and the horizontal panel at the bottom.
Other essential features came up: making a codemark from the code by selecting and clicking on the hover toolbar.
The vertical panel
become horizontal
filters that can be selected
during the flow
possibility to create
a codemark from the code
vertical flexible panel for
definition & reference
of the code
layers on the new
the toolbar at the top
a specific type
of codemark
a percentage of
incoming link
a percentage of
outcoming link
select who made
the codemarks
a specific
created commit
the last
modified commit
when the commit
was created
when the last commit
was created
Polish the design, build the UI and make the hi-fi prototype
.png)
.png)
.png)
Unmoderated usability study
