Shoppers Drug Mart
Shoppers Drug Mart aims to strengthen its online presence to align more closely with its physical stores. This project will enhance the website's usability, improve the customer journey, and make online shopping as straightforward and enjoyable as visiting a physical Shoppers Drug Mart location.
My Role
User Research
Usability Testing
Prototyping
My Team
Russell Lau
Nadia Chowdhury
Ashfaaq Iqbal Irshad Mohammed
Tools
Figma
Optimal Workshop
Timeline
1 month
//THE PROBLEM
redundant content
The Shoppers Drug Mart website currently faces several challenges, including a confusing dual navigation bar, overlapping and redundant content, information overload in the navigation menu, and inconsistency in navigation. These issues contribute to a less intuitive and cumbersome user experience.
//USER RESEARCH
analyzing
stakeholders
Various stakeholders are involved in the website redesign of Shoppers, so we need to carefully analyze each stakeholders and their needs:
Beauty Customers
A streamlined, mobile-friendly shopping experience with easy navigation and detailed product information.
Health Customers
Quick, intuitive booking with clear service information and a hassle-free appointment scheduling process.
Casual Shoppers
Simple, fast navigation and checkout for convenient, everyday shopping.
Service Seekers
An efficient booking system with easy-to-access service information, optimized for all devices.
evaluating the
information architecture
A closed card sort study was conducted in-person with 10 users to evaluate the effectiveness on achieving stakeholders' goals and needs in the site's current information architecture. potential visitors of Shoppers Drug Mart in Canada were asked to sort the site's existing first and secondary navigation labels from the list we voted to be the most vital.
The current information architecture fails to clearly categorizing and associating various content to ensure intuitive navigation for users.
key insights:
-
Simplified Navigation: The card sort led to the consolidation of similar services under one tab, making it easier for users to find what they are looking for without navigating through multiple layers.
-
Card Sorting Results and Analysis: One significant finding from the similarity matrix of the card sorting analysis was that 90 percent of participants grouped "Offers," "Sales," and "Clearance" together. This indicates a common tendency among users to group all promotion-related labels together.
identifying
opportunities
-
Streamlining Primary Categories: Reducing the number of primary categories displayed above the fold to focus on 'Shop', 'Health & Wellness', 'Services', and 'PC Optimum'.
-
Repositioning Key Sections: Positioning 'Beauty' and 'Personal Care' prominently in the 'Shop' section, inspired by the layout of physical stores where these sections are typically prominent.
-
Revising the Information Architecture: Repositioning 'Electronics' as a sub-category under 'Shop' to align with the website's hierarchy and emphasize Shoppers' value proposition in these menu items.
rebuilding the
information architecture
After identified our opportunities for improving and redesigning the website, we planned to start rebuilding the information architecture before changing the navigation to on enhance user engagement and intuitiveness.
Key Changes
-
Streamlined Primary Categories: Reduction to 'Shop', 'Health & Wellness', 'Services', and 'PC Optimum'.
-
Repositioned Sections: 'Beauty' and 'Personal Care' now lead the 'Shop' section; 'Electronics' moved under 'Shop'.
-
Consolidated Health Services: 'Prescription', 'Health', and 'Pharmacy Services' merged; 'Book an Appointment' remains easily accessible.
-
Integrated Features: 'Auto-refill' integrated into 'Refill Online' under 'Prescriptions'.
-
New 'Travel Health' Section: Reflecting user needs for travel-related services.
After presenting our IA redesign, crafted meticulously using Figma for seamless collaboration and visualization, we pivoted towards optimizing mobile navigation. Here's the middle-fidelity navigation redesign:
rethinking the
task flows
redesigning the
navigation
After presenting our IA redesign, crafted meticulously using Figma for seamless collaboration and visualization, we pivoted towards optimizing mobile navigation. Here's the middle-fidelity navigation redesign:
Mobile Navigation
-
Hamburger Menu and Drawer Navigation: Retained for familiarity but interaction modified.
-
Progressive Disclosure: Upon tapping the hamburger menu, all level 1 navigation options are presented.
-
Level-Based Display: Choosing a level 2 item shows only connected items, same for level 3.
-
Back Navigation Option: Users can tap “Back” or the “>” symbols to navigate back a level.
Desktop Navigation
Desktop Nav: Shop
-
The 'Shop' section's information architecture is inspired by the layout of physical Shoppers Drug Mart stores.
-
Key focus areas like 'Beauty' and 'Personal Care' are positioned prominently, mirroring the store setup where these sections are often the first encountered.
-
'Electronics,' previously on the same level as 'Shop' and 'Health,' has been repositioned as a sub-category under 'Shop' to better reflect its importance in Shoppers' offerings.
Desktop Nav: Health
-
The 'Health & Wellness' section now encompasses sub-categories like on-site testing and vaccinations, which were part of the original 'Pharmacy services.'
-
'Pharmacy services' has been dissolved, with previous Level 3 items being elevated to Level 2, in the same hierarchy as 'Booking an Appointment.'
-
A new section called “Travel Health” has been added, reflecting user needs for travel-related services such as insurance and vaccines.
lessons learned
-
Streamlining Navigation: Simplifying the navigation structure can significantly enhance user experience.
-
Aligning Online Experience with Physical Stores: Replicating the feel and organization of physical stores in the online platform can be effective.
-
Responsive to User Feedback: Incorporating user feedback, as seen in the card sorting exercise, is crucial for a successful redesign.
-
Catering to Diverse User Needs: Recognizing and addressing