pophop_banner.png
 

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.

key skills
UI, animation, prototyping

tools
Photoshop, Sketch, Principle

advisors
Assaf Shalev
Brian Pelsoh

timeline
4 weeks

 
 

visual explorations

blue_background.png
 

Initial Mood Boarding

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. 

 

 

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

blue_background.png
 

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 

 

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


 

UI Interactions

This project was also an exploration playing with animations and interactions.

 
pophop_load_screen.gif
pophop_clues.gif
pophop_1.gif
pophop_party.gif

How it Works

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. 


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.


 

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

 
 

further opportunities 

blue_background.png
 

Thoughts, Considerations, Further Explorations

  1. 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?
       
  2. "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. 
     
  3. 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?