Responsive Website for Pyro Extracts, A Canadian Craft Cannabis Company
Pyro Web Showcase
Pyro Web Showcase

press to zoom
Information Architecture
Information Architecture

press to zoom
Pyro Web Showcase
Pyro Web Showcase

press to zoom
1/2

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.

Kiseu_responsive_webdesign.png

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.

sitemap@2x.png

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:

Prototype

Mid-Fidelity/Wireframes

After testing the paper prototypes, I started finalizing the prototype in Adobe XD for a better visualization and tested it again.

Perspective-website-Mock-Up-PyroArtboard

Final website design

Pyro Webdesign