• Product Design

Project Overview

At VisitScotland, design work across multiple digital products was inconsistent. Components, patterns, and styles varied between teams, making it harder to work efficiently and provide a cohesive experience to users. We needed to unify the visual language, improve accessibility, and create a shared design foundation that could be used by both design and development teams. The goal was not just a visual refresh, but a scalable system to support long-term collaboration and product growth.

Skills:

  • User-centered Design
  • Accessibility
  • Component Libraries
  • Design Systems
  • Responsive design
  • Agile methodologies
  • Figma

The approach

To solve this, we did a design audit and then developed a full component library and design system:

Design Audit

We reviewed existing styles, components, and patterns to identify inconsistencies and gaps.

 

Component library creation 

Built a robust collection of reusable UI elements and patterns in Figma, aligned with accessibility standards.

 

Design system implementation

We defined clear tokens, naming conventions, and guidelines so both designers and developers could work from the same source of truth. The system was connected to the development workflow using shared tools like Storybook.

 

Cross-disciplinary work 

Collaboration with developers ensured components were not just visually consistent, but also technically reliable and efficient to implement.

Design audit whiteboard

Illustration Style

Develop one illustration style for all the different faces of the company with a detailed set of guidelines explaining the illustration applications to ensure consistency across platforms.

Outcome

The outcome was a cohesive, accessible design system that transformed how teams worked.

 

Consistency across platforms

Designers and developers now use the same visual language and shared patterns, reducing duplication and design drift.

 

Improved accessibility

Components and styles were updated to meet accessibility standards, making the product more inclusive.

 

Faster collaboration

Shared tokens, naming conventions, and workflows improved communication and sped up design-to-development handoffs.

 

Scalable foundation

The system now serves as a single source of truth for future work, helping teams maintain quality as the product evolves.