The Story Behind Blutto's Design

When we set out to design Blutto, we had one overarching goal: create an interface so intuitive that teams could focus on their work, not on learning our tool. This is the story of how we built a design system that scales across teams, cultures, and use cases.

Our Design Philosophy

Clarity Over Cleverness

Every design decision starts with one question: "Does this make the user's job easier?" We chose clarity over visual flair, functionality over form. This doesn't mean our interface is boring—quite the opposite. By removing unnecessary complexity, we created space for the work that matters.

Progressive Disclosure

Information architecture follows the principle of progressive disclosure. Users see what they need, when they need it. Advanced features are available but don't clutter the primary interface.

Accessibility-First Design

From the very beginning, we designed for accessibility. This wasn't an afterthought—it shaped every component, color choice, and interaction pattern.

Building the Design System

Color Psychology and Accessibility

Our color palette serves multiple purposes:

Primary Colors:

**Blue (#2563EB):** Trust, reliability, productivity

**Green (#059669):** Success, completion, growth

**Orange (#EA580C):** Attention, urgency, energy

Neutral Colors:

**Slate variants:** Provide hierarchy without distraction

**High contrast ratios:** Ensure readability for all users

Every color combination meets WCAG 2.1 AA standards, with many exceeding AAA requirements.

Typography That Works

We chose Inter as our primary typeface for several reasons:

**Optimized for screens:** Excellent readability at all sizes

**International support:** Works across languages and scripts

**Variable font technology:** Reduces load times while providing flexibility

Our typographic scale follows a 1.25 ratio, creating harmonious proportions:

**Heading 1:** 36px (2.25rem)

**Heading 2:** 30px (1.875rem)

**Heading 3:** 24px (1.5rem)

**Body:** 16px (1rem)

**Small:** 14px (0.875rem)

Component Philosophy

Each component in our system follows strict principles:

Composability

Components work together seamlessly. A button component can be used in cards, modals, or standalone contexts without breaking.

Consistency

Visual and behavioral patterns are consistent across the entire application. Once you learn one interaction pattern, it applies everywhere.

Flexibility

Components adapt to different content types and contexts while maintaining their core identity.

Key Design Challenges

The Dashboard Dilemma

Dashboards are notoriously difficult to design well. Too much information overwhelms users; too little leaves them feeling uninformed.

Our solution: **Contextual Dashboards**

Instead of one massive dashboard, we created role-specific views:

**Project Managers** see timeline and resource information

**Individual Contributors** see their tasks and deadlines

**Executives** see high-level metrics and trends

Mobile-First Complexity

Designing productivity software for mobile presents unique challenges. How do you fit complex workflows into a small screen?

Our approach:

**Task-focused screens:** Each screen accomplishes one primary task

**Smart defaults:** Reduce cognitive load with intelligent pre-selections

**Gesture-based navigation:** Swipe to complete, long-press for options

Information Architecture

With dozens of features and thousands of data points, organizing information was crucial.

We developed a **three-tier architecture:**

1. **Primary navigation:** Core features (Projects, Tasks, Team)

2. **Secondary navigation:** Context-specific options

3. **Tertiary navigation:** Advanced settings and configurations

Testing and Iteration

User Research Methods

Our design process includes multiple research methods:

Quantitative Research:

A/B testing on key interactions

Analytics on feature usage and drop-off points

Performance metrics (load times, error rates)

Qualitative Research:

User interviews with teams of all sizes

Usability testing sessions

Accessibility audits with disabled users

Key Learnings

Some insights that shaped our final design:

1. **Icons need labels:** Even universal icons benefit from accompanying text

2. **White space is a feature:** Generous spacing reduces cognitive load

3. **Animations guide attention:** Subtle motion helps users understand state changes

4. **Customization vs. Configuration:** Users want control but not complexity

Accessibility Deep Dive

Screen Reader Optimization

Every interactive element includes proper ARIA labels and descriptions. We test regularly with NVDA, JAWS, VoiceOver, and TalkBack.

Keyboard Navigation

Complete keyboard accessibility including:

Logical tab order throughout the application

Skip links for efficient navigation

Keyboard shortcuts for power users

Focus indicators that are clearly visible

Color and Contrast

Beyond meeting WCAG standards, we:

Never rely on color alone to convey information

Provide multiple ways to distinguish important elements

Test with various forms of color blindness

Performance Considerations

Design Impact on Performance

Every design decision affects performance:

**Simplified icons:** Custom SVG icons load faster than icon fonts

**Optimized images:** Proper sizing and compression for all contexts

**CSS architecture:** Minimal, organized stylesheets reduce render time

**Component lazy loading:** Advanced features load only when needed

Perceived Performance

Users perceive performance differently than actual metrics show:

**Skeleton screens:** Show structure while content loads

**Progressive enhancement:** Core functionality works immediately

**Micro-interactions:** Provide immediate feedback for user actions

Design System Governance

Documentation Standards

Our design system documentation includes:

**Usage guidelines:** When and how to use each component

**Code examples:** Both React and vanilla HTML implementations

**Accessibility notes:** ARIA patterns and keyboard behavior

**Design tokens:** Exportable variables for colors, spacing, and typography

Version Control

We maintain design system versions with:

**Semantic versioning:** Clear communication about breaking changes

**Migration guides:** Step-by-step instructions for updates

**Deprecation notices:** Early warning about upcoming changes

Tools and Workflow

Design Tools

**Figma:** Primary design tool with shared component library

**Principle:** Prototyping complex interactions

**Stark:** Accessibility testing and color contrast validation

Development Handoff

**Design tokens:** Automated export from Figma to code

**Component documentation:** Generated from actual code

**Visual regression testing:** Automated comparison of design and implementation

Future Evolution

Planned Improvements

**Dark mode:** Full dark theme support (launching Q3 2025)

**Personalization:** User-customizable interface elements

**Advanced accessibility:** Voice control and eye-tracking support

**Internationalization:** Right-to-left language support

Emerging Trends

We're keeping an eye on:

**Voice interfaces:** Integration with smart assistants

**Augmented reality:** Task visualization in physical spaces

**AI-assisted design:** Automatically optimized layouts

Lessons for Other Design Teams

Start with Constraints

Constraints breed creativity. By establishing clear guidelines early, we freed ourselves to focus on solving user problems rather than debating visual details.

Involve Engineers Early

The best designs come from close collaboration between design and engineering. Include developers in design reviews and designers in technical discussions.

Test Early and Often

Don't wait for perfection. Test rough prototypes with real users to identify problems before they become expensive to fix.

Document Everything

A design system without documentation is just a collection of pretty pictures. Invest in clear, comprehensive documentation from day one.

Interested in our design process? Follow us on Twitter for behind-the-scenes content, or reach out to our design team at design@blutto.com.