Responsive Website for Pyro Extracts, A Canadian Craft Cannabis Company
Client
Pyro Extracts is a Craft Cannabis Company, based in British Columbia, Canada.
Timeline
4 weeks
Context
Pyro Extracts provides dynamic enthusiasts with the highest grade cannabis extracts and vaporizers. The Pyro Vaporizer is a handy product and distinguishes itself because of its size and portability. The brand symbolizes movement, transformative exploration and discovery which is why it is represented through the theme of the great Canadian outdoors.
Objectives
Website and e-commerce redesign for consumers & wholesalers, which:
-
Showcase the Pyro Vaporizer and its hardware, size etc.
-
Showcase the latest products and bestsellers
-
Show products / flavours
-
Visual concept for different flavours
-
Include links where consumers can buy the product
-
Wholesaler webform
-
Allow readers to sign up to the newsletter
-
Showcase Instagram feed
-
Search through content
Platform
Design for responsive web, desktop screens as well as mobile screens.
Traget audience
Females and males, age 19 to 45
Visual mockups on desktop and mobile for
-
Homepage
-
Shop page
-
Product page
-
Menu
-
About page
-
Wholesale webform
-
Contact page
-
Checkout/Cart page
Research
Competitive Analysis
Competitors play an important role in sustaining the growth of the beauty industry, especially in Korea. As we are selling our products in Canada, the main competitors for Korean Skincare products are Soko Glam, Glow Recipes, Dr. Jart+, Laneige and Tatcha, (Tatcha, Japanese beauty products).
The competitor's websites are well developed and are easy to navigate. What makes Kiseu stand out from their competitors is the focus on the skincare spa & ritual every day and night.
Challenge
Modern consumers expect to find answers to their questions quick and without having to do an in-depth research. I began my research journey by looking at competitors and interviewing people. The target users were females between 18 years and 35 years in Canada and Europe. The goal was to find out the consumer pain points and their needs from a beauty brand/ online shop. Here are some of the main pain points that crystalized from my research:
-
confusing website navigation
-
doing a lot of online research for skincare ingredients
-
product availability
-
multi-channel online shopping
-
difficult or unserious check-out process
-
tracking of delivery
Persona
I created a user persona to design the website for. This way we can achieve a better understanding of the user's needs and design accordingly.
Alice, 28
Gender Female
Location Vancouver, BC
Occupation Sales Manager
Description
Alice is a young woman in her late-twenties. She lives and works in Vancouver as a Sales Manager with a yearly income of $50,000. She cares about her appearance and is always looking for the right product with good ingredients. She finds it difficult to research for all the ingredients and how to use them in the right order on different blogs and websites. It takes a lot of time because the market is overwhelmed, which frustrates her.
Goals
-
Looks for good ingredients for her skin type
-
Hopes to find all products (Cleanser, Toner, Serum etc.) in one company
Challenge/Pain points
-
Not be able to find ingredients and description
- Doesn't want to spend a lot of time on different blogs and websites
Solutions
In the next step I tried to find solutions for all those online shopping pain points and came up with the following features:
-
Simple and clean looking navigation before entering the shop page (filter by skin concern, skin type etc.)
-
Including an ingredient glossary on the website to make it easy to find out more details about the ingredients without researching on other websites
-
Useful tool for the skincare ritual (including the right order, when and how to use, link to ingredients, link to product)
-
Clean and simple look for check-out und ordering process
-
Responsive design for multi-channel online shopping
-
Links on product pages to useful articles about the product
Planning
Information Architecture
For a better understanding I created the information architecture which defines the overarching structure and relationship between all areas of the site.
Prototype
I started off the prototyping journey by sketching out ideas on how I visualised the individual pages would look like. I drew out the main screens and tested it with users to find out how to make the prototype best for them. Here are some final paper prototypes:
Mid-Fidelity/Wireframes
After testing the paper prototypes, I started finalizing the prototype in Adobe XD for a better visualization and tested it again.
Final website design
