Instagram

Personal map

Designing a new social feature for Instagram

Overview

How did it all start?
I’ve been a user of Instagram for years. I am very conscious about who I follow and concentrate mainly on architecture, travelling and art. Thanks to Instagram I discover new things and places which very often become my inspirations. I spoke to a group of people who also love Instagram and it turned out that they also miss a feature to better connect their stumbled upon inspirations with later travelling and exploring. Thus, I decided to create a feature that enables users to pin favourite posts on a personal world map to serve as a go to place to decide on where to go next.
Main design goals and objectives
  • Create a feature that allows users to pin Instagram posts on personal maps to facilitate travel and exploration decisions.
  • Design it in a way that it looks and feels like an age-long, integral part of the Instagram experience.

The process I used

Research
Empathize
Define
Design
Test
  • market and competitor analysis
  • user interviews
  • structure research findings
  • create persona
  • user flow
  • sketches
  • wireframes
    (low fidelity prototype)
  • affinity map
  • UI design (high fidelity prototype)
  • usability testing
  • iterated UI design

Research

Market and competitor analysis

My idea was to extend Instagram's mission statement from “capture and share the world's moments” to also “inspire travelling and discovering the world”. Based on this idea I concentrated on apps that offer map access and possibility to save ones findings.

I concentrated mostly on how the process of saving user's research is handled.

Many of the analysed apps offer personalised features yet few offer the possibility to tag findings on a map.

The UI of many of the analysed apps is rather appealing. Overall, there seems to be a huge potential in combining the Instagram content with saving findings on a map.

Market and competitor analysis

User interviews

The main goal of my research was to:

  • discover how users are currently saving their Instagram findings
  • discover unmet needs for categorising and saving selected findings
  • find out how users share  their findings with others

The interviewees were frequent users of Instagram who are eager to discover new places and inspiration. I interviewed 4 female and 1 male users whos age ranged from 36 - 42 years.

Conclusions
  • Participants actively look for inspirations where to travel and what to discover next. Currently they do so mainly by talking to friends and by looking at images (e.g. on Instagram). They also actively browse and look around when they stroll the cities/ other places.
  • They share their findings with friends and family and vice versa. Sharing usually happens in direct conversations, via Whatsapp or Instagram messages. 
  • How they save their findings varies: They use Instagram favourites, star Whatsapp conversations or search in past Facebook messages. They also like/follow places to receive updates about them. Usually they divide their findings into personalised categories. 
  • Two participants even pro-actively brought up the idea about a personalised map on Instagram to pin their findings to.
  • All of them use instagram on a daily basis. The scroll through about 15 posts a day. Also they browse stories of profiles they follow from time to time. They use Instagram usually in their leisure or loo time, and rather in the mornings and evenings than during the day.

Empathize

Persona

The final persona resulted from my provisional personas used for my competitor analysis and the results of my research. Daniel is 38 years old and loves to discover new places.

Persona

Define

User flow

Defining the user flow is one of my favourite parts of the design thinking process since it requires me to get concrete about how my solution will look like.

During this step, I realised that I need two, connected user flows. One to pin findings on the personal map. The other to browse ones personal map containing the personalised pins.

User flow

Design

Wireframes

When working on my wireframes I focused on ensuring that they correspond to the existing design system of Instagram. I made sure to have regular instagram users review already initial wireframes to swiftly learn what made them stumble and how to improve my design. Some early findings that helped me improve my design were: 

Initial wireframes

These findings and the fact that interviewed users otherwise successfully completed the user flow helped me move to a high-fidelity prototype rather quickly. Some additional findings from these interviews that I directly considered for my high-fidelity prototype were: 

Test

UI design

It was helpful to draw from the existing Instagram design system. What I noticed is that adding colours and images to the initial wireframes raised some necessary smaller adjustments to make my new feature clear.  Otherwise my high-fidelity prototype was ready to be tested.

Usability testing

Test findings

Four regular Instagram users tested my high-resolution prototype. All of them completed the tasks quickly and without stumbling. There was only one change to the design, namely to show the name of the collection also after having first created the collection, not only when navigating the existing personal map.

It was rewarding to feel the enthusiastic response of regular Instagram users to this new feature. Many stated (and I am confident not only to put a smile on my face :) that they would love to start using it right away.

Iterated UI design
One more finding

After the user-testing with regular Instagram users I showed my project to a couple friends working as UX Designer. They thought it would be great to add an option to pin a post on a personal map without having to create or allocate it to a collection. Thus, in one click. This varies from my previous interviewees who wanted the option to personalise and categorise their findings. Yet, I see the value of this additional "short cut" and would design for it in a next step. I would lean heavily on the existing behaviour of the "save icon" to be in line with Instagram's current behaviour and profit from its users being used to this convention.

Lesson learned

This project showed me again how beneficial it is to test your designs quickly, and at almost every stage of design process. The resulting findings helped me sanity check my assumptions and quickly remove stumbling blocks in my user flow.

It was very interesting for me to design a feature for an existing app because it required my design to be coherent and mindful of existing look & feels, conventions and behaviours.

I loved this project for these learnings and also since it enabled me to add more power to an app I regularly use and adore.

Other projects