Monk Woodland
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)
This website takes inspiration from local markets selling handmade goods, and the user experience helps to convey this.
We used drag gestures to simulate the feeling of real life interactions, such as dropping items into a cart, or hand. The cart process was also streamlined to let the products speak for themselves.
Building 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 requires a press and hold gesture so it doesn’t interfere with the default scrolling in the browser.
On mobile devices, the cart was resized to fit the entire browser screen. This streamlined the checkout process, making it feel a lot more linear to simulate the final stage in buying an item in real life.
