Bellhops

Pattern Library

How might we build a component library utilized across native and web-based digital properties as we transition to React .js?

Overview

About this project

Using atomic design principles, I partnered with our front end engineering team and brand manager to update our visual styles in order to maintain UI consistency and componentize assets for React .js —using a system of atoms, molecules, organisms, templates and pages.

Interaction best practices

  • Websites: The user's primary task is to move around an information space and read its content.
  • Applications: The user's primary task is to change the state of some data set by issuing commands
  • Links generally navigate the browser to or from a particular view, but have no real effect in terms of data creation or loss. That means, generally speaking, links should only change what or how data is displayed to the end user.
  • Buttons typically execute an action (create/update/delete) on a particular item within your web application. Hence, if you are changing the state of any part of your application (modifying a database, for example), it may be best to use a button to do so.
  • Users often read only the link text's first few words, so it's important to start with a word (typically a verb) that indicates the action that results if they click the link.

Components

Responsive grid

Typography

Buttons

Cards

Color palette

Validation + feedback

Forms

Inputs

Sections

  • established pre-calculated moves as recommendations in the order flow which gave us an advantage over the competition
  • findings around factors (other than inventory) that contribute most to completion time
  • initiated and implemented operational process changes involving workforce training and protocol

Successful proof of concept:

  • This method proved to cut down on the expense of single-use, wasteful cardboard and is generally easier since no assembly or disassembly of boxes is required
  • Customers enjoyed the ease of use, environmentally-friendly aspect, and low-cost alternative to buying boxes
  • Bellhops (movers) were bought-in because bins stacked neatly eliminating the need to play “Tetris” with irregular boxes
  • Offered a novelty aspect to the experience = potential mnemonic value-add to the brand
  • Pursued partnership opportunities with IKEA who proposed a co-branded promotion and purchase discount—since our offering aligned with their sustainability initiative


Challenges to overcome:

  • Required truck drivers to store plastic containers on their trucks permanently occupying space between moves
  • Needed to explore solutions for reusing/returning the liner component (IKEA bags) since most customers didn’t see a use for keeping 20+ bags long-term
  • Determine the value of manufacturing Bellhops-branded bags vs. continuing to use IKEA-branded bags going forward


Read more on my Medium post Unbox Move Day