Monk Woodland

A tactile online shopping experience
Monk Woodland

Monk Woodland is an e-commerce store that takes inspiration from the tactility of wood, and the real-life experience of shopping at a local arts and crafts market.

This website was a collaborative effort I worked on at Monk with my fellow colleagues, and it features many in-jokes and things associated to our process and the studio.

Responsibilities

  • Web design in Sketch
  • Pin illustrations using Photoshop and Illustrator
  • Product photography and image editing
  • Front end development using HTML, CSS and JavaScript (the Woocommerce functionality was handled by my amazing colleague)

 

Visit the site

The aesthetic I was aiming for was an immersive and tactile experience, as if you were buying a physical product from an independent vendor at a market.

Monk is well known for it’s love and use of wood around the office, so I used that element extensively and took cues from skeuomorphism to exaggerate the site’s tactility and diy aesthetic.

We used drag gestures to simulate the feeling of real life interactions, such as dropping items into a cart. After bouncing around a few ideas in the office, the cart took on the shape of a wooden mannequin hand, which added a kitschy, kooky vibe to the whole aesthetic.

The cart process was also drastically streamlined and minimised so the products could take centre stage. I really enjoy how this process functions and how easy it is to use intuitively.

 

On mobile devices, the cart was resized to fit the entire browser screen.

This focused the checkout process even more, making it feel a lot more linear to simulate the final stage in buying an item in real life.

Designing and coding the mobile experience was particularly challenging because dragging can conflict with default touch screen functionality.

We solved this by using hover states to display the product description, which only requires a single tap.

Dragging an item to the cart also requires a press and hold gesture longer than three seconds, so it doesn’t interfere with the default scrolling in the browser.

…and I also drew the pins! I’m super happy with how these turned out, particularly because they encapsulate so much of what makes Monk, Monk. :)

See all projects