Untangling Complexity for QubesOS
We focused on improving critical aspects of the user experience: accessibility, visual consistency, clear communication, and intuitive interface design.
intro
Qubes OS is a security-focused operating system that uses virtualization to isolate tasks and applications in separate environments called ‘qubes’. This means that if one qube is compromised, the rest of the system stays secure. Think of it like a digital fortress, where each room is locked and independently secured.
Qubes OS is known for its strong security but faces significant usability challenges. Technical users often bypass the user interface in favor of the command line, limiting its appeal to non-technical users. Our goal was to lower the learning curve and make Qubes OS accessible to a broader range of users without compromising its core strengths.
ux audit
Three focused tracks, one cohesive system.
Color System Audit
We adopted the Tailwind CSS color system, an open-source framework with a diverse palette. This system improves readability, accessibility, and creates a more cohesive, visually appealing UI with improved WCAG 2.2 compliance.
Original Qube colours
Proposed Qube colours
Each qube is identified by a color to help users differentiate them. The previous color scheme lacked sufficient contrast, making text hard to read. We updated the qube window colors using the Tailwind palette to improve readability and color contrast across Windows.
Logo Color Audit
We noticed inconsistencies in the Qubes logo colors across platforms. To address this, we’ve provided two alternatives using Tailwind colors:
Proposed Logo 1: This is the closest match to the original logo using the Tailwind palette.
Proposed Logo 2: This is an alternative option.
Icon System Audit
We reviewed the existing Qubes icons, analyzing their usage to understand how they functioned across the platform. This informed our proposal for a new icon set, sourced mostly from lucide.dev under an MIT license, featuring outlined designs with customizable stroke widths.
While most icons were sourced from Lucide, we redesigned those for specific qube types, as the previous icons didn’t align well with pixel grids. The redesign incorporated the updated qube colors and gave the icons a more modern look.
UX copy
To improve clarity and accessibility, we conducted a copy audit of the Global Configuration settings. We focused on making the text necessary, clear, concise, and useful, ensuring it provided essential, actionable information for users. Based on these criteria, we proposed updated text to replace the old content.
what we delivered
For the final step, we took all these elements; the new color system, icon set, and updated text to redesign the global configurations page.
We chose screens from the global configuration settings that showcased the different design patterns that exist across all the screens. This way when the redesign is implemented they have all the different ux patterns documented so they can be applied across the different screens.
Improved Accessibility.
Visual Consistency.
Enhanced Iconography.
Clearer UX Copy.
Unified UI/UX Design.