A browser mockup of a landing page.

JH WONDERS

JH Wonders is an ecommerce store that sells organic products in the home & living or facial care shopping categories.

I designed and built the online store on Shopify, where users can browse available products and place orders through the payment gateway integrated in the site. Moreover, I was fully responsible for capturing and editing product images for the store.

TIMELINE
Mar - Apr 2024
SOFTWARE
Shopify, Adobe Lightroom, Figma
STRATEGIES
Web Design, Website Development, Product Photography

PRODUCT PHOTOGRAPHY

To ensure that the website design and development process was smooth and efficient, I wanted to make sure we had all our website assets ready prior to designing and building the website. Hence, I prioritised taking pictures of all the products to store in the asset library. I shot pictures of the entire product line to use for our hero carousel, individual products, as well as product bundles, and edited them on Adobe Lightroom.

A collage of product images.
COLLAGE OF SELECTED PRODUCT PICTURES

SITEMAPPING FOR A SHOPIFY SITE

As I was building the online store on Shopify, I used section templates offered by Shopify as a guide to organize my site contents (e.g., New Arrivals section, Collections section).

A graphic depicting a sitemap.
SITEMAP OF JH WONDERS

WEBSITE DEVELOPMENT

I utilised a Shopify theme to build the respective sections and pages and used existing brand colours (#9a151a and #161f41) throughout the entire website. For each individual product, I inserted 3 images — the front, back and in its packaging — and included helpful information such as usage directions, ingredients and product care etc. A user could also look at respective bundle images when they selected different variant pills.

A graphic explaining product section features.
A graphic explaining product section features.
PRODUCT SECTION FEATURES
A browser mockup of a landing page.
A screenshot of a browser page.
A screenshot of a browser page.
A screenshot of a browser page.
SCREENSHOTS OF THE ONLINE STORE

RESPONSIVITY

Shopify sites are built to be responsive, so that potential customers can browse products on their mobile phones and place orders on-the-go without having to open up their laptops.

Two screenshots of a website on a mobile phone.
Two screenshots of a website on a mobile phone.
Two screenshots of a website on a mobile phone.
SCREENSHOTS OF THE ONLINE STORE ON A MOBILE PHONE

SEE OTHER PROJECTS