habitat design system at Rhino

Rhino logo and wordmark

An initial audit

Redefining colors

Mistake and learning

A couple more tokens

ROUNDNESS tokens
SHADOW tokens

Form components

Establishing patterns for states

Establishing spacing rules for forms

Creating documentation for components

Don’t forget to check out other pages!

Improvement in form UX/UI

Left: Legacy form, Right: Updated forms
  • Alignment
  • Grouping of sections
  • Consistent styling of elements
  • Decreased overall clutter
  • Consistency of vertical spacing

Usability of the system

Table of component statuses
Making this a component allowed for easy access by all designers

Pushing adoption

Mistake and learning

Status of habitat

Other benefits

  • Ease of onboarding for designers and devs in the future
  • Increased consistency within product
  • Increased ease of communication as a common language comes out of having a design system
  • Increased focus for product designers to think about problems and not pixels
  • Increased speed of ideation

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Cecchini-Butler

Aaron Cecchini-Butler

I’m a Sr. Systems Designer at Grubhub working on Cookbook (our design system) — as well as contributing to product design work.