‍

CIRCA: The Computer Interactive Reminiscence and Conversation Aid

CIRCA is an evidence-based interactive multi-media conversation support for people living with dementia and their caregivers. It has a broad selection of photographs, videos, and music to spark memories and to start conversations.

CIRCA is based on reminiscing, a popular group activity in dementia care settings.

1) Business Goals

The DATE LAB is a small organization that newly focused on design. Our tool, CIRCA, was developed many years ago and has not been updated since. As we develop a Canadian version to reflect the experiences of younger generations (ages 40s-80s), ensuring compliance with accessibility guidelines is crucial.

2) Opportunity

Save development time and costs by implementing a design system with a strong focus on accessibility. This system will serve as a guiding compass for the future design team, enabling faster development as the team expands.

‍

‍

Design Goal

HMW improve the accessiblity and design elements of the CIRCA interface so that people with dementia can better understand and interact with the system?

‍

‍

How I Approach the Design Challenge?

To get a whole picture of how the old version of CIRCA was developed and investigate current accessibility issues, I decided to approach the problem by using following strategies:

1. Conduct academic research & stakeholder interviews

Understand how CIRCA was developed by previous team

2. Accessibility audit

Identify barriers that might hinder people with dementia from accessing information.

‍

Success Metrics

1. Accessibility Compliance: Ensure that the redesigned website meets the WCAG 2.1 AA standards

2. User satisfaction: establish user satisfaction benchmark. Obtain user satisfaction score during the later user testing stage, with a goal of 85%-90%.

3. Task success rate: completion rates of 90%, error rates of (did users finish their task?), error rates of 15%-20% (did they encounter any problems?)

‍

‍

Academic research & Stakeholder interviews

Through reading past academic research articles about CIRCA and conduct stakeholder interviews with the founder, here are some insights I got:

1) Elders living with dementia

a. Better at recalling:

‍People living with dementia is more able to recall things from many years ago than recent memories. For people with cognitive difficulties, it is important to tap into all the senses to trigger memories (eg. pictures, song, smell, taste)

b. Difficult in holding conversation:

‍The cognitive changes make communication more problemetic for people with dementia and their caregivers, as they cannot keep track of the turns

‍

How CIRCA works?

1. Designed to mitigate the working memory problem

CIRCA was designed to mitigate the working memory problem common in dementia by focusing on whatever is currently on screen, and removing the need to keep track of conversational turns

2. Enable people to maintain their dignity and independence:

Developing interventions to support communication and maintain relationships between people with dementia and those who care for them is unsurprisingly a growing social and healthcare priority.

3. Randomized themes

Given the working memory problems of people with dementia, they always choose the last theme offered by the caregivers. Therefore, the themes were set to be random selection from a large pool of items to avoid biasing.

‍

Other findings:

1. Proper illustration

Avoid including child illustration to make the users feel like they are being treated like children.

2. Lack of accessibility

There is no design library/system, previous design barely considers accessibility guidelines, such as colors, fonts, and captions. The interface is not responsive across different screen sizes.

‍

‍

Accessibility Audit

1) Checklist

Following the Dementia Digital Design Guidelines / Heuristics, I conducted an accessibility checklist audit to the current CIRCA website.

‍

2) Accessibility Compliance Scan

CIRCA website is Semi-compliant with the WCAG 2.1 AA guideline, which is not accessible to people with disabilities.

‍

3) Issues Severity Overview:

All accessibility issues are categorized as Critical, Major, and Minor.

🟥 Critical Issues:

1. Unclear visual styles for buttons, such as active, hover, inactive states
2. Images do not have an alternative text description (Alt text)
3. Lack of explicit headers: the HEAD elements do not include the name of the page
4. Links, buttons, and controls do not have large enough target sizes
5. Color schemes do not pass WCAG minimum contrast ratio of 4.5:1

‍

🟧 Major Issues:

1. Title levels are not built with consistent hierarchy
2. Unclear "Home" button - solely rely on using a logo to link to the homepage.
3. Use of color blue - needs to avoid
4. Important information is not highlighted using bold text
5. Use of long and complex words
6. No transcripts for videos
7. Font sizes not large enough and there is a lack of text size control

‍

🟨 Minor Issues:

1. Lack of autoplay for videos
2. Some of the words are not dementia-friendly/accurate/balanced

‍

Color Palette Contrast Checker

According to WCAG 2.1 AA color contrast requirements, combinations that exceed a contrast ratio of 4.5:1 or greater, will pass WCAG 2.1 AA.

‍

However, the current CIRCA color palette all failed to meet the standard:

‍

Prioritization Matrix

Based on issues discovered, I put them into a prioritization matrix (Feasibility VS Priority).

Brand-new Design System

An accessible design system allows future team to develop product experiences knowing that designs are consistent and conform to web content accessibility guidelines (WCAG).

Therefore, I developed a brand-new design system, based on the following rationales:

‍

Colors

Principle 1: Avoid using colors in proximity, they are difficult for older people to distinguish

- Avoid using blue&purple, yellow&red, blue&green, shades of gray

Principle 2: Text (or images of text) and solid (black or white) background behind the text should have a contrast ration of at least 4.5:1 text should have a contrast ratio of at least 3:1

Principle 3: Use plain background instead of patterns, they provide lower contrast ratios and may also be distracting in a user interface for seniors.

‍

‍

Typographys

Principle 1: Use Sans-serif fonts instead of Serif fonts, avoid condensed and decorative font styles for better readability

Principle 2: Avoid using too many different fonts or font styles in one design.

Principle 3: The baseline for typography can be larger than usual and the hierarchy can be fewer ---- Text is only shown in captions and titles, while visual objects like photos, videos, and music players are extensively employed.

‍

‍

CIRCA Design System

‍

‍

Design Improvements

Given the new design system, I redesigned CIRCA interface and fixed accessibility issues.

1. Refine the theme/categories to aid understanding

According to Nielsen's 10 Usability Heuristics ---- Match Between the System and the Real World, designers should use words, phrases, and concepts familiar to the user.

However, the category “Miscellaneous” is too broad and covers a wide scope of subjects, which is not accurate and hard to be understood by the users.

“Activities“ is also unclear and can be interpreted in many ways, such as outdoor, indoor, and online activities.

Therefore, we refined and expanded the categories from 5 to 7:

‍

2. Navigation Menu Redesign

• Dementia-friendly color scheme: Theme and text colors are adjusted to pass the WCAG minimum contrast ration of 4.5:1
• Icons to aid recognition: added icons for volumn adjustment
• Switch position between "New Session" and "End Session": Typical user attention flow follows a Z-shaped pattern. Put "New Session" on the botton right to encourage users start a new session.

‍

3. Home Screen Redesign

‍

‍

4. Welcome Page & End Page

• Brand-new welcome pages and end pages for more clear instruction
• Redesigned CIRCA logo is enlarged at these two pages for branding

‍

‍

5. Video Playing Page Redesign

‍

‍

6. Music Playing Page Redesign

‍

‍

‍

1. Copyright Clearance

Since CIRCA includes thousands of images, videos, and musics, it is crucial to ensure that all intellectual property rights are respected and properly secured. This includes maintaining detailed records of the source and permissions obtained for each piece of content included in CIRCA.

‍

2. User Testing

The next step would be to reach out the lab collaborators to conduct 1st round of user testing, collecting feedback, and iterate design.

‍

‍

‍

Awareness: Throughout the accessibility improvement process, I've learned to recognize the importance of creating inclusive experiences that accommodate diverse needs, particularly for individuals living with dementia.

‍

Continuous Learning: Accessibility is a complex and evolving field, and there's always more to learn. This project has inspired me to continue educating myself about best practices, guidelines, and emerging technologies in accessibility design. By staying informed and proactive, I can contribute to creating more inclusive digital experiences in the future.Colors