Design SystemDesign SystemUIUser InterfacePassionPassion Project
Aura
Overview
In the modern workplace, "Focus" is a finite resource, yet our tools treat it as infinite. We are constantly interrupted by the very platforms meant to make us productive. Aura is a passion project designed to reclaim the "Flow State." It is a B2B2C wellness and productivity suite that integrates into a professional's workflow to protect deep work and provide managers with anonymised team-health insights.
Project Type
Passion Project / Self-Initiated
Role
Lead Product Designer (Strategy, UI/UX, Systems)
Tools
Figjam, Pencil.dev, Claude, HSL Logic
The Premise
The ‘Why’
This project was born out of a personal observation: most wellness apps feel like "extra work." I wanted to challenge the notion that mental well-being and high-performance output are at odds. By applying a Precision Lab aesthetic, something that is clean and high-contrast, I aimed to create a tool that feels as essential to an engineer or designer as their IDE or Figma, and moving away from "soft" wellness into "hard" productivity utility.
The Problem
We have more productivity tools than ever, yet burnout rates are at an all-time high. Through secondary research and informal interviews with tech professionals, I identified three core "Friction Points" in the current landscape.
The Context-Switching Tax
Users lose up to 40% of their productive time switching between work apps and wellness apps. Wellness shouldn't be a destination; it should be a layer.
Wellness Guilt
Many high-performers feel that "meditating" or "taking a break" during work hours looks like slacking. There is a lack of professional, data-driven interfaces that validate rest as a performance-enhancer.
Managerial Blindness
Managers often don't know a team is burnt out until someone quits. There is no "Early Warning System" that respects individual privacy while showing collective team fatigue.
My Role & Scope
As the solo designer, I handled the end-to-end process: from initial market gap analysis and user-flow mapping to building a scalable, token-based design system and high-fidelity prototypes for Desktop and Mobile.
AI & Vibe-Coding
Beyond traditional UI/UX methodologies, this project served as an exploration into the future of AI-augmented product design. I leveraged AI-driven workflows, specifically “vibe coding”, to rapidly translate the “Precision Lab” aesthetic into a functional technical foundation. By using natural language to define the “vibe” (high-density, clinical, performance-oriented), I was able to generate complex design tokens and boilerplate component logic instantly. This allowed me to spend less time on repetitive execution and more time solving high-level user experience challenges.
Discovery
Competitive Analysis
Market Research
I audited the current market leaders to find where they were falling short for the “Senior Professional” user.
The Lifestyle Apps (Calm, Headspace): Excellent content, but the “zen” aesthetic often feels out of place in a high-pressure corporate environment. They require “opting out” of work to use.
The Task Engines (Asana, Monday, Jira): Excellent for tracking output, but they treat humans like machines. They don't account for energy levels or the need for “Deep Work” blocks.
Click to expand
Market Gap
The “White Space”
A tool that automates focus. I realised the market needed a solution that doesn't just ask you to focus, but facilitates it by syncing with your status, blocking distractions, and treating “Team Energy” as a trackable KPI. Hence, searching for the sweet spot “white space” is born.
I didn't choose this niche by accident. I analysed the market and realised that professionals were being forced to choose between ‘productivity’ and ‘well-being.’ I identified a white space for a tool that treats Focus as a performance metric, which creates a bridge between the two.
Click to expand
In the world of Productivity and Wellness, the market is currently a polarized landscape. Imagine a scale:
Left Side (Pure Content):
Apps like Calm or Headspace. They are beautiful and “zen,” but they are disconnected from work. To use them, you have to stop being a “professional” and start being a “meditator.”
Right Side (Pure Execution):
Apps like Jira, Monday, or Notion. They are powerful and “technical,” but they are devoid of humanity. They treat you like a ticket in a queue, not a person with a fluctuating energy level.
The “White Space” is the empty middle. It's the place where “Doing the Work” and “Feeling Good” overlap.
User Research
Pain Point Affinity Map
Click to expand
My goal is to understand the “anatomy of a distraction”. So I conducted short 1:1 interviews with 10ish high performers at my workplace, ranging from senior devs, project managers, team leaders, and so on. I took some of their quotes and clustered them into different themes. Those themes became headings in my heatmaps: active execution, shield, anonymised insights.
After conducting user interviews, I synthesised the raw qualitative data into an Opportunity Map. I realized that ‘Wellness’ wasn't the goal - ‘Frictionless Focus’ was. I clustered potential features into four strategic pillars to address the specific pain points mentioned by users.
Active Execution
This is the internal performance. Users mentioned needing "on-ramps" to get into the zone. Once the shield is up, the user needs the "Engine" to run.
The Shield
This is the external protection. Users kept complaining about external forces breaking their flow. I realised that "Focus" isn't just about what you do; it's about what you prevent.
Anonymised Insights
This is the trust layer. I often hear managers felt blind; and employees felt watched. I identified a "Privacy vs. Visibility" tension here.
Outliers
This is the internal performance. Users mentioned needing "on-ramps" to get into the zone. Once the shield is up, the user needs the "Engine" to run.
Visual Direction
Visual Strategy
Click to expand
To find the gap for Aura, I mapped the market across two critical dimensions of the user experience: Context and Intent.
The Y-Axis: Interaction Intent (Active vs. Passive)
Active (Execution-focused): These are “Tools of Doing.” Users are here to move tickets, write code, or manage a schedule. The interaction is high-friction but high-utility. Jira and Linear live here.
Passive (Content-focused): These are “Tools of Consumption.” Users are here to listen, watch, or reflect. The interaction is low-friction and restorative. Calm and Headspace live here.
Some insight: most wellness tools are passive, meaning they require the user to stop working to find relief.
The X-Axis: Contextual Focus (Personal vs. Professional)
Personal (Lifestyle): Focuses on the “Human” outside of work - sleep, anxiety, and hobbies. These apps are usually B2C and don't care about your Slack status.
Professional (Corporate): Focuses on the “Worker” inside the machine; sprints, deadlines, and team velocity. These are B2B tools designed for output.
Also found out that most professional tools are output-obsessed and ignore the human's mental energy entirely.
To translate the product strategy into a tangible user experience, I mapped out the Visual DNA of Aura through four pillars: Digital Sanctuary, High Utility Architecture, Lab Aesthetic, and Frictionless flow. This framework was designed to balance the emotional need for a calm, high-trust environment with the functional requirement of a high-precision professional instrument. By codifying technical elements such as 8pt grid logic, bento-modular layouts, and monospaced typography, I was able to make sure that the “Lab Aesthetic” served a specific purpose: minimising cognitive load. The goal was to create a frictionless interface where predictable states and zero context-switching allow the UI to recede into the background, acting as an invisible enabler of deep work rather than a distraction.
Click to expand
Design
Systemic Design & Execution
The Workflow: AI-Augmented Architecture
In a modern product environment, speed is a feature. For Aura, I experimented with an AI-augmented workflow to move from strategic concept to a production-ready design system in a matter of minutes.
The goal wasn't just to generate “pretty screens,” but to use precise prompting to manifest a complex component library. By defining the “DNA” of the product first (the tokens, the grid logic, and the technical requirements, etc.), I was able to direct AI to handle the pixel-heavy execution. This allowed me to focus my time and energy where it mattered most: UX logic, data hierarchy, and system scalability.
Click to expand
The DNA
Global Tokens
A system is only as strong as its foundation. I established a token-first architecture using HSL color scales to ensure mathematical consistency across the “Precision Lab” aesthetic.
Colour Logic
I utilised a high contrast Teal and Purple palette, mapped to semantic tokens like $action-primary and $accent-secondary.
Typography
I paired Space Grotesk for high-impact technical headings with Inter for UI clarity. This hybrid approach keeps the “Technical-Mono” vibe while ensuring its long-form readability in data-heavy modules.
The Atoms
Interactive Components
I built a “Component Matrix” designed for high-velocity prototyping. Every atom (from buttons to inputs) was created with Boolean variables and instance swapping in mind.
States & Logic
Every component was defined with 5+ distinct states (Default, Hover, Active, Disabled, Loading) to ensure the developer handoff is airtight.
Status Pills
I developed a specialised set of “Energy Badges” (for example, In Flow, At Risk, Burnout) to translate complex biometric data into instant, glanceable UI.
The Molecules
Bento Module Library
Aura's interface is built on an 8pt Grid System. I designed a library of “Bento Modules” that serve as the modular building blocks of the dashboard.
Modular Flexibility
Each card (Focus Gauge, Team Heatmap, Soundscape) is designed to reflow based on the container size.
Information Density
By standardising the padding (Small: 16px, Medium: 24px, Large: 32px), the UI remains visually quiet even when displaying high-density data.
The Specifics
Data Visualisation
In a “Precision Lab” interface, data is the hero. Every chart and gauge was designed to be easy on the eyes and for instant comprehension.
Precision Gauges
I developed a circular progress system that provides sub-pixel accuracy for focus sessions.
Accessibility First
A core part of the system is the WCAG AA Compliance check. I verified every semantic color pairing against a true black background to ensure 100% legibility for all users.
The Handoff
Layout & Breakpoint Logic
Design doesn't live in a vacuum. I mapped out the Grid Collapse Logic to show how a 12-column desktop bento grid intelligently reflows into a single column mobile experience.
Haptic Intent
More than just resizing, I defined how interaction patterns shift across devices, like moving from “Hover Tooltips” on desktop to “Long-press Details” on mobile to respect the ergonomics of touch.
Design
Mockup Designs & Prototype
My early wireframes focused on translating the ‘Precision Lab’ vision into functional layouts. I experimented with bento-modular grids and data-dense dashboard patterns to find the right balance between information density and the calm, distraction-free experience that Aura demands.
Try Live PrototypeReflection
Reflection
Learnings
Systemic Speed vs. Pixel Pushing
Using an AI-augmented workflow taught me that when the architectural logic (tokens, HSL scales, and grid systems) is robust, high-fidelity execution becomes a matter of minutes, not days. This project shifted my focus from manual craftsmanship to Systemic Orchestration, proving that a designer's true value lies in defining the rules of the engine, not just painting the car.
Next Steps
Precision as a form of care
Aura reinforced my belief that for high-performers, “calm” isn't found in soft gradients or lifestyle imagery, but in clinical clarity. This passion project allowed me to explore the “Productivity Paradox” and realise that the most “human” UI is often the one that stays out of the way, acting as a silent, technical shield that protects a user's most valuable asset: their attention.