The Challenge

Go through the process of creating a calculator that works within our content management system called, GEM. GEM is an Adobe CMS solution that is customized for American Express. The CMS is difficult to integrate with complex coding frameworks like JavaScript. Our challenge was to build a calculator that uses JavaScript on a page that exists outide of GEM. The page would have the same look and feel as other GEM pages to maintain a consisent customer experience.

The Objective

I'd like to see what enrollment is like without having to commit.

Create calculators in HTML that would react as a real calculator would vs creating a static clickable calculator in Invision. We wanted to take advantage of a dynamic flow that would show a wide range of outputs from a wide range of inputs the user could choose from. Static wires would be much more limiting user flow.

My Contribution

I was the lead product designer working closely with product owners, junior designers, and engineering to define in sketch and develop the prototype in HTML/JS/CSS.

• Captured business requirements during ideation in Sketch and shared them out to the team in Invision
• Built the HTML/JS/CSS prototype during the define phase of the feature

Exploration 1

We tested various designs during an 8-week sprint that led to a final design that is now in staging and will be launch in the following month. The customer can enter an amount or use the slider above the input field in this exploration to view a result.

Launch the Input Field Prototype

Exploration 2

We tested various designs during an 8-week sprint that led to a final design that is now in staging. This customer simply enters an amount into an input field to view results.

Launch the Slider Input Prototype