RESUME ->

RESUME ->

iPlanner – An AI-powered accessible routine planner for inclusive and intelligent task management.”

iPlanner – An AI-powered accessible routine planner for inclusive and intelligent task management.”

iPlanner – An AI-powered accessible routine planner for inclusive and intelligent task management.”

APP DESIGN & WCAG INTEGRATION

APP DESIGN & WCAG INTEGRATION

Project

Integrating Assistive technology for Accessibility

Role

UX Researcher

& Designer

Contributions

Background Research, Persona, App design, Wireframing, User Journey, User flow, Testing, Iterations

Research, Testing, framework, Iterations, Data analysis, VR

Industry

Mobile App

iPlanner is an accessible routine planner for users with vision, hearing, physical, and cognitive impairments. ELI is an automated AI assistant that creates user interaction through automated and intelligent task management with accessibility support. The AI assistant can automate tasks by analysing news, weather updates and the routine of the user.

The key features of the application are Automated Rescheduling, Screen Reader Support, Color-Based Communication and Assistive Device Support, and it also combines AI with robust accessibility features to make it inclusive and powerful.

The Importance of Accessibility in Digital Products
A Critical Discussion

  1. Importance of accessibility support in digital products

Digital products like the internet, mobile applications, and websites are significantly altering how people live, work, study, communicate, and access information day to day. These digital tools will become increasingly more crucial as technology develops, improving people's interactions with society.

  1. Social and Medical Models of Disability

The medical model and the social model of impairment have consistently dominated models of disabilities. The medical model, which emphasises diagnosis, treatment, and rehabilitation, sees impairment as an innate deficit or aberration in the person. The idea that disabilities are individual problems that need to be "fixed" is frequently encouraged by this concept (Shakespeare, 2006). Applying a medical model to digital accessibility could guide the creation of assistive technology that removes systemic barriers and compensates for the individual's impairments.

On the other hand, the social model of disability, which is supported by researchers like Oliver (1990), suggests that social barriers cause disability more than individual impairments. According to this social model, every individual is disabled by the system that surrounds them, such as physical inabilities, cultural norms, and inaccessible design.

  1. Accessibility in Digital Products

The idea that having access to technology and information is a fundamental right underpins the significance of accessibility in digital products. Accessibility is needed for people with disabilities to engage in society on an equal footing with others, as stated in the United Nations Convention on the Rights of Persons with Disabilities (CRPD) (United Nations, 2006).

  1. Disabled Users’ Experiences with Assistive Technology

The experiences of impaired users with assistive technologies have become an increasingly important subject of research in the field of disability studies. Although there are many advantages to assistive technologies, they are frequently considered as "add-ons" rather than fundamental elements of mainstream technology (Goggin & Newell, 2003).

Additionally, the medical model is frequently used in the design of assistive technologies, which attempt to "support" or "compensate" for disabilities instead of incorporating accessibility into the fundamental design of products.

  1. The Role of Inclusive Design

Derived from the social model of disability, inclusive design promotes the development of digital interfaces that can be accessible to every individual with as much ease, without requiring customisation or unique designs. By encouraging adaptability, simplicity, and ease of use, this strategy not only helps users with impairments but also improves the user experience for all users (Newell & Gregor, 2000). Digital products that have accessibility support features from the base level are more effective, usable, and accessible for all users (Clarkson et al., 2013).

Overview of Personas and Scenarios

User Requirements: Scenarios

User Requirements: Scenarios

Persona 1: Visually impaired user

Jana Hansi - University Staff assistant - Public transport user

Farsightedness: Hyperopia


Support Needs: High contrast colour schemes, text-to-speech functionality, voice feedback, and Screen readers. Automated support to re-schedule the tasks.

Persona 2:  Hearing impairment

Aarohi Rohit: Graphic Designer (remotely) - Sensorineural Hearing Loss


Support Needs: Clear visual notifications, Text-Based Communication, three flash, vibration alerts. Automated support to re-schedule the tasks. Apps that integrate with his hearing aid.

Persona 3:  Cognitive impairment 

Luke Wright -  sensory accommodation, Routine and predictability


Support Needs: Simple Interfaces, large touch targets, voice controls, Alternative Feedback, and Visuals including icons, and colours to indicate different activities.

Persona 4:  Physical impairment (wheelchair user)

Keven Peterson - Freelance Architect

Support Needs: Time management tools, customizable notifications, visual cues, Voice commands and Assistive technology Compatibility to connect speakers with a mic to access from his living place.

Travel Time Adjustments could mean allowing for extra time when moving between locations, and scheduling tasks based on the ease of access. Integration with Public Transportation Apps.

Paper Prototype

Paper Prototype

Home page:

As per routine planner apps, the user needs to get instant updates about tasks every time they enter the Home page. The daily schedule, following tasks, notifications and AI assistant, ELI is sketched on the home page as an initial sketch.

Task Creation & Management:

The Task Creation page helps users to add new tasks, set priorities, and assign deadlines. The screens are sketched with a layout with dropdowns and toggles to input data easily. This page also integrates color cues to set priority for each task.

Settings & Accessibility: 

The Settings page has been sketched under the profile section, similar to Snapchat.

Prototyping

Prototyping

Home page:

Design Evolution: The high-fidelity design introduces a more refined visual hierarchy, as icons have been included for a cleaner look, and the AI assistant avatar has been removed, as it won't create an impact on accessibility.

Visual Design: A soft, neutral colour palette inspired by META social media apps used by the target group. Buttons and links are designed with accent colours to highlight them.

Task Creation & Management

Design Evolution: Clear labels and larger touch targets are added for ease of use.

Visual Design Choices: The calendar section is inspired by the calendar iOS app and the colour-coded tags are included for low-vision users.

Automated Rescheduling

Design Evolution: ELI’s suggestions and interactive elements, such as buttons for approval or manual updates, were added.

Visual Design Choices: A consistent colour scheme in pop-up overlays.

Accessibility Settings

Design Evolution: List of the settings has been reduced, avatar editing section has been removed.

Visual Design: Icons have been added with the texts for the links.

Font Selection

Inter, Sora, SF Pro - iOS, Poppins, Segoe Pro - windows

Considering the screen reader feature and user preferences (preferred serif fonts), the font SORA has been selected for visual design.

WCAG Guidelines

WCAG Guidelines

Multi-Platform Accessibility

Multi-Platform Accessibility

Design Adaptation for Tablets, and Smartwatches

The process optimizes the interfaces for both devices while maintaining consistency of key functionality across tabs and smartwatches.

Tablet Adaptation

  • The app layout is based on the tablet’s landscape or portrait orientation. Touch targets and spacing between elements are increased.

  • Voice commands and assistive technology integration are fully supported for all four personas.

 Smartwatch Adaptation

  • The app’s interface is simplified to display only essential information. User can quickly scroll to the following tasks with a single tap.

  • Circular Navigation pattern has been considered for the adaptation.

  • Vibration Alerts: The smartwatch version includes vibration alert notifications

  • Voice Command: ELI, the AI assistant, is integrated into the smartwatch, allowing physically impaired user to interact with the voice commands.

Evaluation

Evaluation

After the research and development stage, basic usability testing was conducted with my two personas and four random students from the university. The tests with the real personas were conducted online and the other four testings were face-to-face. A combined study of cognitive walkthroughs and heuristic evaluations has been conducted.


Location: BCU, approached random individuals (time limitations).
Devices: Smartphones
Target Audience: Users who are willing to use a task planner app with assistive technologies.

Participants - Demographic details

Objectives


  • Testing the usability of the navigation.

  • Identifying functionality errors.

  • Gathering feedback for iterations on design, features, and assistive technology integration.

  • Measuring user satisfaction.

  • Improving the accessibility features.

Objectives


  • Testing the usability of the navigation.

  • Identifying functionality errors.

  • Gathering feedback for iterations on design, features, and assistive technology integration.

  • Measuring user satisfaction.

  • Improving the accessibility features.

Methodology


  • Task-Based Testing

  • Think-Aloud Protocol: Just explained about the app and tested it without guidance. 

  • Observation and Recording: The number of clicks and the first object they are willing to tab has been monitored.

  • Pre-Test and Post-Test Surveys: A Questionnaire has been shared to fill and collect feedback under:
    (General Impressions, Task Performance, Design and Layout, Accessibility, Error Handling, User Satisfaction, Suggestions for Improvement)

Methodology


  • Task-Based Testing

  • Think-Aloud Protocol: Just explained about the app and tested it without guidance. 

  • Observation and Recording: The number of clicks and the first object they are willing to tab has been monitored.

  • Pre-Test and Post-Test Surveys: A Questionnaire has been shared to fill and collect feedback under:
    (General Impressions, Task Performance, Design and Layout, Accessibility, Error Handling, User Satisfaction, Suggestions for Improvement)

Execution


Conducting the Test

  • Briefing: Explaining the app and the accessibility features.

  • Task Assignment: 

    1. Login

    2. Create a task

    3. ⁠Reschedule a task

    4. Using AI assistant

    5. Connect an external device

  • Monitoring: Screen recordings and voice feedback

Data Collection

  • Quantitative Data: Measuring the time-consuming to complete tasks.

  • Qualitative Data: Overall feedback on the experience, and improvements

Execution


Conducting the Test

  • Briefing: Explaining the app and the accessibility features.

  • Task Assignment: 

    1. Login

    2. Create a task

    3. ⁠Reschedule a task

    4. Using AI assistant

    5. Connect an external device

  • Monitoring: Screen recordings and voice feedback

Data Collection

  • Quantitative Data: Measuring the time-consuming to complete tasks.

  • Qualitative Data: Overall feedback on the experience, and improvements

Analysis


Identifying Usability Issues

  • Task Completion Rates: Task completion times and number of attempts were measured.

  • Errors: The first two users faced alignment issues during the initial testing.

  • User Feedback: The most common answer is, that they haven’t used an app like this before and the overall experience is good apart from the corrections and they like the AI feature.


Analysis


Identifying Usability Issues

  • Task Completion Rates:
    Task completion times and number of attempts were measured.

  • Errors: The first two users faced alignment issues during the initial testing.

  • User Feedback: The most common answer is, that they haven’t used an app like this before and the overall experience is good apart from the corrections and they like the AI feature.

Reporting


Key Findings

  • Participants like the overall visuals

  • AI assistant support is the most preferred feature

  • Need an option to go back to every page

  • Users are confused about how AI identifies the rescheduling patterns

  • The speech bubble element on text-to-speech pages is not effective

Recommendations

  • Need for Apple Watch

  • Providing a dark mode would be better

  • For task categories, make a layout like food ordering apps.

  • Make a way to use this app handsfree

Full Project Report

Full Project Report

Updated Designs After Iterations

Updated Designs After Iterations

The updates given below are derived from the user testing for the iterations.

Evaluating Accessibility

1. Screen Reader

  • Implementation: All interactive elements are labelled with descriptive text to support screen readers.

  • Effectiveness: The app’s content is accessible, and Clear instructions are provided by the screen reader at each step.
    WCAG  1.1.1 (Non-text Content) and WCAG  Success Criterion 2.4.3 (Focus 

2. Adjustments of Text Size

  • Implementation: Offering options to increase or decrease text size according to their preference.

  • Effectiveness: All content remains accessible without loss of functionality.
    WCAG: Success Criterion 1.4.4 (Resize Text)

3. Voice Commands

Assessment:

  • Implementation: AI assistant can interact and help users manage their tasks

  • Effectiveness: A responsive function as the AI gives immediate feedback.
    WCAG: Success Criterion 4.1.2 (Name, Role, Value)

Home screen alignments - Issue:

  1. Text sizes and alignments are unusual

  2. The following task segments are not visible

  3. AI mic is destructive

  • Implemented: Restructured the alignments and font sizes, Navigation bar updated

Pop-up screens - Issue:

  1. Not eye-catching

  2. Tough to access with a thumb

  • Implemented: Colored popup menus have been added and moved to the bottom

Feedback on the Automated Rescheduling Interface - Issue:

  1. Typing the date and time is not effective

  • Implemented: Calendar and scroller has been added

AI Assistant - Issue:

  1. Speech bubbles are distractive

  • Implemented: Text base communication replaced

Animations - Issue:

  1. Lots of animations are irritating

  • Implemented: Replaces with solid icons

Buttons - Issue:

  1. Cant identify the difference between buttons

  • Implemented: Different colours used

Finalised High Fidelity Prototype

Finalised High Fidelity Prototype

Finalised High Fidelity Prototype

Finalised High Fidelity Prototype

The Importance of Accessibility in Digital Products: A Critical Discussion

  1. Importance of accessibility support in digital products

Digital products like the internet, mobile applications, and websites are significantly altering how people live, work, study, communicate, and access information day to day. These digital tools will become increasingly more crucial as technology develops, improving people's interactions with society.

  1. Social and Medical Models of Disability

The medical model and the social model of impairment have consistently dominated models of disabilities. The medical model, which emphasises diagnosis, treatment, and rehabilitation, sees impairment as an innate deficit or aberration in the person. The idea that disabilities are individual problems that need to be "fixed" is frequently encouraged by this concept (Shakespeare, 2006). Applying a medical model to digital accessibility could guide the creation of assistive technology that removes systemic barriers and compensates for the individual's impairments.

On the other hand, the social model of disability, which is supported by researchers like Oliver (1990), suggests that social barriers cause disability more than individual impairments. According to this social model, every individual is disabled by the system that surrounds them, such as physical inabilities, cultural norms, and inaccessible design.

  1. Accessibility in Digital Products

The idea that having access to technology and information is a fundamental right underpins the significance of accessibility in digital products. Accessibility is needed for people with disabilities to engage in society on an equal footing with others, as stated in the United Nations Convention on the Rights of Persons with Disabilities (CRPD) (United Nations, 2006).

  1. Disabled Users’ Experiences with Assistive Technology

The experiences of impaired users with assistive technologies have become an increasingly important subject of research in the field of disability studies. Although there are many advantages to assistive technologies, they are frequently considered as "add-ons" rather than fundamental elements of mainstream technology (Goggin & Newell, 2003).

Additionally, the medical model is frequently used in the design of assistive technologies, which attempt to "support" or "compensate" for disabilities instead of incorporating accessibility into the fundamental design of products.

  1. The Role of Inclusive Design

Derived from the social model of disability, inclusive design promotes the development of digital interfaces that can be accessible to every individual with as much ease, without requiring customisation or unique designs. By encouraging adaptability, simplicity, and ease of use, this strategy not only helps users with impairments but also improves the user experience for all users (Newell & Gregor, 2000). Digital products that have accessibility support features from the base level are more effective, usable, and accessible for all users (Clarkson et al., 2013).

Overview of Personas

Overview of Personas