Blind Date

Making online dating accessible for blind people

The Blind Date design

My Role

UX Design: Low & high fidelity wireframing, voice prototyping, usability testing

User Research: Semi-structured interviews, affinity mapping, competitive analysis, expert evaluation

Duration

August 2021 - December 2021

Tools

Figma, Adobe XD, Balsamiq, Miro, Qualtrics

Team

Boya Ren, Jessie Chiu, Srijan Jhanwar

Problem

The most popular dating apps today are inherently visually based and as such rely heavily on images and other visual elements, creating a barrier to access for blind users.

In tandem with the slew of accessibility issues present on these platforms, this leaves blind users to commonly find themselves at best mildly disoriented or at worst unable to use core functions of these applications without the aid of sighted individuals.

The goal of this project is to devise a universal design solution which ensures equal access to the dating pool for blind users and enriches the experience for both blind and sighted users.

Solution

Inclusive Account Verification

Most popular dating apps have rolled out photo verification processes in the past few years, many of which are mandatory onboarding tasks. This typically involves the user taking a photo of themselves making a pose shown in an example image. Without a textual description of the gesture, blind users cannot complete this step independently, which robs them of their autonomy and privacy.

This concept offers an improved verification experience by providing:

  • Fallback audio based verification
  • A text description of the desired gesture
  • Retake recommendations in the event of failed photo verification
  • Real-time feedback during image capture

  • inclusive account verification process gif

    Voice-rich Profiles

    Most dating apps are hyper-visual, relying on photos to convey a person's personality, interests, and lifestyle, which greatly excludes the blind community. Voice-rich profiles affords both sighted and non-sighted individuals an outlet to more fully express themselves and learn more about potential matches.

    This concept allows users to:

  • Create voice recorded stories associated with their profile photos
  • Add voice responses to a range of prompts

  • voice profile photo stories gif voice prompts gif

    Profile Photo Recommendations

    We uncovered that blind users experience difficulty selecting and uploading photos for their profile, often consulting with friends and family to varied results.

    To mitigate the dependency and ambiguity of accepting recommendations from sighted individuals, we incorporated a recommendations engine which would build upon existing facial recognition in mobile photo albums.

    Through this concept, users:

  • Review a curated gallery of up to 10 of their best potential profile photos
  • Can share recommended photos with family and friends to narrow down profile worthy choices

  • profile photo recommnedation system gif

    Process

    project design process diagram

    Cognizant of our limited perspective as sighted individuals, we employed several research methods to learn how the blind community currently navigates the online dating space given current solutions, identify accessibility and usability issues in current product offerings and then used those findings to inform our final design solutions. I took the lead in semi-structured interviews, low-fi wireframing, feedback sessions, and hi-fi prototype design.

    Research

    research methods diagram

    We began by conducting secondary research, performing an accessibility audit and competitive analysis of the most popular dating apps. We then sent an accessible survey to blind users of online dating platforms to get to know their experience and recruit participants for further interviews. Interviews were then carried out with accessibility experts and a subset of survey respondents to gain a deeper insight into the challenges blind users face on online dating platforms and explore the rationale survey responses.

    Competitive Analysis

    Examining popular dating platforms such as Tinder, Bumble, and OkCupid, a common thread emerged in that these apps don’t work well with screen readers. This is mainly due to buttons being labelled poorly, and the lack of useful (or in some cases, any) alt-text for images. This leads to confusing interactions for blind users, pushing them to rely on sighted individuals to effectively use these apps. The below table contains our analysis of each of these platforms.

    competitive analysis accessibility findings of popular dating apps

    Survey and Interviews

    Our survey was distributed across different blind communities on Reddit and Facebook. It asked questions regarding platform preferences and experiences, context of use, and demographics. Semi-structured follow up interviews were conducted to open up the dialogue with users and explore tangents that may produce valuable insights, while maintaining a script to keep on track. These interviews included questions regarding which dating apps they use most, criteria when swiping on a potential match, if interviewees required help from family or friends while using their preferred app, and their thoughts on disclosing their blindness on their profile.

    Analysis

    We synthesized interview data into an affinity map in order to highlight common themes, draw insights, and guide design decisions:

    affinity diagram

    team affinity diagraming session

    Key Findings

    After analyzing all of the data from interviews and surveys, we generated the following insights:

    Voice is the best way for blind users to get to know what another person is like

    We learned from our interviews that voice is a rich source of information for blind users, allowing them to learn more about potential matches which is typically communicated to sighted users through profile photos.

    Alt-text of buttons are poorly labelled, making navigation impossible

    This barrier impedes users from completing key tasks, causing frustrations for blind users in an environment where they already feel at a disadvantage.

    Blind users are forced to rely on sighted individuals, robbing them of privacy in their dating lives

    Our interviews uncovered that some users would prefer to use dating apps on their own, but cannot as they require the help of their friends and family to use them.

    Blind users are more susceptible to security attacks from cat-fishes or chatbot accounts.

    Initial research showed that security is a major concern for blind users, some of whom reported issues being cat-fished or deceived by bot accounts.

    Personas & Empathy Maps

    We distilled down the insights discovered across our research methods by crafting three personas depicting the ethos of our users and their characteristics to build empathy with the people we’re designing for. We also created empathy maps to visualize our personas’ attitudes and behaviors and develop a shared understanding of our users’ needs.

    personas
    empathy maps

    Design

    iterative design process graphic

    Concept Sketches

    With the design implications uncovered from our analysis, we conducted a brainstorming session and ultimately generated 3 design concepts to move forward with. These concepts tackle the issues most pertinent for blind people using dating apps. We then produced low fidelity sketches of each of the concepts to align on our ideas and communicate them to sighted stakeholders.

    design concept sketches

    Feedback Session 1

    With our design ideas starting to take shape, we held a preliminary feedback session with users to get some initial thoughts and validation on if they found these concepts useful, any points of confusion or potential accessibility issues, and anything else that may have stood out.

    Ultimately we found that for photo verification processes, users voiced their desire for input from the system describing how to properly take the verification photo in the case they have failed verification. Participants also advocated for additional assistance in photo capture, pointing us to stock accessibility features found in the iOS camera app which provides real time feedback communicating to users where their face is in relation to the frame. For voice-rich profiles, we identified the need to include time limits for recorded audio, and lastly for the profile photo recommendation system, we noted that participants expressed some confusion about how to remove photos they didn’t like from the recommendations.

    Wireframes

    Based on our response from our initial feedback session, we refined our designs to include improvements and address the concerns raised by participants. These concepts were also additionally fleshed out more in this stage to include screens for playback and error states.

    Inclusive Account Verification

    Updated design features real time photo capture feedback, curated retake instructions for photo verification, and time limits on audio verification.

    inclusive account verification low fidelity wireframes
    Voice-rich Profiles

    This iteration of the concept features time limits on audio recording, as well as additional screens showcasing audio playback with the option to redo recording.

    voice profile photo stories low fidelity wireframes
    voice prompts low fidelity wireframes
    Profile Photo Recommendations

    New to this iteration of the concept is an updated gallery view, addition of an action button to remove unwanted photos, and a more consistent share button utilizing text rather than an icon.

    profile photo recommendation system low fidelity wireframes

    Feedback Session 2

    After refining our concepts and producing low fidelity wireframes, we conducted another round of feedback with users through think aloud tests with voice interactions. We took the feedback received from theses session and annotated our wireframes with our notes, identifying things which were received positively as well as areas for improvement to iterate upon for our prototype.

    Some of the key takeaways from this session were the desire to listen to a sample recording of voice prompts, adding an option to upload photos from miscellaneous sources, and some call outs regarding the way in which some elements should be communicated by screen readers.

    wireframe feedback annotating exercise
    annotated wireframes with user 1's feedback annotated wireframes with user 1's feedback part 2
    annotated wireframes with user 2's feedback annotated wireframes with user 2's feedback part 2

    High Fidelity Voice Prototype

    After getting feedback on our low fidelity wireframes, we iterated upon our design in high fidelity using both Adobe XD and Figma. Adobe XD was used to conduct our evaluations as it offered the functionality to incorporate voice interactions. This was vital for us to make our prototype closely resemble a real use context in emulating the behavior of a screen reader.

    Inclusive Account Verification

    Account verification in a more flexible, accessible and fault tolerant manner.

    inclusive account verification high fidelity prototype
    Record Audio Stories for Profile Photos

    Tell the story behind profile photos.

    voice profile photo stories high fidelity prototype
    Record Responses to Voice Prompts

    Communicate more on a profile by answering voice prompts.

    voice prompts high fidelity prototype
    Profile Photo Recommendations

    Suggest up to 10 photos from the camera roll which can be shared with friends and family.

    profile photo recommendation system high fidelity prototype

    Evaluate

    User Testing

    With our final prototype in hand, we worked with accessibility experts and blind users to assess our designs. Due to the limitations of current prototyping tools not providing support to work natively and with full compatibility with screen readers - short of developing and launching a live application from the ground up, these tests had to be conducted over screen/audio share.

    Cognitive Walkthrough

    In evaluating our design, we engaged accessibility experts and users alike to perform cognitive walkthroughs. We were able to assess our design by asking participants to complete a series of core tasks related to each concept, keeping in mind:

  • If participants understood how to kick off tasks
  • If the next step is clear and noticeable to the user
  • If taking an action matches the user’s expectations
  • If the user knows that progress is being made
  • If the user is able to complete the task
  • cognitive walkthrough tasks

    Pre- and Post- Test Questionnaire

    Before and after conducting cognitive walkthroughs with users, we asked them to take a usability questionnaire to compare their experience using their most used dating app with that of our prototype. This was done to assess participants' feelings towards our design ideas, and if they view them as an improvement over current systems in a quantifiable way.

    usability questionnaire before responses usability questionnaire after responses

    Results

    Through our testing, overall we had found that users saw a marked improvement in the usability of these concepts over their counterparts in their preferred dating apps. Meanwhile, accessibility experts primed us to review the full gamut of our designs to ensure that there is always back/cancel navigation available, even for required processes, as well as accompanying alt-text for images even when already paired with a textual description in the case of our inclusive verification concept. Additionally, a cognitive load constraint was highlighted that audio verification phrases should be limited to 2 seconds in length for memorability's sake.

    Based on initial feedback, we feel the project is headed in the right direction, however we feel this should be further verified through testing with a larger group of users.

    graph displaying increase in usability score

    As this project came to a close, we made sure to incorporate these improvements into the final version of the prototype showcased in this case study, so annotations featuring this feedback have been included on earlier versions of wireframes as a visual aid:

    annotations of wireframes with accessibility expert evaluation notes

    Reflection

    From this project I learned a lot about designing for accessibility, designing for those with impairments, and working with protected populations. I got to try my hand at designing for voice and working with Adobe XD and Balsamiq.

    Working with the blind community, specifically on a topic as personal and sensitive as private dating lives was a challenging and rewarding journey which made me empathize with their experience. It taught me the value of actively seeking opportunities to design side by side with your end users at every step of the process, not just with them in mind.

    Thank you for reading!