top of page
UX INSTA - TOP
Frame 5.png

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 Project

UX INSTA At-a-Glance

At-a-Glance

As of this UX Design Project, 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.

UX INSTA PROCESS

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

UX INSTA 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.

UX INSTA SKETCHES
Frame 59.png

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.

Frame 60.png

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.

Frame 61.png

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.

Frame 63.png

Design Iterations

I conducted user testing sessions with participants and made three key iterations based on their feedback.
 

  1. 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.

  2. Item Card Redesign: Revised the item cards to enhance clarity and usability, adjusting text visibility, iconography, and layout based on user input.

  3. 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.

UX INSTA ITERATIONS

Final Design

What I Learned

 

  1. Iterative Design: Continuous feedback and iterations led to a more user-friendly Instagram Shop interface.
     

  2. User-Centered Approach: User research and testing provided insights for designing a feature that meets user needs.
     

  3. Optimized Menu and Navigation: Redesigned menu layout improved navigation and user experience.
     

  4. User Feedback: Incorporating user suggestions shaped the final design.
     

  5. 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.

UX INSTA LEARNED
bottom of page