Enhancing User Experience of
Art Spark Dance, Texas.

About the Project

The purpose of this study is to conduct usability research by analyzing the user experience on the Art Spark Dance website, which caters to dance enthusiasts of all abilities.
The study aims to help provide an engaging experience by improving upon gaps identified through our usability research like areas where our competitors lack, the results of our heuristic evaluations, etc.
The study is structured through research conducted on users of the product such as dance instructors, volunteers, learners, enthusiasts, caregivers, or donors.
The goal is to assess if the users are able to complete core tasks within the website, determine the usability of the same and suggest improvements through redesign.

About Art Spark Dance Texas

A non-profit organisation that embodies the ethos of community dance. They aim to make a positive contribution to wider social change by bringing their artistic work into public spaces, sharing their expertise of community and inclusive dance with future dance artists and educators, and presenting at national conferences at the intersection of dance, education and disability.

Project Timeline

12 Weeks

August-December, 2022.

UX Disciplines

Usability Studies

UX Research

UX Design

Accessibility

Team

Ananya G M

Anita Tsai

Sushant Kamble

Varsha Revandkar

Vijayalaxmi W

My Role

Conducting heuristic evaluations, competitive analysis, deciding metrics of evaluation, conducting moderated usability tests by curating test plans, and proposing design solutions.

Roadmap to our approach

Heuristic evaluations

We used Nielsen Norman Group’s 10 Usability Heuristics for User Interface Design for the evaluation. After careful analysis of the website interface, we shortlisted the following heuristics by it's severity.

Severity Scale

1

I don’t agree that this is a usability problem at all

2

Cosmetic problem only, need not to be fixed unless extra time is available on project

3

Minor usability problem, fixing this should be given low priority

4

Major usability problem, important to fix, so should be given high priority

5

Usability catastrophe, imperative to fix this before product can be released

Heuristics

#01

Issue

If a card is declined while making a donation, the error message is represented as plain text which is difficult to identify

Recommendations

Error or Success messages should be shown as a toast or popup notification and the area where the error occurred should be highlighted in red

Severity
Scale

4

#02

Issue

The quick access icons associated with the interview appear to be disabled buttons which would cause users click on individual headings since they look like hyperlinks. But this adds one more step to the process as the hyperlink redirects to another page with same icon in isolation that is associated with it.

Recommendations

Make the Icons more prominent to avoid confusion.

Severity
Scale

3

#01

Issue

The donate button on the homepage redirects users to the organization’s parent company website that portrays similar visual attributes (eg: Logo, which may confuse some users to be the same website) but differs in terms of design language. It does not allow the user go back to the organization’s website, even after clicking on home icon, instead redirects further to the parent company’s homepage.

Recommendations

The interface should not redirect the user from one website to another without warning or consent. If it absolutely must happen, the user should be appropriately informed and must be allowed to exit back to the said interface with ease.

Severity
Scale

5

#02

Issue

The link icon button on the podcast page redirects users to a podcast platform which they use to document their podcasts. The only way to go back to the website from this platform is to use the back/forward navigation icons on chrome.

Recommendations

The interface should not redirect the user from one website to another without warning or consent.

Severity
Scale

4

#01

Issue

There is inconsistency in the visual properties of elements such as buttons and links. They have different fonts, sizes, types and backgrounds colors.

Recommendations

Buttons used in various sections should have uniform formatting with the texts inside them being clearly visible.

Severity
Scale

4

#02

Issue

The “Contact Us” button on the menu and footer lead to different pages with dissimilar content. Having multiple contact us pages often confused the user while reaching out to the team.

Recommendations

A single web page can clearly guide the user to sign up to newsletter, contact team and get necessary contact information.

Severity
Scale

4

#01

Issue

It is critical information for users to know that their card will be charged when they hit the ‘submit’ button, but the information is not evidently shown right now.

Recommendations

They can have the following alert step to confirm the amount or cancel the donation. Otherwise, they can put the alert information near the submit button and change the color to a more obvious one.

Severity
Scale

4

#02

Issue

The site contains thumbnails with errors like ‘Sorry. The video does not exist,’ and they show it on the homepage, which should be updated.

Recommendations

Updated and workable videos should replace unplayable videos. This way, the audience can get the information clearer and know that this site is maintained with care.

Severity
Scale

2

#01

Issue

Every form of media (e.g., podcasts, image/video gallery) displayed on the website is presented as a set of cards per page. When the user clicks on ‘next’ to showcase the next set of media cards, the page refreshes to start from top of the website rather than showcasing the next series of media. This can be very confusing for the users.

Recommendations

The media layout should be designed such that it only allows user to slide or browse horizontally through the various sets of media on the panel as opposed to vertically navigating different sections of the page without specifically wanting to carry out the latter option.

Severity
Scale

4

Severity
Scale

4

#02

Issue

Recommendations

Make the Icons more prominent to avoid confusion.

#01

Issue

There are multiple places where poor visual contrast is observed which makes it difficult to comprehend what is written.

Recommendations

Selection of better contrast colors and ensuring that it meets the standard visual contrast expected for accessibility.

Severity
Scale

4

#02

Issue

Some information is repeated at multiple places such the the menu options and the Donate buttons.

Recommendations

Minimize repetition of information/CTAs.

Severity
Scale

3 Competitve Analysis

Direct Competitors

AXIS Dance Company

AXIS collaborates with disabled and non-disabled artists to create world class productions that challenges perceptions of dance and disability.

Berkeley, CA

Dance For All Bodies

Dance for all bodies is a non-profit providing accessible, inclusive dance classes.

Virtual Presence, USA

Move Inclusive Dance

Move Inclusive Dance is a non-profit providing individuals of all ability levels to learn life skills through dance.

Nashville, TN

Indirect Competitors

UCLA Disability Studies
Inclusion Labs

Dancing Disability is a week-long dance intensive for dance artists with disabilities.

Los Angeles, CA

Project Onward

Project onwards is a leader in the field of disability arts enabling artists to connect, inspire and create their work in a safe environment

Chicago, IL

Upstream Arts

Upstream Arts residencies invite individuals with disabilities into a multidisciplinary arts curriculum designed to strengthen social emotional learning

Chicago, IL

Areas of Improvement

By conducting competitive analysis, we identified the areas of gaps and opportunities within our website against the competitors on the basis of the above mentioned metrics while highlighting the specific categories.

Usability Studies

Research Design

We conducted eight moderated in-person usability tests with one moderator and one notetaker
We designed six task scenarios to test whether users can:
- Register for a workshop
- Message Art Spark Dance
- Signup for a newsletter
- Donate to their funds
- Follow them on their social media
- Listen to a podcast by Dale Andree
We applied a think-aloud protocol to identify user’s thought process and gather their feelings toward the website

Data Collection

Audio and video recording of participant
Screen recording of the actions being performed by the participants on the website
Moderator and notetaker notes
Likert and SUS scores filled by the participants after each task (likert scale) and the end of the test (SUS)

Data Analysis

We first compiled our moderator and notetaker notes into an excel sheet for each of the tests we did
Compiled and analyzed the Likert and SUS scores to gather quantitative insights
Created affinity maps based on the notes we took to visualize trends

Participant Recruitment Criteria

We designed a screener with 20 questions and got 31 applications to shortlist

Qualification criteria for the test:
Age between 18 to 65
Have experience assisting people with disabilities
Living in Austin, TX
Have undertaken training in any type of performing arts
Interested in joining a dance class
Have experience contributing or donating to any NGO
Are comfortable browsing websites on a computer or tablet
Have provided digital for a person with disabilities

Affinity Mapping

Task Analysis

Task Success Rate

Key Performance Indicators

Time on Task

Task Completion

System Usability Scale

SUS Score

Potential Improvements

WCAG Conformance

Summary

This describes the conformance of the Art Spark Dance (Non-profit organization) website with W3C’s Web Content Accessibility Guidelines (WCAG). Based on this evaluation, the Art Spark Dance website does not meet WCAG 2.1, Conformance Level AA.

Results and Recommended Actions

Interpretative summary of review results. Recommended priorities for addressing inaccessible features of site:

• Contrast fails are critical on the website hence that is a priority.
• Lacking Alt text on multiple occasions especially when the website is content heavy.
• Unstructured in terms of information architecture, needs to improve in that aspect.

Example of WCAG Failure

Example of Revised Design Solution

The image on the left is an example of the text in footer failing required contrast as per WCAG guidelines as indicated by the tool ANDI. The image on the right is a revised version of the footer that complies with WCAG.

Design Solutions

Design System

Revised Screens

Swipe to view all

Conclusion

Enhancing User Experience of Art Spark Dance, Texas.

About the Project

About Art Spark Dance Texas

Project Timeline

UX Disciplines

Team

My Role

Roadmap to our approach

Heuristic evaluations

Severity Scale

1

2

3

4

5

Heuristics

#01

Issue

Recommendations

Severity Scale

4

#02

Issue

Recommendations

Severity Scale

3

Competitve Analysis

Direct Competitors

Indirect Competitors

Areas of Improvement

Usability Studies

Research Design

Data Collection

Data Analysis

Participant Recruitment Criteria

Affinity Mapping

Task Analysis

Task Success Rate

Key Performance Indicators

Time on Task

Task Completion

System Usability Scale

SUS Score

Potential Improvements

WCAG Conformance

Summary

Results and Recommended Actions

Example of WCAG Failure

Example of Revised Design Solution

Design Solutions

Design System

Revised Screens

Conclusion

Potential Improvements

Key Takeaways

Enhancing User Experience of
Art Spark Dance, Texas.

Severity
Scale

Severity
Scale