Open Raven
Product
I worked on a small team of designers to validate ideas through wireframing, design new features, improve functionality, and maintain a visually appealing product. We worked both autonomously and collaboratively with a cross-discipline team.
Alerts
One of Open Raven's biggest goals is letting users know what data is at risk and helping them address the issue. As additional capabilities grew, the process of setting up and viewing Alerts become cumbersome. Because this wasn't on the roadmap it was limited to existing UI components and focusing on reworking the flow to assist front-end with a quick execution.
Above is the new landing page for Alerts. Some of the changes made were...
- Details section – We often received user feedback for this section that was along the lines of, "This is great – where do I start?". This new section not only gave users an overview of their environment, but helped them prioritize what assets needs to be investigated or triaged first.
- Reprioritized tabs – Previously, the status tabs were individual pages found in the nav. Moving these above the table allows users to better understand where they are at in the product and creates a more comprehensive view.
- Updated kebab menu options – As more customers began using the software, we realized the majority of our users would assign investigation or triage these issues out to others team members. By moving some of these options previously found in detail pages, we were able to reduce the number of clicks it took to take common actions. (shown below)
When the user clicks on a row to investigate further, we land on the rule details page.
Here we see the rule that is in violation and the affected assets. Because some of our customers have petabytes of data,
We also explored the ability to create a note/comments, in case you need to let others know why you took a specific action or add other context. This flow was one that I worked on specifically.
I researched how similar SaaS platforms utilized notes and/or comments and also introduced the idea of adding a log. There was also the question of how notes were attached to closed or archived violations. Ultimately, this feature was cut to prioritize other front-end work.
Reflections
While the idea of adding a note could certainly hold some value to customers, it also adds another line of communication which wasn't necessary for our product at the time (probably best to use Jira or another similar tool for these comments). I think seeing a log of what users took what action could have been more valuable for users and worth exploring further.
Many of the final screens created for Alerts were not built in their entirety because of the need to incorporate Data Detection and Response (real-time alerts). However, much of this foundational work carried over to the next iteration that needed to include more types of alerts and ultimately more clouds. The screenshot below shows one of the quick initial ideas we began brainstorming.
Scan Runs
An essential function of Open Raven is scanning a user's environment and showing them scans that have completed, failed, timed-out, or are in-progress. I brought this section of the product up to speed to match similar designs, making it more predictable for the user when clicking into it and easier to understand by reorganizing sections and including new data provided by the back-end. Below is an example of a failed data scan.
Old data scans were shown alongside the table, which was an outlier/one-off design in the product. The new update matches other patterns found throughout the product.
.png)
Design System + Libraries
I consistently helped maintain and create new system and library components and projects, primarily icons and UI components. We also began utilizing icons from Signalicon, which required reorganization and categorizing.
I also assisted front-end with updating components in GitLab repos.
Mapping Additional Cloud Environments
One of the features that sets Open Raven apart is the ability to visualize data at scale. The map provides users with an overall view of their environment. Open Raven began with AWS with the plan to expand additional cloud providers. As our coverage expanded, we needed to reevaluate how the map functioned for users.
Durning an on-site in Los Angeles, I worked alongside the design team, front- and back-end engineers, and our product manager to reevaluate the approach.
As Open Raven worked with more customers and larger environments, the problem of loading petabytes of data became apparent. In order to alleviate the load time but maintain the visualization of data, the teams decided to cap the number of assets shown.
This project is a great example of how design isn't just visual. The changes our team of designers made were relatively small, however the conversations we had and perspective we added helped to shape the functionality and expansion of the product.
The design team reworked the initial map to show multiple clouds that users could drill down into (left). We also added more information on the hover state and made the size of the region itself reflect the number of assets in relation to the other regions in the environment (right).
