Interactive map & Product redesign
Role
Lead Product Designer
Timeline
April 2023 — May 2024
Intro
The project entails a community dedicated to an open methodology for effective cybersecurity, aimed at developing robust strategies to combat cyber threats, ultimately enhancing business resilience to cyberattacks. It serves as a platform where IT and cybersecurity experts can exchange knowledge and expertise.
I’d like to commence this case with my recent contribution—an interactive roadmap. The company planned to participate in a cybersecurity exhibition, showcasing its cybersecurity methodology at an interactive booth.
First versions
For the initial versions of the map, a simple web page was developed using a stepper. Each of the four steps had its “pages” of development, consisting of either stages or steps. Stages were to be completed sequentially, while steps could be done concurrently. This structure provided a logical and sequential progression for users along the implementation path, ensuring a clear understanding of the current state and next steps.
It’s good, but I need better one
While the initial version was straightforward to implement —a basic web page — it lacked the depth needed to truly resemble a “roadmap.” It didn’t provide users with a comprehensive view of the entire journey, making it challenging for them to grasp the context and sequence of steps.
Second version
The second version aimed to address the depth issue by showing the entire path upfront. However, I realized that this interface wasn’t quite suitable for the exhibition and interactive stand. At this point, it became evident that a more interactive and engaging solution was needed to captivate visitors and provide them with a unique experience of interacting with the map.
It’s.... gamification time!
Realizing that this approach could be best implemented through an interactive map, I delved into the mechanics of tabletop games. This exploration led to an intriguing idea that brought uniqueness and attractiveness to the project.
The Screen Becomes the Game Board
After exploring various solution options, I came up with the idea of using a map with different elements placed on it. This direction seemed very intriguing to the client, so we decided to move forward, refining it and adding more uniqueness and attractiveness to it.
Enhancing the Pathway
In the next version of the map, we decided to focus on the steps and stages, as they were the priority. Additionally, the map itself was designed as a narrative: the journey began in the forest and ended in an advanced city. However, as we continued to work on the map, we came to the consensus that it was becoming increasingly disconnected from the company’s brand and design. Therefore, we made the decision to abandon this concept.
Fourth iteration
While letting go of the map’s style, I still held onto the core idea of the map: an interactive field where users could “walk.” Drawing inspiration from the cyberpunk atmosphere of games, I arrived at a more high-tech style for the map. Now it resembled blocks of a system, interconnected by “paths” — wires within the system. Unique icons were drawn for each stage of cybersecurity implementation.
Deep Dive into the Stages
To ensure the stages proceeded sequentially, I represented them as a cyclic circle, with elements appearing gradually at each stage. Additionally, I retained the zoom effect on the map, illustrating how the entire map zooms in on a specific stage. Overall, this task proved to be a fascinating step in my development as a designer, as it allowed me the freedom to make graphic decisions that I hadn’t experienced in some time.
Project itself
Now let’s discuss the project itself. I was tasked with creating a new visual style for a portal dedicated to cybersecurity, as well as developing several additional pages. Unfortunately, the visual concepts and prototypes were lost over time, so I would like to present the final layouts :)
First, the project map was created. After the prototyping stage, I began to develop the color palette and select font combinations.
Face of the product
I managed to create an engaging and atmospheric visual style. A dark palette with green accents was chosen, inspired by hacker-themed movies and cyberpunk aesthetics like “The Matrix” and “Blade Runner.”
Unique font
This font stands out among the ordinary, drawing attention with its uniqueness and originality. Its dot-based style creates a special effect, which can be used to highlight text or craft unique design compositions.
Home page
The home page of the portal presents essential information about the project — its mission, manifesto, as well as fundamental principles of methodologies.
Glossary
The glossary is a separate section of the portal where popular terms used in the field of cybersecurity or featured in articles and methodologies are collected. It provides users with convenient access to definitions of key terms, helping them better understand the context and mission of the entire project.
Personal cabinet
The cybersecurity portal envisaged the possibility of adding articles in the relevant field, which had undergone preliminary expert review. In their personal cabinet, users could manage their articles: view, edit, delete, and suggest new articles for publication. Additionally, they could track the stages of publishing their articles, from creation and editing to final placement on the platform.
