• MixUnit

Summary

MixUnit is an online store with a collection of 1000's of T-shirts and accessories from hand-selected streetwear brands, DVDs and the latest mixtapes on the market.
Although I mostly focus on designing apps these days, this website project provided some fun challenges and issues to solve.


home

Context & Challenges

The website's huge catalogue of over 5000 clothing items, hundreds of DVDs and more than 7000 mixtapes meant that I had to carefully structure the navigation and make sure the user doesn't get lost.
As the website mostly carries streetwear and street related items, it was important to maintain the authenticity a visitor would expect, while also providing a trustworthy environment and solid check-out experience.


responsive

" ...over 10,000 items nested in various categories. "

Process

There were two ways I could approach the project: to use the existing structure of the website, give it a facelift and make it responsive, or to start from scratch and thoroughly analyze the shopping and check-out experience. I opted for the latter.
So I started with rough sketches to figure out how to best structure the site, integrate all the core elements and improve on certain aspects without alienating the existing customer base.


Goals & Objectives:


  • The website should allow for a quick overview of the latest and hottest products.

  • The user should be able to quickly select a product out of over 10,000 items nested in various categories.

  • The website needs to be responsive and work seamlessly on all commonly used devices.

  • The navigation should be extensive without being alienating.

  • The user should feel safe and secure at any stage of the shopping experience.



  • Solution

    I clearly structured the main navigation on top and by centering the logo, I was able to separate browsable products from company related items, without mixing them up.
    For the products and detail page layout, I used cards to create components and elements that smoothly adjust to different screen sizes, without distracting from the products or looking boxy.

    • details

    Clear Focus

    After attracting the user to the desired product, we then had to sell the item. I wanted to make this as straight forward as possible, so I set a clear focus on product image, price and add to cart button.
    Many products have lenghty text descriptions and/or video or audio previews, but instead of cluttering the "above the fold" area with entertainment content, we made it easy for the user to add an item to the cart without any distracting information.


    Smart Filters

    Filters were a crucial part of the browsing experience. As different items have different options, an expandable side filter structure allowed for the user to be able to quickly adjust search preferences.
    The filter menu adapts to its parent category, so it always shows the relevant information, regardless if it's clothing, DVDs or mixtapes being browsed.


    • filters
    • responsive

    Responsive Grid

    Making the website responsive was one of the initial main goals of the redesign. Whereas we were able to base the main grids on a Bootstrap layout, our filters however required some unique features and customization.


    Mobile Filters

    Mobile filters introduced a new challange, as fitting in all the different search options with limited screen real estate became tricky.
    An expandable filter menu proved to be the right solution, so the user has all the filters right where they're needed, meanwhile making them collapsible so the focus isn't deflected from product browsing.


    • mobile filters

    Results

    Being able to provide a solid solution to the problems at hand always feels great, but to catapult a client ahead and seeing that business bloom feels even better.
    Visit the website here.




    Work with me

    Got an exciting project and think I might be a good fit?

    Email me