Gamifying Friend-Finding

The Goal:

How might we attract new users and increase monthly active users and retention rates?

Pop wants to release a new feature called “Quiz” to help attract and engage new users, and they need designers to take the product from concept to launch. Our job is to design for both the mobile and web experiences, one to retain current users and the other to bring in new ones. Additionally, Quiz has to feel in place with the rest of the app and stay consistent with Pop’s current branding and mission statement.

Project Details:

January 2021 - February 2021

Product Designer (Mobile)

Design Team:
Sri Narasimhan, Arely Mancia (Web)

Pop is a gamified social mobile application that aims to help college students find friends. What makes pop unique: names and faces are anonymized. Learn more here.

I was tasked to design the Quiz feature for the mobile side, including both design and research responsibilities, through implementation.

Enter: Quiz

Here's what I designed for Quiz, with the goal of increasing user retention and engagement. I also made sure that what I designed fit into Pop's current design system and product strategy.

Pop's Needs

How can we quickly get this in the hands of users and leave them wanting more?

This is an experiment to see if Quiz will really help attract users and gain retention. Because it’s an experiment, we want to roll out a minimum viable product (MVP) to get our feature out the door and get data from real users to improve the product. If the product is a success, we will iterate on the original design from there.

Quiz Needs

What is the minimum this quiz needs to do in order to satisfy our users?

Through our product strategy meeting with PMS and engineers, we discussed the acceptance criteria for our first quiz:

  • The quiz must have a home in the nav bars of the app
  • The quiz questions and results must be based on the Myers-Briggs personality test, with an RPG theme.
  • The quiz must display the user’s results, other results archetypes, and recommendations to connect with other users based on the quiz results data.
  • The quiz must be created after conducting a competitive analysis with the viral "Snack Quiz".

Lo-fi Concepts

What can we do to make this the most feasible design for dev? What can we do to reinforce the purpose of Quiz?

We designed lo-fi screens and presented them to developers and users gathered their feedback. Overall, our feedback was positive, but we received a few notes to make the product more intuitive and straightforward for dev to build. Here are a few of the decisions we made:

  • Holistic Quiz Results - we considered including a page where users can see their holistic quiz results, but because we're initially releasing one quiz, we decided to hold off on this.
  • Results Badges - we wanted users to showcase results on their profile through a badge or "trait", but this would add complexity to their user cards. We decided to create RPG-themed Pochis (Pop's mascot) for users to display as their avatar once they've taken the quiz.
  • Sending Invites – to maintain consistency, we decided on sending invites just like a user would on the carousel (Pop's homepage), where the invite receiver can see that it was sent through quiz.

Mid-Fidelity Screens

How can I take what I learned from the lo-fi stage and trim the fat on the existing product?

After gathering feedback on our lo-fi concepts, I went back into Figma for another iteration. Here, I integrated some visual design elements, and after a round of feedback sessions with users and the product team, we made a few decisions to take with me in the hi-fi stage. Here are some of those improvements and decisions:

Taskflow 1: Quiz Content

  • I removed the "next" button to provide more space
  • “Carousel” (pop’s interaction design for their homepage) style for quiz questions
  • I disabled a “back” button so users don't go back to change answers. However, there's no auto-advance so users have time to make their decisions.

Taskflow 2: Results + Invites

  • I kept the "carousel" style for the results page to remain consistent with the rest of the app and provide a familiar action for the user
  • "Community" archetypes reflect compatibility with your given archetype
  • I designed the user recommendation card to mirror the user cards on the Pop homepage

Taskflow 3: Sharing Results

  • Users can share results through their native OS integration
  • On the receiving end, results will open up on the receiver's mobile browser

Taskflow 4: Edit Avatar

  • Pochis (user avatars) will be updated automatically to reflect a user's new quiz result. Users can go into their settings to revert their avatar back to the way it was before.

Success Metrics and Learning Outcomes

What did I learn, and how will we be measuring the success of Quiz?

  • Through designing this feature from scratch, I learned how to use and contribute to Pop's design system (plus a TON of Figma hacks!)
  • After each round of fidelity, I'd present my designs to the product team and leaders in the org. This taught me how to effectively present design work to non-designers!
  • To determine the impact of Quiz's launch on user retention rates, Pop will observe any changes in the rates of Daily Active Users (DAU) and Monthly Active Users (MAU)
  • Finally, we'll be observing rates of new users attributable to the Quiz feature.
Building Blocks