Building on Existing

Enhance your product without breaking user expectations. Figr understands your existing interface patterns and helps you extend them naturally for new features and improvements.

Understanding Your Current Product

Interface Pattern Analysis

Figr analyzes your existing design patterns:

Dashboard showing analysis of existing interface patterns and design elements

Pattern recognition:

Navigation patterns:
- Menu structures and hierarchies
- Breadcrumb usage and styling
- Link behaviors and states
- Mobile navigation approaches

Layout conventions:
- Page structure consistency
- Content organization methods
- Spacing and alignment rules
- Responsive behavior patterns

Component usage:
- Button styles and variations
- Form input patterns
- Card and container designs
- Data table approaches

User Behavior Mapping

How users currently interact with your product:

Navigation Preferences
Interaction Expectations

Established behaviors:
- Click target expectations
- Form completion patterns
- Error recovery methods
- Help-seeking behaviors

Consistency Assessment

Identify existing design debt and opportunities:

Strong Patterns

Successful design elements to preserve:
- Well-adopted navigation structures
- Efficient user workflows
- Clear information hierarchies
- Effective visual feedback systems

Inconsistencies

Areas needing alignment:
- Mixed button styles across pages
- Inconsistent form layouts
- Varying spacing patterns
- Different error message approaches

Missing Patterns

Gaps to address:
- Undefined edge case handling
- Missing accessibility patterns
- Incomplete responsive behaviors
- Absent loading state designs

Extension Strategies

Natural Evolution
Progressive Enhancement
Contextual Addition

Extend existing patterns logically:

Pattern Expansion

Grow existing design systems:

Add new component variants
Extend interaction patterns
Scale layout approaches
Develop pattern variations

Feature Integration

Seamlessly add new capabilities:

Match existing navigation logic
Follow established workflows
Use familiar interaction methods
Maintain visual consistency

Add features where users expect them:

Strategic placement:

Expected locations:
- Settings in consistent menu locations
- Actions near related content
- Help where users encounter difficulties
- Advanced features in logical progressions

User mental model alignment:
- Group related functionality together
- Follow established information architecture
- Maintain predictable navigation paths
- Use familiar terminology and concepts

Design Consistency Maintenance

Visual Consistency

Maintain design system integrity:

Interface showing how existing design system components are extended for new features

Consistency checkpoints:

Color usage:
- Primary action colors consistent
- Status colors follow established patterns
- Brand colors used appropriately
- Contrast ratios maintained

Typography:
- Heading hierarchy preserved
- Body text consistency maintained
- Link styling follows patterns
- Label and helper text alignment

Spacing:
- Component padding consistent
- Layout margins follow grid
- Element relationships preserved
- White space usage patterns

Interaction Consistency

Preserve user expectations:

Navigation Behavior
Form Interactions
Feedback Systems

Input consistency:
- Validation timing and messaging
- Error state styling and behavior
- Success feedback patterns
- Auto-save and draft behaviors

User feedback patterns:
- Loading indicator styles
- Progress communication methods
- Error message formatting
- Success confirmation approaches

Content Strategy Alignment

Maintain voice and information architecture:

Content consistency:

Voice and tone:
- Writing style preservation
- Terminology consistency
- Help text approaches
- Error message voice

Information architecture:
- Content categorization logic
- Labeling conventions
- Hierarchy preservation
- Cross-referencing patterns

Common Extension Scenarios

Feature Addition
Workflow Enhancement
Platform Extension

Adding new capabilities to existing areas:

Dashboard Enhancements

Common additions:
- New metric widgets following existing card patterns
- Additional filter options using established controls
- Export functionality matching current button styles
- Refresh mechanisms consistent with existing patterns

Integration approach:
- Use existing widget framework
- Follow established data visualization patterns
- Maintain consistent spacing and alignment
- Preserve familiar interaction methods

Settings Expansion

New configuration options:
- Additional preference categories
- New user management features
- Integration configuration panels
- Security and privacy controls

Design approach:
- Extend existing settings navigation
- Use established form patterns
- Follow current validation approaches
- Maintain help text conventions

Extending to new platforms or devices:

Cross-platform considerations:

Mobile adaptation:
- Touch-friendly interaction scaling
- Navigation pattern adaptation
- Content prioritization for small screens
- Platform-specific conventions integration

Tablet optimization:
- Intermediate layout approaches
- Hybrid interaction patterns
- Optimal information density
- Split-screen and multitasking support

Desktop enhancement:
- Advanced keyboard shortcuts
- Multi-window workflows
- Drag-and-drop functionality
- Right-click context menus

Validation and Testing

User Familiarity Testing

Ensure changes feel natural:

Testing approaches:

Findability tests:
- Can users locate new features?
- Do new features appear where expected?
- Are new interactions discoverable?

Learnability assessment:
- How quickly do users adapt to changes?
- Do existing users need retraining?
- Are new patterns intuitive?

Satisfaction measurement:
- Do users prefer enhanced workflows?
- Are new features perceived as valuable?
- Does overall satisfaction improve?

Consistency Validation

Verify design system integrity:

Automated Checking

Systematic consistency verification:

Color usage validation
Typography consistency checks
Spacing pattern verification
Component usage auditing

Manual Review

Human assessment of coherence:

Visual flow evaluation
Interaction pattern assessment
Content strategy alignment
Brand expression consistency

Performance Impact

Ensure enhancements don’t degrade experience:

Performance monitoring:
- Load time impact assessment
- Interaction responsiveness testing
- Memory usage evaluation
- Mobile performance validation

Best Practices for Building on Existing

Respect User Investment

Honor existing user knowledge:✅ Preserve familiar workflows ✅ Maintain muscle memory patterns ✅ Keep successful shortcuts ✅ Respect user customizations ✅ Provide migration paths for changes

Strategic Enhancement

Improve thoughtfully:✅ Focus on high-impact improvements ✅ Address actual user pain points ✅ Build on successful patterns ✅ Test changes with real users ✅ Plan for iterative refinement

Create New Interfaces

Learn how to design completely new interface areas while maintaining product consistency.Creating New UI →

How to Begin?

Canvas

Inputs and Research

Product Intelligence

Export and Share

Security & Legal

Building on Existing

Building on Existing

Understanding Your Current Product

Extension Strategies

Pattern Expansion

Feature Integration

Design Consistency Maintenance

Common Extension Scenarios

Process Streamlining

Error Prevention

Validation and Testing

Automated Checking

Manual Review

Best Practices for Building on Existing

Respect User Investment

Strategic Enhancement

Create New Interfaces

​Building on Existing

​Understanding Your Current Product

​Extension Strategies

Pattern Expansion

Feature Integration

​Design Consistency Maintenance

​Common Extension Scenarios

Process Streamlining

Error Prevention

​Validation and Testing

Automated Checking

Manual Review

​Best Practices for Building on Existing

Respect User Investment

Strategic Enhancement

Create New Interfaces

Building on Existing

Understanding Your Current Product

Extension Strategies

Design Consistency Maintenance

Common Extension Scenarios

Validation and Testing

Best Practices for Building on Existing