BloomHanmade Webshop

Deployed jewelry webshop for a client in need.

As a group we worked in WooCommerce to create a functional and expansive webshop website for a real client with real products. Because it was a deployed solution – we had to pay more attention than usual to copyright, making sure all photos and content were original.

Project Overview

Another school project – this time for a real client, an amateur jewelry maker – Bea. Because of her knee injury she was forced to close her physical store and had to resort to selling her products online through Instagram and other social medias. We decided to help her out by creating a webshop for her.

Main Focus Points

Since the special nature of this project (working with a real client on a real case), and deploying the solution at the end as an actual shop, we immediately figured out some focal points that we wanted to focus on.

Active communication with the client and implementation of feedback.

Appealing portrayal of jewelry using original photos, in order to attract customers.

Creation of content for the website outside of basic webshop features.

Challenges

Of course, a few challenges that came up while working under these focus points.

  • We didn’t always understand our client’s vision first try, having to re-do certain elements of the website.
  • Taking every photo ourselves also added to our workload, which wasn’t helped by us deciding to photograph and categorize every product in our client’s catalog.
  • This workload problem was also exacerbated by us wanting to make extra content for the website, creating additional subpages, all of which of course also needed some photos.
  • All of these also contributed to time management issues, where we didn’t have enough time to do everything we wanted, or stayed up way too late to finish something.

Design

Gestalt Laws

In this section, I wanted to focus on the use of Gestalt laws in BloomHandmade’s website design. These have been used extensively during the design process of the webshop:

Law of Proximity

Keeping elements that are related to eachother close together.

Products put close together
Menu items close together
Event questions close to event headline

Law of Similarity

Making sure to make related objects similar to one another.

Questions look similar to each other
Products on sale look similar

Law of Common Region

Seperating different sections using different backgrounds with defined borders (closed regions).

Sections separated with a different background
Cards act as a closed region

All of these laws ensure that the solution stays intuitive and readable.

Jakob's Law

Per Jakob’s Law, “Users spend most of their time on other sites”. That is why we wanted to borrow certain elements from other jewelry webshops, to make sure people knew intuitively what the website was trying to sell.

This is most apparent in the photography style, where we featured stylistic photos of the jewelry in a white void alongside pictures of models (for which we asked our classmates for help).

Photo style inspiration - Enamel Copenhagen
Both photo style and filter design inspiration - Dansk Copenhagen

Learnings

Through the long process of working with our client, multiple feedback sessions and even more sleepless nights, these are the main parts we took away from this project.

01

Crucial time management skills.

02

How to work with a client in order to meet eye-to-eye and realize their vision.

03

How to create a webshop layout effectively and work with WooCommerce.

04

Further learning how to successfully implement UX laws.