Delivering a new kind of marketing tool

Client

Genesys

Type

Web Experience

Responsibilities

Prototype, UX Design, UI Design

Genesys experience builder

Overview

Genesys partnered with our team at Studio Science to have us develop an online tool for marketing to help their customers build their ideal customer experience journey. My role in the project was to design the experience that allowed customers to build this journey.

Ideas for how a user would select items

MidFi examples of how a user would select items

Function

In our initial sprint meeting, one idea we heard a few times is that the Genesys team felt that this experience should mirror building a Ford F-150 on Ford's website. We talked about how a customer can see the basic truck, but they have access to every option they could possibly add to this basic truck to build their preferred truck. The idea made a lot of sense, but the hard thing was selecting a visual that could represent both the entry-level trim, as well as the fully-loaded version.

Visual experiments lead me down creating a sheet that slides over the map. This direction had a few benefits. First, it allowed us to expand the viewing area of the map and reduce the need to move the viewport to see all of the buildings. The mobile experience also followed for a more consistent experience. Finally, the sheet showed users more of the options available to them in each category.

The rough final way the experience will work

Sheet design that works consistently across mobile and desktop

Form

Obviously, when working with an established brand like Genesys, you have to work within their brand standards. Some see this as a limitation but I don't. They have a great brand to start with, and due to some other work I have helped with, I felt I had a good feel for what will work their brand. The biggest challenge was creating the isometric city in a way that made it feel like an extension of their brand.

With type, iconography, and color already determined, I focused on what I could control, the subtle design interactions that support the overall visual style of the brand. Here are a few examples.

The tab bar at the top of the page uses a really opaque pill background as a selected state. This provides a nice secondary color supports the primary brand color, and acts as an extra indication of selection, helping to improve accessibility.

I used thicker borders for card selections to further help differentiate them in both color and visual presence. I had experimented with filled cards, but it broke the feeling of the light, airy design that the brand emphasizes in other areas. However, I did select to use filled icon backgrounds for the cards so we could continue to differentiate the selected sections beyond just an icon color change.

This experience was a really rewarding product to get to work on. Our team consisted of many different hands to create the experience, design the interface, illistrate the isometric city, design the marketing collateral, and develop the final product. For clarity sake, I designed the experience of bulding the city, and created the visual style to work within the Genesys brand for the tool. Really could not be happier with how this experience turned out, and the results it was able to generate for Genesys.

See it live launch

Design details

Selection examples

PDF output after you complete setting up your experience

PDF export design