Swipe Right is a mobile strategy game that we designed and developed in Spring 2020 in the Advanced Game Design course at Cornell University.
In the game, players can strategically learn what the protagonists like and dislike through speed-dating, with the goal of finding the perfect match. Swipe Right is aimed at players, aged 13+, who want to experience the game of online dating and enjoy puzzle-solving and strategic thinking. It allows players a chance to be the ultimate matchmaker as they find a perfect match for a lucky candidate in this puzzling and amusing dating game.
Our team, Cupid Studios, consisted of 5 developers and 2 designers. I was the Lead Designer for UI/UX and visual design, responsible for game ideation, prototyping, background illustration, UI animation, design specification, and branding.
Our goal is to create a simple and interesting game that has the potential to 'go viral' and also needs to be technically feasible based on our development capability. We did research on the existing popular mobile games, sought opportunities, and thought of 20+ ideas of all game genres. Eventually, we decided to create a game that simulates the contemporary trend of online dating and speed dating.
Focusing on the dating theme, we came up with detailed game mechanisms, presented them in class and got feedback, and iterated 8 rounds till we finalized it. I was solely responsible for creating all the non-digital prototypes.
Below is some game mechanism exploration that I prototyped.
Our finalized game mechanism is a single-player card strategy game. Below is the QuickStart poster I designed that shows how to play the game.
We wanted the game to have a unique romantic style that helps the game stand out visually, and eventually chose to use the vintage style, which was one of the Behance 2020 Graphic Design Trends, to add a sense of old-time classic romance to the nowaday online dating technology.
The features and elements of our style include faded/earthy colors, flat style, stripes patterns, clear shadows, polaroids, etc.
UI Assets & Logo Design
After discussing with Workday, we decided to focus on only one stakeholder, the students, for the ideation and prototyping.
For the ideation part, I participated in creating the User Journey Map, and was responsible for brainstorming the initial prototypes.
User Journey Map
Brainstorming the Initial Prototypes
After discussing with Workday, we agreed to narrow down to focus on developing prototypes for students with no goals and students with vague/general goals: Help students to find career goal and set workable plan accordingly.
When brainstorming the initial prototypes, I came up with some ideas that eventually became the main functions:
Exploring career choices (personal interests, professional / personality tests)
Providing job descriptions & other career information
Generating a skill tree for students to track their progress
Easily contacting advisors, admins, and alumni
We cooperated to created over 100 mid-fidelity pages, including 3 main functions (Explore, Resources, My Goals) and 2 supporting functions (Message, Settings). I and Li Chai were responsible for the Resources function part.
Mid-Fidelity Prototype: Resources Function
Usability Testing of Mid-Fidelity Prototype
To make sure the app can be applied to students in different types of colleges, we tested 5 students (Business, Hotel, and Undecided majors) in Cornell University and 4 students (Social Science, Business, Humanities, and Undecided majors) in Ithaca College. All of the students are either freshmen or sophomores, who are the target users of our product.
We tested the functions separately, as well as tested the overall flow. I’m responsible for testing the Resources function as well as the overall flow that links scenarios/tasks of all functions together.
Here are some of the key insights:
Guide users to the My Goal function. We find that most users think of My Goal function as a daily to do list, and don't know it's capable of tracking the progress of completing career related courses / skills.
Change the layout of Resources function. We find that most users tend not to click the General / Your Careers mode in the top tap bar.
Improve the design of adding goals in My Goal function. We find that many users get stuck a little when they're trying to find a way to add career goals.
Make the Your Interested Career card seem clickable. We find that some users don't click and check their Your Interested Career because they think it's not clickable.
Based on usability testing, I iterated the Resources function and the overall flow, and designed the High-Fidelity Prototype for the Resources part.
Resources function is where students can find all kinds of campus resources. On the top part there is General Resources for any student (with or without career goals), where students can easily contact advisors and admins, check all kinds of events, online forum topics, and clubs. At the bottom part there is Resources for Your Career for students who have set goals, where students can find the career information and campus resources that is related with their goal careers.
Users can see the detailed information about their interested careers, including Job description, Statistics, and Alumni Review.
In the Alumni Review, there will be alumni who have experience in this specific career sharing their opinions and suggestions about the career. Users can also contact Alumni if necessary.
Users can access to recommended skills for their goal careers.
They can add the skills to their skill goals, and then easily track their goals using My Goal function.
Similarly, users can check out the recommended university courses for their goal careers.
They can add the courses to their courses goals, and then easily track their goals using My Goal function.
Here is a video showing all the functions of this app:
Chen Lin - Data Analyst
Jiarui Hu - UX/UI Researcher & Designer
Jie Li - UX/UI Designer
Li Chai - UX/UI Designer
Lulu Liang - Product Manager
Suzanne Lee - UX Researcher