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 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 also 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.
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.
We looked at three dating apps in the market — Tinder, OkCupid, and Dating4Disabled. The first two are regular dating apps, and the last one is a dating website for people with disabilities.
Tinder is heavily image-based and does not have a very accessible interface because it contains many graphic-only icons that are not compatible with the VoiceOver that many visually impaired individuals rely on to interact with the interface. However, the user flow of Tinder is pretty intuitive and easy to work with.
OkCupid allows users to develop a more detailed profile, including habits, appearance, hobbies, and so on. 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 seeing a picture and simple descriptions.
The target user groups of Dating4Disabled are people in various disabled communities. However, the design of the interface itself is not as accessible, and many of the functions are presented in the same way as regular dating websites, which do not consider the potential barriers that users might have when accessing the website.
synthesis: top 5 user needs
An organized description about the other person’s basic bio
An overall image of what the person looks like (but not necessarily specific features)
An accessible interface that is easy to work with and is not limiting
Being inclusive of both visually-impaired and non-visually-impaired users
Getting 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 chatting.
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.
Here are some screens from the paper prototype that we created before the first round of 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.
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.
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.