Add new feature for Instagram
Project Brief
During this project, we are going to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. The feature we develop will be based on an area of functionality to be explored and compared to user input.
My work will culminate in a high-fidelity prototype of a native app that reflects my best path forward based on research, iteration, and testing. I have designed the app based on the iOS platform.
Product Choice & Background
For this project, I decided to work on the 5th most used social network in the world that is INSTAGRAM. It uses posts, reels and stories to highlight the photos and videos that its users have shared. The app is primarily used to keep up with friends and favourite influencers in different fields and some brands uses it for shopping also.
History
Instagram (commonly abbreviated to IG, Insta or the gram) is an American photo and video sharing social networking service created by Kevin Systrom and Mike Krieger. In April 2012, Facebook acquired the service for approximately US$1 billion in cash and stock. The app allows users to upload media that can be edited with filters and organized by hashtags and geographical tagging. Posts can be shared publicly or with pre-approved followers. Users can browse other users’ content by tags and locations and view trending content. Users can like photos and follow other users to add their content to a personal feed. (Source: Wikipedia)
Logo Evolution
Research & Findings
Even if the problem has already been identified, it is too soon to go on to the ideation stage and devising a solution. Let’s begin with the research process.
Feature Competitive Analysis
For the competitor analysis, I decided to choose Instagram’s 3 big competitors, Facebook, Snapchat and Twitter. In the chart, you can different features these companies have and what features they don’t have. And this feature competitive analysis will help me to structure my further research.
Market Positioning Map
A market positioning map depicts a brand’s aim or technical placement in relation to other brands. Two target properties are required to generate a positioning map (to plot the x and y axes). Here I have chosen Easy Interface + Hard Interface and Personal Content + Business Content as my two properties. And based on my two properties you can see where the competitors and Instagram are currently and where Instagram wants to reach in future.
Affinity Map
“An Affinity Diagram is a tool that gathers large amounts of language data (ideas, opinions, issues) and organizes them into groupings based on their natural relationships”
I interviewed 5 people to know more I collected my data and placed them on the Miro board by using sticky notes. Then I grouped the similar responses together and gave them a label.
Proto Persona
Let’s say Hello to the Social Media Savvy — Sam.
I created this character by combining the affinity diagram’s pains and gains into Wants & Needs, Motivations, and Frustrations.
Small Intro: Sam, A Digital marketing strategist working in Paris, France, loves to work on social media platforms, especially Instagram as part of his job. He likes to read and get inspired by different articles and posts but he feels a bit annoyed by the fact that every time he wants to read an article he needs to go to the profile and click on the link in bio and look for the article. He thinks it’s complicated and it’s a waste of time.
Some of Sam’s main goals were:
- “I wish I could find a clickable link in the captions or in the images.”
- “I want to simplify the process of finding an article I loved.”
- “I want to solve the time-related problem.”
- “I wish there could be an easy option to click on the link and read the whole article.”
Some of Sam’s main pain points were:
- There are no clickable links in the captions or in the post image.
- “Link in Bio”, is annoying.
- After a while, It’s complicated to find an article I wanted to read.
User Journey
After combining both Proto persona and affinity map we created the user journey map.
I created a scenario and divided that scenario into 5 stages (all explained below).
Scenario: Sam likes to spend time on Instagram and likes to read different articles or check out different products from different brands and influencers. But every time he wants to read an article and sees “Link in Bio”, he gets annoyed and gets frustrated because it takes a lot of time and the whole process is complicated.
One day he finds this new update from Instagram where they add a new feature called ‘Clickable Links’. He is happy because with this new feature he is able to navigate directly to the article by just clicking on the image or by clicking on the link mentioned in the caption.
Stage 1: Time to spend some time on my favourite app ‘Instagram’ and read some articles and check out some cool products.
Stage 2: He liked a post and he wants to read more about it.
He started looking for the link in the caption but the caption says “Link in Bio”.
He goes to the bio of that brand and clicks on the available link, which ends up opening another window with a lot of articles.
Stage 3: Search: He gets angry because he is not able to find his article. So he decided to close the application.
Stage 4: Next day, he receives an update notification from Instagram which says “New update: Clickable link”.
With this new feature update, he will be able to navigate directly to the article without any additional steps.
Stage 5: He is very happy with this new feature and happy to read more posts and articles easily.
Problem Statement
Every Instagram user needs to find a way to navigate easily to the article or product page because they don’t want to spend more time searching for the article by clicking on “Link in Bio”.
Hypothesis
How might we help users navigate easily to the article or product page so they don’t have to follow multiple steps to open the link?
New Feature
By this time you might have realized what feature I would like to introduce. It’s “Clickable link on the post”. With this new feature, the users will be able to access the post with links directly from the home feed. They don’t have to go to the bio and click on the link and look for the article.
User flow
Now the feature has been decided, the next step is to create a happy path or the user flow.
“User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action”
Low fidelity
“Low fidelity wireframes are just a quick sketch that can make ideas more tangible.Lоw fidelity wireframes are usually black and white schemes or simple sketches on paper focused on the “big picture” of the page/project. They show UI elements like boxes and lines without detailed annotations.” — Mentormate
Mid fidelity
“Medium fidelity wireframes can help to communicate to teams how aesthetic features can support essential functionalities.” — Mentormate
Mid fidelity Test results
After finishing the mid-fidelity, I decided to do useability testing with 5 people. And below is the image where you can see before and after results.
Some key changes to be made where
“The pop-up is too big and it’s covering the main post”
“I liked the article and want to add it with my friend.”
“It would be nice if I can translate the article directly from Instagram”
“What if I want to bookmark this article?”
Atomic Design System
“Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.”- Adobe
The Atomic Design process is divided into five stages, the first three of which are modelled after their chemistry counterparts. Each stage builds on the one before it, acting as a collection of objects from previous stages.
- Atoms
- Molecules
- Organisms
- Templates
- Pages
High fidelity
“High fidelity wireframes take more effort to create, but they are effective in that they reveal how a product will look at project completion.” — Mentormate
The third step was to develop a high-fidelity prototype based on all of the feedback received from the previous two prototypes, as well as numerous rounds of testing.
Building out all of the elements, grouping the components, linking the prototypes, and so on took some time to get used to. But, to be honest, I’m overjoyed with the results.
Here is the final working high fidelity wireframe on Figma.
Next Steps
Takeaways
“Test, test, test, test!!” has to be my primary takeaway, especially as a heavy user. I wanted to stay unbiased, and testing allowed me to observe diverse points of view from various types of users. When I tested with users, I acquired a lot of useful information and feedback. Each iteration yielded new insights, which I incorporated into the next version.
Each prototype (low, mid, and high) received useful feedback, which helped improve it to its ultimate form. And I hope you had as much pleasure reading this case study as I did implement the features.
Now, let’s hope Instagram gives us a nice present and actually implements these features in their next feature release.
