image

beautyBOUTIQUE
Responsive Site

Loblaw's new beauty destination helps shoppers
find accessible, unbiased beauty guidance.

Visit Website

beautyBOUTIQUE

We worked with Shoppers Drug Mart to launch an immersive e-commerce website for their prestigue beauty brand, beautyBOUTIQUE. Within its stores, beautyBOUTIQUE emphasizes personalized service and unbiased recommendations, earning a strong following in Canada. Working together, our goal was to translate the accessible, yet luxury appeal of the in-store experience into a fluid ecommerce site that allows customers 24/7 access to beauty products and advice.


  • Role: Senior Interaction Designer
  • Date: August 2015
  • UX Team: Judy Podraza, Tara Hosseinipour
  • VD Team: Chloe Wong, Ross Proulx
Screenshot
Screenshot

Experience Opportunities

Prior to our redesign, beautyBOUTIQUE wasn’t receiving enough online engagement and many luxury brands weren't showcasing products. The user flow to gain useful knowledge about the product was lengthy and full of promotional messaging that didn’t appeal to the user base. The experience wasn't effectively showcasing products in an engaging way, wasn't as informative as the in-store experience, and didn’t contextually promote the loyalty program or relevant content for users.

We sought out to leverage the strong reputation of the prestige brand and translate the previous experience into one that would be easy to navigate, informative, and engaging. We conducted competitive research and user interviews to see how other retailers and brands were showcasing products. There was a clear opportunity to transform the site visually to appeal to users by including higher quality images, video tutorials, exclusive deals, and interesting interactions. Many sites were using e-commerce best practices like clear navigation, soft add-to-cart, simple check out flows, and loyalty programs that would help streamline the UX of the site.

Background

Vision for the new experience

A clear solution for today’s retail landscape

beautyBOUTIQUE users value quality products and love to discover the latest trends and shades; they often research products extensively before making a purchase. We wanted to provide an engaging and informative online experience that complements the in-store expertise that shoppers appreciate. The destination would also offer a clear and simple path to purchase in order to drive more online sales and resonate with Shoppers Drug Mart’s reputation for convenience.

Unbiased and Editorial Beauty Guidance

We set out to create a site that inspires and showcases trends, while easily moving shoppers through purchase—especially those seeking to replenish their cosmetics. The responsive experience also balances the individual allure of top beauty brands that beautyBOUTIQUE offers with curated, editorial content that gives readers a fresh, unbiased perspective. For instance, Bestsellers and “Shake Up Your Makeup” selections assert beautyBOUTIQUE’s voice as a trusted and discerning authority.

A flexible and easily maintained system

We created a responsive website with three breakpoints that would maintain and optimize our re-imagined user experience on different devices. The success of the responsive site would be possible as a result of the modular system we created. This allowed content from brands and beautyBOUTIQUE to be easily updated within our style guide and responsive design. It would also allow for more frequent updates to the site with the introduction of editorial content modules.

Sitemap & User Flows

I created sitemaps and user flows for the website to ensure that we were designing a full system that would be an easy to use experience and meet business needs. I started by auditing the existing site, looking at features we prioritized, and organizing content into themes that would be logical for the user to understand. One complex area I analyzed was the checkout flows for a guest and registered user. By creating these flows, I was able to think holistically about the user’s processes, simplify the order of steps, and even cut out unnecessary steps in the flow. This helped developers in planning how to code the site and helped our team align with the client.

Sitemap
Flow

Modular & Responsive System

In order to clearly communicate the modular system for the homepage, I created simplified block wireframes to show how the modules could be repeated and stacked to form a page at different breakpoints and orientations. I created wireframes of each page in three breakpoints to ensure it could be used effectively on any device. I also took deeper dives into specific interactions and flows that would create a unique and streamlined experience.

Sitemap
Flow
Flow
Background Image

A Beautiful Experience

Take a tour of beautyBOUTIQUE's
new responsive website.

The Redesign's Impact

Following the August 2015 launch of beautyBOUTIQUE.ca, the brand saw more engagement from customers and brands. The easy-to-use, responsive site enjoyed 50% more visits on mobile. There was an additional 50% more time spent on the site overall from its customers.

Luxury brands like Yves Sant Laurent, Guerlain, and Versace who previously weren’t being sold online through beautyBOUTIQUE have now opted in.

50%

more visits on mobile

50%

more time spent on the site