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.
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
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)
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.
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:
Verbiage for the site
Any other aspects to add
More information on the company