stands for Nova Scotia Liquor Commission, and I redesigned their e-commerce website responsively using Figma's design and prototyping tools as a professional development project.

Using secondary research to inform user stories and flows, I discovered an opportunity to improve filtering on the site. So far, I have created a filtering architecture which I used to design prototypes and wireframes.

Next, I will expand on the visual design for this site while improving the design concepts from their prototype state.

UX/UI Development

Using secondary research including a competitive anaysis to inform user stories, I created three user flows that encapsulate several of the sites opportunities for improvement. Primarily: filtering and more searchable product details including vendor information, and flavour profile information.

User Stories


The Beer Newbie

As a person with allergies, I need to be able to see the ingredients in any drink I purchase so that I can enjoy drinks that won’t trigger my allergies.


The Beer Tourist

As a tourist, I want to learn about the different vendors and the artwork on certain cans so I can learn more about the history and culture of the place I am visiting.


The Beer Enthusiast

As a beverage enthusiast, I want to be able to access flavour information of craft beverages so that I can make informed purchasing decisions.

User Flows


The Beer Newbie


The Beer Tourist


The Beer Enthusiast

Filtering Architecture

My goal is to design a new filtering menu on the NSLC website that works the same way on mobile and web platforms. In order to do this, I propose that a progressive disclosure approach would work best to simplify the filtering options, so that users would not be overwhelmed.

Using affinity mapping with someone familiar to the site, we determined which categories fit within each other. In order to simplify this project, I decided to focus on one category: beer.

Wireframing & Prototyping

I created simple wireframes based on the user flows, focusing on the home page, product listing page, and the selected product page. The filtering menus would appear on the product listing page, and would be visible in a description on the product page.

I kept web and mobile usability in mind by creating a responsive prototype in Figma using a plugin. This way, I could test any design ideas to see if they would work on mobile and web platforms.


Designing simple wireframes allowed me to visualize transitions from page to page, and it highlighted a few opportunities for improvement such as the filter list displaying in a table on the product page.

Responsive Prototype

Visual Design

After making several wireframe screens and prototypes to flush out the design paths, I began creating iterating on the visual designs for the filtering menu, the home page, and the product card.

Filter menu

Through prototyping, it became clear that I could remove the "product search" page by moving the filter meu to the home page. I wanted to keep the original idea of progressive disclosure within the filters, but I left the categories (beer, wine, etc.) as well as sort by price visible at the beginning.


To make the design easier to update, I created a robust product card with variants and component properties so that I could change different elements easily such as the price, promo icons, and images.

Next Steps

I am in the process of improving the home page design through ideation, then I will move on to the product and vendor pages. Lastly, I will include some ideas on motion graphics such as transitions between pages, add to cart animations, and transitions to reveal new information.