Data Dashboard
A digital tool made for altering and processing the image with randomized pixel displacement which can generate infinite variations of the photography creating an original and artistic version of the promted image.
Type
Generative art, Creative Coding, Animation
Platform
Processing
Programming Language
Processing
Date
09.2021
Scroll pictures to see more -->
User Tasks, Needs & Pain Points
Tasks
Supervising over relevant data points - Revenue, Expenses, Profit, Trends, Customer informations
Reviewing customer growth and retention
Adding new data points (transctions, sales etc.)
Accessing detailed reports
Analysing data - Analysing trends over specific amount of time
Pain Points
Time constraints → users needed instant access to critical data
Overloaded UIs → cluttered dashboards made it hard to scan or prioritize
Low technical expertise → some users struggled with raw or text-heavy data
Cognitive overload → lack of visual hierarchy slowed decision-making
Needs
Clarity & simplicity → clear typography, data blocks, and color coding
Speed & efficiency → easy access to high-priority actions and insights
Responsiveness → interface adaptable across desktop and mobile
Customisation → flexible data display for different user goals
Guided insights → use of visuals, alerts, and trends to support non-expert users
Business Goals
Aligning user experience with business strategy was key to this project. The product needed to not only serve users well, but also support long-term platform growth and revenue.
Retention & engagement → reduce friction, improve satisfaction
Efficiency as a competitive edge → outperform similar dashboards in clarity and speed
Scalability → allow the dashboard to evolve with data volume and complexity
Monetisation → increase adoption of premium features via usability and trust
These goals were factored into the design system from the start, helping me prioritize flexible layouts, visual performance cues, and long-term maintainability.
Design Strategy & Solutions
With clear user and business goals established, I defined a set of design principles to guide the interface and interaction decisions. These principles directly addressed the user pain points and functional needs uncovered in the research phase, while supporting the product’s growth and performance strategy.
Key Design Focus Areas
Desktop-first, responsive layout → Based on usage patterns, I prioritized desktop as the primary experience and adapted the UI for mobile using a scalable grid and modular auto-layout system.
Clear hierarchy & scannability → I applied typographic scale, font weight, and structured spacing to create a visual hierarchy that made KPIs and charts easy to scan. Key numbers were surfaced with bold treatments and positioned at the top for instant access.
Cognitive offloading through visuals → To support users with lower technical literacy, I prioritized visual data over text. Charts, icons, and trend indicators were used to simplify interpretation and reduce cognitive load.
Microinteractions & feedback → I implemented hover, active, and focus states across all key actions. This created a more tactile experience and supported visibility of system status, reinforcing user confidence and discoverability.
Customisation & control → Recognizing that users have different data priorities, I allowed for modular sections and display preferences, giving users ownership over what they see.
Color coding for clarity → A meaningful color system was introduced to support pattern recognition
These design choices directly supported the product’s value proposition: empowering users to act on their data quickly, confidently, and independently.
Design Decisions
Building on the strategy phase, I translated core UX principles into an interface that feels structured, responsive, and easy to navigate - without overwhelming the user. Every element was designed to support usability, performance, and accessibility.
Layout & Structure
Used auto-layout and grid systems to ensure consistency and responsiveness across breakpoints
Designed two menu states (collapsed and expanded) to allow flexible navigation and maximize screen space
Applied white space deliberately to reduce visual noise and improve information prioritization
Typography
Defined a clear typographic hierarchy (H1–Body) to guide attention and reinforce structure
Applied font weights and sizing to highlight key metrics and support fast scanning
Scaled down appropriately for mobile, maintaining legibility and clarity on small screens
Color System
Leveraged the brand’s blue palette as a primary color for consistency and trust
Built a contrast-safe system to meet accessibility guidelines (WCAG)
Used semantic colors (green for growth, red for alerts) to improve data comprehension
Integrated grey backgrounds to define sections and emphasize foreground data
Mobile Adaptation
Enlarged buttons and tap areas for touch usability
Prioritized content hierarchy to fit smaller viewports without losing context
Replaced secondary button labels with icons (e.g., “⋮”) to save space while retaining function
Moved critical actions like “Add new record” into the sticky top nav for consistent access
These UI decisions ensured that the dashboard remained functional, accessible, and intuitive — whether used on a large desktop monitor or a mobile device.
Outcome & Reflection
The final design delivered a flexible, responsive dashboard that balances clarity, performance, and usability. By addressing user pain points with thoughtful interaction patterns, data hierarchy, and visual guidance, I created an experience that enables faster, more confident decision-making for both technical and non-technical users.
Key outcomes
A scalable, brand-aligned dashboard interface ready for both desktop and mobile
Clear prioritization of data through hierarchy, color, and interaction states
Enhanced usability for diverse user types with varying technical proficiency
Foundation for future features like modular customization and advanced filtering
This project strengthened my approach to system thinking, interface clarity, and designing for performance at scale. It also reinforced the value of grounding each design decision in real user needs, business context, and accessibility best practices.
