Instagram Image Optimization

A feature to aid content creators of all walks of life is added to Instagram in this mock projectt.

Details

Project Type - UI/UX Design

Role - End-to-end Designer

Client - Student Project

Tools - Figma, Miro, Whimsical, Maze

Project Overview

Ever since it has been created, Instagram has been a photo-sharing app more or less. Though many users utilize it as a space to share photo dumps and life updates, it's also a place for photographers, content creators, and businesses to share their work, often using it as a tool to network and gain some income through promoting their work online. 

The content on a content creator’s page defines who that creator is to their audience and pixelated or desaturated images do nothing to promote who they are in a positive manner. This is due to uploading a file that is either too small or large for Instagram to render in an accurate manner once posted. Though if you’re just posting photos from your camera roll, you wouldn’t even be aware of this issue, if you’re trying to post rather large files that you took on a fancy camera and spent hours editing to make your image look “just right,” a super desaturated image would be a cause for concern.

My contribution

As the only designer on this project, I had complete control over every aspect from start to finish. Being the second of three capstones completed within UX Academy, this project was produced on a similar timeline to previous projects but was done within the constraints of 80 hours. With this project, my goal was to add a feature relating to image and video sizing that would benefit content creators. Throughout my research process, I learned that being able to upload content at its highest quality on Instagram is not an easy feat and that having access to knowledge concerning proper upload sizing is found to be beneficial to content creators. With that in mind, I was able to add a feature to Instagram’s posting flow.

Process Overview

  • Competitive Analysis

  • User Interview

  • Persona

Research

Information Architecture

  • Site map

  • Task Flow and User Flow

  • Sketches

  • Low-Fi wireframes

Interaction Design

UI Design

  • UI Design

  • UI Kit

  • Hi-Fi prototype

  • Usability findings

  • Affinity map

Iteration and Implementation

Research

Within this phase, my goals were to understand…

  • the step-by-step process of exporting from their own software to uploading to social media.

  • the pain points content creators face when the resolution on Instagram does not reflect the initial quality of the image.

  • how much knowledge they have on image sizing and how accessible that information is to them.

Competitive Analysis

Key Competitor Strengths

  • Vero: high-quality and color-correct image.

  • Behance: able to generate a preview

  • Behance: advanced settings like “copyright”

Key Competitor Weaknesses

  • Behance: lags when generating a preview

  • Behance: Ambiguous error message (doesn’t identify why the project could not be posted).

  • Many of them decrease the quality

Findings:

User Interview

In order to better understand users’ thoughts on posting their work on Instagram, I conducted 3 user interviews ask users firsthand what their experiences/impressions are with sharing their work on the app. By doing this, I hoped to identify current pain points and potential opportunities with the website to better create a plan of action.

Needs

  • Post their photos/videos.

  • Focus on the content itself more than posting.

Frustrations

  • Separation between creator and personal accounts.

  • Posted images to look exactly the same after exporting from their computer.

  • Ease of sharing photos upon exporting from laptop to posting from app.

  • Knowledge of image sizing requirements.

Motivations

  • Not knowing before posting whether it will be compressed or not. 

  • Having to post reels as a photographer to gain exposure.

User Persona

A user persona was created to gain a cohesive understanding of audience that this feature would best serve. This persona is based on the most common insights that were made from the 3 previous 1-on-1 interviews.

Information Architecture

During this phase of research, a site map was created based Instagram’s current structure. This was created to best understand where the added feature could take place within the overall structure of the app.

Interaction Design

Task Flow

A task flow was created to understand how a user may use the website to accomplish a task. This task flow illustrates the actions a user would potentially take to post a photo using the Instagram app.

User Flow

A user flow was created so that I could map out how a user would complete tasks on Instagram and so that I could ensure that the app’s flow is simple

Sketches

In these sketches, I sketched the posting flow with my added feature.

Low Fidelity Wireframes

UI Design

UI Kit

Since Instagram is an existing app with its own established branding, I created a UI kit from its existing elements.

Iteration and Implementation

During this phase of research, 3 participants tested the usability of the interactive high-fidelity prototype and gave feedback. Findings were recorded and iterations were made based on that data.

Usability Findings

Usability tests were condicted over Maze in which users interacted with the prototype and reported back on their experience.

  • 2 participants who are also Instagram users.

  • Each test took no longer than 5 mins.

All participants completed the flow and gave thorough answers to the follow-up questions.

  • Participants agreed that this is a valuable feature and that

  • Having the feature within the app would be even more beneficial as opposed to a link within an article.

  • One participant suggested that the guidelines also be housed within the app’s settings so that the information can be accessible at all times.. 

Affinity Map

An affinity map was made based off of the results collected from the usability tests. Quotes and key findings from the usability tests were included.

Hi-Fi Prototype

Conclusion

Next Steps

  1. Make adjustments

    • I would make further adjustments based on user testing results and user feedback. This would include cleaning up the UI on the Instagram guidelines page to look more similar to instagram’s Help Center article about sizing to better stay on-brand. I would also want to show how the settings page would look with the Instagram Guidelines as an added page.

  2. Continue user testing

    • I would test the newer prototype and make any other necessary adjustments.

  3. Consider adding another feature

    • Creating a content creator profile, similar to the business profile, would be another feature to consider since many users during the user interviews expressed support for this feature.