Revamping the Meesho website: Enhancing user experience, engagement, and conversions.
Meesho is a well-known social commerce platform in India that enables users to launch online businesses by promoting them on social networks. The website also offers shopping for a broad selection of goods, including clothing, household items, and cosmetics, obtained from several sellers all around India.
What
Meesho Website
Why
Improving usability and engagement
Tools
Figma
Procreate
Duration
12 weeks
Role
UX Designer
User Researcher
Statement of Purpose
Through interactions with the website and its users, I discovered that users were becoming frustrated and abandoning the platform due to the three challenges below. The primary aim of the website redesign is to improve user experience by addressing these pain points. The goal is to increase conversion rates – the percentage of users who complete desired actions, such as making purchases.
Cluttered and Unclear Content
Difficult Navigation
Poor Information Architecture and Visibility
User Research
By conducting thorough user interviews and usability testing, the aim was to understand users' needs and challenges on this platform. This research was pivotal in guiding a successful website redesign that addressed user concerns, eliminated assumptions, and mitigated biases.
User Interviews: The interviews were conducted to understand student shoppers' challenges on Meesho, specifically exploring challenges in recalling desired products for later purchase and the experience of buying from bulk listings.
Here are some questions asked:
-
How often do you shop online on Meesho?
I use Meesho for online shopping at least once a month, usually for clothes, accessories, and stationery.
-
When browsing Meesho, do you ever find products you might be interested in buying later?
Yes, definitely! I often find things I like but need more time to afford or want to compare prices. I take screenshots or write down item names in my notes app, which could be more convenient.
-
If so, how do you currently track these products?
Screenshots can be messy, and notes get lost easily. I want to save the item and get back to them later without the hassle.
-
How often do you encounter bulk product listings on Meesho (listings with multiple variations of the same product)?
I often see bulk listings on Meesho, especially for phone cases, clothes, footwear, etc.
-
When browsing bulk listings, do you find adding individual items to your cart easy?
No, Adding individual items from bulk listings on Meesho feels inconvenient. Ideally, I'd like to quickly add desired items directly from the list and then manage them within the cart.
-
Can you describe any difficulties you've faced adding items from bulk listings?
Bulk listings need a more streamlined way to add specific products. Navigating to individual product pages to add them to the cart feels like an unnecessary extra step. This disrupts my shopping flow and makes the whole process frustrating and time-consuming.
Persona
Word Dump
Descriptors
Mood Board
To help Meesho transform its website visually, I created a mood board. This collection of images, colors, textures, and design elements captures the essence of the platform, reflecting its modern and user-friendly nature. The mood board is aligned with Meesho's brand identity and desired online experience. It emphasizes the platform's variety and welcoming atmosphere for diverse users, serving as a visual guide for the design process.
Color Harmonies
Analogous Color
Using analogous colors thoughtfully and intentionally, I tried to create a visually appealing, engaging, and reflective website.
Analogous colors are next to each other on the color wheel. They can create a sense of harmony and unity or excitement and enthusiasm. #ff36b33, #ff364e, and #ff8336 are analogous colors used to create a vibrant and energetic website design for Meesho.
High Fidelity Design
High-fidelity designs play a crucial role in redesigning a website, hence in Meesho website redesign they are accommodated to get feedback from users, identify and fix problems early, get buy-off from stakeholders, and create a sense of excitement.
I. Homepage
-
Improved the header navigation menu to enhance user convenience in locating their desired items.
-
Added the wishlist tab next to the cart and a wishlist button on each product for better visibility and to effectively meet user needs.
-
Substituted the infinite scrolling of the product list with a horizontal product list to save users time. This made me manage the white space on the page.
-
Introduced a banner immediately following the navigation bar, extending horizontally across the page to ensure users don't overlook any deals, feel welcomed, and remain engaged. These changes allowed me to increase the visibility and discoverability on the page.
Modifications implemented on the homepage
Design principles that were applied
-
The navigation bar and banner were made accessible to read by utilizing the visibility principle.
-
The Wishlist button is prominent and easily distinguished from other page elements using the affordance principle.
II. Product page
-
By rearranging and altering the layout of the product photos, users can now easily see them.
-
A wishlist button was placed next to the Add to Bag button for user convenience.
-
Additionally, a size chart option was included to improve user experience.
-
Gave a list of products to encourage user interaction.
Modifications implemented on the product page
Design principles that were applied
-
The product's description, photos, and buttons are organized using alignment.
-
The website creates a visual hierarchy that maintains uniformity throughout the page to aid users in rapidly identifying and accessing the necessary information.
III. Category page
-
Modified and added filters for proper sorting for user convenience based on their needs.
-
Products were grouped in a grid to distribute attention throughout the page and product evenly.
Modifications implemented on the category page
Design principles that were applied
-
By using constant buttons and image sizes throughout the page, the principle of consistency helped customers focus on each product.
-
The filtering and sorting options were designed using the affordance principle. The ability for users to edit their product listings or change the order in which products are shown should be indicated by buttons or dropdown menus.
IV. Navigation menu
-
Using of appropriate negative and positive space helps the page attain its intended balance.
-
The shopping options have been arranged using a consistent grid, margins, and whitespace.
Modifications implemented on the navigation (mega) menu
Design principles that were applied
-
The page was designed to be balanced, which is achieved by using appropriate negative and positive space.
-
Consistent grids, margins, and whitespace have arranged the shopping options.
V. Profile page
-
A login/signup button is provided on the homepage beneath a visual indicator icon for the user's profile, making it simple to visit the dashboard or profile page.
-
To help users identify themselves, place their name at the top of the profile area. Use phrases like "Welcome, [User Name]" to add a personalized touch.
Modifications implemented on the profile page
Design principles that were applied
-
Instead of needing users to recall specifics or go through complex mental processes to execute a task, the emphasis was placed here on making the information and actions visible and readily available to users.
Reflection
This Meesho case study deepened my understanding of user research, usability goals, simplicity, and visual design. I honed my ability to work quickly, efficiently, and creatively. While I'd tackled academic UX projects before, this experience allowed for in-depth research and new skill development in wireframing and prototyping. However, I recognize the value of broader user input to refine my designs and ensure they perfectly align with user needs and expectations. This is a crucial takeaway I'll leverage to elevate future projects.