Metastream Location Chat

Metastream sought to engage with the cohabitants of Seattle through an augmented reflection our environmental timeline. A map to see and understand surrounding realtime data and accessible only by being near a physical locale.

  • Role: Co-founder, UX / Product Design
  • Collaborator: Mike Shrieve (engineering, all browser implementations)
  • Built on: React PWA · Mapbox · Firebase · Google Cloud Platform · OpenStreetMap · Node.js · GitLab

It was a location-locked social layer for Seattle. The map only showed you content from your immediate area, unlocked by physical presence. Tap a locale marker and you'd see its rating, the messages people had left, and who else had been there. Leave a post of your own. Come back tomorrow and it would have grown.

I co-founded the project with Mike Shrieve, who built everything that ran in a browser: the React progressive web app, the Mapbox rendering pipeline, the Firebase real-time backend, user auth, geo-fenced queries, installable PWA on Android. I designed the product — user flows, the proximity model that determined what you could see, map interaction states, locale card layouts, how we'd handle unauthenticated users, when to ask for GPS permission, what happened when you deep-linked into a specific place.

We went from a rough concept sketch pulling geolocated feeds onto a tilted 3D city map to a working, deployed PWA at metastre.am. We built a Sculpture Park installation-specific build. We ran it against live OpenStreetMap data and public City of Seattle datasets. Six years of nights and weekends, learning everything that neither of us knew when we started, especially how to run a product together.

We built what we set out to do. Preserving the friendship was more important than crossing an ever moving finish line, so we decided to close the company. That was the right decision and six years of real work on a real product is the record regardless.

Metastream PWA — locale radius and map markers showing points of interest, built by Mike Shrieve
Metastream PWA — locale radius and map markers showing points of interest, built by Mike Shrieve.
Metastream PWA — geo-fenced locale view with user post feed, built by Mike Shrieve
Metastream PWA — geo-fenced locale view with user post feed, built by Mike Shrieve.
Metastream PWA — place detail with ratings and message thread, built by Mike Shrieve
Metastream PWA — place detail with ratings and message thread, built by Mike Shrieve.
Architecture overview and prototype map layer with locale tabs — built by Mike Shrieve, system diagram drawn by Jonny McConnell
Architecture overview and prototype map layer with locale tabs — built by Mike Shrieve, system diagram drawn by Jonny McConnell.
Initial prototype with geolocated Twitter posts and OSM points of interest, neighborhood boundary overlays — built by Mike Shrieve
Initial prototype with geolocated Twitter posts and OSM points of interest, neighborhood boundary overlays — built by Mike Shrieve.
Twitter and OSM data study exploring non-north map orientation — built by Mike Shrieve
Twitter and OSM data study exploring non-north map orientation — built by Mike Shrieve.
Locale querying based on user position — built by Mike Shrieve
Locale querying based on user position — built by Mike Shrieve.
Responsive web app with user login, user-generated messages attached to OSM shops, restaurants, and points of interest — built by Mike Shrieve
Responsive web app with user login, user-generated messages attached to OSM shops, restaurants, and points of interest — built by Mike Shrieve.
Mapbox visual study in map projection (left) drawn by Jonny McConnell; messaging prototype for users at a locale (right) built by Mike Shrieve
Mapbox visual study in map projection (left) drawn by Jonny McConnell; messaging prototype for users at a locale (right) built by Mike Shrieve.
Sculpture Park installation build — Metastream PWA installed on mobile phone, location-specific content active — built by Mike Shrieve
Sculpture Park installation build — Metastream PWA installed on mobile phone, location-specific content active — built by Mike Shrieve.
Installation-specific content with attached user messages — built by Mike Shrieve
Installation-specific content with attached user messages — built by Mike Shrieve.
User flow diagrams — drawn by Jonny McConnell
User flow diagrams — drawn by Jonny McConnell.
User flow diagrams — drawn by Jonny McConnell
User flow diagrams — drawn by Jonny McConnell.
User flow diagrams — drawn by Jonny McConnell
User flow diagrams — drawn by Jonny McConnell.
Map interaction and messaging studies — drawn by Jonny McConnell
Map interaction and messaging studies — drawn by Jonny McConnell.
Map interaction and messaging studies — drawn by Jonny McConnell
Map interaction and messaging studies — drawn by Jonny McConnell.
Pattern and visual hierarchy studies — drawn by Jonny McConnell
Pattern and visual hierarchy studies — drawn by Jonny McConnell.
Data analysis and content structure diagram — drawn by Jonny McConnell
Data analysis and content structure diagram — drawn by Jonny McConnell.
Original concept: geolocated social feed posts layered on a 3D city map — drawn by Jonny McConnell
Original concept: geolocated social feed posts layered on a 3D city map — drawn by Jonny McConnell.
Original concept: real-time location feedback mechanism — drawn by Jonny McConnell
Original concept: real-time location feedback mechanism — drawn by Jonny McConnell.
Concept exploration drawing from Normal Future — drawn by Jonny McConnell
Concept exploration drawing from Normal Future — drawn by Jonny McConnell.