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.

Jump to lesson learned

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 goals 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 competitor analysis and other research. Mika is 37 years old and connecting with other people and helping them comes natural to her.

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:

I moved the pin icon under the posted image from the left (next to the "send" item) to the right, to be closer to the mentally related "save" icon.
I decided to design two paths to save posts on a personal map - one by clicking on the post's address above the image, the other via the new pin icon below it. This redundancy seemed important since some users had a strong preference for the entry point via address, yet some posts do not specify an address.

Initial wireframe

View 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:

an option to delete a pin from the personal map
a chance to see chosen collections under a Personal map

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

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

View prototype

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

View project

Let's elevate your digital experience together!

kowalska.joanna.ewa@gmail.com