A new way to visualize keywords

American Express is one of the most trusted and oldest financial services in the world. The marketing team wanted to focus more on digital marketing, specifically monitoring and optimizing SEO keywords. However, due to the overwhelming number of keywords to track, they needed an easy way to view thousands of keywords.

Results:

Created a custom product for American Express. Featured at UX Roundabout London.

PROBLEM

The American Express team's existing system utilized giant Excel spreadsheets with over 5,000 rows. This large amount of data was time-consuming to process and sanitize. As a result, keywords that under-performed were often overlooked and readjusted many months later.

Non-Traditional Approach

We looked at other solutions to handling a large amount of data. Two key standouts were stock portfolios and the periodic table. A stock portfolio’s progressive disclosure prevented data from being too overwhelming while the periodic table's visual hierarchy helps make scannability easier.

Sketch First

Sketching out ideas allows us to quickly sort the functionality and foundation of the design. We then tested it with our own internal SEO team and with the users. From it, we were able to quickly develop concepts.

KEYWORD EXPLORER

Keyword Explorer reorganized keywords in a new visual and functional manner. Within each keyword elements, the visual hierarchy allow users to quickly scan each keywords and its key metrics. Functionality-wise, it allowed users to sort, search, and filter keywords. Furthermore, users can select keywords and add them to their custom groups allowing them to quickly monitor selected sets of keywords.

Testing Fast

We then created a rapid prototype in Adobe XD with some interactions. From this user test, we found that some users don’t the resources to look at the keywords and instead focus on pages - which were a group of keywords.

Traffic Lights

A consistent issue with a new product is adopting and learning a new system. To mitigate, we used a basic traffic light system where users can immediately understand keyword performance without any explanation.

page EXPLORER

Taking the user feedback from the testing sessions, we looked at integrating page performance into the product. By using the same design language, we reduced the need for users to learn an entirely new system.

Results

The product was adopted in both UK and Australia  markets, with conversations about a global rollout. Most importantly, it was key in transitioning the marketing team from a reactive approach to a proactive approach in keywords.

Progressive Disclosure

When the user wants to investigate a keyword further, they can click an element to its performance page. By revealing information only when necessary, it prevented the user from being overwhelmed by the amount of data.

Other
Projects:

App Screenshots for Venmo

Design Systems for Starbucks