My Design Process: Make A Photo Collage on Instagram
My approach to developing a new product feature for Instagram
Instagram is a great product. I use it quite often myself. It lets you share stories of your life with friends and the world. But sometimes, it is pretty challenging to just use one photo to tell a compelling story. No wonder a Google search for “how to create collages on Instagram” returns over 9 million results.
This is the prototype and I will explain how I got there ☺
Problem
I noticed that many Instagram users post photo collages—pictures with multiple different photographs arranged in an artful way, often telling a little story. But, to get these collages into Instagram, users must currently use 3rd party apps. These apps don’t offer the same great user experience as Instagram does, and are usually quite buggy.
My goal here is to solve this problem — to let users share multiple photos at once easily, simply, and beautifully. (You’ll see a prototype at the end of this post.)
Project
As a design challenge, I researched, ideated, wireframed, and prototyped a collage feature for Instagram users. This feature is simple to use, and consistent with the updated Instagram UI. It gives users more freedom to capture the moments they love and tell compelling visual stories.
My Role
As the user researcher and product designer, my role is to develop:
• Persona • User Stories • User Task Flows • Wireframes •User Interface Design • Prototype •Usability Test
Epics
An epic is a large scale user story that provides an overview of a feature — a high level design story. It helps me fully think through my designs. Here are the epics I’m addressing with this project.
Users can create, edit, view, share and delete image collages
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, etc.
Persona Development
To try and understand the people I am designing for, I created a persona. This persona will 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:
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 included a lot more editing features into the application, 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.
Wireframes
My next step was starting 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, this version enabled users to create collages the quickest and easiest. (There will be another post about why I did not choose the other designs. Oh iterations☺)
Below are the detailed wireframes I developed based on the sketches above. I assumed that maximum of 3 photos in a collage would be the best for the feature for now, 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.
Prototype
I tested my low fidelity wireframes with some colleagues and created a quick high fidelity prototype to test more. This prototype helps 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.
Below is the video you just saw earlier, demonstrating how users might use this photo collage feature in Instagram.
The next steps will be:
- Validating my design
- Usability test
- Make Adjustments
- Iterate
As an avid and happy user of Instagram, I had a great time working on this project. I’d love to see this feature in the real app someday. It would be great to see if a collage feature would work well and get data from users to iterate.
If you have any follow-up questions or comments, feel free to send them to me at: floral2lin at gmail.com . Or tweet me at @linafab Would love to hear what you think and if you have any suggestions on how to improve this feature, I’d love to hear!
Note: I do not work for or represent Instagram. I chose to do this feature as a design challenge. I always want to design products that serve people well and make this world a better place. ☺
