2019-2023, Product Design

WebTotem is a cybersecurity SaaS platform designed to protect websites from vulnerabilities, malware, and external threats.

The product provides automated monitoring, real-time threat detection, and reporting dashboards, making complex security processes accessible for both businesses and individuals.

I'm a solo designer at a startup with a multidisciplinary role.

Start

Workflow process

In this project, the focus was on small yet impactful actions, including defining a design strategy to enhance the user experience and UI; over time, these incremental steps led to robust dashboards, comprehensive reports, and streamlined processes across the project.

Case 1

Unified sorting and viewing on a single page

In the early phase, the product was designed without mobile responsiveness, based on a working hypothesis that most users would engage on desktop only. In parallel, a lightweight mobile app was prototyped for convenient status checks, but we later determined it was more effective and cost‑efficient to notify users via email instead

Problem

In the initial MVP-0, each site-check module opened in a separate view, which made it difficult to browse and sort all user-added resources in one place

Solution

Designed a unified dashboard to sort and manage all user resources, and introduced a functional resource card.

The card surfaces all key data for a resource without diving into the full dashboard. An accordion-based layout enables power users with many sites to open and review multiple resources simultaneously.

Dashboard

The WebTotem Dashboard is designed to provide instant visibility into the security status of multiple websites without requiring users to open detailed reports.     This overview page acts as a control center, allowing users to quickly scan through the health of 10, 50, or even 100+ monitored websites in one place.

Expandable accordion

From a UX perspective

One of the key challenges was reducing cognitive overload. Previously, users had to navigate through heavy data tables and separate widgets, which made it difficult to maintain focus across large portfolios. By introducing an accordion-based layout with prioritized metrics, the dashboard streamlined navigation, enabling users to orient themselves quickly and act on the most critical issues first. This design balances clarity and depth, empowering security teams and website owners to maintain full control across large-scale portfolios of web assets.

Case 2

Consolidating monitoring modules with tabs

Problem

The growing number of site‑monitoring modules fragmented the experience and forced constant context‑switching between views

Solution

Introduced a tabbed interface that groups related modules within a single page, using short, clear labels and a single visible pane to save space and reduce cognitive load

Result

Users can access multiple monitoring categories from one screen, navigate faster, and avoid opening separate pages for each module

Single site dashboard

From a UX perspective

The main challenge was fragmentation of data. Previously, users had to jump between multiple sections to access antivirus results, firewall activity, or SSL information. By consolidating everything into a modular and category-based layout, the report page significantly reduced navigation time and improved the overall usability of the system. By combining clarity, modularity, and visual storytelling, the report page transforms raw security data into actionable knowledge.

Results