Meeple
Overview
Meeple is a social dating app for Koreans in their 20’s and 30’s. I spearheaded the designs from initial ideation to final rollout as the sole designer and cofounder, working closely with the CEO, product manager, and engineers. The app will be launched in both Apple and Google Play Stores by the end of May 2020.
Role
Product Design / Brand
Time
August 2019 - Present
My design process
MVP Designs that are being built
Discover
Dating culture in Korea
It’s fairly common in Korea for people in high-income class to pay thousands of dollars towards matchmaking services in order to date people of the same socioeconomic status. These services help match people with others who have similar education background, income level, job title, and physical assets.
This may be a culture shock for someone used to dating in America, but a large segment of Koreans tend to believe that similar socioeconomic status equates to compatibility since one’s personality, values, and political views are shaped by one’s lifestyle and social status.
Challenges
1. Dating services cost thousands of dollars in Korea
In Korea, the application cost of joining a matchmaking/dating service range in the thousands. Young millennials who aren’t able to pay such a hefty price are left with apps like Tinder and Coffee Meets Bagel that are more catered towards the needs of people who are accustomed to an American dating culture.
2. It’s difficult to filter profiles based on specific preferences
Most Koreans looking to date have very specific preferences related to someone’s socioeconomic status such as job titles, education degrees, and salary. These preferences are not laid out extensively in American dating apps that have launched in Korea, resulting in low engagement and usage.
Research
User Research
After conducting secondary research, I interviewed 9 dating app users in our target age group (25 - 38 y) in order to
Understand people’s needs and pain points when they are using a dating app.
Determine what qualifications are important when people look for a date.
Users’ Needs Defined
People message often but don’t meetup
Jihoon had a handful of conversations over the last couple of months, but nothing led to an in-person meetup. He had one match where they texted all day and eventually he asked her out for coffee but she never got back to him after that. Currently, he has been in five long conversations for over a month and hesitates to ask one out on a date due to the concern of being ghosted in the end.
Women need to feel safe and secure to meet in person
Jina has had a long conversation on a dating app for 3 weeks but there still isn’t strong chemistry. It’s hard to have in-depth conversations to learn if the other person has similar interests and taste. She also wants to make sure he’s safe to meet before seeing him in person. However, short details of a profile don’t help her feel secure enough.
These are common stories that people on dating apps have, where they become frustrated that they’ve ended up as pen pals. To tackle these problems, we created a new generation app to help people like Jihoon and Jina.
Facts & Insights
53% of people have lied on their online dating profile
The interviewees said that unreliable profiles deter them from meeting in person the most. I found that they wanted more trustworthy profiles to establish their own safety and decide whether or not to meet in person.
Common interests are the most important
According to surveys, 64% of people who use online dating apps are looking for someone they have something in common with. There’s also a greater chance of finding someone who has a similar lifestyle during networking events. However, based on user interviews, we found that there’s a gap between people’s experiences and expectations.
Synthesis
With the interview results, I mapped out the user journey of our persona Jenny, including her thoughts and feelings. From this, I was able to temporally visualize Jenny’s areas of frustrations and create a focal point in the problem space. I found After matched phase is most frustrating.
Solutions
1. Create an affordable dating app
We wanted Meeple to be accessible to anyone. Signing up is free of charge and can be easily downloaded through the app stores (coming soon in March 2020).
2. Extensive preference setting
For someone looking to date others who have a certain level of education or job title, they can easily set preferences and view profiles in detail, increasing chances of having a decent shot.
Given the research findings, In addition to the above problems, I felt it was necessary to expand the scope. Therefore, we came up with these solutions to help users meetup in person.
Profile Verification
We utilized the game principle to encourage users to increase their tier level by verifying their age, job, education level, and special talents. The more profile details users verify, the higher chance of a match they could have with provided benefits.
Social Events
A social/networking service where people can conveniently spend time with others who have similar interests. This solution enables people to feel more at ease with asking someone on a date during a social event because they know they are both attending the event to find someone.
Competitive Research
Our challenge was to target the right audience and their needs to place the business in a competitive advantage. Since we plan to launch our app in Korea and America, I looked closely at dating apps used in both countries to analyze their strengths and weaknesses.
How we should differ from the competitors?
Increase reliability: Include ID verification & tier system to provide trustworthy profiles.
Benefits for safety: Provide more benefits to encourage people to verify their information.
Social events: Provide places where people with common interests can meet and get to know each other.
Ideation
Prioritizing features based on user needs
Based on our interviews and analyses, I prioritized features in the app according to business and user needs and translated them over when working on the information architecture of the app.
People’s expectations of a dating app includes good match-suggestions so we decided to have this functionality featured in the homepage.
Information architecture
After multiple ideation sessions with the team, we first defined 4 tabs in the navigation: Suggested, History, Events, and New Members. This app produces revenue by selling items and event tickets, so there’s a Store page included. It also has a Profile page where users can mange their profile to increase the possibility of a match.
This is the information architecture that I created:
Wireframes
I outlined the wireframes of the entire app and created several key paths of the scenarios to analyze user flows and interactions.
Final Designs
Onboarding
First time users begin with phone number verification.
Creating a profile
It’s important for Korean singles to feel the bond of true compatibility. They pay attention to specific drinking and smoking behaviors as well as basic information. Therefore, I created the very specific range of answers.
Uploading profile photos
Rearranging photos
I had initially designed a ‘drag and drop’ interaction for rearranging photos, but due to constraints from engineering, I came up with a more low-effort solution. The user taps on the the ‘rearranging’ icon at the top right and taps on the box they want the image to be placed.
Easier, less time-consuming, and pleasant profile setting up
Profile setting up is tedious and time-consuming but it doesn’t have to feel dry or boring. We offer the interactive chatbot experience that makes the process fun and light, which will hopefully encourage users to complete the interview. Users can also stop in the middle of the chat and access it later for submission since it’ll be automatically saved.
Verify it’s you
To ensure security of profiles to being matched, we ask users to take a photo of their face for identity verification. After our review, users will earn tier credits towards the next tier level shown in the different colors of badges. Users are allowed to do it later in their profile settings.
It explains the benefit of verifying profile and the way of doing it. The photo verification reinforces safety and reliability of profiles. Users were putting their faces too far away or too close, therefore, I made the circle UI so users know where they should place their face.
Verify profile details, and get more matches!
For easier verification of age, job, school and other qualities, auto capture is used. If the auto capture doesn’t work, users will be asked to take a photo and submit it.
Tier Badges
The higher tier levers users will get, when they verify their information such as photo, age, income, job, school, and location. After several iterations, I chose Option1 because the simple and clean badges are more aligned to the overall colors.
Design reviews and affinity mapping
After every iteration, I presented my designs to the CEO, product manager, and engineering team to get feedback and more insights on how I can solve for both business and user needs.
Main tabs
Since users will mainly access this app to find matches, the bottom navigation bar is defaulted to Cards where users can receive daily match suggestions. It’s important to clearly convey the purpose of the app from the main page. Each tab represents a different phase in the user's journey.
Daily match suggestions
Since our target users tend to look for more serious relationship compared to younger age group, we decided to suggest limited dates every day. To encourage users to verify their profile, with higher badges, users will receive more daily match suggestions, which leads to higher possibility of matches.
I explored several different layouts for the main suggestions page. After rounds of usability testing, we settled on a card design that’s easily swipeable and digestible.
Help users feel connected, it’s not a grocery shopping
One of the interesting findings was that many users are frustrated with card swipe or multiple profiles on a screen that current dating apps provide. Users want to feel more connected with potential dates instead of judging their photo in a second like a grocery shopping.
New design based on user feedback
To prevent cognitive overload, one profile is displayed at a time, allowing users to swipe easily to the next one.
Tags that summarize common interests are placed above the photos to help users quickly scan compatibility.
The different badges indicate different levels of verification which correlate to how accurate their profiles are.
User’s own profile photo on the top helps intuitively realize that it’s related to manage their profile.
Quick scanning profile details
One of our goals was to enable people to easily set preferences and view profiles in detail so they can increase chances of having a decent shot. Because sending a Premium Like or Like is the primary action, it has to be constantly accessible by the user. Therefore, I made the CTA buttons highly accessible through sticky components.
Increase chances
After 24 hours, the daily matches will be shown in Missed tab. Users can unlock missed profiles with payment.
‘Likes’ Tab
Received
Sent
Users tend to more frequently check out Likes they received, those are displayed as default. Also, to keep users engaged, it encourages users to delete or accept these Likes within 7 days.
‘Matched’ Tab
Matched profiles are shown in Matched tab. Their common interests will help them initiate a conversation and plan a date.
Plan a fun date together
Rating new members
I designed this rating scale slider UI to give users a more delightful and engaging experience. I built the slider using After Effects to hand off to engineers.
Discover a fun date
One of the problems that we tried to solve was to help people actually meet up. Based on user research, many people message often but it’s hard for them to set up a date. Safety issues deters female users from accepting a first date within 2 weeks. Planning a fun date is a burden for male users. Therefore, we provide events where they can spend time doing fun activities together.
To better understand the contents and quality of an event, users can contact to a host and get information about the host’s previous events.
Less steps to customize events
We don’t need to ask for extra data to customize events because it’s already collected through the onboarding process. Therefore we can provide customized events in categories that users are interested in.
Expert feedback
I shared the first version of the Event page with social event hosts and existing dating app users to get feedback. Thankfully, I was able to gain practical insights of the market intelligence from their experiences. The findings were shared through Zeplin with teammates.
In the first version, users were asked to put an event description, dress code, panel and performance information in the separate pages, which led them to providing redundant information and the flow didn’t match with their mental model. I grouped the description relevant questions and placed them in one page so users can seamlessly fill out the form by breaking it down to each step.
Different experiences from multiple devices
I tested the two options with an iPhone 8 and iPhone 11.
New design based on user feedback
Version 1, the swiping left navigation can expose a wider range of events to users but the calendar takes up half of the page due to the swiping navigation, which makes users feel frustrated with exploring many events in the narrow space. iPone 8 users wanted to have a bigger view of event photos.
Based on user testing, I realized that the collapsed calendar gives more space for event list and users are empowered to control in viewing contents. In terms that events list is more important than the calendar, option2 is selected.
Style Guide
I landed on a hue of purple and blue gradient as the primary color to create a “romantic and trustworthy” feeling to the product. I also used coral colors as the secondary color to bring an energetic vibe. The geometric grotesque type family, Quadran is used to establish a modern and young brand.
Interactions
I delivered designs with animations to help engineers understand the micro interactions.
Events list
I designed this page for users to quickly go over event details and choose one based on their preference. The events can be filtered by time, industry, and tier level and be sorted by rating, most recent, location, and mood.
I enabled users to toggle between Events and My Lounge. The floating Create button is placed on the bottom so it’s easy to be discovered.
Time matters most in search
I determined that most working professionals (our target audience) manage their schedule on a mobile calendar. If they want to search events by a date and time, they are able to add it to their calendar after purchasing a ticket. The calendar UI collapses once users choose a date to show more events.
Safety verification
Through a reward system, users earn higher tier levels after verifying their information. With a higher tier level, they will have more benefits such as attending more events and more match suggestions. Only verified users can create an event and limit them to a specific tier level.
Concept Video
I wrote the script, drew the illustrations with Adobe Illustrator and created the animations with AfterEffect. The colors and illustration styles are soft and romantic, aligned with our brand concept.
Next Steps
More user testing with our beta version
Meeple is in process of development and we decided to continue user testing with the beta version as much as possible before launching the app. We will make design changes as necessary for a better user experience.
Reflection
Communications with the cross-functional team
This is my first time creating an app from scratch as the sole product designer. I spent a tremendous amount of time discussing and revising user flows, visuals and interaction designs with developers and PM. I learned how to effectively deliver my rationale for users and compromise on decisions based off feasibility and work efficiency. My understanding of HTML, CSS, and Javascript reduced time for decision making. We have a common goal of creating a well designed useful app. Their different perspectives helped me broaden my views and improved my design thinking skills. My teammates motivated me to explore more design variations and interactions and I really appreciate their support.
Working as the sole designer
I learned that designers should be able to think ahead about the many cases occurring in the real world which usually aren’t covered in school projects. As I presented the design variations in the different flows with ‘What if?’ questions, I gained a holistic view of a mobile application in terms of an end-to-end experience and product strategies.
