Tindoori
"Love found in translation."
Duration: 8 weeks
Client: Tindoori Labs
Tools: Figma
About Tindoori: A dating app platform that actively encourages users to be involved in an interethnic relationship and supports a fun language learning experience in the process.
Research Process
Competitor Analysis
As my first step in building Tindoori's first app prototype, I extensively researched other competing products and analyzed their design system and interactions. I wanted to learn how these apps differentiate from one another because, at the end of the day, they all share the same goal of introducing their users to each other. I went through all of the competing apps' onboarding, tutorials, and main match pool interactions and recognized some of their strengths and weaknesses and the flow/experiences that a user goes through in a dating app.
Research Analysis
This step was crucial in developing the first prototype because it taught me a lot about the flow and expectations that users experience from a dating app and gave me a clearer idea of how our product can be different from others. I focused a lot on the micro-interactions and key features of these apps and noticed a couple of things:
- The on-boardings themselves acted as foreshadowing in giving their users a preview of what their app is like.
- Each app had its own character/navigator ( Bumble - honeycomb, coffee meets bagel - bagel, etc.)
- The simpler the UI was, the more straightforward the app's motive was shown.
- Each app had its' own unique key feature that distinguished them from other apps
While conducting this competitor analysis, I had a lot of different ideas and concepts that I wanted to implement but I had to be mindful of the constraints that were given to me: limited time and resources. I was only creating Tindoori's first prototype, basically an MVP, so in order for me to be really focused on the basics I went on to the next step of creating some conceptual models that would help me have a better vision of what the flow and experience of Tindoori would look like.
Conceptual Models
To better understand our target users, I created some conceptual models around the persona of Eric Garcia, our focus user. Our target users have a demographic of people in their 20s who are interested in K-pop and anime and those desiring or open to interethnic relationships. Creating a persona helped me identify the potential pain points and needs of our users and empathize with them. After creating a persona, I decided to make a user journey map because I struggled to visualize the overall flow of our user experience and also to discover some opportunity gaps that I was missing. In my design process, I always like to construct some kind of conceptual model because I find it crucial in the process of empathizing with my users and discovering new insights through them.
Persona
User Journey Map
Meet Eric!
Eric is a current senior at UCLA who is seeking a new relationship. Eric desires to be in a relationship with someone who could challenge him and someone who is out of his comfort zone. Eric is soon to be a college graduate and plans to travel after graduation and he wants to meet someone who could educate him in the culture and language of their country. He has been active on other dating platforms but hasn't felt heard or confident in matching with someone who could meet his needs as well as he doesn't know anyone in his nearby community who could do that for him. Eric hears from his friend Jack about a dating app that serves the purpose of matching people all across the country with people who are of a different ethnicity than them. Jack testifies about his great experience on the app and how it introduced him to his new current girlfriend. Eric gets very excited because that was exactly what he was looking for and looks forward to meeting his new partner.
Prototyping
Features
After flushing out the overall flow of our app, we discussed what features and screens we would implement for our first prototype. We were starting from scratch, so we decided to keep this version simple and as straightforward as possible while adding key features specific to our product.
These were the screens I decided to implement:
1. Home Screen (landing page)
2. Onboarding
3. Match pool
4. Message Page
5. Profile Page
6. Likes You Page
7. Settings
2. Onboarding
3. Match pool
4. Message Page
5. Profile Page
6. Likes You Page
7. Settings
Lo-fi Wireframes
I got right into sketching some screens out and figuring out the general interface of the app. Starting from the landing page to the onboarding experience to the match pool to the profile page. This step was to achieve a general skeleton of the interface that matches the flow we identified earlier. I tried to be quick in this stage because I knew that if I spent hours on it, the iteration would be just endless. I prefer to get at least some basic foundation out first then I like to iterate upon them as much as it's needed on Figma.
Mid-fi
Translating my sketches into digital screens, here was when things started to get more solidified. As I mentioned previously, I spend more time here figuring out the margins, spacing, and style of our app. Paying close attention to detail, my goal here was to be specific so that for our high-fidelity prototype, I would only have to apply color, branding, and other minor fixes.
Style Guide
Before pushing to our final prototype and introducing colors, logos, and interactions, I built a small style guide to have a cohesive design. I created libraries in my Figma file to speed up the process and keep everything organized and easy for other viewers to understand.
Final Stage
Hi-fi Prototype
Finally, the fun part! Unfortunately, there were a lot of unexpected fixes I had to make. Although I had a thorough plan and prototype mid-fi prototype, I ran into a lot of constraints and issues. This being my first time ever designing a full high-fidelity prototype, this type of incident was bound to happen and I am glad it did because they helped mature my design. At this point, you might be wondering what differentiates Tindoori from other competitors, and let me point out our key features:
1.) Auto-translate
Tindoori offers an auto-translate feature in the messaging chat that can be turned on and off with a toggle on the right corner displayed in the image on the left. If the toggle is on, all of the messages in the chat will be translated into the language of the other user. If the toggle is off, then the chat will be in the language of the user. There is also "see original" or "see translation" for each individual message. This feature allows users to learn languages in a fun and engaging way all while getting to know each other.
2.) Specific questions about language learning
In the onboarding, users are asked specific questions about the languages they speak and are interested in learning. Based on their answers, Tindoori then suggests our users to each other who may be able to teach each other. More than being a feature, these questions separate from other competitor apps by delivering our specific goal to our users at the beginning of their experience.
3.) Karma Score
Lastly, Tindoori has a feature called Karma Score, which essentially is an accountability feature to ensure a safe community amongst our users. They are asked questions that aren't biased or judgmental but questions that assure safety and accountability. Users can only give karma scores to those they have been matched and messaging to eliminate biased and subjective answers.
Design System
As my final task, I created a design system for the team. This wasn't necessarily part of the contract but I recognized a great need for one because I was leaving and didn't want to leave the developer with a Figma file that he didn't know how to navigate. This was an addition to the previous style guide I created initially. I added specific icons, margins, assets, and spacings that I used in designing the final prototype.
Key Learnings
This was my first time ever being a lead designer as well as my first project to be published and you can imagine the number of takeaways I've obtained within the 8 weeks. To point out a few, I've learned to:
- Lead/manage a project and communicate with partners to stay communicative from the UX perspective.
- Create designs that advocate our users that also meet business standards and objectives
- Work with constraints and push the boundaries while staying in one.
Overall, this contract was one of the most challenging yet rewarding experiences I've encountered as a rising UX Designer. I haven't been given much opportunity to fully execute my visions and creativity and to be trusted in designing a full prototype for a project so I am beyond grateful to be given this chance.
