Optimo product inventory example

01. Context

I worked with the We Can't Stop Thinking team to design content management tools for optimo.com, the online home of the legendary Chicago hatmakers. The site is powered by a custom static site generator developed in house. Tight control over all aspects of the CMS gave us the freedom and flexibility to provide a tailored and highly polished experience to the site's administrators.

02. Kit of Parts

I began by taking inventory of the current interface across both visual and interaction design. I inventoried all pages and states, identified the core flows, and got up to speed on our users' needs and constraints. I worked closely with our developers to validate my assumptions and better understand the technical requirements.

We elected to meet develop a flexible UI kit with parts that could be snapped together as needed. This modular approach helped keep the cost of iteration low, and allowed our solution to evolve iteratively. Comps were still used to validate our thinking and confirm that the interface was unified and consistent, but they were intended to confirm that our approach was working rather than establish as the source of truth for the UI kit.

Form validation Grid of icons Hat detail layout

03. Visual Language

The interface is relatively flat, but we didn't want to lose clear affordances that communicate interactivity, so depth was added at key instances to improve the visual hierarchy and semantics. Button styles are restrained and familiar, inline links are underlined, and inputs and form elements align closely with standard browser user-agent styles. This helps to keep UI elements instantly recognizable and intuitive.

Hat detail layout

04. Extensibility

In order to aid future extensions of the system I created documentation that enumerates our specific design decisions and the reasoning behind them. This meant establishing styles that would govern components and use cases that we hadn't yet addressed, as well as defining higher-level visual guidelines to help cover any gaps. This system-level approach gave developers a source of truth for how design saw the system, from application states to component construction.

Brand standards color guidelines Brand standards type guidelines Brand standards type system in use Brand standards media components Brand standards form components