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 storied Chicago hatmakers. The site is powered by a static site generator developed in house, and is managed through a custom built admin center. This approach gave us the ability to think through every aspect of the manager's UX, from inventory control to authoring content. In addition to powering Optimo's site we needed the tools we developed to be extensible and flexible, and capable of being extended for future projects.

02. Kit of Parts

My first task was to take inventory of what was currently in place and establish a clear design direction. I inventoried all pages and states, identified the core workflows, and got up to speed on the client's needs and aptitudes. I also consulted closely with our developers to validate our assumptions and inform my understanding of any technical constraints.

We elected to meet these needs by developing a flexible UI kit with parts that could be snapped together as needed. This modular approach helped lower the cost of iteration, and allowed us to explore a wider range of styles and interactions than a strictly state-by-state approach would have. 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 prescribe specific values.

Form validation Grid of icons Hat detail layout

03. Affordances

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 development and help document our decisions I delivered a concise style guide documenting our design decisions. 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 fill in any gaps. This broader approach also laid the foundation for use on future projects, since it gave us a punchlist for common states, visual decisions, and components underlying future CMS builds. Although this style guide was first and foremost about internal collaboration I determined that it should be something we were comfortable putting in front of clients, and polished it accordingly.

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