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
A
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.
B
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.
C
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
A
The Beer Newbie
B
The Beer Tourist
C
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.
Wireframes
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.
Components
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.
