Mishmash

A minimal office supply brand

Back to showcase
Hero

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

Mishmash Notebooks
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.

Mishmash Website
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.

Mishmash Mobile
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.

Mishmash Shop
Design

Product Page

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

Mishmash Product Page
Design

Shop on the go

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

Mishmash Mobile
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!

Mishmash Checkout
Mishmash Cart Mobile
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!

Mishmash Blog
Mishmash Blog Mobile

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.

Mishmash Colour Palette
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.

Mishmash Styleguide
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.

Mishmash Notebook Iconset

Rocket.Chat

Open Source Team Communication

View project