Miley Hu
MyOrg
matchez@2x-100.jpg

MatchEZ

 

MatchEZ

— Help you get matched with more than a picture

 
 

MatchEZ is a dating app specially designed for visually impaired users. The goal of the project is to better visually-impaired users’ experience with dating app by providing a more accessible and audio-centric interface with features catered towards their needs.

Scope & duration: a semester-long group project for CS160: User Interface Design and Development

Role: I worked with my teammates Tina Taleb, Ryan Gustafson, and Mike Lin. I designed MatchEZ in Figma and created a style guide to hand over to developers. I also collaborated with my teammates on ideation, user research, and usability testing.


The Problem

  • The prompt for the project was “Access and Ability”. After brainstorming for more than 50 different ideas, our team decided to tackle the inaccessibility of online dating platforms for individuals with visual impairments.

  • This idea stroke us the most because many of the existing dating apps have various accessibility issues that make them difficult for visually-impaired users to navigate the interface. They are usually heavily visual-centric, such as Tinder, whose interaction largely depends on pictures, and this by nature prevents many visually-impaired users from easily using the app.

Idea mapping during brainstorming session

Idea mapping during brainstorming session

IMG_8111.JPG

Phase 1: User Research

Interviews

  • For the first round of user interviews, we drafted an interview guide that focused on interviewees’ past experience with online dating apps and social networking apps in general. We also aimed to learn more about their habits in terms of interacting with mobile interfaces.

  • We conducted 4 interviews in total. The first three were conducted at the East Bay Center for the Blind, where we talked with users around the age of 50 to 60. The last one was set up through a more personal connection, and the interviewee was a 30-year old male.

  • Various pain points emerged from our conversations, and we were able to identify some of the key use needs, which are discussed in the later section. Even though interviewees of different age groups expressed strong interest in having a dating app designed for the visually-impaired, due to the constraint of time and resources that we have, we decided to set users within the age group of 18 to 40 as our primary target user group.

Key Insights

  1. Users are curious about appearances

    • Interviewees reported that they would like to acquire a broad overview of the person’s appearance to have a more complete image in their mind.

  2. Users do use mobile devices on their own with the help of VoiceOvers

    • VoiceOver is part of Apple's accessibility features, a gesture-based way to have your phone speak what is written on the screen.

  3. Users are worried about disclosing their personal information online

    • Some reported the feeling of hesitation to reveal about their disabilities upfront.

  4. Users have a mixed preference for the group of people that they would like to meet online

    • While some prefer to meet people with similar disability, others are open to meeting people with or without visual impairments.

Competitive Analysis

In order to gain a better understanding of the larger context of the current market and the problem space that we were working in, we looked at three dating apps/website — Tinder, OkCupid, and Dating4Disabled. The first two are regular dating apps, and the last one is a dating website for people with disabilities.

Tinder

The major interaction on Tinder is heavily image-based. However, the user flow of Tinder is pretty intuitive and easy to work with. Many of our users also reported during interviews that they knew about the “left swipe right swipe” mode on Tinder.

tinder.png
okcupid.png

OKCupid

OkCupid allows users to develop a more detailed profile, including habits, appearance, hobbies, c. This structure is more in line with our vision for user profiles, as our interviewees expressed the need to gain more holistic information about the other person other than just seeing a picture and simple descriptions.

Dating4disabled

The target user groups of Dating4Disabled are people in various disabled communities. However, the design of the interface itself is not very accessible and looks very outdated. The registration user flow itself was terribly long and complex, which could have thrown the user off at the very first step.


Phase 2: Ideation

Synthesis: Top 5 user needs

Based on our interview and research findings, we synthesized the top 5 user needs that we would want to address with our design:

  • Incorporating an organized description about the other person’s basic bio

  • Giving the user a sense of the overall pictureof what the person looks like (but not necessarily specific features)

  • Providing an accessible interface that is easy to work with

  • Being inclusive of both visually-impaired and non-visually-impaired users

  • Allowing users to know more about the person through other senses, especially by hearing the voice of the person

After identifying key user needs based on our research, we started brainstorming on the structure of our application. We decided to focus on three primary tasks: onboarding, profile browsing, and chat.

Whiteboard sketching during our work session

Whiteboard sketching during our work session

Besides identifying key screens for each task and laying out wireframes for these screens, we also discussed about the specific interactions that would take place on each screen and how to make them compatible with the habits of our target users. For instance, we put the navigation bar on the top of the screen as opposed to the usual positioning on the bottom after identifying the upward swiping motion as a key component of the interaction flow.

Sketches

Here are some screens from the paper prototype (about 20 screens) that we created before the first round of usability testing:

Onboarding - audio self-introduction screen

Onboarding - audio self-introduction screen

Onboarding - hobbies

Onboarding - hobbies

Profile browsing

Profile browsing

Chat inbox

Chat inbox


Phase 3: Iterations

Usability Testing

To ensure that the direction of our project aligned with the needs of our target users, we conducted a round of usability testing with our paper sketches. We tested the prototype with two users at the Lighthouse Institute for The Blind in San Francisco. Both users helped us identify specific interactions that needed improvement to better suit the habits of visually-impaired individuals; they also offered suggestions on additional features that they would love to see in our design.

  • The first user pointed out that some of the open-ended questions in the registration process were difficult for her to answer, such as “tell us how you look like” and “tell us something about yourself” during the voice introduction section. This suggestion helped us later gear towards framing more specific questions.

  • She expressed difficulties with selecting an image for her profile because images were usually unidentifiable without seeing them, and she showed interests for acoustic feedbacks on images after the user selects them.

  • The second user suggested us to provide the user with more freedom of control during the registration process by adding a “skip for now” button in addition to the existing “next” button.

Wireframes

After testing our paper prototypes with users and iterating on the design based on their feedback, we moved on to make higher-fidelity prototypes in Figma. Here are some screens for registration, browsing profiles, and chatting.

Browsing Profiles

Browsing Profiles

 
Profile Details

Profile Details

Inbox

Inbox

Chat (voice message)

Chat (voice message)

Chat (keyboard)

Chat (keyboard)


Final Design

Our final design was implemented after we continuously iterated on the visual and interaction design. Our major focus was to ensure interface accessibility and compatibility with VoiceOver as well as to incorporate functionalities that would cater to the needs of visually-impaired users.

Some of the visual design decisions that we made included the use of high-contrast color palette and appropriate font and button sizes, consistency across screens, and intuitive system hierarchy. To provide our users with meaningful information from profile photos, we generate textual description which they can capture through VoiceOver. We made sure to test our app using VoiceOver in every iteration since this tool often fails to provide meaningful information due to designers’ neglect and improper labeling of icons.

In addition, we incorporated the acoustic experience by adding functionalities to our app, such as voice-messaging and recording a fun fact about themselves during the onboarding process.


Summary & Reflection

Because the limitation of time and resources, we were unable to conduct more user studies and usability testing and delve more into the details of the design. However, this project really pushed me to think outside of the box and put myself in the shoes of users, who have very different ways of interacting with digital devices. The constraints imposed on the design also allowed us to view the problem from different angles, thereby challenging us to consider problems that we otherwise might have neglected. It also reminded me of the importance of accessibility design and the power it brings along to different communities that should be paid more attention to.

All members of our team have contributed remarkably to bring this idea to life, and we would like to continue working on it. Some possible future functionalities include the use of haptic cues and the inclusion of multiple themes for user to personalize the colors. We want to make sure that the product we build can bring everyone closer to one another and make users feel welcomed, included, and important.