Introduction

As the Lead UX/UI Designer at Target Australia, I led the implementation of a comprehensive design system on Figma. I utilized the platform's powerful features, such as variables, design tokens, and auto layouts. This case study delves into the process, challenges, and successes of creating a unified design language that enhances brand consistency, boosts efficiency and empowers designers across the organization.

Understanding the Landscape:

Before the design system initiative, Target Australia's digital platforms experienced inconsistencies in design elements and user experiences. Different teams utilized varying colour palettes, typography styles, and component implementations, resulting in a fragmented brand image and user confusion. This lack of consistency in design hampered efficiency and led to duplicated efforts, requiring additional work.

Setting the Vision:

Our goals for the design system were clear:

• Establish brand consistency: Achieve a unified design language across all digital touchpoints, reinforcing Target's brand identity and values.

• Improve design efficiency: Reduce redundancy and streamline workflows by providing a single source of truth for design elements and components.

• Empower cross-functional team members: Equip designers, developers and marketing professionals with tools and resources to create high-quality experiences while maintaining brand coherence.

Core Technologies:

• Figma: The platform for housing the design system, including components, libraries, and documentation.

• Variables & Design Tokens: Figma's variable feature proved invaluable in establishing design tokens. We defined key values for colours, fonts, spacing, and other design properties, ensuring consistency and enabling easy adjustments across the system.

• Auto layouts: Auto Layout's ability to adapt to different screen sizes and content variations accelerated our design process, saving time and effort while maintaining design quality

• Zeroheight: Leveraged zeroHeight at Target Australia to centralise design assets, streamline collaboration, and ensure design consistency across teams, resulting in faster development cycles and improved product quality.

Building the Foundation:

Logos:

Created a comprehensive logo library for Target Australia as part of the design system. Established clear guidelines for logo usage, including colour variations, sizing, and spacing. Categorized logos based on brand hierarchy and purpose. Ensured consistency and brand recognition across all touchpoints

Typography:

The foundation of our design system is a robust typographic system built on two complementary fonts:

• Inter: Inter's clean lines and generous x-height provide excellent readability, legibility, and neutral tone to the body text. Its versatility and wide range of weights allowed us to create a dynamic hierarchy across all digital touchpoints.

• Cocogoose: Cocogoose's playful and approachable personality injects a touch of whimsy into specific branding elements. Its handwritten charm elevates headings and promotional materials, adding a unique personality to the brand.

Font Sizes & Line Heights:

Set font line height to 8px grid multiples for rhythm, following Material Design's letter spacing guidelines with slight adjustments to enhance readability and visual consistency.

Color Palette:

Target’s colour palette reflects Target's brand identity, drawing inspiration from the iconic red and white bullseye. We established a primary palette of:

• Primary Colours: A vibrant and energetic shade for branding elements and call-to-actions.

• Neutral Colours: A warm and approachable grey for background and secondary text.

• Brand Colours: A curated selection of complementary colours for branding elements and call-to-actions.

I created the colour pellets using the material design palette generator and Foundation colour generator Figma plugin. Each colour is semantically named for easy application and referencing within the design system.

Icon Sets:

1. Sizes: Crafted icons in 7 sizes (128px to 16px) with consistent stroke weights for each scale.

2. Components: Transformed each icon into a Figma component for easy reuse and updates.

3. Naming: Implemented a clear naming convention (icon/size/name) for swift asset discovery. I also included extra search terms in the component description to make the icons easier to find.

4. Testing: Rigorously tested icons across platforms and devices for optimal performance and visual consistency.

Grid System:

• 8-point grid: I used an an 8-point grid system, which allows for limited flexibility around 4 and 6 points as we work on mobile experiences. This flexible and adaptable grid system allows for responsive layouts across different screen sizes.

• Spacing tokens: Defined for margins, padding, and gutters, ensuring consistent spacing throughout the system.

Border Radius:

• Multiple presets: Defined for various components and elements, ranging from subtle to rounded.

• Semantic naming: Named based on their context, e.g., "CardRadius" or "ButtonRadius".

Hover & Selected States:

• Visual cues are essential for intuitive interaction. We defined clear hover and selected states for buttons and other interactive elements, utilizing subtle changes in colour, opacity, and shadow to provide users with feedback and guidance.

• Consistent visual cues: Visual cues are essential for intuitive interaction. We defined clear hover and selected states for buttons and other interactive elements.

• Accessibility considerations: Ensured sufficient contrast and visual differentiation and utilised subtle changes in colour, opacity, and shadow to provide users with feedback and guidance for users with disabilities.

Crafting Reusable Components:

With the foundational elements in place, we meticulously built a library of reusable components. This included essential UI elements like buttons, Product cards, colour swatches, and size drop downs, each adhering to the established design tokens and styles.

Component variations based on context and functionality were created, providing designers with a flexible yet controlled toolkit.

Living Documentation:

The design system wasn't just a collection of assets; it required a comprehensive living document. We utilized Figma's built-in documentation features to create detailed guides that explained component usage, accessibility considerations, and best practices. This ensured team-wide understanding and consistent application of the system.

Challenges and Iterations:

I used one of the most common schemes of semantic versioning, often recognized by its pattern of numbers separated by decimals: 1.6.2.

They’re structured in the Major.Minor.Patch pattern, which refers to types of changes. Each type is represented by its version number which increases by 1 anytime a relevant change happens.

• Major changes refer to updates that break existing designs and are not backward compatible. Like large changes in visual style, or removal of components. 

• Minor changes are updates without breaking changes that can flow seamlessly into existing designs

• Patches refer to bug fixes without breaking changes. This could be incorrect padding values, component names that don’t match code or bug fixes.

Outcomes and Impact:

The implementation of our design system has had significant benefits for Target Australia's digital landscape:

• Increased Brand Consistency: The unified design language has strengthened Target's brand identity and improved user recognition across various platforms.

• Improved Design Efficiency: Reusable components and pre-defined styles save time and effort, allowing designers to focus on innovation, personalisation and the strategic aspects of the user experience.

• Enhanced Accessibility: Consistent design principles and attention to detail ensure inclusive experiences for users with diverse needs.

• Scalability & Maintainability: The design system is built for growth, allowing for easy integration of new components and updates as Target's digital landscape evolves.

• Empowered design team: The readily available resources and documentation fostered a collaborative environment where designers can confidently create high-quality experiences.

Conclusion:

The Target Australia design system is a testament to the power of collaboration and design thinking. By leveraging Figma's variables, tokens, comprehensive documentation, and focusing on user needs, we achieved consistency, efficiency, and a unified user experience across all digital platforms. It serves as a blueprint for continuous improvement and adaptation, ensuring Target Australia remains at the forefront of digital design in the Australian market.

Looking Ahead:

The design system journey is never truly over. We are committed to continuous iteration and improvement, incorporating user feedback, and embracing new technologies to keep the system vibrant and effective. Our ultimate goal is to empower designers to craft exceptional experiences that seamlessly connect with Target's Australian audience.