Mishmash

A minimal office supply brand

Back to showcase

mishmash keeps looking for new ways to design office supplies, contrasting a clear taste for the minimal with an elaborate and meticulous choice of materials. This is a detailed showcase on how we designed their website.

Client

mishmash

Services

  • UI/UX

Deliverables

  • Website
  • Responsive

Links

Design

Homepage

The doorway to the world of mishmash. Here we must engage the user and make sure he loves every mishmash product as much as we do. The precision of their products was matched by a precise grid that takes over and defines the entire design.

Design

Mobile Home Page

The same attention to detail was kept to ensure a great mobile experience for newcomers and returners alike. Encapsuled by the phone's screen, every mishmash product is allowed to shine.

Design

Shop

Sort & filter every product and find the one that is right for you. You can sort by price and filter by color or size. With that, every focus is placed on the products where you can quickly decide which one is right for you.

Design

Product Page

Explore every little detail, with a high quality gallery, product specs, and reviews by your favourite bloggers. "Added to cart."

Design

Shop on the go

Browse, filter and appreciate every little detail of each mishmash product while you are on the move.

Design

Cart & Checkout

You probably fell in love with the product so why not fall in love with the entire checkout process? Also, why wait until you’re home to buy one of mishmash’s unique notebooks? You can do it anywhere!

Design

Blog

Let's say that mishmash is part of your life. But so are many other things. The blog is all about the things you love, even when travelling!

The website defined the way that people look at our products.

Beatriz Barros, Founder

Styleguide

Color Palette

So the user can focus entirely on what trully matters — the products on sale, we used a greyscale palette on white background, using color only when extremely necessary.

Styleguide

Typography

Used as part of the Mishmash brand, the Circular font was already deeply embeded in its DNA. Used in three different weights — Book, Medium e Bold.

Styleguide

Iconography

With every mishmash product being unique, it was important to create a set of icons that can visually represent every specification and detail.

Rocket.Chat

Open Source Team Communication

View project