Gamified friend-finding

Project Details:

January 2021 - February 2021

Design Team:
Sri Narasimhan (Product Designer - Mobile), Arely Mancia (Product Designer - 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.

The Ask:
I was tasked to design the Quiz feature for the mobile side, including testing responsibilities, through implementation.

How can Pop attract new users and increase user engagement?

Enter: Quiz

Quiz is a new feature where students can answer personality questions and post the results on their user card, with the hopes of sparking conversations and getting users to download Pop's mobile app.

Collaborative Ideation

Before creating wireframes, the product team gathered to discuss a few burning questions:

  • Rewards.
    What do people get out of taking a personality quiz?
  • Target Users.
    Who will be using this feature, and what are their experiences and associations with it?
  • Integrations.
    What moments can we create that connect this experience with other parts of the app, and vice versa?

Perhaps the biggest question of all - what problem are we trying to solve?

Problem Identified

Lo-fi Concepts

Here, I prioritized feasibility and simplicity for dev: what can we reuse, and what should we cut out, and does this address what we discussed in ideation?

After mocking up some wireframes, I collected feedback from the product team. Here's a sample of their thoughts:

  • Hold-off on a holistic quiz results page.
    We're only releasing 1 quiz so it's unecessary right now.
  • Results shouldn't muddy up user cards.
    We'll give users an opportunity to showcase results in their avatar.
  • Sending invites should be as easy as it is on other parts of the app. Reusing this will save time for dev.

Mid-Fidelity Screens

Here, I championed usability while still finding ways to trim excess features and interactions.

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's just a sample:

Taskflow 1: Quiz Content

  • Users shouldn't have to work hard while taking a personality quiz.

    ➯ Instead of swiping up, I made it so that questions auto-advance.

    ➯ I enabled a "back" button so they could do just that.

Taskflow 2: Results + Invites

  • A good product is consistent.

    ➯ I preserved pop's homepage "carousel" interaction for the Quiz results page.

    ➯ I also made sure users could send invites just like they do across the app.

Taskflow 3: Edit Avatar

  • New features should come with fun surprises.

    ➯ 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.

Learning Outcomes & Success Metrics

TLDR: I learned a ton of Figma hacks + Quiz gave pop some great buzz!

  • 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!
  • In the first week of launch, Daily Active Users (DAU) increased by 100% and Weekly Active Users (WAU) increased by 40%.