Case Study

Starsdance Mystery School Website Design: UX Methods For Accessibility and Usability

1. OVERVIEW

A white, queer-led organization wants to grow their online community by creating a website that appeals to their diverse target market without unintentionally alienating anyone. After usability testing with a group of users and adjusting the prototype, the website has been deemed usable, relatable, and welcoming by all five white test subjects.

A. The Problem

Starsdance Mystery School: an online community that teaches Queer Astrology to LGBTQIA+ students and their allies, needs a website that is accessible, relevant and welcoming to potential students. They strive to welcome all backgrounds, and this commitment to inclusivity needs to be prioritized during the design process so the website is welcoming to people with different needs and life experiences. While the entire Starsdance team identifies as queer, they are also white: presenting another challenge of this project.

Since various types of violence and discrimination are real threats to Black Indigenous People of Color (BIPOC) as well as the queer and trans population, our top priority is to ensure users browsing the site experience the community as a safer space for everyone. It is also important to ensure that those with visual impairments are able to access the site with ease as a direct action against ableism.

B. The Solution

A User-Centered approach was integrated into the Information Architecture (IA) and content of the final product, which is responsive across devices. After testing the prototype with five white users who match the user personas of Starsdance’s target market and following up with them throughout the design process, the website was deemed usable, accessible, inclusive, and attractive. However, more usability testing is needed that includes Black Indigenous People of Color (BIPOC).

C. Case Study Outline

OVERVIEW
A. The Problem
B. The Solution
C. Case Study Outline

BACKGROUND
A. The Organization
B. Current Statistics
C. Current State Analysis

RESEARCH
A. User Feedback
B. Pain Points
C. Similar Websites and Services
     1. Flax and Gold
     2. The Celestial Bruja
     3. Anna Joy Healing
     4. Irina Tudor & Ancestors
     5. Temple of Witchcraft
D. Market Analysis
E. Business Opportunities
F. User Needs and Desires
     1. User Personas
           The Curious Activist
           The Social Creative
           The Spiritual Elder
G. Business Needs

APPROACH
A. Brainstorming
B. Focus Group
C. Information Architecture
D. Challenges


FEEDBACK
A. Who was tested?
B. What was tested?
C. Where were tests conducted?
D. When were tests conducted?
E. How will usability be verified?
F. How will we know the website meets the organization’s needs?

USABILITY TESTING
A. Laura (she/her)
B. Katie (she/they)
C. Pamela (she/her)
D. Lynn (she/her)
E. Spark (they/them)
F. Owner: Tere (they/them)

PROCESS

OUTCOME
A. Snapshot: The Final Product
B. Browsing: The Final Product
C. Verifying Success
D. Further Recommendations

2. BACKGROUND

Starsdance Mystery School is a queer- and trans-led organization that prioritizes social justice: creating a safer online community and teaching the practice of Queer Astrology to the LGBTQIA+ community and its allies.

Their enrollment statistics indicate that their demographic is predominantly 30 – 39 year olds who identify using she/her pronouns and live in Eastern and Central time zones of the United States. These users joined the community after being invited mostly by facilitators and Facebook.

When Starsdance switches their enrollment methods and pricing upon launch of this website, they will lose Key Performance Data.

A. The Organization

Starsdance Mystery School is an online collective of queer educators who work together to teach Queer Astrology to the LGBTQIA+ community and curious allies via email and their Discord class server.

Social justice is important to them. They strive to be as inclusive as possible to everyone who wants to learn queer astrology, while doing their part as white folx to keep BIPOC and overlooked populations safe, respected, and heard. All of their services are available online, which means the team puts a great deal of care into making sure that all documents, links and discussion are easy to use: even for those who are not very experienced with technology or have disabilities that make using screens difficult. Accessibility is such a high priority that they hired a moderator to join their Discord community who is an expert at troubleshooting the platform. This person is available whenever students are having trouble with the server and/or need tech help.

Their curriculum centers around what they call “Queer Astrology,” a type of queer witchcraft that strives to learn the practice of astrology while also being aware of the cultural appropriation and white-supremacy woven throughout astrological philosophies. It is their intention to discuss and dismantle the oppressive facets of astrology while also expressing appreciation for this sacred science, which serves as an empowering method of self-discovery. Facilitators also encourage students to explore the traditional astrology methods and philosophies, while also creating a unique practice of their own: integrating their own values and beliefs as their experience increases over time.

Starsdance plans to change their pricing tiers and registration process upon the launch of the website. Instead of using Google forms for registration and data collection and PayPal for billing, they will be switching to Patreon for membership. Patreon’s website does not share users personal information with Patreon creators, which means that the organization will not have as much data to compare and use for future growth. They will not be able verify the efficacy of methods used within this study to achieve their goals unless they ask their students to share this information with them via email or on their Discord server.

B. Current Statistics

Total students: 48

All of the data below is an analysis of the current state of Starsdance Mystery School as of February 19, 2021. The BIPOC enrollment registration option was added to the registration form on August 20, 2020. This option allows for students to identify as BIPOC for a reduced fee.

C. Current State Analysis

Starsdance Mystery School has no direct, clear website for their organization. They solicit their services via multiple facilitator websites but have received feedback that this is confusing. They also have to update more than one website when it’s time to add new offerings, which is time-consuming. Prices and offerings are also unclear.

3. RESEARCH

There are not many queer online astrology classes and community offerings found through browser keyword searches. Only one out of the five that did pop up indicated that they prioritized accessibility to those with disabilities by using image descriptions.

While the content and owners of these queer-magic businesses seem worthy of support, Starsdance Mystery School has a great opportunity to appeal to an under-represented market.

A. User Feedback

PERSON #1: “Why don’t you have just one website?”
PERSON #2: “It’s confusing not to have a main landing spot to find out more information.”
PERSON #3: “Oh, yeah you definitely need a website just for the school.”

B. Pain Points

Users

  • Unclear navigation
  • No clear “home” of organization
  • Lengthy registration process
  • Certain pages are too long

Organization

  • Time consuming updates
  • Uninteresting graphics and type
  • Feel of the school is lost between sites
  • Certain pages are too long

C. Similar Websites and Services

1. Flax and gold

Offers: astrograms, astrology readings, horoscopes, live Astrology 101 online course with recorded lectures, mentorship program, MP3 recordings of mini lessons, playing cards, printed calendar art

Pricing: $7 – $150

Queer keywords: accessible, collective financial needs, donated to mutual aid efforts, empowerment, gender roles, heteronormativity, queer ethics, queer identities, racial justice, shame, social liberation

Quote: “I’m hiring racial justice facilitators to help me as a white person be accountable to BIPOC students; I will strive to meet all accessibility needs; and I will be open to feedback about what arises in the course. My goal is to make it easy for all students to show up fully present and engaged.”

2. The Celestial Bruja

Offers: astrology sessions, budget readings, channeling, clothing and accessories, digital magic classes, customized, PDF eBook, mentorship, monthly magic classes, multi-week, magic classes, oil blends, spell services

Pricing: $4 → $299 (sliding scale)

Queer keywords: accessible, collective financial needs, donated to mutual aid efforts, empowerment, gender roles, heteronormativity, queer ethics, racial justice, shame, social liberation

Quote: “I’m a Queer Xicana but even as I learn about other identities, I might still cause harm. If that is the case, I welcome your feedback and will do my best to change, make amends, and do what I can to avoid harming others in the future. Welcoming feedback is not a statement that you MUST give feedback. It’s merely a commitment to learning and growing.”

3. Anna Joy Healing

Offers: astrology readings, mediumship, online queer witch community, podcast, Queer and Nonbinary astrology class, reiki, tarot

Pricing: $88 → $497 (sliding scale)

Queer keywords: accountability, BIPOC people in need, cisheteronormative framework, dismantling oppressive norms, diverse group of witches, empower, gender binary, Genuine Non Binary person, nonbinary astrology system, queer community, witch, witchcraft

Quote: “While this course is appropriate for total beginners, it is also excellent professional enrichment for practicing astrologers who want to ensure their work is inclusive of all genders and sexual orientations.

4. Irina Tudor & Ancestors

Offers: Discord community server, monthly Live Zoom call, the opportunity to fund queer ancestral astrology research, queer astrology videos

Pricing: $1 – $10 (monthly)

Queer keywords: Ancestral Astrology, ancestral work, authentic indigenous wisdom, BIPOC, decolonizing, ethical research, everyone on the rainbow spectrum, gender, LGBTQIA+, QTBIPOC, Queer expanding research, queerness,
transgenerational trauma

Quote: [E}veryone interested can learn about the specifics of empowered applications of Queer Ancestral Astrology, Theory, Ethical Research & Magical Praxis by & for BIPOC LGBTQIA+ folx. The funds will go towards building scholarships for BIPOC LGBTQIA+ folx and expanding research.

5. Temple of witchcraft

Offers: end-of-life spiritual services, group healing energy services, healing case study group, in-person workshops and events, ordained ministers services, Reiki, sacred sexuality training, spirit communication, various online classes, year-long Queer Mysteries online course

Pricing: $10 – $175 (sliding scale)

Queer keywords: chosen family, coming out, gender binary, non-cisgender, magickal, non-heterosexual, Queer mysteries, Queerness, rebellion, ritual, trauma and healing, witch, witchcraft

Quote: It is the policy of the Temple of Witchcraft to ensure equal opportunity for all without discrimination or harassment on the basis of race, color, sex, sexual orientation, gender identity or expression, age, disability, marital status, citizenship, national origin, genetic information, or any other such characteristic protected by
law. The Temple of Witchcraft prohibits any such discrimination or harassment.

D. Market Analysis

User Interface (UI)

Many of the menus of these sites are packed with lots of pages and too much information. Dreamy and earthy stock photography and animations are used, which makes the websites feel magical though load times are high. The user journey and visual hierarchy are both unclear on most of these sights and it is tricky to figure out what the primary offerings are on some of them.

Accessibility

Image descriptions for accessibility were only used by one of the websites that were found. Poor color contrast on some sites also made certain words difficult to read. These two factors indicate that accessibility for the visually impaired was not directly addressed by most of these sites when creating the interface.

Services

Queer astrology online courses exist that focus on empowering, inclusive content from a variety of queer sources. These websites offer bylaws and parameters to give users a heads-up of what they will need to adhere to. Most of them offer additional services on top of online courses and community.

Content

Ranges from pre-recorded videos, to eBooks. Some online courses are available for download to do at the user’s own pace, others come with a community and direct mentorship from the facilitators.

Prices

Many offer sliding scale options, but not all. The low end is around $5 and the high end is around $200. Some websites offer to donate some proceeds to fund underserved communities or the option for those who cannot afford the prices listed to work out another arrangement.

Representation

These websites used inclusive language and queer terminology, but no images of people were used other than bio photos. Some of these websites are owned by BIPOC individuals, so extra visual or verbal confirmation does not apply.

E. Business Opportunities

Improve Resource (time) management

All information on one website means only updating that website. The less time that the team spends on website updates, the more time they have to create new classes and spend quality time online with students. Asking queer teachers to contact them would also save the team time networking outside of doing facilitation work.

Stand out from competition

Market research revealed that there are very few online astrology schools for BIPOC and LGBTQIA+ users. A responsive, attractive website would pop out immediately to those who search “queer astrology school” or similar Search Engine Optimization (SEO) keywords. 

increase visibility with Marketing

Clean, bold UI and use of SEO keywords would likely skyrocket Starsdance to the top of browser search queues. Since none of the sites found used image descriptions or clear type choices, marketing this organization as accessible for those with visual impairments would also make them stand out from similar services.

Earn trust with transparency

Listing prices, community agreements, offerings and testimonials so that clients know that something worthwhile is being offered initiates feelings of trust. It is important for minorities to know that spaces are safe, especially if they will be doing deep sharing about trauma and abuse within the community.

F. User Needs and Desires

Personas

The following three personas were created for Starsdance Mystery School based on enrollment statistics offered by the organization: The Curious Activist, The Social Creative, and The Spiritual Elder

G. Business Needs

Goals for growth

  1. Increase conversion rate
  2. Cultivate a diverse, safe online community
  3. Initiate anti-racism, decolonization, anti-ableism, and other social justice initiatives
  4. Educate students about the Earth and its cycles using a queer lens

4. APPROACH

Colorfully bold gradients, gender fluid icons, and representing minority populations are a few of the key elements of design that were decided after brainstorming. All elements used and not used also need to reflect the core list of intentions that have been created.

The great challenge of this work is not to unintentionally offend or tokenize BIPOC and LGBTQIA+ communities through our advertising.

A. Brainstorming

Themes and Intentions

Authentic
Awareness
Boundaries
Connection
Empowering
Fun
Inspiring
Integrity
Justice
Magical
Sacred
Shapeshifting
Transformation
Wonder

User Needs

Accessibility
Inclusion
Safety

Calls-to-Action

Find out about the team
Sign up for newsletter
Discover offerings
Explain price levels
Menu (top and bottom)
Read agreements
Register!

B. Focus group

👉 Visit my Process page for an in depth description of the focus group

C. Information Architecture

Visual Hierarchy

  1. Organization name (top left)
  2. Site menu links (top right – location #1)
  3. Social media menu (top right)
  4. Registration button (center)
  5. About Us: “Modern Mystics” (left)
  6. List of values with logo (right)
  7. Icons with key-phrases and perks (center)
  8. Student testimonial (center)
  9. Mission statement (bottom left)
  10. Contact information (bottom right)
  11. Site menu links (bottom right – location #2)

Page Order

1. Home
2. Agreements
3. FAQs
4. Pricing
5. Schedule
6. Team
7. Register

D. Challenges

The most significant challenge of this project is to authentically represent the values and offerings of the organization without unintentionally alienating, offending or damaging the BIPOC and LGBTQIA+ communities. This requires research, patience, humility and personal responsibility on behalf of the creator, especially since they are white.

It is crucial to acknowledge at this point that the primary UX designer of this project is a queer cis white woman who uses she/her pronouns. While activism and anti-racism work are high priorities for this person, there are life experiences that she cannot perceive or understand. It is possible to make a mistake and not even know it because the damage is done over a screen and not face-to-face.

The following steps were taken to address this challenge:


Being willing to apologize and pivot

This approach when someone who identifies as BIPOC or LGBTQIA+ shares their unfavorable experience of this website is top priority. Not attempting to justify decisions made or not made, but listening and integrating the feedback.

Centering the core values of Starsdance

These include: accountability, anti-racism, courage, diversity, empathy, equity, liberation and social justice. We decided to intentionally share them in a prominent place on the home page so that all participants understand that this is a non-negotiable part of their community-ship.

Representing BIPOC and trans folx

It is essential to integrate these groups of people in UI and elemental choices such as images, icons and keywords. This is done to do our best to make it clear that their experiences are prioritized and welcome without tokenising them.


Finding BIPOC individuals to test the prototype was also challenging. Even when the creator reached out to organizations via email offering to pay participants for their time, no such volunteers were found. Therefore, this website has not yet been tested by anyone who identifies as BIPOC.

5. FEEDBACK

A group of five white participants who matched the above user personas explored the prototype of Starsdance Mystery School’s website within a week after the prototype was launched.

After various types of Heuristic usability tests were administered to this user group, the results state that the site is welcoming to white people, easy to read, simple to understand, contains relatable content and is very visually engaging.

A. Who was tested?

⫸ A group of five users from Starsdance target market that fit the characteristics of at least one of the three user personas

B. What was tested?

⫸ Website usability, relatability, and inclusivity

C. Where were tests conducted?

⫸ Remotely – four via Zoom, one via Phone

D. When were tests conducted?

⫸ February 13 – February 19, 2021

E. How will usability be verified?

⫸ Heuristic Evaluation methods (moderated and unmoderated)

1. Exploratory testing
2. Thinkaloud protocol
3. User observation
4. Session recordings
5. First-click test

6. Content feedback
7. Independent browsing

F. How will we know this website serves Starsdance Mystery School’s needs?

All focus group participants answer yes to the questions below:

✔️ Is this website usable ?

All buttons, links, icons, and images load and function properly.

✔️ Is this website accessible?

The content, values, and offerings were relatable.

✔️ Is this website inclusive?

The entire experience resulted in users feeling welcome to their community.

6. USABILITY TESTING

A. Laura (she/her)

AGE: 34
OCCUPATION: Senior UXer
DEVICE: Macbook Air
PERSONA: The Social Creative

What was Heard

  • GENERAL: Loves the quotes from testimonials
  • GENERAL: Too many pages
  • GENERAL: Make icons more prominent

QUOTE: “The icons are fun and helpful! I really like them and their statements”

  • GENERAL: Put all testimonials together
  • GENERAL: Images are very inspiring and emotional
  • GENERAL: The website feels really authentic and tailored to the organization and their services
  • GENERAL: Recognized a student and got excited

QUOTE: “[The agreements] are making me feel like this is a safe space. Not all spaces are safe despite what it might seem on the internet….. People are gonna respect me and my identity, I am going to be able to share, I will be protected: These are key values that I want to see addressed. I’m glad this page shows me a quick way that I can read about them.”

  • PAGE #2: Agreements = feelings of safety
  • PAGE #4: Maybe preview workbook PDFs?
  • PAGE #5: Names of classes/offerings are hard to identify
  • PAGE #5: Relationship of Register vs. Buy Now buttons is unclear

QUOTE: “[The website has] a very professional vibe”

  • PAGE #6: It would be cool to connect the teacher with what they are offering
  • PAGE #7: Not needed, action options are available on other pages
  • PAGE #7: Maybe add process graphic for what registering entails

What was changed

✔ ADDED: User Flow graphic to Pricing page
✔ CONDENSED: pages from 7 – 3
✔ CONDENSED purchase options to single Pricing page
✔ MOVED: icons up from lower down the page
✔ REMOVED: both Register and Buy this offering buttons from Schedule page

B. Katie (she/they)

AGE: 34
OCCUPATION: Education Program Manager
DEVICE: PC Desktop
PERSONA: The Curious Activist

What was Heard

  • GENERAL: Bold text helps me read everything easily
  • GENERAL: the keywords are pretty
  • GENERAL: headline and body text are all pretty easy to read
  • GENERAL: I like the bold sections of body text
  • GENERAL: I like to read the bold headers on entire page before diving deeper into smaller body text
  • GENERAL: I love how everything is really concise

QUOTE: “I think [the website] gets ‘brevity with impact’ across right away: like this is the thing we need you to know. It gets the information across really quickly.”

  • GENERAL: line spacing on each page is good (readable)
  • GENERAL: the bottom menu is helpful
  • GENERAL: likes the bottom menu because you don’t have to scroll back up
  • PAGE #1: love the testimonial carousel
  • PAGE #3: Likes user registration flow

NOTE: the buttons on PAGE #3 connecting directly to Patreon’s checkout page is jarring

FOLLOW UP: after checking in with Katie after her initial experience with the buttons, she does not feel that it was significant enough to warrant a change to the website

What was changed

✔ Nothing

C. Pamela (she/her)

AGE: 59
OCCUPATION: Retired
DEVICE: Android Mobile –AND— Apple tablet
PERSONA: The Spiritual Elder

What was Heard (mobile)

  • GENERAL: the top menu button is nice and big! I know there’s stuff to do there”
  • GENERAL: likes the colors and images, she can see everything and know what’s meant.
  • GENERAL: likes that it’s dark text on a light background
  • PAGE #1: really likes “modern mystics” word choice

“I like the highlights with the quotes: a lot of platforms do this and it makes it fun to find quickly what you’re looking for if you don’t have a lot of time to read. You chose good words to bold, too!”

  • GENERAL: [the content] is very clear cut
  • GENERAL: likes the space between the icons and the words
  • GENERAL: suggests that if accessibility work (UX) is a priority for the school, then it should be mentioned under the social justice blurbs
  • PAGE #1: thinks the logo is cool
  • PAGE #2: giving students the opportunity to buy workbooks from previous classes is smart!
  • PAGE #3: pricing page renders really well when phone is flipped sideways

QUOTE: “The word diversity should not be used alone without inclusion: it can be seen as tokenism. It’s important to mention both. People might be looking for all three: diversity, equity and inclusion to see whether or not they want to come to this site.”

  • GENERAL: when using the word “equity,” use whatever phrases that clearly state something about leveling the playing field. If you want to talk about marginalized communities gaining access to power, make sure it’s clear that does not mean power is being removed from those who already have it: because generally thats where it hits people’s fear. They believe that if other people have power that means they don’t have it anymore. And a lot of the way our systems are structured: theres a lot of power for everyone.
  •  PAGE #2: suggests making ‘create and maintain boundaries’ bigger or move. it up the list (for emphasis, not visibility)

CONCERN: Registration flow graphic too small on mobile”

  •  PAGE #2: suggests adding an example for “Spoiler Tag” because not everyone knows what that means
  • PAGE #2: suggests adding copyright wording such as “all applicable copyright laws apply”
  • GENERAL: turning a phone sideways is something that helps make things more readable and provides more options for visibility

What was Heard (tablet)

  • GENERAL: likes that top menu is revealed on tablet vs. hamburger menu button on mobile
  • GENERAL: everything seems to render on tablet like it does when you turn a mobile sideways
  • GENERAL: turning a tablet sideways makes everything larger too
  • GENERAL: her preference is to use tablet for reading over mobile

What was changed

✔ ADDED equity as a value and description on PAGE #1
✔ ADDED spoiler tag example graphic
✔ CHANGED wording of diversity and added inclusion to “values” on PAGE #1
✔ REFORMATTED registration flow graphic to make it larger
✔ RELAYED feedback to team about copyright

D. Lynn (she/her)

AGE: 58
OCCUPATION: Aircraft Router
DEVICE: iPhone X
PERSONA: The Spiritual Elder

What was heard

  • PAGE #1: where is the unsubscribe button?
  • PAGE #1: didn’t care for the skull icon imagery

QUOTE:Some people know nothing about their signs or pronouns: you might want to treat your audience like they have never heard of these terms.”

  • PAGE #2: suggests explaining why pronouns are important
  • PAGE #2: suggests providing an example for ‘Spoiler Tag’”

What was changed

✔ ADDED a link to explain pronouns on PAGE #2
✔ ADDED spoiler tag example graphic

E. Spark (they/them)

AGE: 30
OCCUPATION: Graduate Student
DEVICE: Macbook
PERSONA: The Curious Activist

What was heard

  • PAGE #1: loves the image on the front and the colors are “very lovely”
  • PAGE #1: says they have a “curious reaction” when people use the word ‘diverse’ to self describe because its non specific, but also has the feel of corporate diversity programs which often fall short)”
  • PAGE #1: loves the phrase ‘star-loving queers’

QUOTE: “I understand ‘discussing [oppression] while we learn’ but based on my impression of those of you involved I would imagine there would be ‘dismantling systems’ and ‘understanding‘ too. I love hearing words like that together.”

  • PAGE #2: said the Discord term ‘spoiler text’ is confusing: explaining how to block out text using those words makes them think of movie stuff or plot points
  • PAGE #2: likes that its mentioned that someone is available to help with Discord when you register
  • PAGE #2: doesn’t really care about the icons and says they would probably skip reading them

QUOTE: “I appreciate the sentiment ‘respect someones gender’ but I wonder if there is another way to say it? Like sharing specifically what does it mean to respect someone’s race or gender?”

  • PAGE #3: loves the names of the pricing tiers: “they are so cute!”
  • PAGE #3: likes the low-cost option to get into the community
  • PAGE #3: expressed a desire to register for the $5 Comets level

CONCERN: the lack of the word ‘trans’ with the word ‘queer’ makes them feel unwelcome to the Starsdance community. This is due to their experiences in the past of ‘queer communities’ that were not trans inclusive.

What was changed

✔ CHECKED IN with the Starsdance team about Spark’s concerns:

1. website’s use of the words ‘gender’
2. website’s use of the word ‘oppression’
3. their experience of ‘queer communities’ as unwelcome in the past

✔ ADDED the word trans with the word ‘queers’ on PAGE #1 under ‘participate online’
✔ ADDED the word ‘dismantle’ on PAGE #1 under ‘unlearn oppression’
✔ MINIMIZE drop off space on home page

F. Owner: Tere (they/them)

AGE: 65
OCCUPATION: Starsdance Owner
DEVICE: Mac (desktop)
PERSONA: The Spiritual Elder

What was heard

  • GENERAL: says the website looks great
  • GENERAL: says the site is receiving great feedback from those who have seen it
  • GENERAL: curious about the teams feelings about stock photography as a way to welcome diversity? This “feels weird” to them

    UPDATE: the team says that they are fine with the stock images used
  • PAGE #2: likes the anti racism statement ‘racism has no place within our collective (or anywhere) and will not be tolerated’ but is feeling some discomfort about the statement. They elaborate below:

QUOTE: “The discomfort is knowing that this is more aspirational than true. As a white person, I cause unintentional racial harm all the time. I worry that this statement doesn’t say that in spite of the unintentional racial harm that is bound to happen as we learn to dismantle racism in ourselves and our systems, we will make mistakes.”

  • PAGE #3: does not want to give users the opportunity to just register for classes (separately from Patreon) for now
  • GENERAL: has a list of small changes that need to be made, all of which were completed and are listed below

What was changed

✔ ADDED the BIPOC Patreon price tier on PAGE #3
✔ ADDED the description for next class on home PAGE #1
✔ CHANGED the wording of Agreement #7 on PAGE #2
✔ CHANGED ‘dismantle oppression’ to ‘right relationship’ on PAGE #1 and updated the description
✔ CHANGED the wording under “astrology roots” icon on PAGE #1
✔ CHANGED the study group wording on PAGE #3
✔ REMOVED the option for users to buy each ritual, meditation or class individually from PAGE #3
✔ UPDATED their bio description on PAGE #1

7. PROCESS

Starsdance Mystery School has decided that they need one website that clearly identifies their organization. They want this site to showcase their online community as a safe space for BIPOC users and inclusive for astrology students to learn and share. They also want the website to be usable for folx who have vision issues or identify as neurodiverse as an act of social justice against ableism.

Research confirmed that Starsdance does offer something unique: an online astrology community co-taught by multiple queer astrologers. This lack allows the organization to stand out from competitors and set the precedent (via marketing) of what a healthy, diverse community looks like. Many of the websites that were found also lack accessibility elements like responsive UI, visible color contrast and image descriptions.

After analyzing the enrollment statistics with the school’s registrar and identifying the pain points of both users and owners: user personas were created to serve as archetypes of the Starsdance target market. These archetypes are The Social Creative, The Curious Activist and The Spiritual Elder. Each one has a set of needs that are all equally important to the organization. It is important that all of them be considered when creating the site, while also choosing to prioritize BIPOC representation above all else.

A moodboard was created and approved by the team during the brainstorming process. Themes including rainbow gradients, authenticity, gender neutral icons, empowerment, representation of minorities, integrity, and transformation were all folded into wireframes and UI. A focus group was also conducted to support brainstorming. The three user needs of safety, accessibility, and inclusion were the primary focus of all UX decisions.

The most significant challenge of the project is respectfully advertising to a minority community that is not a part of the teaching team. Multiple initiatives were taken by the queer cis white woman creator, which included a willingness to integrate minority feedback as it is received and centering the values of the organization through use of inclusive icons, images and word choices.

The prototype was tested with a group of five white users that are a part of the Starsdance target market: two of whom identify as neurodiverse; three of whom identify as activists; and one of whom has significant visual impairments. These participants all fit the qualities of at least one of the three user personas created for the project. Unfortunately no BIPOC people were available for or willing to do user tests on this project. Therefore more usability testing is suggested.

All five white usability test participants found the website to be accessible, visually pleasing, easy to read, usable, relevant to them, and welcoming. There were concerns raised by a few of them about certain phrases and word choices, and this feedback was incorporated into the final product. The most prominent suggestions for adjustments entailed giving an example for unfamiliar terms and minor wordsmithing within the body text of icon descriptions.

8. OUTCOME

An accessible website that fosters inclusion within a diverse target market has been created for Starsdance Mystery School: which was created by implementing User-Centered methods

The usability test group (comprised of five white test subjects) deemed the website usable, relatable, and welcoming while browsing the prototype. This indicates that the goals of the project have been achieved, though testing the website with BIPOC users is still recommended.

A. Snapshot: The Final Product

Starsdance Mystery School

Offers:  Daily moon forecasts, Discord online community, live answers from queer astrologers, meditation downloads, recipes for a ritual, PDF workbooks, Queer Astrology classes, Queer astrology discussion, Queer Astrology teachers, weekly studygroup, weekly sun forecasts

Pricing: $5 – $20 (monthly)

Queer keywords: ableism, accountability, agreements, allies, ancestors of color, anti-racism, barriers to access, classism, challenging normativity, courage, culture and bias, dismantle oppression, dismantling, diversity, eclectic team, empathy, empower members, equity, healthy community, liberation, multiplicity of perspectives, non white, oppression, Queer Astrology, queer eyes, queer humans, queerphobia, racism, radical self-expression, right relationship, social justice, star-loving queers, tech witch, trans folx, transphobia, welcome all races, genders, and life experiences, white colonialism

Quote: “The Starsdance Mystery School team encourages students to add their own unique flavor when analyzing the mysteries above us: we do not claim to have all the answers. We are responsive to the kind of astrology our students ask to be taught while also refusing to teach ideas we know are tools of oppression.

We aim to make knowledge accessible and view queerphobia, transphobia, ableism, racism and classism in all their forms as a barrier to access.”

B. Browsing: The Final Product

C. Verifying Success

UX approach

The information architecture of the final product is simple, but soulful and direct. The visual hierarchy indicates what the primary calls to action are of this website. The five users of the usability test group selected as representation of the Starsdance target market browsed the prototype. All of them confirmed that it is easy to navigate, interact with (even with dyslexia and a significant visual impairment) and understand.

All participants answered yes when asked the three following questions after testing the prototype:

✔️ Was the website usable (everything functionally worked)?
✔️ Was the website accessible (you were able to relate to the content)?
✔️ Was the website inclusive (you felt welcome to the community)?

This site is responsive between mobile phones, tablets, desktops and laptops. The User Interface (UI) was tested and deemed “engaging and not stressful to use” by all five test subjects, two of whom are neurodiverse.

One test subject has near-sighted vision, presbyopia, and vitreous detachment. She often uses different devices to assist her eyesight while using screens.  The website header and body text was “easy to read” without any visual-distortion issues.

The organization’s values are clearly listed with a succinct mission statement on the homepage and prominent throughout the other three pages. Their community agreements outline what students must consent to following as soon as they join: fostering inclusion, welcoming diversity, and directly naming boundaries that must be honored by the group for a healthy community dynamic.

Trans, gender fluid, POC and older folx (ie: the Starsdance target market) are represented in all images used. These demographics also inspired the collection of icons used throughout the site.

The final product is an authentic digital representation of this queer organization. The Starsdance Mystery School team is very satisfied with the User Experience approach, which allows them to proudly reveal their educational services and supportive community to users worldwide.

D. Further recommendations

The work of representation and inclusion in UX is a moving target. It is recommended that the Starsdance Team:

1. ASK for feedback from BIPOC about their website, services, classes and online community
2. COMPENSATE any/all BIPOC test subjects for their time and willingness to share feedback
3. ADD alternate image descriptions to any new images added to the site after receiving access to the prototype
4. LEARN about all of the barriers of access to the internet that exist to those with disabilities to continue doing accessibility work
5. ASK for user feedback when changing any text, icons or images on the website