top of page

!

Please note: This is an ongoing project that is currently in progress.

tru remedies.png

BODYCARE

Cannabis-infused skincare products

Create an e-commerce site to reach a wider audience

CLIENT

ROLE

CATEGORY

TOOLS

Tru Remedies

Product Designer (End-to-End)

Responsive E-Commerce Website

Figma

project brief.png

Project Brief

Create a responsive user-friendly e-commerce website to showcase skincare products in a way that highlights it's handcrafted, locally sourced and organic benefits. 

comp analysis.png

Competitive Analysis

We reviewed websites of existing brands in the same space. It was evident that most competitors focused on a  younger demographic. Our brand is meant to target an older audience, which means we need a simple and clean aesthetic that is easy for anyone to navigate.

Image by BBH Singapore
audience.png

Audience

The goal is to create products that are inviting to people who can really benefit from cannabis based products, but may not yet feel comfortable using them. By educating these people, we can help them see the appeal of such products.

explore.png

Low-Fidelity Exploration

By generating content lists and simple wireframes, we were able to visually see what components were necessary to include in the design. We quickly iterated on different configurations to see which captured the experience we were targeting for our audience.

IMG-4498.jpg
journey.png

Journey Map

Developed to assess the user flow and understand the happy path. Additionally, this could be used to verify the current content list.

about

landing

product

cart

payment

contact

journey map 2.png
noun_style guide_194081 1.png

Style Guide

We used soothing natural colors to accentuate the organic and earthy properties of the product. The typography is clean and legible to assist in a clear message, while being easily understandable.

01 inspiration

inspo.png

02 color palette

#7BA87A

#FFFFFF

#C998E7

#3A3A3A

#717275

#C9CACC

04 logo

tru remedies.png

03 typography

Benton Sans - Condensed Bold

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9

Benton Sans - Regular

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9

Benton Sans - Light

Aa

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9

Group-1.png

Design Refinement

We explored and  tested a few different versions of hi-fidelity solutions to optimize the experience and user flow.

landing page concepts

LANDING PAGE option 3.png
LANDING PAGE option 2.png
LANDING PAGE option 1.jpg

product page concepts

SALT options 2.png
BALM options 2.png
LOTIONS option 2.png
PRODUCTS option 2.png

concept 2

SALTS option 1.png
BALMS option 1.png
LOTIONS option 1.png
PRODUCTS option 1.jpg

concept 1

user flow.png

User Flow

Focusing on simplicity and clarity, this user flow allows for an easy-to-understand path to access all features of the site.

desktop monitor.png
Macbook Pro.png
bottom of page