LCBO App Case Study

The Liquor Control Board of Ontario (LCBO) is a Crown corporation that retails and distributes alcoholic beverages throughout the Canadian province of Ontario. It's mobile app has X downloads with a less than stellar average rating of 1.7 stars on the Apple App Store. Working in a team of two, we chose to improve the LCBO mobile app as our initial usability test showed a strong disconnect between the mobile and desktop shopping experience. The final result is a mobile app that provides users with the same buying experience as they would have if they were purchasing alcohol from LCBO’s desktop website. We completed this cast study in only two days.

Research

The first step we took for this redesign challenge was to conduct a usability test. We took screenshots of the typical flow of a user searching for a product, viewing product details, and checking out. We found a large number of usability issues including a confusing search filter, overwhelming search results screen, and the lack ability to order and checkout products directly from the app. A full annotation of issues found during the user flow is shown below.

Improving the user task flow

Our analysis showed that the current user task flow takes a minimum 12 actions just to reach the store inventory screen. This does not include the checkout flow as current app does not support this feature. This means that a user trying to purchase alcohol is unable to do so using the current LCBO app.

Our redesigned user task flow takes just 10 actions to complete the entire purchase, including the checkout flow. This was accomplished by simplifying the search flow. Users go directly from product selection to the results screen, bypassing the search filter flow until the user actually wants to adjust them.

Above: The existing user task flow (left) and the redesigned one (right). Use the slider to compare!

Low-Fidelity Wireframes

After we determined the major usability issues with the existing LCBO mobile app, we brainstormed opportunities for improvements and began creating low fidelity wireframes. Our goal was to make the home screen more appealing to users by showing them images of the different alcohol categories offered by LCBO. Once the user taps on a category, they will be lead directly to the products results screen instead of going through a search filter funnel like the existing app does. If the user wants to filter down their results, then they can easily do so from the product results screen. We also designed the product detail screen to showcase the image of the product and also provide users with related items and suggested pairings for their product.

High-Fidelity Wireframes

The final step was to turn the low fidelity wireframes to high fidelity by incorporating LCBO’s visual identity (colours and font style) with image assets taken directly from the LCBO website.

Interested in working together? Get in touch!

Email: richardli@richardlidesign.com
LinkedIn: linkedin.com/in/richardlidesign
Resume: view/download