A stylized screenshot of the StreetCred app homescreen displaying the game HUD, a map with POIs, and a call to action button to Add a place.
A stylized version of a POI as it's listed in the StreetCred app. The POI details read; Paquito's. Mexican. 40ft. 434 14th St New York, NY.
A stylized version of the buy cubes button in the StreetCred app. The button reads; Buy 5 Cubes. 1,500 tokens.
A partial view of a stylized leaderboard in the StreetCred app. The leaderboard lists the 1st through 3rd place players; DrLuigiHorse with 45 cubes awarded 0.02 BTC, maximus with 32 cubes awarded 0.01 BTC, and TJ with 16 cubes awarded 0.005 BTC.

StreetCred

acquired

Can we map every place in the world?

What’s a place? What isn’t? Let’s ask that another way. Who cares? That’s not a rhetorical or flippant question. For something, somewhere to be a “place”, someone has to care enough to tell people about it. And, tell them where in the world it is. A nowhere becomes a somewhere when someone puts it on a map.

StreetCred begin in early 2018 with the audacious goal of crowdsourcing the most complete, most up-to-date, and most open point of interest dataset in the world. I joined in June 2018 as the first design and engineering hire. For the next two years I worked with the team to build towards our lofty vision for what mapping POIs could be.

Note: In this case study I refer to work “I” did. This is to convey my contributions to the product, not to erase anyone else’s. I didn’t do any of this work alone. My teammates were with me every step of the way.

  • Hats worn

    Product, mobile, design, front-end, linchpin

  • Code used

    React, React Native, TypeScript, HTML, CSS, Mapbox GLJS

  • Platforms

    iOS, Android, The Web

  • Timeframe

    2018-2020

  • Status

    Acquired by Snap in 2020

Screenshot from the app intro showing empty map and prompting the user to tap a button to Show nearby places. Screenshot from the app intro showing nearby places available for points on the map and prompting the user to tap a button to Show dropped cubes. Screenshot from the app intro showing places the user has dropped cubes on the map and prompting the user to tap a button to Show a leaderboard. Screenshot from the app intro showing a stylized leaderboard. The map has zoomed to the user's local tile to show the available award amount. There's a button prompting the user to Show the tile they're in. Screenshot from the app intro with a zoomed out map to show the surrounding tiles and available reward amounts. There's a button prompting the user to Join the competition. Screenshot from the app intro showing the full game UI. There's a button prompting the user to Add a place for 10 tokens.

Show them the foundation

A hard part of any app is the onboarding. You want to help folks understand the object and expectations, but you don’t want to over explain. People are smart. With StreetCred we needed a quick, interactive way to explain the game mechanics, without slowing down first run momentum.

I designed and built the game intro that progressively displays real UI elements to show how the pieces fit together.

The Name screen of the Add Place flow
The Location screen of the Add Place flow
The Category screen of the Add Place flow
The Photo screen of the Add Place flow

Places make the map

Adding places was the heart of the app. Making this flow fast and fun was something that took iteration. We started out with something a couple steps removed from data entry. A winding form with enough questions that by the time you got to the end you forgot where you were.

By the fourth iteration (if my memory is correct) we landed on this snappy four step process. In under two years, our small but enthusiastic community used this flow to add over 100,000 points of interest throughout the world.

Anything else?

Yes. God yes, there’s so much more. We packed 5 years of design and engineering into 2. I have a bazillion screens, icons, sketches, map styles, React Native hacks, and on and on. Like everything on this site, this is a living document. More soonish.

Select work