Ecommerce Site Design

Miik

  • Web design
  • UX design

Miik is a Canadian sustainable fashion brand making comfortable clothing for women. I redesigned their e-commerce website using customer feedback to identify common pain points. Built with the “District” Shopify theme as its basis, I was responsible for wireframes, site mapping, visual design and development.

Miik homepage shown on a laptop and iPhone

Homepage

Miik homepage when viewed on a desktop display

The previous homepage had very little content and didn’t display well on mobile devices. The redesigned page now has a responsive hero image, links to featured collections, and a carousel of bestselling products. I also added press logos to build credibility. The result is a page that better represents Miik’s offering and invites visitors to start shopping.

Across the website, I reorganized the main navigation menu, putting the two most visited pages (“New arrivals” and “Sale”) at the top level for easy access. The footer menu has been expanded to hold frequently visited links and organized into “Help” and “Company” categories.

Previous Miik homepage design when viewed on a desktop display
Original homepage design

Original homepage design

Previous homepage design viewed on an iPhone

New homepage design

Miik homepage shown on an iPhone

Product Collection Page

Miik product collection page

One of customers’ biggest frustrations was that it was difficult to quickly find products available in their size. I used a third-party app to add product filtering based on type, size, price and colour. Colour swatches under product images on collection pages indicate available options and allow users to preview each colour before visiting the product page.

I revised how product photos are cropped, focusing on a single item rather than showing a full outfit with multiple products (ie. cardigan, blouse, and pants). It’s easier to browse as the user no longer needs to read the product name to know which product is the focus.

Previous design for the product collection page
Previous collection page

Product Page

Miik product page

On the old product pages, the size selectors didn’t have a disabled state, so it wasn’t obvious which sizes were sold out. Now, unavailable sizes are greyed and crossed out and can’t be selected by the user.

I cropped product images to a 3:4 ratio, which scales to fit comfortably on most desktop and mobile devices. Previously, product photos were tall and narrow—nearly a 2:5 ratio—and were getting cut off on smaller displays.

Thumbnail images for additional product colours have been moved up into the first viewport and are now visible on mobile, with navigation dots to indicate where more photos are available.

Previous design for the product page
Previous product page as viewed on a 13" laptop

Original product page

Previous product page design viewed on an iPhone

New product page

Miik produce page shown on an iPhone