Project Overview#
EcoTrack Dashboard is a comprehensive design system and UI/UX solution for sustainability tracking. We designed an intuitive interface that makes complex environmental data accessible and actionable for businesses of all sizes.
The dashboard transforms raw sustainability metrics into clear visualizations that drive meaningful environmental action.
Client Project
This design system was created for a leading sustainability SaaS company. The designs have been implemented and are now serving 500+ enterprise customers.
Design Challenge#
The Problem#
Sustainability data is complex. Companies track hundreds of metrics across multiple dimensions—carbon emissions, energy usage, water consumption, waste management, and more. Existing tools were:
- Overwhelming with data without insights
- Difficult to navigate and understand
- Not actionable for decision-makers
- Inconsistent across different modules
Our Approach#
We employed a human-centered design process:
- Research: 24 user interviews across different roles
- Synthesis: Identified key user needs and pain points
- Ideation: Explored multiple design directions
- Validation: Tested prototypes with real users
- Iteration: Refined based on feedback
Design System#
Color Palette#
Our color system reflects sustainability while maintaining professional aesthetics:
Primary Colors:
├── Green 500: #10B981 (Primary actions, positive metrics)
├── Blue 500: #3B82F6 (Information, links)
├── Amber 500: #F59E0B (Warnings, attention)
└── Red 500: #EF4444 (Errors, negative metrics)
Neutral Colors:
├── Gray 900: #111827 (Primary text)
├── Gray 600: #4B5563 (Secondary text)
├── Gray 200: #E5E7EB (Borders)
└── Gray 50: #F9FAFB (Backgrounds)
Typography#
We selected Inter for its excellent readability at all sizes:
| Style | Size | Weight | Use Case |
|---|---|---|---|
| Display | 48px | Bold | Page titles |
| Heading 1 | 32px | Semibold | Section headers |
| Heading 2 | 24px | Semibold | Card titles |
| Body | 16px | Regular | Content |
| Caption | 12px | Medium | Labels, metadata |
Component Library#
Our Figma library includes 200+ components organized into categories:
Navigation
Data Display
Forms
Feedback
Key Screens#
Dashboard Overview#
The main dashboard provides an at-a-glance view of sustainability performance:
Key Metrics Bar
Top-level KPIs with trend indicators show overall performance.
Carbon Footprint Chart
Interactive timeline showing emissions across scopes 1, 2, and 3.
Goal Progress
Visual representation of progress toward sustainability targets.
Action Items
Prioritized list of recommended actions based on data analysis.
Data Visualization#
We designed a comprehensive chart library optimized for sustainability data:
Chart Types:
├── Area Charts → Emissions over time
├── Stacked Bars → Category breakdowns
├── Donut Charts → Proportional data
├── Sankey Diagrams → Flow visualization
├── Heat Maps → Geographic distribution
└── Gauge Charts → Goal progress
Reporting Module#
The reporting module enables users to generate compliance reports:
- Pre-built templates for GRI, CDP, SASB
- Automated data population
- PDF and Excel export
- Scheduled report generation
- Custom branding options
- Complex reports require setup time
- Some frameworks need manual inputs
Accessibility#
We designed with accessibility as a core requirement, achieving WCAG 2.1 AA compliance:
Color Contrast#
All text meets minimum contrast ratios:
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- UI components: 3:1 minimum
Keyboard Navigation#
Full keyboard support throughout:
- Logical tab order
- Visible focus indicators
- Skip navigation links
- Keyboard-accessible charts
Screen Reader Support#
- Semantic HTML structure
- ARIA labels on interactive elements
- Chart data available as tables
- Status announcements for updates
Responsive Design#
The dashboard works across all device sizes:
| Feature | Width | Layout | Navigation |
|---|---|---|---|
| Mobile | <640px | Single column | Bottom nav |
| Tablet | 640-1024px | Two column | Collapsible sidebar |
| Desktop | 1024-1440px | Full layout | Fixed sidebar |
| Large | >1440px | Centered max-width | Fixed sidebar |
Design Tokens#
We established a comprehensive token system for consistent implementation:
{
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px"
},
"radius": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"full": "9999px"
},
"shadow": {
"sm": "0 1px 2px rgba(0,0,0,0.05)",
"md": "0 4px 6px rgba(0,0,0,0.1)",
"lg": "0 10px 15px rgba(0,0,0,0.1)"
}
}
User Testing Results#
We conducted 24 user testing sessions across different user types:
Task Completion Rates#
| Task | Success Rate | Avg. Time |
|---|---|---|
| Find total emissions | 100% | 8 seconds |
| Generate monthly report | 92% | 2.5 minutes |
| Set reduction target | 96% | 1.5 minutes |
| Compare year-over-year | 88% | 45 seconds |
| Export data to Excel | 100% | 30 seconds |
User Feedback Highlights#
"Finally, a sustainability dashboard that doesn't require a PhD to understand." — Sustainability Manager, Fortune 500 Company
"The visualizations make it so easy to explain our progress to the board." — Chief Sustainability Officer, Manufacturing Firm
Timeline#
Discovery Phase
Conducted stakeholder interviews and competitive analysis. Defined project scope and success metrics.
Design Exploration
Created wireframes and explored multiple visual directions. Validated concepts with users.
High-Fidelity Design
Developed complete screen designs and interactive prototypes for all major flows.
Design System Handoff
Delivered comprehensive Figma library, documentation, and design tokens to development team.
Deliverables#
The final delivery included:
- Figma Library: 200+ components with variants
- Screen Designs: 85 unique screens across all modules
- Prototypes: Interactive prototypes for key user flows
- Documentation: Component usage guidelines and patterns
- Design Tokens: JSON tokens for development integration
- Motion Specs: Animation guidelines and Lottie files
View the Demo
Explore the interactive prototype at ecotrack.design to experience the full design system.
Interested in a similar project? Let's discuss your needs.