Sapwood CMS

sapwood-intro-image.jpg

Date

2016 — 2018

 

I began working with Sean in the spring of 2016 on a new Content Management System (CMS) that approached a variety of aspects of the content management process quite differently. Working directly with Sean I began refining the visual design and began to form a marketable, visual brand with some unique flare.

 

The first revisions of Sapwood featured softer colors, rich shadows, a flyout side panel, and many of its elements based on Google’s Material Design. However after some discussion and rethinking, Sapwood needed a User Experience (UX) that was more focused and nimble rather than using a preexisting framework. With that paradigm change came a new refined visual approach and a more delightful way of handling the interface.

 

An overview of Elements used on an example site.

The code editor view for individual Elements with listings of where the Element is used.

 

Sapwood features user roles and permissions, along with a summary of what each user is managing; along with a list of Properties (sites) that are managed on that account.

The omnibar converts into a search field and displays results on a temporary scrim; allowing quick and easy access to other items.

With a new visual approach came a mascot. The Sapwood snake bonded together parts of the brand that needed more of a marketing pull. I began work on delightful illustrations to help illustrate abstract concepts, while at the same time - would begin to codify a fun visual language for zero states on pages, error screens, and the front-facing marketing assets of the CMS.

 

The empty state screen for elements showcases some of the whimsical illustrations while still being informative and gently guides the user to create something.

An example of the green omnibar switching into a loading bar when larger batch actions or uninterruptible actions are being performed.

An example of the green omnibar switching into a loading bar when larger batch actions or uninterruptible actions are being performed.

The last version of Sapwood featured a streamlined interface with a multi-functional omnibar across the top of the screen, refined selection tools, search tools, and additional tweaks to help users manage their sites faster.