Intelier

The product suite built for hotel marketers

Intelier project hero.
Intelier project hero.

During 2016, there was not only an initiative to rebrand the company itself (which later became Achiga), but also to transform the CMS (LiveCMS 5) behind every experience we created as a design agency into a product suite built for hotel marketers. I led product design on this effort.

Role

Lead Product Designer

Company

Achiga

Industry

Hospitality

Year

2016–2017

Contributions

Product Design
Design System
Brand Identity

Brand Identity

We started by developing a brand identity that drew inspiration from architecture, utilizing lines, patterns, and other concepts you’d find in drafting to symbolize the design, planning, and development of sites our customers would execute with our products. Ian Walker, our Creative Director, came up the wordmark early on in the process to work off of. Together with the other designers and product manager, I led the effort to create the brand guidelines for the new Intelier product suite.

Brand guidelines.
Brand guidelines.

Intelier brand identity guidelines.

Product logos.
Product logos.

Product logos.

Design System

I analyzed the current platform, took inventory of all of the existing components, and talked to teammates looking to identify missing components or functionality, and listen to feedback. Armed with new insights, I got to work designing new components with accessibility in mind and a style to match the brand – keeping what worked, and redesigning ones that didn't. 

Components.
Components.

New Intelier component library.

Product Design

Over the years of working on LiveCMS 5, a backlog of ideas for improvement had built up, so we were able to hit the ground running when it came to remodelling the information architecture, reorganizing the CMS as a suite of products. The structure of existing "modules" were restructured to more logically under the umbrella of our core products. The majority of existing CMS pages had the same sort of content and purpose, so I also set out to create a page template that could be utilized for this popular use case.

Platform page template.
Platform page template.

Intelier page template (Hotel Sites - Offers page example, desktop).

Exploring enhancements for the Page Builder

A core feature of Intelier products was the Page Builder – a tool users could use design page content and layouts in various products using Blocks. The existing Page Builder only utilized form fields, and we wanted to explore the idea that content could always be previewed in real-time as the user worked. I believed this kind of direct feedback was essential for a better experience.

Exploring enhancements for the Page Builder

A core feature of Intelier products was the Page Builder – a tool users could use design page content and layouts in various products using Blocks. The existing Page Builder only utilized form fields, and we wanted to explore the idea that content could always be previewed in real-time as the user worked. I believed this kind of direct feedback was essential for a better experience.

Exploring enhancements for the Page Builder

A core feature of Intelier products was the Page Builder – a tool users could use design page content and layouts in various products using Blocks. The existing Page Builder only utilized form fields, and we wanted to explore the idea that content could always be previewed in real-time as the user worked. I believed this kind of direct feedback was essential for a better experience.

Exploring enhancements for the Page Builder

A core feature of Intelier products was the Page Builder – a tool users could use design page content and layouts in various products using Blocks. The existing Page Builder only utilized form fields, and we wanted to explore the idea that content could always be previewed in real-time as the user worked. I believed this kind of direct feedback was essential for a better experience.

Page Builder (dektop).
Page Builder (dektop).

Intitial state (desktop).

Blocks sidebar.
Blocks sidebar.

Blocks sidebar expanded.

Add block (dragging).
Add block (dragging).

Adding a block (dragging block to content area).

Platform page template (Hotel Sites example).
Platform page template (Hotel Sites example).

Block dropdown menu (desktop).

Edit block modal - Basic tab.
Edit block modal - Basic tab.

Edit block modal (Basic tab).

Edit block modal - Media tab.
Edit block modal - Media tab.

Edit block modal (Media tab).

Page Builder (tablet).
Page Builder (tablet).

Intitial state - tablet portrait resolutions (desktop).

Credits

Ian W - Creative Director


Aaron P - Product Manager


Kelly K - Art Director 
Mae-Lynn S - Designer