Demac Media Demac Media Brand Demac Media Brand

Blog

Subscribe

The Top 5 UX Changes They Should have Made! (Featuring the LCBO)

Timer Icon 9 Mins

Conversion Optimization, Design & User Experience

This July we found out that the LCBO would launched their own eCommerce initiative! The perfect opportunity for me to flex my conversion expertise and recommend 5 UX changes they should make to improve their online shopping experience.

Wait, what’s the LCBO?

The Liquor Control Board of Ontario is a crown corporation that distributes and retails alcoholic beverages in…Ontario. It’s one of the world’s largest buyers and retailers of alcoholic beverages, with 650 locations and 24,000 products from 80 countries.

Essentially, outside of restaurants, the LCBO (or Beer Store) is the only retailer that can sell alcohol in my home Province. No walking into a corner store for me for a bottle of bubble-y.

Our Top 5 UX Changes for the LCBO

lcbo, user experience, ux, mobile, responsive, demac media

Now that Ontarians – like your’s truly – are able to buy booze online, you know I couldn’t resist the temptation to try out their new eCommerce site. Excited by the opportunity to buy my booze online, and driven as an eCommerce strategy professional, I set forth to test their new system. They get a free UX audit, I get alcohol delivered to my office, and merchants reading will get insight into optimizing an online store.

Note: generally I would take a deeper dive into a client’s analytics and provide suggestions solely based around data-driven decisions. However, seeing how I do not have access to these stats this overview will be conducted strictly through the current site experience on LCBO.com.

1. Mobile Experience

While it’s old news that mobile is a growing source of site traffic, many retailers are still launching experiences that are not optimized for it. I had a serious SMH (shake my head) moment as soon as I tested mobile.

lcbo, user experience, ux, mobile, responsive, demac media

If you’re going to launch a mobile site, launch an optimized mobile version and not just the easy. While the site itself is responsive, none of it is optimized for mobile. It’s safe to state that a user-friendly mobile site simply does not exist. The five homepage banners are not even enabled to support a ‘swipe through’ navigation. Instead, it’s a scaled down desktop experience that offers users teeny tiny images, some without even a clear CTA, and text links that are extremely hard to use for navigation.

Exhibit A:

lcbo, user experience, ux, mobile, responsive, demac media

2. Shipping & Pickup Offerings

If targeting the general public, offer competitive free shipping thresholds or competitive rates. I took the time this past weekend to talk to a wide range of age demographics. It was clear that no one was willing to pay the extra $12/shipment. All stated that they’d continue to do their weekly/monthly visits to their local LCBO. There was one key insight that was brought up numerous times and it was the fact that there were so many accessible stores in general, paying $12 for delivery, that you’d receive days after, just didn’t makes sense. The in store pickup option would also be ideal for those in a rush, however, that 1-4 week timeline? No. thank. you. It’s clear that with this type of shipment offering their target market really isn’t the general public. Instead, small businesses that would usually submit an order, to later have an employee pickup, are more likely to use this type of service.

lcbo, user experience, ux, mobile, responsive, demac media

I have to say this aspect of their site was definitely my biggest disappointment. Many new digital business ventures are capitalizing on the effect that people are just too busy to go out to and shop the way the used to. However, due to the regulations and taxation laws surrounding the sale of alcohol in Ontario we all know the LCBO major retailer and distributor. All net income from the LCBO’s sales goes to the province in the form of an annual dividend and assists with paying for the Provinces health care, education and infrastructure. Therefore, I suppose it really should be no surprise why their shipment offering really does suck and 90% of us can agree with Beyonce.

lcbo, user experience, ux, mobile, responsive, demac media

3. Homepage

The portal to your business. It should present clear offerings to your user and funnel them into the appropriate path they’ve set out to find. While offering different paths is extremely important to a user, offering too many can seem overwhelming. Unfortunately, the latter is definitely the experience on LCBO.com. In total, we have your top bar navigation with 9 different categories, beneath this 6 carousel hero banners, 4 category CMS blocks, 4 recipe suggestions and then an ever so cringe worthy ‘How To’ section.

via GIPHY

lcbo, user experience, ux, mobile, responsive, demac media

Ultimately, this homepage needs to be redesigned, there is simply too much going on. Segmenting titles, ‘May We Suggest’ and ‘Inviting Tips For Entertaining’ seem irrelevant and are easily missed by the eye due to their design. Other supporting category titles that are also present do a better job of educating the user what the content below is about.

lcbo, user experience, ux, mobile, responsive, demac media

It also would be nice to revamp the top navigation to include an ‘Entertaining’ section that would allow the ‘Recipe/Recommendations’ and ‘How To’ sections to be housed within the site’s main navigation. Allocating this content on the current homepage is keeping the page feeling very cluttered and creates too many user paths. We even have public announcement warning of a spamming issue oddly placed at the very bottom of the page.

lcbo, user experience, ux, mobile, responsive, demac media

Side note: even though you tried your hardest to grab people’s attention via your bold text , NO ONE will see or read that… except me, because I get paid to analyze sites. Maybe try a more prominent position or modal next time?

It really is no surprise to anyone that the LCBO creates some amazing content and has some of the BEST recipes out there. We just need to take the time to reorganize them and offer the users what they want: clear defined user paths.

4. Category & Product Pages

I used the top bar navigation and as seen here, chose the Beer & Cider category. I specifically only ever drink the Brickworks cider, and notably the ‘red kind’, so I had to do some digging. From here, I used the side bar navigation to refine my selection, which was fairly simple and provided great results.

Category Page:
lcbo, user experience, ux, mobile, responsive, demac media

Pros:

Cons:

Product Page:
lcbo, user experience, ux, mobile, responsive, demac media

Pros:

Cons:

5. Checkout Process

The office wanted to add this particular rye to its growing scotch and whiskey collection. Naturally, we stocked up and purchased a total of 3 in quantity. When adding to cart, a banner appears at the top of one’s screen for a couple of seconds.

lcbo, user experience, ux, mobile, responsive, demac media

Overall the checkout experience wasn’t bad. There was a clear defining identifier that tracked your process, allowing you to mentally note how many more steps you had to complete before your order was submitted. Finally, spacing was granted, though we still have a minimum of +3 forms of text visible at all times and array of different font sizes. Below are screenshots of the process to provide you with a visual:

 

Step 1: Shipping

 
lcbo, user experience, ux, mobile, responsive, demac media

Pros:

Cons:

 

Step 2: Billing

This was the longest stage of the process. We had a different billing address than our shipping address, so unfortunately our information was not automatically used for this step. Note, if they are the same then this step is skipped in the process.

lcbo, user experience, ux, mobile, responsive, demac media

Pros:

Cons:

Step 3: Review

This is generally the second highest stage of drop off for users within a checkout flow. It’s rather interesting that the review stage is before the user’s payment, as it’s typically the opposite during most checkout flows. The overall design of the page itself seems to be quite crammed, pushing all product details and copy into the left hand corner of the page. Luckily we have a product image to ease our minds.

Pros:

 

 

Cons:

 

 

Step 4: Payment

The simplest page of the process, as it always should be.

lcbo, user experience, ux, mobile, responsive, demac media

Pro:

Cons:

Less of a Store…more of a Digital Catalogue

Overall, there is a wide variety of products available on the site to buy; good for me! However, the site itself still seems to focus on recipes and product knowledge with only a ‘side of eCommerce’, making it more of a digital catalogue rather than fully fledged eCommerce store. It’s fantastic to have launched, but LCBO call us when you’d like to optimize!

Remember, the ultimate goal of a great user experience is to meet the needs of your customers, with the least amount of difficulty. These top 5 UX changes I’m recommending are only the first to come to mind as I made my way through the LCBO’s customer journey. User experience can get really detailed, but don’t let that stop you from taking the time to audit and improve. I hope this analysis was helpful for merchants, for more tactics to improve the user experience on your site click here for our last blog post on the topic.

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information