pophop: poppin' bubbles to integrate into new social spheres

As adults it can be challenging to meet new friends, especially in a big city like San Francisco. Sometimes we need a little nudge to force ourselves out of our familiar social bubbles, encouraging curiosity and discovery.

Inspired by an episode on the podcast Invisibilia and my own personal experiences, this product uses playfulness and discovery to counteract the challenges of finding meaningful relationships as an "adult."

Using a vibrant visual identity, pophop is an augmented reality scavenger hunt and events space all in one place. The goal is to create meaningful connections in a fun and novel way.

role
UI | animation | prototyping

Visual explorations

I really love color and pattern explorations. It's one of my daily hobbies, so mood boarding is always an enjoyable process. I dove into a couple initial visual concepts, one speaking loud with richly vibrant colors abound, the other a softer, fresher feel, flourishing in bright pastels.

Capturing the vibe – mood boarding

Explorations continued

From a modern and bright exploration to a minimal, geometric and retro examination, I played with two distinct visual identities.

Screen Shot 2018-06-20 at 9.44.56 PM.png

Screen Shot 2018-06-20 at 9.45.11 PM.png

Screen Shot 2018-06-20 at 9.45.21 PM.png

Screen Shot 2018-06-20 at 9.45.35 PM.png

Screen Shot 2018-06-20 at 9.45.46 PM.png

Screen Shot 2018-06-20 at 9.46.03 PM.png

Design journey: personas, wireframes, UI animations

Personas

Through interviewing a number of people in their mid 20s - early 40s, I noticed a trend in the difficulty of cultivating new relationships. These 2 personas combine key insights I uncovered.

Wireframes

See larger here.

Key task flows

How to select an event/party to attend

2. How to get to a party/event (see it bigger here)

Another key component of this project was exploring playful and functional animations and interactions.

UI interactions + animations

How it works + final designs

Experience process: Part 1

Take your pick

Find what event appeals to you. Choose between dance, games, food, art and more.

There's a catch

Here's the catch, you only know the date of the event, not the time or location yet...

You're in good hands

Two hours prior to the event, you receive a notification that holds the first clue. Yep, this is a scavenger hunt that leads you to the final destination.

Experience Part 2

Oh goody!

Your notification is here...time for the fun to begin.

Clue time

Your clue will pop open after you swipe the notification. You have a time frame allotted for each clue...the timer starts the countdown once you open it.

The clues continue

Once you get to the 2nd clue, it's time for AR! You can only see and read the next clue through your phone. Think Pokémon GO.

Experience Part 3 and beyond

Yes! Now we get to party (or eat, or do art, or whatever your event is about)

You will continue through all 3 clues until you make it to the final destination.

Once you get to the event, you check-in on the app. This way, if you meet someone at the event and didn't get their contact info, you can always go back into the app and message them internally from the event log.

Also, the more events you attend, the greater your log looks, filled with the event posters to mark your bubble poppin'.

Final mood board

After showing my initial visual concepts to my advisors, they inspired to make it look more electric. Big pops of color correspond to the name itself, pophop!

Style guide

Thoughts, considerations, further explorations

Create task flows for all scenarios like:
- What happens when a player doesn't get a clue right?
- Needs extra navigational support?
- What happens when there's more than one location for the place a player is going next?
"Brand" the clues to correspond with the location. For example, in clue 1, it takes the player to Blue Bottle. I could design something to represent Blue Bottle, or bring the business in to participate in the game. Could be a fun marketing opportunity for small businesses.
This game/app/event space aims to bring people together who wouldn't normally meet. However, the visual identity of the app still appeals to a certain subset of people. A question for me is: How might I create a more inclusive visual design?