Designing Instagram’s Landing Page:
A Seamless Shopping Experience
Role: UX Designer, UX Researcher
Timeline: January - March 2023
Tags: UX/UI, Mobile App, iOS App, Usability Study, User Research
Tools: Figma, Adobe Photoshop, Google Docs, Google Slides, Zoom Slack
Detail: UX Prototyping course,
Master's degree in User Experience Design at Maryland Institute College of Art
At-a-Glance
As part of a Master's program in UX Design, I worked on making Instagram's shopping page easier to use. I studied how people use the page, made several preliminary sketches (wireframes), and tested these designs with regular Instagram users twice to see what worked best. The final result was a clearer, simpler landing page that makes shopping on Instagram more straightforward.
Problem
Exploring Instagram's business shops is difficult, as it demands visiting each account separately, a tedious task for those following numerous accounts. This results in a poor experience, with many unaware of the Instagram shop feature, often missing new shop updates from followed accounts.
​
The lack of a central landing page for Instagram Shop contributes to these limitations, as the shop functionality is solely tied to individual business accounts.
Solution
Focusing on intuitive menu structure and page layout, the project sought to make Instagram shopping more user-friendly and efficient.
​
The redesign streamlined Instagram Shop by creating a landing page that aggregates products from followed accounts and personalized suggestions, simplifying browsing and purchasing.
Process
To make shopping on Instagram easier, I created a simple design for the app and tested it with people who frequently use Instagram. First, I made a basic draft and had 7 people try it. Then, I improved the design and had 5 regular Instagram users test the updated version. Their feedback helped make the shopping experience better and easier to use.
The culmination of this iterative design process was a final prototype that achieved an impressive 100% satisfaction rate among users.
User Research
​
Sketches & Wireframes
Sketches
​
The journey of creating a user-friendly interface for Instagram began with conceptualizing wireframe ideas. This process started with simple sketches to outline the basic layout, which then evolved into a high-fidelity prototype—a detailed, interactive model that closely resembles the final product.
Low-Fidelity Wireframes
I created a digital low-fidelity prototype—a basic, early version of the design—to quickly gather user feedback and identify areas for improvement.
High-Fidelity Wireframes
After setting up the initial design ideas for the Instagram Shop, I created high-fidelity wireframes. These are detailed drafts that show exactly what the final design will look like, including all the refined visual elements and styles that users will see.
Usability Study
I conducted user testing sessions with seven participants, both in person and virtually via Zoom. Participants interacted with the prototype of Instagram Shop and completed related tasks. 100% of the participants were satisfied with the prototype design and flow of menus. Details and results are provided below.
Design Iterations
​
I conducted user testing sessions with participants and made three key iterations based on their feedback.
-
Menu Structure Enhancement: Improved navigation by restructuring the menu into three separate pages—Following, Viewed, and For You—allowing direct access to desired sections without extra taps.
-
Item Card Redesign: Revised the item cards to enhance clarity and usability, adjusting text visibility, iconography, and layout based on user input.
-
Search Functionality on 'For You' Page: Added a search bar to the 'For You' page, complemented by a filter function, making it easier for users to find and filter products.
These iterations refined the user interface, significantly enhancing user interaction and accessibility within the Instagram Shop.
Final Design
What I Learned
-
Iterative Design: Continuous feedback and iterations led to a more user-friendly Instagram Shop interface.
-
User-Centered Approach: User research and testing provided insights for designing a feature that meets user needs.
-
Optimized Menu and Navigation: Redesigned menu layout improved navigation and user experience.
-
User Feedback: Incorporating user suggestions shaped the final design.
-
Simplicity and Functionality: Balancing simplicity and essential features created an efficient shopping experience.
In essence, the project emphasized the significance of iterative updates, focusing on users, and fine-tuning usability and simplicity in creating effective digital experiences.