Senior UX/UI Designer
The OCS website, ocs.ca, serves as the primary platform for customers to browse and purchase a wide range of cannabis products, including dried flower, pre-rolls, oils, capsules, edibles, and accessories. The website features product descriptions, detailed information on potency and effects, as well as educational resources to help consumers make informed choices.
User Research:
Identifying and understanding user needs through qualitative and quantitative methods.
Market Analysis:
Assessing the competitive landscape to guide strategic UX positioning.
Project Management:
Leading UX projects from inception to launch, aligning with overarching business objectives.
Design Process:
Implementing a structured approach to design, centered around user needs and feedback.
Cross-Functional Collaboration:
Partnering with teams across the company to ensure seamless integration of UX principles.
The Ontario Cannabis Store (OCS) is the government-run online retail platform for the sale of recreational cannabis in the province of Ontario, Canada. Launched in October 2018, OCS was established by the Ontario government to provide a safe and regulated means for adults to purchase cannabis products for personal use.
Upon joining the Ontario Cannabis Store(OCS) as a Senior UX/UI Designer, my primary objective is to enhance the purchasing experience of ocs.ca, thereby boosting the volume of purchasing orders from our target users for cannabis products.
To achieve this objective, I conducted a thorough examination and analysis of our platform, delineating the user journey into three primary phases:
1. Searching Phase
2. Selecting Phase
3. Checkout Phase
Upon studying our users' journey, it became evident that the majority of our target users begin by visiting our homepage and initiating a search for desired products. This search is typically conducted via two main methods:
1. Searching product keywords into the search bar.
2. Navigating through categories in the mega navigation bar to locate specific products.
Therefore, the initial phase - the searching phase - is dedicated to facilitating our users' ability to effortlessly discover the products they seek, thereby increasing the likelihood of completing orders on our platform.
In the searching phase, the ultimate goal is to enable our target users to effortlessly find the products they desire onocs.ca. Here are the two primary methods for searching products:
1. Entering product keywords into the search bar.
2. Navigating through categories in the mega navigation bar to locate specific products.
To refine the searching approach, the initial step is to identify the current challenges.
Method 1
Searching product keywords into the search bar.
Clicking search button on navigation bar
Upon clicking, the search bar expands
Users to input keywords to search by product name, brands, or related categories.
Flyout menu appears after searching, displaying related products.
Get into Product listing page.
Method 2
Navigating through categories in the mega navigation bar to locate specific products.
Users click on "Featured" or "Products."(L1)
Flyout menu appears and show categories (L2)and sub-categories(L3)
Users select and explore various categories such as edibles, pre-rolls, beverages, etc.
Get into Product listing page.
LCBO
- LCBO's flyout menu effectively displays various products across different levels, ensuring clarity in navigation.
- LCBO features an expanded searching bar, enhancing user convenience and ease of search.
Walmart Canada
- Walmart Canada's flyout menu is proficient in presenting diverse products across different levels, contributing to a seamless navigation experience.
- The platform boasts an expanded searching bar, further streamliningthe search process for users.
Jane Technologies
- Jane Technologies incorporates illustrations or product images within homepage categories, enriching the visual experience and aiding users in quickly identifying desired products.
Search Bar
Expanded sticky search bar . To minimize user friction when searching for our products, I proposed reducing the number of clicks required to access the typing zone and enhancing the visibility of the search bar.
In the original design, users are required to click on an icon button to initiate typing for keywords.
5 Steps:
Clicking search button on navigation bar
Upon clicking, the search bar expands
Users to input keywords to search by product name, brands, or related categories.
Flyout menu appears after searching, displaying related products.
Get into Product listing/detail page.
.jpg)
For the new design, I propose incorporating an expanded sticky search bar that remains accessible to users as they scroll through the homepage. This feature enables users to input keywords seamlessly at any point, enhancing their browsing experience and facilitating quick access to desired products.
3 Steps:
Users to input keywords to search by product name, brands, or related categories.
Flyout menu appears after searching, displaying related products.
Get into Product listing/detail page.
Flyout Menu
Redesigning the visual hierarchy , I collaborated with the digital merchandising team to reorganize the display of categories. This adjustment aims to facilitate user comprehension and reduce confusion regarding L1, L2, and L3 categories.
Version iteration
Unstacked & Horizontal
Pros: Looks orderliness
Cons: Waste of white space, shows less items, difficult for productions, user may get lost when tabbing to the next item
Stacked & Vertical
Pros: Saving white space, showing more items, keeping constant, easier for production, aligning with AODA
Cons: Looks packed
In the current state, users may experience confusion due to the vertical layer approach, which results in the display of numerous duplicated words.
In the new design, I implemented a 5-column layout and reorganized various categories. Users can now readily differentiate product categories through distinct font sizes and colors. Additionally, to avoid obstructing the entire screen on desktop, users can simply click on "SHOW ALL >" to access the complete product listing page.
Currently, users need to navigate to another screen to reach the next level, which can disrupt their user journey and potentially cause confusion.
For new design, I've suggested transitioning to an expanded menu to allow users to view L2 to L3 categories. This approach reduces friction when users need to navigate back to the previous level, resulting in easier access to their desired page.
Homepage
Adding entry points in homepage
In the original design, users must need to enter to product pages through navigation bar.
In the new design, I suggest adding a section of categories with images directly below the hero banner. This placement ensures that users can easily view all the product categories upon entering the homepage.
Additionally, this creates an additional entry point for users to access the product listing page, ultimately boosting the click-through rate of our platform.
Moving to the selecting phase, users progress from choosing specific products from the product listing page (PLP) to the product detail page (PDP). This involves transitioning from a list of products to a single selection.
In the selecting phase, our objective is to entice users to click into specific product detail pages (PDP) from the product listing page.
Two key elements significantly influence the user's click-through rate: product relevance to their needs and any promotional offers available.
Therefore, in this phase, my focus will primarily be on enhancing the user experience related to sorting their desired products and ensuring clear visibility of product tags on the product listing page.
.jpg)
Product tags
Designing for product tags . Applying 4 new product tags in Product listing page (PLP) and Product detail Page (PDP).
In the original design, users are required to click on an icon button to initiate typing for keywords.
Designing for product tags . Applying 4 new product tags in Product listing page (PLP) and Product detail Page (PDP). In the new design, I curated a set of product tags aimed at enhancing user engagement. These tags include "New arrivals", "Price drop", "Coming soon" and "Last chance" .
Through A/B testing with users, I explored two variations: Version A incorporated icons to represent these tags, while Version B utilized text with different colors for easier user distinction.Considering WCAG compliance, we opted for Version B to ensure universal user understanding and accessibility.
In the checkout phase, we currently employ a 3-page checkout flow for users. This flow requires users to complete the entire checkout process in three sequential steps: personal information, shipping details, and payment information.
To address these issues, I am proposing a streamlined one-page checkout process for users, aiming to minimize friction compared to the 3-page approach. Users will be able to input all required information section by section on a single page. Upon completion of each section, the interface will automatically transition to the next section. This approach allows users to complete the entire checkout process with fewer clicks and page loads.
Users are currently required to navigate through a three-page checkout process, which can introduce friction as they transition between pages. This disjointed experience may discourage users from completing the entire process, leading to abandonment.
Step 1: Personal Information
Step 2: Shipping Information
Step 3: Payment Information
.jpg)
User Acquisition Rate
The user acquisition rate for new products increased by 23% after adapting the product tags for mobile devices and incorporating a new fly-out menu.
Faster product discoverability
Users reported it took less time to find the products they wanted.
Policies and Legislations
The cannabis industry is tightly regulated in Canada. Each province has different policies and legislations.
.jpg)
