Shoppers Drug Mart: e-commerce beauty makeover

´╗┐Disclaimer: This project is not affiliated with Shoppers Drug Mart. I do not work at or for Shoppers Drug Mart.

Role

User Research

Competitive Research

Sketching

´╗┐Wireframing

Prototyping´╗┐

Usability Testing

Tools

Whimsical

Sketch

Invision

Year

2019

Timeframe

2 weeks

Shoppers Drug Mart's e-commerce website in the last year but most people don't know that it's available to shop from. When they do go on it, search navigation is difficult.

User Research

Shoppers Drug Mart launched their e-commerce website in July 2018 to compete with companies like Amazon and Rexall. Looking through their website, I wanted to focus on this categorization of their beauty section, which I found were confusing to new users. I found that when a new user goes to search for a product, particularly in the 'drugstore' brand, it was not evident that the default search results would land on luxury brands. To validate the issues, I did some contextual research with some users. The task was to search for the Burt's Bees Rosewater Toner. I found that the users took a long time to find the product. They would try to scroll through the search results and not find it, realizing after a minute or two that there are tabs labelled Luxury Beauty and Beauty (shown below).

Regular Beauty
Circled Beauty
To combat the issue, the brands will be grouped together rather than separate so that users can easily find the products they want, regardless of the type of brands.

Wireframing

Once I found my solution, I created a user flow so that I knew exactly what pages need to be designed. I quickly sketched out the different layout ideas for Shopper's and beauty home pages before doing wireframes, to put ideas down. With options for the two home pages, I did some quick user testing to find the best layouts before setting up the layouts for the rest of the user flow.

UserFlow02
Wireframe01
Wireframe05
Wireframe03
Wireframe04
Wireframe02
Wireframe01
Wireframe05
Wireframe03
Wireframe04
Wireframe02

Mid-fi wireframes

Once the layout was set, I started setting up the wireframes with some images and colour for usability testing. Working on the website of an existing brand meant that the style guide made it easy for me to add colours and the font.

Artboard

Testing

Header – Skincare Copy

Once I got my screens ready, I did multiple rounds of testing and iterating to make it as cohesive and seamless as possible. The first feedback was to change the placement of the subheadings (ie skincare and makeup in the left image) to left with a background colour so that it is easier to read.

Signing Thanks 03

The next feedback was that the confirmation box should be on a new page, have the order in the confirmation box, and have separate buttons at the bottom of the confirmation box. The confirmation box was too cluttered with the other information, which caused too much scrolling. The order was added to the box in case the user forgot or wanted to change something. The user wanted the option to go back to edit their order or go back to the home page resulting in two buttons rather than one.

Signin Shipping

The last feedback was to widen the checkout process' boxes and change the address line 2 to the apartment/suite line. Previously, the checkout boxes seemed a little too narrow for a desktop window. Changing the address line 2 to be an apartment/suite number line made it more explicitly descriptive. With the change in name, the form box was made shorter in length to accommodate for less info. This allowed for the city and province lines to be moved up into the same line.

Prototype

After testing and iterating the pages, I put them all together. I also added another product page to show how another beauty product page looks like. I also added a dropdown of the cart's quick view to show the entire cart, in case the user forgot what else is added.

Screen Shot 2019-03-28 at 10.19.32 AM

Next Steps

My next steps for the prototype will be to reorganize the layouts for the existing main pages of the brands. The website currently has main pages for the 'luxury beauty' brands when you pick them. However, the 'drugstore beauty' brands don't have main pages when you pick the brand. I will create a layout that can be translated to both types of brands so that it can still be branded accordingly while still being cohesive. I will then merge Prescriptions and Health&Pharmacy for categories. 

UX/UI Design

walking-down-the-street-with-iphone-7
bright-office-enviroment-with-macbook-air
bright-office-enviroment-with-macbook-air

Spotify

Shoppers

Line-Up