How can you see your Instagram pictures on a map?

Our development and design team created Geograpics, a place where Instagram users can both see their pictures on a map and filter them by date.

Part social media site, part vacation organizer, users log in to see their Instagram posts tagged with geolocation on a global map. They can also connect with other users, create albums, and apply a search filter to see photos taken within a specific date range.

Who wants this product?

Our team was tasked with creating a similar product to Instamaps, an obsolete feature on Instagram. As researchers, we needed to understand why this product had failed before, if there was a market for this product now, and if there was a market, what users expected from this feature. Our hypothesis was that travel bloggers were most likely to find Geograpics valuable as a way to share their photos and promote sponsorships from hotels and travel package

We set out to determine the following objectives:

My Team

I was the one of two UX/UI Designers in a team of 8, including 2 back-end developers, 3 front-end developers, and 1 Facilitator. The project lasted 8 weeks.

User Interviews

Our UX team conducted 30 in-person and video interviews to understand why users want to see their Instagram pictures on a map. Our interviewees comprised of a diverse mix of race, ethnicity, gender, education, profession, occupation, income level, and marital status, ranging from teenagers to senior citizens, with a concentration in the 18-35 age range.

From user interviews and feedback, we discovered:

Users were motivated by personal nostalgia
Users needed a way to keep track of their photos
...and where their friends had been

Surprise finding...

Our team assumed that travel bloggers would be most interested in this site, but our target audience, Millennials ages 18-34, were most interested in seeing their own photos for nostalgic reasons or seeing their friends’ photos so they could follow them to the places they’d been

Market Research

Through a comparative analysis we reviewed several similar products to determine how users interacted with them. We then interviewed users on how they perceived these products - if they were useful (if there was a market for our product) and if their design was appealing. Two examples of products we reviewed were Twimaps and Google Maps.

Twimaps

Because the same developer created Twimaps and the now-defunct Instamaps from the same template, we interviewed users to understand how they would interact with this product

Findings

Google Maps

Google’s design features a clean and modern map. We wanted to understand how users received this design style in contrast to Twimaps

Findings

What steps do we need to take to create a high-fidelity design that will delight users? 

Daily Journal 

Stay organized as a team create documentation and record findings made individually so the team can access all findings

Sketching

Designers can get attached to their work if they move to hi-fi too quickly. To ensure we created a logical layout with an appealing UI, we rapidly created multiple paper iterations to generate as many ideas as possible, then showed them to users to determine which basic layout was favored.

paper sketches

Crazy 8s, pen & paper sketches, paper ideation testing with users

Digital sketching

Invision freehand, used by the team to create collaborative sketching sessions. Our UX team also used Figma to create Grayscale wireframes for preference testing

Preference testing

Our UX team conducted 4 usability tests, both in-person and by sending screenshots to users to determine which iteration of a modal, profile, or album was preferred

We also conducted a map preference test - surprisingly, the normally colored map outperformed the abstract pink and purple hued maps

Reasons users gave for choosing the more familiarly colored map:

"I want to see where parks are on the map, and the green squares help me orient myself on the map."

"I feel like the pink would be good for a designer, but I can't read the map when it's monochromatic."

"I know how Google Maps works, and the normally colored one reminds me of that.
High Fidelity

After sketching, ideating, and testing, we added color to our designs, built our maps in Mapbox, and fine-tuned button, search filter, and album interactions

Stealth blocker

After several rounds of user feedback, we determined our original idea for a date slider was an obsolete design. We then created the idea of a sidebar with a calendar that users could choose dates from. We then had users vote between all the options.

What are our takeaways?

Through research we found that though a similar product had failed in the past, there was interest among our target age range of 18-35

Conclusion - Geograpics does have a market

Go to next case study