Late August 2019 - Mid September 2019

BeCooL Face Mask Ltd.

I was hired by BeCooL Face Mask Ltd. to create sample e-commerce sites using Shopify.

Role(s): Web Designer, Visual Designer, UX/UI, UX Research, User Testing

Tools: Shopify, Adobe Illustrator, Adobe Photoshop

* This project was not completed by me, I was a part of the iteration phase and my designs below are just mockups.

What is BeCooL Face Mask Ltd. ?

BeCooL Face Masks are reusable face masks that can be scented with disposable fragrance sachets.

 

Face masks can help prevent spreading sickness and protect the wearer's respiratory tract from pollution and infection. BeCooL Face Masks also help mask any odours around the user, whether they are on foot, on public transportation or on/in their vehicle. BeCooL Face Masks can be scented with Peppermint, Apple + Peppermint or Mango + Peppermint. 
 

Branding

Brand Colours

Typography

Montserrat Medium: "face mask that changes your mood" underneath the BeCooL logo.

Roboto Condensed: used for the selling points on the packaging

Exo Regular: used for the packaging directions on how to use the product

Logo

First Iteration

Some things that were requested: 

  • Website is to be in English

  • Currency in Thai Baht

  • Shopify as the e-commerce site builder

Other than this, I wasn't given much information or direction. I decided to play it safe, keeping the website simple and easy to maneuver.  I was provided photos from a shoot the founder had done prior to inviting me onto this project, as well as the company slogans - "the face mask that changes your mood" and "when the world around you stinks, wear BeCooL Face Mask". 

The video below shows my first iteration, which is brighter, has highlights of the branding colour scheme, and I really wanted to play around with a theme of happiness relating to the first company slogan - "the face mask that changes your mood". This was a very safe iteration, as I unfortunately did not have much direction at the time. 

Some things that I requested: 

  • Product photos to list the products on the website

  • Branding guidelines from the previous hired designer (logo, fonts, scents for the sachets)

  • Aspects to integrate into the website 

  • More information on the actual company (how it was thought of, why, etc)

Second Iteration

Some of the feedback I was given: 

  • Edit some of the photos (removing the pouch on the mask)

  • Get the focus on the motorcycles and the riders

  • Seems basic, needs better design

As requested, I edited the photos using Adobe Photoshop, and I added in more photos focusing on the motorcycles and riders. Given the feedback and taking in consideration the deliverables I requested, I was only able to change the photos at the time. 

Third Iteration

I wasn't given any feedback, but I wanted to go with a darker themed website to match the cool vibe that the motorcycles and riders give off. I was given most of the branding guidelines, and I made do with what I could by redrawing the logo. I at least had the fonts to integrate, and I decided to elevate the website with timelapse footage of Thailand's traffic. I also added the logo to the top center of the site, drew a mockup of a (reloadable) gift card and made the teal a highlight colour as it contrasts well with the darker theme. 

Some things to note that are currently pending:

  • Product photos

  • Verbiage for the site

  • Any other aspects to add

  • More information on the company