THEME EDITOR

Easy-to-use theme editor for the new web chat client.

THE PROBLEM

Satisfi Lab’s new web chat required an easy-to-use theme editor for their new web chat client. At the time, their way of updating a bot theme was arduous to use and verifying a theme change was unintuitive. The theme editor would allow clients to edit and create their own web chat theme and grant Satisfi Labs the ability to create bots quickly.

SCOPE & CONSTRAINTS

Insufficient number of engineers to execute development.

 

USERS & AUDIENCE

This project focused on the website dashboard experience. Internal AI Engineers built the bots while Client Services customized the web chat and for customers to self service bot design.

THE TEAM

UX Designer (myself) and one remote developers

TIMELINE

One and half months.

WHAT I DID

Researched theme editors from other platforms and also a competitor, “live person”.

Developed low fidelity wireframe sketches to explore different interface interactions and to inform the final user flow.

Conducted stakeholder meetings to explore iterations and obtain final approval on visual and technical approaches.

theme app
webchat

WHAT I DID…

Researched various application theme editors and websites that allow updating of their design.

Research revealed two types of interaction when editing: 1) direct on a component with property fly-out menu, and 2) a large navigable list of components to edit.

Splitting navigation into chat and popup buttons served to define shared styling between components and individual component properties.

WHAT I DID…

Developed wireframe drawings of editor concepts, with a focus on three types of navigation and interaction: 1) list; 2) direct fly-out menu; and 3) hybrid of both concepts.

webchat
nav

WHAT I DID…

Split navigation (chat and popup button) to organize styling between components and individual component properties.

WHAT I DID…

Developed a means to increase portability of themes via the option to import or export a theme file. Using old theme files from the previous bot system served to accelerate the launch of a new theme.

Developed smart start concept by applying four of the clients’ style guide colors to base components (i.e.., header, bot and user bubble, buttons).

smart start theme