Instagram: The Future of Instagram.com
March 2022
What is Instagram?
Instagram is a photo and video sharing app that lets you connect with friends, share what you’re up to, or see what's new from others all over the world.
Why the Web Matters
As 2022 kicked off, Instagram.com rose to be the 5th most visited website in the world. Yet since its launch in February of 2013, Instagram.com had not evolved and been updated to match the features and affordances of the mobile app.
At the same time, user growth on the web grew over 60% to 160 million monthly active users. 5% of all users use Instagram web as their primary interface and Instagram web represented 15% of all total time spend on the Instagram platform. We also knew that user growth on the web was an important acquisition channel and led to increased engagement and user retention.
Business Problems
Users on the web lacked affordances they had on mobile, such as viewing Reels, shopping for products, editing videos and scheduling their posts and stories. We heard complaints from users that content was hard to create on the web and it was also hard to consume content on the web. Power users, such as creators and businesses, wanted increased functionality for creating content, advertising, insights, and advanced settings.
Instagram’s web app had also lost visual consistency with the mobile app and felt old and outdated [See Fig.1]. Instagram was also in the process of a brand and visual redesign and Instagram.com had been build without a design system. It became the perfect opportunity ro redesign Instagram.com entirely.
Redesign Goals
Create a better experience for our users.
Optimize vertical video experiences in a horizontal plane.
Lean into the multitasking and power use cases of the web.
Navigation
The first step in the redesign was to change the layout and navigation to be persistent, fluid, and scalable to the addition of new features. The old navigation bar was horizontal and was positioned at the top of the page so it became lost on scroll. The horizontal navigation bar was a challenge to scale responsively if it had many items. The new navigation bar would be vertical and include new tabs for Reels and Shops.
Context Panels
The context panels are expandable bins that are used to give additional affordances to a feature without disrupting the experience by navigating to an entirely new page. The context panels on the left are for scanning new messages, viewing notifications, and selecting a post type. The context panel on the right are for viewing stories on Home, selecting hashtags on Explore, special photo and video effects in the Composer, and the profile information in the Profile.
Feed Explorations
The next step was to redesign the feed to optimize the layout for vertical, mobile content to be viewed horizontally on a web browser. We wanted the feed content to feel familiar to viewing content on the mobile app but fresh and vibrant.
Two options were explored: a colored feed where the dominant color of the content would be used as a backdrop to the image/video, and a blurred background similar to the experience of switching between two Reels on mobile.
The layout needed to be adaptable to all device types and scale seamlessly between desktop, tablet, and mobile.
Stories Viewer
The stories viewer was designed to be a full scale, immersive experience familiar to mobile. Stories can be paginated with time, by clicking on a thumbnail, or by using the right and left arrow keys on the keyboard.
Messenger
The Messenger tab was redesigned with power users in mind. Communication between creators, businesses, and their followers is vital and its one of the most time consuming tasks. Most creators and businesses choose to reply to DMs on the web to save time.
Video Editor
Creators also voice concerns that they spend a lot of time and money outside the Meta ecosystem for producing and editing their photos and videos. With the addition of Reels to the web, the video editing experience needed to be enhanced to splice and reorder clips, add sound, texts and other visual effects.
Profile
The profile was redesigned to have content displayed as the central, primary focus on the page and the account information secondarily in the right context panel. The account information displayed in the right context menu allowed for that information to be persistent on scroll.
Conclusion
The layoffs at Meta in Q3 of 2022 heavily affected the timeline and bandwidth available for this project. Instagram went through a restructuring and shortly after Instagram Web was design complete I was moved to a growth team focused on Reels engagement.