WEB CHAT REDESIGN

A redesign and rewrite of their archaic web chat client.

PROCESS

I typically follow Lean UX alongside Design Thinking methodology to verify my design decisions are supported by research and feedback. I follow Atomic Design principles for component designs.

EMPATHIZE

EMPATHIZE

Empathy is the catalyst for understanding the user, wherein the problem is defined based on findings.

IDEATE

IDEATE

Work on creative solutions based on the problem statement begins! This process includes workflows and sketches to help explore new options and alternative solutions.

prototype

PROTOTYPE

Experimentation is underway to translate ideas into tangible products. Proposed solutions may be accepted, improved, redesigned, or rejected.

TEST

TEST

Testing outcomes provide insight that often cycles back to a previous step or redefining the problem statement.

webchat

TIMELINE

Six months including two months for ADA audit.

KEY GOAL

In order to remain competitive, Satisfi Labs needed a “facelift” to their aging web chat client. Building a production ready bot was complex and difficult to release in a short time. Lack of customization options hindered matching a customer’s brand. ADA non-compliancy placed the company at risk for potential lawsuits.

SCOPE & CONSTRAINTS

The team began with one remote developer and myself, with limited time devoted on behalf of the former due to other work projects. Interfacing with the old Dashboard (bot management tool) was challenging since legacy code needed modification. The CEO, CTO, and Marketing provided various looks for the web-chat due to a rebrand of the company.

USERS & AUDIENCE

This project focused on the website and an in app experience. Internal AI Engineers built the bots and Client Services customized the web chat for customers.

WHAT I DID

Conducted extensive research of competitors and their offerings (e.g., Facebook Messenger, LivePerson, LiveChat).

After analyzing and discussing various features I met with the stakeholder to discuss possible features to create a Minimal Viable Product (MVP).

Based on the proposed feature sets, I created low fidelity UI drawings of web chat interface.

webchat
webchat

LOW FIDELITY SKETCHING

Based on the feature sets, I created low fidelity UI drawings of various chat interfaces with different button configurations and module concepts.

These low fidelity mockups were used for internal testing prior to high fidelity prototypes.

  webchat

WHAT I DID…

Having verified design decisions with the UI drawings, I created high fidelity prototypes for each component using Atomic Design Methodology in sketch and later imported the design to create an interactive prototype with InVision Studio.

While there were numerous iterations and testing of prototypes, this process helped finalize the company’s chat theme which became the default setting for all bots.

WHAT I DID…

I began creating each component in html and using Bootstrap and BEM methodology for css. During the html development phase I built in ADA compliance to make QA-ing easier for the internal audit with assertive technologies.

Later this code was integrated into VUE.js framework. Minimal changes occurred from the original design due to testing with the high fidelity prototypes.

An exciting aspect of this project was creating a Javascript api to describe and map functionality of the new web chat components.

I wrote development documentation and a style guide to assist developers and AI Engineers.

Lastly, an internal audit of ADA compliance was conducted for visual contrast and tested with screen readers and keyboard only navigation.

webchat

ATOMIC COMPONENT DETAILS

Brad Frost described Atomic Design as a methodology to accelerate the process of creating modular designs. Using Atomic Design concepts, small details were documented and built into larger components.

atomic design
webchat

COMPONENT STYLE MAPPING

All components have a set of CSS styles associated with its visual styling. It was critical to document every detail in order to simplify and accelerate development.

DOCUMENTATION

A style guide was written to make sure new chat bots were visually consistent with flexibility in order to showcase a client’s branding.

Each component was documented with graphics displaying associated styling.

In addition, development documentation was written to refer to future, new APIs developed for using the chat system in different applications.

webchat
  wicked chat

OUTCOME

With the project completed in six weeks from a team of three, the integration took longer to complete due to old Dashboard (bot management tool). The majority of the system had to be upgraded in order to support the new redesigned web chat. The scope of the project, including the dashboard integration, was completed in six months.

Visually, stakeholders were ecstatic with the new web chat. App responsiveness was snappy and a pleasure to interact with.

Internally, the new web chat was a game changer. AI engineers now have more flexibility in creating relevant experiences with the new components. With the new features, bots can be easily expanded and updated.

Using theming capability, Client Services is now able to modify a bot’s theme to match the style of the client’s branding in order to visually integrate onto a client’s website.

To demonstrate full compliance, Satisfi Labs hired a third party vendor to conduct a full ADA audit of the web chat in order to deliver a VPAT document.