work /
Gabbermap
work
ux design
product management
entrepreneurship

Gabbermap is a community-powered map of all the things you love. (My first foray into entrepreneurship and UX design.)

context /

Place Pixel - 2016

team /

Alex Padalko - Frontend Dev

Matt Oconnor - Backend Dev

Scott Liang - UX, UI, PM, CEO

Give Gabbermap a try!

1.0 Gabbermap

Gabbermap was first conceived as Place Pixel during the Networked Urbanism studio at the Graduate School of Design. Unwilling to let it vanish as yet-another-university-project, I shepherded it though an improbably journey from the classroom, to the Harvard Innovation Lab, to the ERA accelerator, to a fully-funded startup in NYC.

Today, Gabbermap is designed to be a map for all varieties of people and interests to thrive (think: Reddit for the real world). Whether you're interested in food, or Pokémon, or celeb sightings, you can enjoy it here.

 

So much of what makes life special is missing from the maps we have today. Through a combination of data collection and community contributions, Gabbermap aims to fill the gaps.

1.1  The Gabber Grid

One of Gabbermap's most distinguishing features is the Gabber Grid. It's designed for two specific reasons:

  1. Allow for areas to be taken into account rather than only pinpoint locations
  2. ‍Overcome the crazy mess caused by map pins when a large amount of information is added

 

The Gabber Grid can be easily filtered down to the content you desire. Posts within each tile are displayed in a nice, clean list.

 

Zooming out causes tiles to consolidate, allowing for a quick overview of larger areas.

 

1.2  Onboarding

Since the Gabber Grid UI was so novel, we needed an effective way to teach users how to use it. Notice how registration is skipped entirely (to conserve mental energy for learning), permissions priming is friendly and fast, and interactions are taught through participation. The user's real map is loaded behind the "tap on the square" screen so that she is seamlessly transitioned into the primary experience. Smooooth as a baby's bottom.

 

1.3  Posting

Simply tapping on the plus icon allows for users to quickly post (Gab) new content in their respective Groups. Animations scale to and from the selected tile to assist with comprehension and the map is instantly updated. Additionally, posts for each Group can be programmed to auto-format in certain ways: Here, Pokémon tags and imagery are automatically added.

 

2.0 Design System

One of the challenges in creating Gabbermap was accommodating the vast amount and variety of information it contained. As a result, we needed to develop a design system that could adapt to different content types while still withstanding the rapid iteration that a startup environment demanded. We call this system: Place Pixel Atoms.

2.1  Molecules

Basic components are used to construct more complex ones ("molecules"), such as the notifications system shown here.

2.2  Dynamic Templates

We also developed a templating system called Place Pixel JSON that allowed for custom presentations of different content types. When loading a post, the backend passes a JSON file to the client, which quickly reads it to build a bespoke, native post UI. Huge props to Alex Padalko for spearheading this effort.

From template to native UI

Notice how Place Pixel JSON can be dynamically applied across many content categories. Here, from Pokemon, to local radio stations, to movie listings.

PPJSON with different styles and content applied

3.0 Reception

Our peak activity occurred in the summer of 2016, when the Pokémon GO craze brought in a surge of users who were desperate to find and share Pokémon locations. During this period, roughly 24,000 comments were made and 1,600,000 votes (now hearts) were cast.

This was an enriching, somewhat crazy-making time. One one hand, we were scrambling to keep users engaged—on the other, keeping the product from exploding under the unexpected load.

3.1  Engagement

Two user-engagement strategies were particularly successful:

  1. Running weekly Pokémon-related competitions (this not only gave users something fun and unique to look forward to, but also brought them together to develop a sense of community)
  2. Inviting power users to discussion threads to help guide development

Competitions and discussion threads

3.2  Planet of the Apps

Shortly afterwards, we somehow ended up alongside Gwyneth Paltrow on Apple's Planet of the Apps. Give me a shout if you'd like to know more.

At the Goop popup shop in LA

On set

3.1  Lessons

In the end, Gabbermap was unable to attain the significant user-engagement numbers required to raise an additional round of funding. The most key lessons are as follows:

  1. One of our initial assumptions was that we could achieve scale by aggregating lots of micro-communities, e.g. Pokémon players, street art enthusiasts, urban explorers, frugal students, and others. Outside of Pokémon players, who dropped precipitously in numbers after the craze died down, other demographics were either too low in engagement rate or too invested in their own (often crude, yet specialized) products.
  2. Another assumption was that scale would yield a new kind of "network value" that could become self-sustaining. While network effects were valuable to some extent, they were not enough to overcome fundamental issues with product and market.
  3. The vision of a single "map of everything," that could accommodate all interests and walks of life, was ambitious but ultimately impractical. Trying to do many things well-enough prevented us from doing any one thing perfectly. Moreover, this muddied our communication, causing us to invent different messages for different groups of people.
  4. The Gabber-Grid was inventive, but provided only marginal benefits to offset the learning requirements it brought upon users.

Creating Gabbermap was a phenomenal learning experience. Though it didn't reach the scale we needed, quite a few people still use it each day—so we'll keep it up and running for as long as we can :).

Give Gabbermap a try!