The Project:

The goal of the project is to standardize the experience of interacting with our virtual assistant, Kate, across all of the channels she lives in while also keeping her look native to that environment. 

Time Frame: Ongoing

My Role:

For this project, I am the Product Owner and UX Designer.

The Problem:

We have our virtual assistant on the web in 2 applications, as well as in the iOS and Android app. The challenge is that she has different roles, but it is still the same branded assistant. 

I was not the original UI designer for the different Kate projects (only the Android version), but eventually I was put in charge of the group. When I started reviewing the group, here is what the different versions looked like (only mobile views shown for comparison):

Responsive Web Auto Quote Welcome Screen

Responsive Web Renter's Quote Welcome Screen

iOS App Kate Home Screen

Android App Kate Home Screen

Each of the versions of Kate was designed for a different purpose and the original version didn't have a name. Once we decided to give her a name and branding, we needed to make them feel like the same assistant.

The Process:

The first thing I did was to catalog all of the differences in fonts, icons, colors and branding. 

A screenshot from our Confluence page

A screenshot from our Confluence page

Each of the applications are supported by different teams, so any changes are subject to their schedule and resources. As they've had capacity and projects around the virtual assistant, I've been able to request UI changes get the virtual assistants closer to their counterparts (web to web and app to app).

I also had the challenge of the team being on different design kits, so they are using different colors and components. For example, the Auto quote version of Kate at one point transitioned to a card based view based on the page design.

 

Intermediate version of Kate.

 

This version was getting it closer to the original Renter's design while still keeping it looking like it belonged on the page.

The current applications:

We had some additional Kate project come up and working with the designers on those projects, I was able to move the different versions of Kate closer together.

Responsive Web Auto Quote Welcome Screen

Responsive Web Auto Quote Welcome Screen

Responsive Web Renter Quote Screen

Responsive Web Renter Quote Screen

iOS App Kate Home Screen

iOS App Kate Home Screen

Android App Kate Home Screen

Android App Kate Home Screen

This project to standardize  all of the versions is ongoing. I've explored a few different options to help the designers on my team understand the design guidelines to help keep differences to a minimum.

I'm currently testing out an InVision board as a repository for the information. As we update and expand the functionality, this is then a living document of what our current standards for Kate are.

 

 

Kate Branding App Guidelines