Instagram Shop
Role
Project Manager, UI/UX Designer
Duration
2 weeks
Team
Dalena Le, Valeriia Koltsova, Ariel Jiminez, Shannon O’Gorman, and Richard Choung
Tools
Figma, Zoom, Google Suites
Tools
Figma
Overview
Instagram is a popular social media platform that started as a photo-sharing service. In 2016, the platform expanded into retail with its “Shop” feature. The goal is to become a social media users’ one-stop-shop for its 1.44 billion users.
Desktop Prototype
Mobile Prototype
THE CHALLENGE
Re-design the Instagram shop feature in mobile and desktop versions to increase user engagement. To have users view Instagram as a retail platform and expand beyond just a photo and video sharing app.
DESIGN PROCESS
Gathering Data
Our Users' Needs
Stimulate UX
Testing
Prototype
Ideate
Define
Empathize
Research
Understand Our Users
Brainstorm Solutions
Validate with Users
Research
Before creating any ideations, we gathered data on what is currently wrong with the existing feature and how it compares to the competitors. Find out who the target demographic is for online purchases. What are their needs and frustrations?
Define
We then synthesized the information to guide us in interactions, navigation, product features, and visual design decisions. We determined an actionable problem with a meaningful solution by focusing on a persona.
Persona:
A representation of the hypothetical archetype of actual users we are targeting.
The Problem
Jessica rarely uses Instagram shop because it is hard to navigate. She needs a way to seamlessly browse and purchase items easily so that she stay on top of the trend.
How Might We ...
HMW create a seamless shopping experience so that Jessica can navigate the site without uncertainty.
Creating an updated userflow allowed us to layout the average user’s movements through instagram and how many steps it will take to complete an order.
Userflow:
Ideate
Brainstorm > Sketch > Mid-fi Wireframes > Hi-fi Prototype
With an understanding of users' behaviors, needs, and frustrations. We started drafting possible solutions to solve the existing problems utilizing the design studio method.
Prototype
"Build to think and test to learn." Once Our team completed multiple design studio sessions, we created a tangible representation of our design. We can now effectively communicate our ideas by having a prototype and allowing users to interact with it.
Desktop Prototype
Mobile Prototype
Testing
"Testing is an opportunity to learn about your solution and your user." To gain feedback on our functioning prototype we conducted 3 usability tests with Instagram users.
Next Steps
If time permits, we would’ve started the design process over again to refine our designs further. We would:
-
Look into a solution to solve the confusion regarding icons.
-
Add additional features to enhance the shopping experience, such as filters.
-
Improve Instagram’s “Live Shopping” experience to increase purchases.