Background

As the Instructional Designer for the ATLAS (Arthritis Training, Learning, and Up-Skilling) project at Arthritis & Osteoporosis WA, I was tasked with creating comprehensive brand guidelines to ensure visual consistency across the Rheumatoid Arthritis (RA) and Osteoarthritis (OA) workstreams. This case study outlines the process, challenges, and outcomes of developing and implementing the ATLAS Brand Guidelines.

Challenge

The ATLAS program consisted of multiple learning pathways developed by different teams working simultaneously. Without standardized guidelines, there was a significant risk of:

  1. Inconsistent visual presentation across modules

  2. Compromised learner experience when navigating between workstreams

  3. Reduced professional credibility of the nationally endorsed program

  4. Inefficiencies in development due to repeated design decisions

  5. Accessibility issues for healthcare professionals with varying needs

Approach & Implementation

Initial Assessment and Planning

I began by conducting a thorough analysis of:

  • Existing module prototypes and designs

  • Stakeholder expectations and requirements

  • Target audience needs and accessibility considerations

  • Technical constraints of Articulate Storyline

  • Industry standards for healthcare education materials

Based on this analysis, I developed a project plan for creating comprehensive brand guidelines that would establish visual consistency while accommodating the unique needs of each arthritis pathway.

Color System Implementation

The first critical element was establishing a coherent color system that would:

  1. Visually distinguish between different learning pathways

  2. Maintain accessibility standards

  3. Reflect the ATLAS brand identity

Primary Palette Applications

  • Defined Navy Blue (R:37, G:50, B:73) and Teal (R:3, G:147, B:140) as the primary brand colors

  • Created documentation for consistent application across headers, buttons, and branded elements

  • Established color contrast requirements to ensure WCAG 2.0 Level AA compliance

Pathway-Specific Color Coding

  • Developed a color-coding system to visually distinguish learning pathways:

    • RA pathway: Teal (#03938C)

    • OA pathway: Navy Blue (#253249)

    • Combined OARA pathway: White with colored master logo

    • Arthritis Essentials: Light Gray (#D1D2D2)

Color Application Guidelines

  • Created specific rules for color usage in:

    • Navigation elements

    • Progress indicators

    • Interactive elements

    • Background treatments

    • Accent details

[PLACEHOLDER: Screenshot of color palette with pathway-specific examples]

Typography Standards

Typography was identified as a critical element for establishing visual consistency and supporting accessibility.

Font Family Specifications

  • Selected Montserrat for headings and subheadings

  • Chose Source Sans Pro family for body text

  • Documented appropriate font weights and styles

Text Hierarchy Systems

  • Established a proportional sizing system:

    • Subheadings at 50% of heading size

    • Body text at 30% of heading size

  • Created standardized heading levels for consistent information architecture

  • Developed clear guidelines for emphasis (bold, italic, etc.)

Legibility Optimization

  • Defined minimum text sizes for various screen sizes

  • Established color contrast standards for text elements

  • Created guidelines for text formatting to support readability

  • Implemented WCAG 2.0 Level AA standards for all text elements

[PLACEHOLDER: Screenshot of typography examples showing hierarchy]

UI Component Libraries

To ensure consistency in the learner experience, I developed standardized UI component libraries.

Button Systems

  • Designed consistent action button styles that:

    • Clearly indicated clickability

    • Used color-coding to indicate function (continue, back, submit, etc.)

    • Maintained pathway-specific styling while ensuring recognition

  • Created hover, active, and disabled states for all button types

  • Documented size and placement standards

Navigation Elements

  • Developed standardized menu systems for module navigation

  • Created progress indicators that showed learners their position within modules

  • Established wayfinding conventions to maintain orientation within the learning program

  • Designed templated Articulate Storyline player settings for each pathway

Feedback Components

  • Designed notification systems for learner feedback

  • Created standardized alert component guidelines for important information

  • Developed confirmation message templates for assessment submissions

  • Established visual standards for correct/incorrect feedback

[PLACEHOLDER: Screenshot of UI component library examples]

Visual Language Standards

Beyond basic design elements, I created comprehensive standards for the visual language of the program.

Clinical Imagery Guidelines

  • Established standards for medical illustrations and anatomical diagrams

  • Created policies for clinical photography usage and permissions

  • Developed image quality standards and accessibility requirements

  • Documented consistent labeling approaches for medical imagery

Data Visualization Standards

  • Created guidelines for charts and graphs to ensure consistent presentation of research data

  • Established color-coding systems for data visualization that complemented pathway colors

  • Developed labeling conventions for data elements

  • Provided templates for common chart types used in arthritis education

Interface Consistency Rules

  • Implemented a grid system for consistent layouts

  • Established spacing standards for visual elements

  • Created visual hierarchy guidelines to ensure important content stood out appropriately

  • Developed standards for interactive elements and their behavior

[PLACEHOLDER: Screenshot of visual language examples including clinical imagery and data visualization]

Technical Implementation in Articulate Storyline

To make the guidelines practical for content developers, I created implementation specifications for Articulate Storyline:

  • Developed master slide templates incorporating all design standards

  • Created player setting configurations for each learning pathway

  • Built sample interactions demonstrating proper implementation

  • Documented export settings to ensure consistent quality across modules

Documentation and Training

Creating guidelines was only half the solution. I also:

  • Produced a comprehensive style guide document (see attached)

  • Developed quick reference materials for common design scenarios

  • Created template files with pre-built components

  • Conducted training sessions for content developers

  • Established a review process to ensure compliance with guidelines

Results

The implementation of the ATLAS Brand Guidelines yielded significant benefits:

Improved Development Efficiency

  • 30% reduction in development time as teams no longer needed to make repeated design decisions

  • Decreased rework due to clear standards

  • Streamlined QA process with objective criteria for visual evaluation

Enhanced Learner Experience

  • Consistent interface allowed learners to focus on content rather than navigation

  • Clear visual cues helped distinguish between different arthritis pathways

  • Improved accessibility ratings from user testing

Professional Credibility

  • Polished, consistent appearance strengthened the program's professional credibility

  • Received positive feedback from the Australian Rheumatology Association during endorsement review

  • Brand consistency reinforced program recognition among healthcare professionals

Team Collaboration

  • Common visual language improved communication between development teams

  • Reduced conflicts in design approach between workstreams

  • Established shared understanding of quality standards

Key Learnings

This project reinforced several important principles for effective brand guidelines development:

  1. Balance structure with flexibility: Guidelines needed to be specific enough to ensure consistency yet flexible enough to accommodate unique content needs.

  2. Prioritize practical implementation: The most beautiful guidelines are useless if teams can't implement them in the authoring tool.

  3. Consider the end-user experience first: All design decisions were evaluated based on how they would affect the healthcare professional's learning journey.

  4. Involve stakeholders early: Getting buy-in from content developers and subject matter experts early in the process increased adoption of the guidelines.

  5. Use data to inform decisions: User testing and feedback were essential to refining the guidelines for maximum effectiveness.

The ATLAS Brand Guidelines became a foundational element in the program's success, ensuring that the visual presentation matched the high quality of the educational content and contributed to the program's exceptional completion rates and user satisfaction scores.