Designing Through Crisis:
Bridging Social and Commercial Engagement on Instagram
Bridging Social and Commercial Engagement on Instagram
Bridging Social and Commercial Engagement on Instagram
Role
UX/UI Designer | Interaction Designer | Product Strategist
Year
2020
Applications
Adobe XD, Photoshop, Gifski, Screenflick
Brief
Instagram Redesign was developed in response to the unprecedented limitations on physical interaction during the COVID-19 pandemic. The challenge was to create a digital experience that kept users socially connected and engaged during a time of isolation, while also addressing the growing reliance on e-commerce.
When COVID-19 Hit, the World’s Habits Changed Overnight
Instagram, once a platform of lifestyle envy, aspirational influencers, and casual scrolling, became a lifeline for connection, entertainment, and even survival for small businesses. With shopping largely moving online, Instagram’s dual role as a social and commerce platform became more vital than ever.
What if we could transform Instagram from a place of endless scrolling into a tool that felt both personalized and practical?
As social isolation grew, Instagram needed a way to foster connection and support businesses—an idea that led to three core focuses: letting users control their feed, building a seamless shopping experience, and creating ways for real-time engagement.
Reimagining the Feed: Letting Users Lead
As the needs of users shifted, so did their expectations of content. Casual users, business owners, and creators each wanted different things from their Instagram feed. My solution? Let them decide. Instead of a one-size-fits-all homepage, I introduced a top navigation bar with three distinct tabs: Following, Explore, and Video.
Explore allowed users to actively rearrange and customize topics based on their evolving interests.
Following provided a familiar, friend-centric experience.
Video responded to the surge of live content and short video consumption.
What if We Could Transform Instagram from a Place of Endless Scrolling into a Tool That Felt Both Personalized and Practical?
As social isolation grew, Instagram needed a way to foster connection and support businesses—an idea that led to three core focuses: letting users control their feed, building a seamless shopping experience, and creating ways for real-time engagement.
By letting users dictate their own content journey, the redesigned feed empowered them to see what mattered most, allowing Instagram to meet the emotional and practical needs of a socially distanced world.
Social Shopping: Bringing E-Commerce into the Everyday
With social distancing in place, Instagram transformed into a digital marketplace. Small businesses, unable to rely on in-person customers, saw Instagram as their primary storefront. But buying from Instagram felt clunky. I envisioned a seamless social shopping experience integrated directly into the feed, where users could explore products without breaking their social rhythm.
In the redesigned shopping feature, users could view product images and read tips and reviews without navigating away from their feed. For those ready to buy, an instant purchase option kept them in the moment. This redesign let social discovery flow effortlessly into e-commerce, creating a place where brands and buyers could connect more naturally, fostering a sense of community even in transactions.
Reimagining the Feed: Letting Users Lead
As the needs of users shifted, so did their expectations of content. Casual users, business owners, and creators each wanted different things from their Instagram feed. My solution? Let them decide. Instead of a one-size-fits-all homepage, I introduced a top navigation bar with three distinct tabs: Following, Explore, and Video.
Explore allowed users to actively rearrange and customize topics based on their evolving interests.
Following provided a familiar, friend-centric experience.
Video responded to the surge of live content and short video consumption.
By letting users dictate their own content journey, the redesigned feed empowered them to see what mattered most, allowing Instagram to meet the emotional and practical needs of a socially distanced world.
Social Shopping: Bringing E-Commerce into the Everyday
With social distancing in place, Instagram transformed into a digital marketplace. Small businesses, unable to rely on in-person customers, saw Instagram as their primary storefront. But buying from Instagram felt clunky. I envisioned a seamless social shopping experience integrated directly into the feed, where users could explore products without breaking their social rhythm.
In the redesigned shopping feature, users could view product images and read tips and reviews without navigating away from their feed. For those ready to buy, an instant purchase option kept them in the moment. This redesign let social discovery flow effortlessly into e-commerce, creating a place where brands and buyers could connect more naturally, fostering a sense of community even in transactions.
Bullet Comments: Turning Interaction into Real-Time Connection
As isolation became the norm, Instagram needed to foster a sense of togetherness. Static comment sections just didn’t capture that feeling of being with others in real time. So, I introduced bullet comments — animated, fleeting interactions that flew across the screen in real time, allowing users to react in sync with live events or content. This feature brought a new layer of engagement, turning passive viewing into a shared experience, almost as if they were sitting beside friends.
Bullet comments created an instant sense of unity, bridging the gap that physical distance had created. And while seemingly small, this addition proved powerful, making users feel like part of a larger conversation.
Reimagining the Feed: Letting Users Lead
As the needs of users shifted, so did their expectations of content. Casual users, business owners, and creators each wanted different things from their Instagram feed. My solution? Let them decide. Instead of a one-size-fits-all homepage, I introduced a top navigation bar with three distinct tabs: Following, Explore, and Video.
Challenges of Remote Mobile Testing
Given the circumstances of the COVID-19 pandemic, remote mobile testing was the most practical approach. With limited resources, I opted for the Screen Sharing via Mobile Apps method using Zoom to observe user interactions in real time.
However, this method came with trade-offs. While I could see interactions on the device, I couldn't fully observe participants’ facial expressions or hand gesture, which are often key indicators of confusion or delight. To compensate, I relied on follow-up questions to capture their emotional responses and thoughts.
Explore allowed users to actively rearrange and customize topics based on their evolving interests.
Following provided a familiar, friend-centric experience.
Video responded to the surge of live content and short video consumption.
By letting users dictate their own content journey, the redesigned feed empowered them to see what mattered most, allowing Instagram to meet the emotional and practical needs of a socially distanced world.
Iterating the Design Based on Feedback
After completing the remote mobile testing, the feedback on the proposed features was generally positive, with users appreciating the ease of navigation and the personalized content experience.
However, the testing also revealed several unexpected insights that were outside the scope of the prototypes but crucial to improving the overall user experience:
Search Page: With the Explore page moved to the homepage, users felt unclear about the role of the Search page and questioned its purpose.
Shopping Page: Users were frustrated with Instagram's existing shopping tabs, describing them as uncategorized and difficult to navigate.
A New Approach to Search: Discovering Through Personalization
I re-envisioned Instagram’s search functionality using a recommendation algorithm that served users more relevant results based on their behavior and interests. This personalized search meant that users, from hobbyists to influencers, could discover content that felt handpicked for them, making Instagram feel more curated and tailored.
Redefining Shopping: Categories that Reflect Real Interests
I restructured the shopping page into sections like Women, Men, and Lifestyle, with a wishlist feature for easy browsing. It wasn’t just a catalog; it was a more thoughtful presentation that reflected real shopping interests and habits, like a boutique tailored to each user’s lifestyle.
Social Shopping: Bringing E-Commerce into the Everyday
With social distancing in place, Instagram transformed into a digital marketplace. Small businesses, unable to rely on in-person customers, saw Instagram as their primary storefront. But buying from Instagram felt clunky. I envisioned a seamless social shopping experience integrated directly into the feed, where users could explore products without breaking their social rhythm.
In the redesigned shopping feature, users could view product images and read tips and reviews with a simple tap on the shopping icon. They could also explore additional products in the seller’s profile shopping tab. This redesign let social discovery flow smoothly into e-commerce, creating a place where brands and buyers could connect more naturally, fostering a sense of community even in transactions.
Bullet Comments: Turning Interaction into Real-Time Connection
As isolation became the norm, Instagram needed to foster a sense of togetherness. Static comment sections just didn’t capture that feeling of being with others in real time. So, I introduced bullet comments — animated, fleeting interactions that flew across the screen in real time, allowing users to react in sync with live events or content. This feature brought a new layer of engagement, turning passive viewing into a shared experience, almost as if they were sitting beside friends.
What’s Next?
While I was not able to see this design through fully to implementation, the next steps would involve several critical actions to ensure the concept's viability:
Additional User Testing: Conduct another round of testing to validate improvements made to the shopping and search functionalities.
Development Preparation: Finalize the design documentation and prepare for handoff to the development team to begin implementation.
Key Takeaway
The pandemic was a pivotal moment that reinforced the importance of agility in digital design. As user behaviors shifted dramatically towards online interactions, it became clear that platforms must evolve rapidly to remain relevant. This experience taught me the value of designing with adaptability in mind—crafting solutions that not only meet current needs but can also scale with future changes.
The challenges of remote testing also highlighted the importance of flexibility in the design process, ensuring that user feedback is accurately captured and integrated, regardless of the circumstances.
Ultimately, this project deepened my understanding of how critical it is for digital experiences to stay responsive to ever-evolving user expectations.
Challenges of Remote Mobile Testing
Bullet Comments: Turning Interaction into Real-Time Connection
Given the circumstances of the COVID-19 pandemic, remote mobile testing was the most practical approach. With limited resources, I opted for the Screen Sharing via Mobile Apps method using Zoom to observe user interactions in real time.
However, this method came with trade-offs. While I could see interactions on the device, I couldn't fully observe participants’ facial expressions or hand gesture, which are often key indicators of confusion or delight. To compensate, I relied on follow-up questions to capture their emotional responses and thoughts.
As isolation became the norm, Instagram needed to foster a sense of togetherness. Static comment sections just didn’t capture that feeling of being with others in real time. So, I introduced bullet comments — animated, fleeting interactions that flew across the screen in real time, allowing users to react in sync with live events or content. This feature brought a new layer of engagement, turning passive viewing into a shared experience, almost as if they were sitting beside friends.
Bullet comments created an instant sense of unity, bridging the gap that physical distance had created. And while seemingly small, this addition proved powerful, making users feel like part of a larger conversation.
Challenges of Remote Mobile Testing
Given the circumstances of the COVID-19 pandemic, remote mobile testing was the most practical approach. With limited resources, I opted for the Screen Sharing via Mobile Apps method using Zoom to observe user interactions in real time.
However, this method came with trade-offs. While I could see interactions on the device, I couldn't fully observe participants’ facial expressions or hand gesture, which are often key indicators of confusion or delight. To compensate, I relied on follow-up questions to capture their emotional responses and thoughts.
Iterating the Design Based on Feedback
The feedback on the proposed features was generally positive, with users appreciating the ease of navigation and the personalized content experience.
However, the testing also revealed several unexpected insights that were outside the scope of the prototypes but crucial to improving the overall user experience:
Search Page: With the Explore page moved to the homepage, users felt unclear about the role of the Search page and questioned its purpose.
Shopping Page: Users were frustrated with Instagram's existing shopping tabs, describing them as uncategorized and difficult to navigate.
A New Approach to Search: Discovering Through Personalization
I re-envisioned Instagram’s search functionality using a recommendation algorithm that served users more relevant results based on their behavior and interests. This personalized search meant that users, from hobbyists to influencers, could discover content that felt handpicked for them, making Instagram feel more curated and tailored.
A New Approach to Search: Discovering Through Personalization
I re-envisioned Instagram’s search functionality using a recommendation algorithm that served users more relevant results based on their behavior and interests. This personalized search meant that users, from hobbyists to influencers, could discover content that felt handpicked for them, making Instagram feel more curated and tailored.
Redefining Shopping: Categories that Reflect Real Interests
I restructured the shopping page into sections like Women, Men, and Lifestyle, with a wishlist feature for easy browsing. It wasn’t just a catalog; it was a more thoughtful presentation that reflected real shopping interests and habits, like a boutique tailored to each user’s lifestyle.
Redefining Shopping: Categories that Reflect Real Interests
I restructured the shopping page into sections like Women, Men, and Lifestyle, with a wishlist feature for easy browsing. It wasn’t just a catalog; it was a more thoughtful presentation that reflected real shopping interests and habits, like a boutique tailored to each user’s lifestyle.
What’s Next?
While I was not able to see this design through fully to implementation, the next steps would involve several critical actions to ensure the concept's viability:
Additional User Testing: Conduct another round of testing to validate improvements made to the shopping and search functionalities.
Development Preparation: Finalize the design documentation and prepare for handoff to the development team to begin implementation.
What’s Next?
While I was not able to see this design through fully to implementation, the next steps would involve several critical actions to ensure the concept's viability:
Additional User Testing: Conduct another round of testing to validate improvements made to the shopping and search functionalities.
Development Preparation: Finalize the design documentation and prepare for handoff to the development team to begin implementation.
Key Takeaway
The pandemic was a pivotal moment that reinforced the importance of agility in digital design. As user behaviors shifted dramatically towards online interactions, it became clear that platforms must evolve rapidly to remain relevant. This experience taught me the value of designing with adaptability in mind—crafting solutions that not only meet current needs but can also scale with future changes.
The challenges of remote testing also highlighted the importance of flexibility in the design process, ensuring that user feedback is accurately captured and integrated, regardless of the circumstances.
Ultimately, this project deepened my understanding of how critical it is for digital experiences to stay responsive to ever-evolving user expectations.
Related work
