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

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:

  • Refining provided the targeted result
  • Quick Add To Cart option + opportunity to view full product page
  • Good differentiation between products
  • Breadcrumbs are accessible for users to use as part of their navigation

Cons:

  • Weird sizing of text
  • Rather small quantities available, where it makes me feel like this is really just a max. per order/person…

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

Pros:

  • GREAT product image
  • Informative product details and descriptions

Cons:

  • Product Details & Product Description sections occupy odd placements that do not optimize the page. A tab format would decrease the amount of content and bring up the main CTA
  • ‘Select A Store’ is above the main ‘Add To Cart’ CTA
  • Shipping details are above the main CTA as well

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:

  • CTA: Nice clear differentiation
  • Users are not distracted by navigation, the LCBO logo acts as navigation avenue back to the main site

Cons:

  • Odd text and shape sizing along the top row
  • Total identifier in the top right hand corner
  • No order mini review

 

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:

  • Distinction between steps, you clearly know you’ve completed one and have three more to go before your order is compete
  • Accounts can be created at this step for those interested + CASL compliant opt-in
  • Opportunity to use shipping information without returning to previous page if desired

Cons:

  • A LOT of copy is on this page.
  • Scary too small to actually read legal at the bottom

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:

 

  • Fees are clearly stated to the user
  • Main CTA is differentiated by its darker treatment

 

Cons:

 

  • Total is displayed twice
  • Mish-mash of crammed content
  • Confirm order CTA is a bit misleading, as you still have to pay

 

Step 4: Payment

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

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

Pro:

  • Grand total is clearly defined
  • Easy to use dropdowns
  • Fields are clearly defined and spaced nicely
  • ‘Place Order’ CTA is true to its name

Cons:

  • Accepted credit card images could replace text
  • Users are redirect to beanstalk for processing, though most would never acknowledge

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.