Designing Instagram’s Landing Page for 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 my UX Design Master's program at Maryland Institute College of Art, I designed an Instagram landing page for the UX Prototyping course. The aim was to make shopping on Instagram more user-friendly.
During the project, I conducted thorough research, created wireframes at different levels of fidelity, and conducted two rounds of usability testing. The design was iteratively refined, resulting in an intuitive landing page that simplifies the shopping experience on Instagram.
Problem
Currently, users face limitations in accessing the shops of business accounts on Instagram. They have to individually visit each account to browse through their shop content, which becomes impractical when following numerous accounts or if multiple accounts have their own shops.This results in a suboptimal user experience.
Additionally, users may not be aware of new shops created by accounts they follow.
​
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
My project focused on enhancing the user experience of Instagram Shop. The goal was to create a dedicated landing page where users can easily view, save, and purchase items from the accounts they follow. I also aimed to provide personalized shopping suggestions based on user interests.
The envisioned landing page would consolidate all the shopping items from followed accounts, offering users a streamlined shopping experience within Instagram.
Understanding the menu structure and page architecture was crucial in creating a seamless user interaction. By addressing these considerations, my project aimed to introduce a user-friendly and efficient shopping experience in Instagram Shop.
Process
Upon comprehending the existing challenges in the shopping experience on Instagram, I embarked on designing a novel menu structure and item presentation to offer a user-friendly solution.
The design process commenced with the creation of a low-fidelity prototype, which was then subjected to user testing involving 7 participants. The valuable feedback received from the participants was diligently incorporated, resulting in iterative refinements to the design.
Subsequently, a high-fidelity prototype was developed, which underwent further iterations and refinements. The refined prototype was put through two additional rounds of user testing, this time with 5 participants.
​
The incorporation of user feedback throughout the design journey, coupled with the refinement of both low- and high-fidelity prototypes, ensured a user-centric approach to create an enhanced shopping experience on Instagram.
The culmination of this iterative design process was a final prototype that achieved an impressive 100% satisfaction rate among users.
User Research
To ensure an evidence-based approach, I conducted desk research and user research to gather data from active Instagram users. This helped me validate my assumptions and gather valuable insights. Based on this information, I created two personas that reflect the diverse user base and their characteristics, goals, and behaviors.
These personas served as a foundation to tailor the design of the Instagram shopping feature to meet users' specific needs.
Additionally, I developed user flows and journeys for each persona, outlining the step-by-step process and interactions within the shopping feature. This visual representation allowed me to empathize with users' experiences and make design decisions aligned with their expectations.
Additionally, I developed user flows and journeys for each persona, outlining the step-by-step process and interactions within the shopping feature.
This visual representation allowed me to empathize with users' experiences and make design decisions aligned with their expectations.
Sketches & Wireframes
Sketches
​
The journey of creating a user-friendly interface for Instagram began with conceptualizing wireframe ideas. Since the desired menus and pages were not present in the current Instagram application, I started from scratch to design the interface.
This involved sketching out concepts and layouts that had the potential to evolve into a high-fidelity prototype.
A crucial part of this process was understanding the flow of the menu architecture. I focused on how users would navigate through the menus, access different pages, and interact with the interface.
​
By establishing a clear and intuitive menu structure, my goal was to provide a seamless user experience that meets their expectations and allows for efficient exploration of the Instagram Shop.
Open each sketch below for larger view
Low-Fidelity Wireframes
Subsequently, I transformed my concept into an interactive digital low-fidelity prototype, incorporating all the information I had gathered thus far. This prototype served as the basis for the first usability study, where I aimed to gain insights into user interaction and gather feedback.
By utilizing the low-fidelity prototype, participants were able to engage with the design and provide valuable input on its usability.
This stage of testing allowed me to identify potential areas of improvement and refine the user experience based on user feedback.
High-Fidelity Wireframes
After establishing the initial design concepts for the Instagram Shop project, I transitioned to develop high-fidelity wireframes that captured the intricacies of the user interface in great detail.
These high-fidelity wireframes aimed to provide a comprehensive visual representation of the final design, incorporating the refined elements and aesthetics that users would encounter.
Open each wireframe below for larger view
Usability Study
I conducted user testing sessions with 7 participants, both in person and virtually using the Zoom application. After providing a brief introduction to the project, I shared the interactive prototype with each participant and asked them to complete various tasks.
This allowed me to evaluate the effectiveness and user-friendliness of my designs.
The tasks performed by the participants helped me gather valuable feedback and insights. Based on their input, I implemented iterative design improvements to enhance the overall user experience.
​
The measurements and data collected from the participants' feedback played a crucial role in shaping the iterative design process for this project.
Design Iterations
Throughout the development process, I have diligently iterated the high-fidelity prototype three times, taking into account the invaluable feedback provided by the participants.
These iterations encompassed a range of modifications, including significant revisions that involved reworking larger sections, as well as more minor adjustments aimed at refining the user interaction.
With the overarching objective of creating a design that prioritizes ease of comprehension and efficiency of use, I have diligently strived to enhance the overall user experience.
As a result, I have identified three key improvements that have significantly contributed to achieving this goal.
Iteration #1: A menu structure that makes sense
Participant quote: “It would be better to layout the recently viewed items/recently visited/saved pages under the main menu of the shopping.”
On the left, you can see the menu layout from the low-mid fidelity prototype, which required users to perform additional interactions to access each section. They had to tap on "See More" for each section to expand the menu.
On the right, you'll find the updated menu layout featuring three separate pages: Following, Viewed, and For You. This redesigned layout significantly improves navigation within the Instagram Shop, making it more user-friendly.
Additionally, in the enhanced design, users are seamlessly redirected to the main feed of items from the shops they follow as soon as they tap the Instagram Shop icon.
This improvement eliminates the need for users to tap the "See More" button in the Shop From Following menu to access items from the shops they follow.
Iteration #2: An organized card for each shopping item
​
Participant quote: “The description for each item seems confusing, I want to clearly see the name of the shop in description. Saved button doesn’t look like a button and its placement is taking character space.”
​
On the left, you can see the current design of an item's card within a shop on Instagram. Initially, I kept this design because my focus was on designing a landing page and menu specifically for the shop.
​
However, during the usability studies, a participant expressed the need for an update to this section, emphasizing the importance of user-friendly aspects such as text count, text visibility, iconography, and component placement.
​
On the right, you can see the final version of the item's card, incorporating all the new design improvements.
Iteration #3: Search functionality in For you page
​
Participant quote: "A search bar in the 'For You' page is needed, and the filter button placement should be reconsidered.”
​
On the right, you can see the first version of the high-fidelity prototype. In this version, the 'For You' page only had the filter button, which allowed users to filter the shopping items suggested by the application based on different categories.
​
The participant suggested that it would be more helpful to have a search bar on this screen, enabling users to search and then filter the results, or simply filter the content.
​
On the left is final version of the high-fidelity prototype, the search button was added, addressing the participant's suggestion.
Final Design
↓ Click below to view and interact with the final design
By Nima Shahab Shahmir
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 summary, I learned the importance of iterative design, user-centricity, optimized navigation, user feedback, and balancing simplicity with functionality in the Instagram Shop design process.