Gabbermap is a community-powered map of all the things you love. (My first foray into entrepreneurship and UX design.)
Place Pixel - 2016
Alex Padalko - Frontend Dev
Matt Oconnor - Backend Dev
Scott Liang - UX, UI, PM, CEO
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.
One of Gabbermap's most distinguishing features is the Gabber Grid. It's designed for two specific reasons:
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.
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.
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.
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.
Basic components are used to construct more complex ones ("molecules"), such as the notifications system shown here.
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.
Notice how Place Pixel JSON can be dynamically applied across many content categories. Here, from Pokemon, to local radio stations, to movie listings.
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.
Two user-engagement strategies were particularly successful:
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.
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:
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 :).