UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1298 August 28, 2014

I Love You, Instagram ... but Why Won’t You Let Me Make Collages?

Instagram is a great product and I use it often. It lets me share stories of my life with friends and anyone else who’s interested. But sometimes, it is pretty challenging to use just one photo to tell a compelling story. No wonder a Google search for “how to make a collage on Instagram” returns over 9 million results.

Instagram Google search

I noticed that many Instagram users post photo collages—pictures with multiple photographs arranged in an artful way, often telling a little story. But to get these collages into Instagram, they have to use third party apps that don’t offer the same great user experience that Instagram does (and are often quite buggy).

@Instagram users post collages, but have to use 3rd party apps that don’t offer the same great UX

To solve this problem and let users share multiple photos at once—easily, simply, and beautifully—I created the prototype in the video below.

Read on and learn how I put this together.

Building My Prototype

As a design challenge, I researched, ideated, wireframed, and prototyped a collage feature for Instagram, acting as the user researcher and product designer, developing personas, design stories, user task flows, wireframes, interface designs, prototypes, and usability tests.

Design Stories

Writing design stories is a very helpful agile technique to capture product functionality. They are detailed descriptions of what the users can do. Here are some of the design stories for my feature. Users can:

  • Take/select multiple pictures and use them to create a photo collage
  • Edit photos in photo collages
  • Choose collage templates
  • Reposition and replace photos in collages
  • View collages
  • Cancel making a photo collage
  • Add captions to the collage
  • Add location
  • Tag people in the collage
  • Share the collage

Personas

To try and understand the people I’m designing for, I created a persona to guide my feature development and help me focus on the key problem I am solving. It makes the design decisions less abstract and more human. Below is the persona that I created for this photo collage feature. Meet Lucy:

Instagram user persona

User Task Flow

Some people think of Instagram as a camera and some people think of it more as a photo editing app. Instagram recently added a lot more editing features, but they kept the camera experience very clean. I chose to preserve this user flow, and put my new photo collage feature within Instagram’s editing section. I’ve included my user flow chart below. The highlighted section is the main flow of my new feature.

Instagram user task flow

Wireframes

My next step was to visualize my new user task flow. I started with sketches on paper. I had a few different versions, but ended up deciding that the version below was the most promising. After some quick usability tests, I discovered that this version enabled users to create collages the quickest and easiest.

Instagram sketches

Below are the detailed wireframes I developed based on the sketches above. I assumed that maximum of three photos in a collage would be ideal for the first release of the feature, because it would give users just enough flexibility and control to enjoy the process of making and sharing photo collages. This is still a hypothesis that needs more testing. My assumption is based on user interviews, the size limitation of the mobile devices and the ease of use to create something with quality.

Instagram wireframes

Prototype

I tested my low fidelity wireframes with some colleagues and created a quick high fidelity prototype to test more. This prototype helped me further test my user task flow and catch any errors in the early stage. I am going to do more usability testing in the future to validate this design.

Conclusion

To be clear, I do not work for or represent Instagram. I chose to do this feature as a design challenge. As an avid and happy user of Instagram, I had a great time working on the project and would love to see my collage feature in the real app someday—given the number of people looking for a way to build collages that they can post to Instagram, I think there’s an audience for the addition.

ABOUT THE AUTHOR(S)

User Profile

Lin Wang is a full-stack designer and front-end development enthusiast who is passionate about technology. She loves creating user expereinces that make people's lives more enjoyable. She lives in San Francisco.

Add new comment

Comments

14
16

Great example of a UX workflow! I'd be courious to hear if you gave any thought to how a user could save a "collage in progress" If a user of this feature chose a more complex collage template, he/she might not realize that they don't have all the photos they need/or the best shots until they actually started the process of creating the collage. If the user had to stop mid-way through the process, they would loose all their previous work.

14
14

Love this! Great work. :)

10
9

great work!

14
11

Nice work! Can you please share with us what software did you use to prototype the app on the video to make it animate?

Thanks!

Eric

10
12

Thank you for your input, i love it. Could we improve the UX by giving the user the option to alternate the editing within the collage. I could envision a user not being happy with the editing cause it doesnt make a whole.

14
13

So cool Lin!

This is a great example of good comunicate UX. ;)

What tool you used to make the videodemo?

Thank you very much

13
13

yes! great work, and id love to know what you used to make the video too. tx.