LCBO APP REDESIGN

PROJECT

BRIEF

For this project I worked with a fellow classmate on a redesign challenge of an existing app of our choice. 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 project in only two days.

Software Used: Sketch, Photoshop, InVision

hero-image-2xhero-image-2x

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.

existing-screens-audit-v2_2xexisting-screens-audit-v2_2x

USER TASK FLOWS

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.

This 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. 

Current User Task Flow:

before-task-flowbefore-task-flow

Redesigned User Task Flow:

after-task-flowafter-task-flow

LOW-FI

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.

low-fi-collectionlow-fi-collection

HI-FI

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.

hi-fi-collectionhi-fi-collection