Background
In June 2015, Instagram redesigned its desktop site to be more streamlined and minimalistic to align with the mobile app.
In August 2016, Instagram launched Instagram Stories, a feature that allows users to take photos or upload images to their stories for 24 hours. Users can edit their stories with graphics, filters, and layers before sharing.
Since Instagram's redesign in 2016, the mobile app has been at the forefront of social media.
Current Behavior on Instagram Desktop
On Instagram Desktop, users can currently use the +Create button on the homepage to only upload photos to post on their photo grid, and the photo will show in their Instagram feed.
Users can also use the Arrow button to send posts only as direct messages to friends and public profiles.
Current Behavior on Mobile
There are multiple ways to share posts to stories and upload photos to your story. Users like the flexibility in how they share or upload to stories.
Goals for Instagram Desktop
Share to Story from Profile Page (Add Blue+ as in mobile app)
Share to Story from Instagram Post (Arrow)
Add features and do not need to redesign Instagram
Why I Chose this Project?
While multitasking on my laptop, I noticed I could not share a story on my Instagram desktop.
I use Instagram to share fashion content on my stories, especially during major fashion events such as the Met Gala.
I wondered if adding Sharing to Stories would benefit Social Media Managers, Business Owners, or Content Creators.
Personas and User Stories
For this case study, I created two user personas and user stories. Throughout the study, I kept the user stories in mind as I worked toward adding the new feature of Sharing to Stories on Instagram Desktop. It was important to maintain Instagram's design structure and user interface and focus on adding new features to enhance the desktop user experience.
As an [professional] [business owner], I want [easily share to stories], so I can [efficiently manage marketing] for my business.
Professional Poster: Initial User Flow
As an [part time] [influencer], I want [to quickly upload multiple photos] to my stories, so I can [balance content creation] with my busy lifestyle.
Social Sharer: Initial User Flow
Low-Fidelity Prototype
Professional Poster Low-Fidelity Prototype
Social Sharer Low Fidelity Prototype
Usability Testing Round 1
For round 1 of usability testing, five active Instagram users tested the low-fidelity prototypes. The sessions lasted 30 minutes and were conducted over the course of a week. Below are the key insights and changes made before proceeding to the 2nd round of usability testing.
Insight 1: Users were surprised that Instagram Desktop was less developed than Mobile. They assumed the experience would be similar to Facebook Desktop and Mobile, which they feel is more developed and similar in user experience.
Suggestion 1: Make the share to story button larger and more prominent on the screen to focus on this feature instead of adding all the other menu options at once (sharing to X, Email, FB Messenger, etc.…).
Insight 2: when uploading photos they expect the flow to be the same as when uploading photos on their computer.
Suggestion 2: Do not show the uploading photos from the computer flow since users understand this step, and the functionality will follow the steps of their laptop's operating system.
Insight 3: Users' favorite feature of Instagram Mobile is Sharing to Stories. They would prefer to have this feature as part of their desktop experience. Users enjoy the multiple ways to share stories on the mobile app.
Suggestion 3: Add the ability to share a Story from the “Create” button on the left-hand side of the menu, similar to the mobile app. So, there are multiple ways share to stories.
Mid Fidelity/High Fidelity Prototype
Professional Poster Round 2
Social Sharer Mid/High Fidelity Prototype
Social Sharer +Create Mid/High Fidelity Prototype
Usability Testing Round 2
For Round 2 of usability testing, I updated the user flows based on the feedback from Round 1. The prototypes are now mid/high fidelity with more functionality. I also added user flow utilizing the +create button as an option to share to the story.
Since Users are very familiar with Instagram Mobile, they instinctively follow the same flow on the mobile app. The flows need to be similar to the mobile app because it feels more user-friendly.
“That was super easy, and it felt very similar to what you would normally be doing like the flow felt very similar to what I do on my phone.”
Despite there being multiple ways to create/share a story on Instagram mobile, users mainly use only their preferred method (whether blue plus on the profile or the create button) and prefer to follow the same method on desktop.
Suggestion: The Social Share + Create flow does not offer the option to create a post or share to stories before uploading photos. Also, a way to share a post from the Instagram feed to a Story is missing. It was suggested that this feature be added before the final prototype.
Final Prototype and Final User Flows
For the Final Prototypes, I settled on four user flows to showcase multiple ways of sharing stories. This was a favorite feature on the mobile apps, and users during testing liked having options in their ability to share stories.
Professional Poster
Professional Poster: Profile Page
Professional Poster: Instagram Feed
Social Sharer
Social Sharer: Profile Page
Social Sharer: Instagram Home Page
Design System
Reflections
Challenges
Some of the Challenges I faced while working on this case study included creating realistic user flows for Instagram. I also challenged myself to create more user flows to showcase more options for sharing stories.
Another main challenge was designing within a robust design system and ensuring I did not redesign Instagram but enhanced it by adding new features. I also needed to understand the multiple ways to share stories on Mobile and how to apply those features to Desktop.
Users were unfamiliar with the Instagram Desktop Version and had many questions about its existing user experience. During testing, we often had to stop to review the current behavior of the Instagram Desktop versus my design proposal.
Next Steps
If prototyping continued, I would test editable graphics in the stories and decide how to build out those features.
Users also expressed the ability to check their stories after they post, so I would expand my current user flows further.
Lastly, I would further research and understand why Instagram has decided not to invest in desktop features and why the overall user experience on desktop is vastly different from mobile.
