UI CHALLENGE
Design a dashboard for a surveillance product
Context of the project
Sharpen is a series of design prompts that help UI/UX designers practice their skills, build speed, & experiment with new visual styles. This challenge focused on designing a dashboard for a surveillance product, exploring how its data, controls, and monitoring tools could come together in a clear, functional interface. The challenge was sourced from Sharpen.design — check it out!
Screen concept
01 : Establishing a Map-Centric Visual Hierarchy
The 3D map serves as the primary workspace, so the interface is structured to give it maximum visual prominence. I introduced collapsible interface elements to establish a clear hierarchy between essential operational information and secondary controls. This allows users to focus on the geographic view without losing access to supporting functionality. The sidebar can also be collapsed to reclaim screen space, enabling a more immersive view when monitoring and spatial analysis require greater attention. This approach prioritises workspace efficiency while maintaining flexibility for different operational needs.
02 : Applying Progressive Disclosure to Secondary Information
The Try These Features section is positioned at the bottom of the interface and can be expanded when needed. This keeps exploratory features accessible without competing with the core operational workspace. I also introduced a compass to support spatial orientation within the 3D environment, alongside latitude and longitude coordinates in the bottom-left corner for users who require precise geographic reference. These elements provide useful navigational context while remaining visually subordinate to the map.
03 : Introducing Contextual Controls & Actionable Metrics
To maintain a focused interface, I consolidated secondary map controls into floating, contextual elements for Cesium View Options, Quick Locations, and map expansion. This reduces persistent on-screen UI while keeping frequently used tools within easy reach.
The four primary dashboard metrics : Active Locations, Notifications, Alerts, and Regions, are designed to provide an immediate operational overview. Rather than presenting static counts alone, they can surface relevant changes and potential actions. For example, an alert indicating a camera error gives users a clear entry point to investigate the issue and access the relevant camera controls. Similarly, Active Locations can highlight newly added locations, while Notifications provide visibility into recent updates.
04 : Designing for Different Lighting Conditions
Dark mode is the default visual theme, supporting a strong visual hierarchy around the map and helping geographic details, interface controls, and alert states remain prominent. It is particularly suitable for darker operational environments, although its effectiveness depends on the display, ambient lighting, and individual user preferences. A light/dark mode toggle is therefore available in the top-right navigation, allowing users to adapt the interface to their working conditions. Light mode provides an alternative for brighter environments and users who prefer a lighter interface. This flexibility accommodates different contexts without compromising the underlying information architecture or visual consistency.
Camera dashboard version 1
I used concise, purpose-driven labels to reduce repetitive use of “Camera” and make each section easier to scan. Each widget has a distinct role, avoiding unnecessary duplication and improving information clarity. Camera Types uses ratio-based indicators (e.g., 7/10) to show cameras in use against total availability. The Group Summary retains the original data while making online/offline status easier to interpret, helping operators identify potential issues quickly. The Usage Report includes a Preview option, giving users a snapshot of a camera feed before opening the full view. This provides immediate visual context & helps users decide whether further investigation is necessary. I distinguished the global Add Widget action, which adds a new dashboard widget, from the contextual + control, which adds or modifies information within an individual widget. This establishes clear action boundaries and reduces ambiguity.
The dashboard follows a three-level hierarchy:
Top — Assess: Understand the overall operational state.
Middle — Identify: Use Camera Types and Group Summary to locate potential issues.
Bottom — Investigate: Use the Camera Usage Report to identify and inspect individual cameras.
dashboard version 2 : Overall Design Outcome
The overall design follows three core principles: visual hierarchy, progressive disclosure, and operational clarity. The map remains the focal point, secondary controls are accessible without occupying unnecessary space, and key dashboard metrics help users identify changes and navigate towards relevant actions. Together, these decisions aim to create a focused, adaptable command-and-control interface that supports quick situational awareness while retaining access to the full set of operational tools. And for the Cam dashboard the design prioritizes clarity, meaningful metrics, & actionable insights, guiding operators from assessing overall health to identifying exceptions and investigating individual cameras, with less cognitive overhead and a more intuitive workflow.