Walgreens: information architecture and homepage redesign
Walgreens is the largest drugstore chain within the United States, interacting with over 8 million customers daily through its website, mobile app and 8,000 plus stores. Walgreens focuses on ensuring how a consumer interacts with its brand—in stores, on e-commerce sites or via mobile apps—it delivers a consistent experience, while also paying heed to the unique capabilities of mobile phones and other devices. View Full Report.
My Contributions: Personas, content audit, card sort, site map, wireframe sketches
Problem
As one of the leading ecommerce sites, the site’s information architecture has not changed for more than 5 years. Walgreens focused on its strength—convenience—and then used technology to make sure it can serve consumers conveniently whether they shop online or offline. However, they continue to practice the same layout for navigating throughout their website.
Because Walgreens sells thousands of products in multiple categories, including pharmaceuticals, it can be difficult to put together a homepage that effectively showcases the products without becoming too overwhelming.
project goals
We wanted to simplify and personalize content for all user types by:
Improving the visual hierarchy
restructuring navigation for an easier user flow
prioritizing the most important content and call-to-action
Key personas and User flows
Our personas are based upon three very different user types, the Beauty Guru, the Contact Lenses Buyer, and the Prescription Refiller.
Beauty Gurus
Contact Lenses Buyer
Prescription Refiller
Our Approach
Content audit
During our initial analysis, we discovered that the homepage covered two very broad and diverse categories, Happy and Healthy. The Healthy side included prescriptions, health information and services, and contact lenses information. The Happy side included the “Shop Products” section. We believed that the user would benefit from having a unique experience if these two categories were divided into sub-domains.
To analyze and organize this information, we conducted a content audit. We created an Excel spreadsheet to assist us with this task and began by organizing each navigation page. After realizing that we had over 255 navigation pages, we reduced the content audit to product pages only. All members of the team commented on each page and made recommendations as to whether or not that page should be retained or deleted. We also examined the existing page hierarchy, imagery, flow and purpose in an effort to record a content audit, which functioned as a foundation for additional review and analysis. Our Initial findings included redundant page content; distracting display of promotional ads, account specific information requiring a sign-in, and an inefficient layout.
Competitive analysis
An analysis of competitor websites was performed simultaneously with the content audit. Our goal was to check for similarities in content organization and layout. For this project, we chose Walmart, Target and CVS. All three sites:
Sell a similar volume and variety of items (e.g. pharmaceuticals, household and beauty products)
Have a robust homepage
Focus on convenience
Are concerned with the overall user experience
LatCh review
Once we completed the content audit and competitive analysis, we used the LATCH method to analyze the content and assess which elements would remain. Since Walgreens site is so vast, we decided to organize the items and information on the site by categories and subcategories. We started by reviewing each category under “Shop Products” page. After the items were organized into categories, we further organized the items by hierarchy of most clicks in an attempt to make it easier for the user to locate items.
Card sort
Due to the vast amount of information and products on the Walgreens site, we decided to conduct a card sort to gain insight on how users might categorize items. Because the site is so massive, we completed two card sorts. We included most of the topics and items found on the site.
We used Optimal Workshop.com to conduct an open card sort using 92 cards. Twelve participants completed Card Sort #1. Card sort #1 consisted of 57 cards and participants generally organized them into 9 categories with medical supplies/equipment, beauty, female health and male health being the most consistent categories. On average, it took our participants 14 minutes to complete this card sort. Our participants completed the second card sort in less time, 5 minutes average. The second card sort consisted of 35 cards and our participants organized the information into seven groups with baby, home, electronics, and holiday being the most popular see. Based upon the LATCH analysis and card sort, we determined the following:
Keep Walgreens brands
Keep health services, pharmacy
Add a “Rapid Refill” service
Remove natural and organic - made it its own card
Keep photo and all elements
Keep diet and fitness the same
Sexual wellness remains the same
Keep grocery
Efficient use of header and promotional layout
sitemap
Using the results from both card sorts, we created our sitemap with four main categories; Shop all Products, Pharmacy, Health Clinic, and Photo. These categories were broken down further into Beauty, Health and Medicine, Refills, Rapid Prescription Refill, and other categories.
mood board
In order to avoid a “blank-canvas syndrome” we chose to create a mood board to help guide the visual aspect of our wireframes. The mood board acted to set the tone of the high fidelity aspects of the wireframes by determining primary and secondary color elements, as well as, presenting several lifestyle images and key elements of the Walgreens brand (products, photos and rewards).
sketches
Prior to wire-framing our site, our team drew multiple sketches. The Sketches contained initial images of what we believed each key page would look like. Team members created sketches of the landing page, product details page, and the prescription dashboard for accounts page, amongst others.
Wireframes and final Prototype
Walgreens stores are known for their bright, cheery, clean and easy to navigate store layout. Our goal was to bring that experience in our website. Team members created wireframes for their assigned page with this concept in mind. To assist us with our wireframing task, we used Axure RP Pro 7.0 to create each page. Since the current site was created with a marketing focus rather than ease of use, we wanted to make sure the Walgreens site was warm, clean and visually pleasing with simplicity being the main focal point. We also wanted the site to be somewhat similar to other e-commerce sites. Since we did not want to do away with using a carousel, we decided to add it to our landing page and use it as a way for users to locate big items that are purchased most often.
Utilizing our research, we continued the categorization of our products to the landing page by grouping related items under similar headings. We also left space for future ads.
Try our Interactive Prototype.