_

A Democratized Map for Local Discovery of Nearby Places and Events

Goal: Build a product that enables a real time, ground truth view of what’s nearby allowing users to filter and create combinations for unique experiences.

*Below is an overview of the process that went into creating the Legend component of Live.XYZ.

Requirements Gathering

To create a truly functional map legend for modern day discovery, we decided to focus on producing an MVP legend that would allow users to do two things: discover what's happening right now near them and to get access to all the content that exists in the user's view port. This meant we had to create a time and viewport boundary, a content structure that exposed activity before places and easily allowed the user to get to a state that would surface the results. 

User Flow

The legend is a super center for information. While we wanted to showcase the extensiveness of content available, I needed to define clear user flows that would help channel users quickly into results and discovery. Below you'll see a bifurcation between users who were open to suggestions and users who were more intent driven. In each circumstance I was able to document the fastest path to browse that allowed our team to align on understanding the user path. 

Inspiration

We needed to build a system that could be quickly developed for prototyping but also would be modular enough that would allow for future components and tools to be added in. I drew a lot of inspiration early on from tools like midi boards that focus on color and encourage users to tap to create combinations. I like the idea of a system that inspires playfulness, and results where the user can easily clear their combinations. 

Early Wires

Below is just a snapshot of some of the early wires I came up with to show how we could organize a large volume of data. The most important goal was to allow users to consume various amounts of content quickly but allow them easy access to specific categories.  

Low Fidelity Mockups for Prototype

I'm a big hand of Invision's tool, freehand. It allows many different types of stakeholders an easy way to view progress, follow along during presentations, and leave notes behind if they are unable to be part of design approval meetings. Below is a series of low fidelity comps we agreed upon for our first prototype. The goal here was to test 'chiclet style' genres, vertical scroll of tags, and allowing users to see suggested pairs once they had made a tag selection. 

User Testing 

Our prototype took about 2 days of engineering time to build. Given the amount of data that changes on the map, we opted to use this time versus building out an Invision Prototype. I established a set of 5 tasks that would help us validate some key UX decisions in the prototype. Over the course of a day, we tested this prototype on 8 different new users. We used a tool called Lookback to document tap targets and audio recordings. Below is a highlight of some of the findings. 

Developer Handoff

Here are some of the final specs delivered to engineering. We ended up going with a short stacked column and a horizontal scroll. This component became a standard UI in the legend. New sections of content live in a vertical scroll and parts of a content segment scroll horizontally. 

User Testing Round #2

We released our first version to a beta group and conducted another quick round of user testing. Based on feedback, we made some changes to the default state of the legend, created a universal search bar that allowed users to see all choices added in one place, and we also added a few new delightful design components. Below are some of the insights. While there was still a lot of unresolved UX challenges, we were able to make some quick improvements that pushed users into the legend experience quicker which introduced more discovery and ultimately making a choice on where to go.  

Hi Fidelity Updates through Team Collaboration

Once again, we relied heavily on freehand for fast feedback. Below are some conversations around a universal 'View on Map' button. Ultimately we decided to hold off on adding this button into the current UX.