Creative Explorer

New Engen Creative Explorer

Overview

My Role | Director, Product Design (UX)

Tools | FIGMA, Newsprint & Ink Pens


Goal

How might we design a comprehensive reporting tool that provides marketing teams with actionable insights into ad performance, so they can make adjustments to their campaigns and easily showcase the results?

New Engen is focused on supporting cross-channel marketing experimentation, and builds tools to automate processes for creating and managing digital ad campaigns.

Problem:
Marketing Managers, Graphic Designers and Copywriters put a lot of work into creating ads for their marketing campaigns. After launch, it is very difficult and time consuming to track performance, and ads often perform differently on each of the digital platforms such as; Google Display Network, Facebook & Pinterest.

Success: We were able to quickly assess our target users’ needs and create a tool that displays real time performance, allows for easy customization and clearly showcases results.

“Creative Explorer helps our team quickly determine key insights from paid social performance and clearly articulate the power of what we’re doing on a daily basis.” - Director of Marketing and Brand Strategy, LA Clippers

Process

  1. User Personas
  2. Design Studio
  3. User Scenario & Activities
  4. Concept Wireframes
  5. Visual Design
  6. Prototyping
  7. Design System
  8. Usability Study & Test Plan
  9. First Run Welcome Tour

User Personas


Maryia Marketing Manager
"I need a tool that shows me ad performance data with both the viusal creative along with hard numbers."


Graham Graphic Designer
I put a lot of work into designing my ads and struggle to understand why some do well and other's don't."


Corinna Copywriter
"Different copy paired with different images can impact ad performance."


Design Studio

New Engen has a trove of internal subject matter experts it was a prime opportunity to tap into the team's collective knowledge, and put together a brainstorming session that was specifically designed to cast the widest net possible.

After sketching and discussing different options we landed on a direction to visually showcase ad performance reporting. Including other stakeholders such as; sales and engineering gave us insights to the opportunities and costs that we would need to consider when looking at both the interaction details and big picture strategy.

Design Studio
Design Studio
Design Studio
Design Studio
Design Studio
Design Studio

User Scenarios & Activities

A day in the life of Maryia Marketing Manager

Maryia works for an eyewear company and she just launched a spring break campaign featuring a new line of sunglasses. On her bus ride into work she sips coffee and checks-in on how her digital ad campaigns performed on Facebook yesterday. Maryia prefers to look at the CPA and Spend on her campaigns to determine the "health" of each ad. This morning she is happy to find that the CPA on all ads in the spring launch campaign are up 7.4% and on track to spend to the weekly budget she set.

Once Maryia arrives in the office she opens her laptop and dives deeper into the data. She specifically wants to see how the ads with headline copy containing the word "beach" performed. She notices the CTR is 26% higher on average, so she decides to increase both the bid and spend of these ads.

Maryia looks at the clock and notices she is late to a meeting with her "shopping" counterpart. Once in the meeting she learns that the production facility is having issues and is unexpectedly running out of stock on their most popular frames. Maryia reduces the budget on ads pushing that frame and reallocates to ads that lead customers to the next best selling styles. Maryia repeats this process for her campaigns on Google Display Network and Pinterest, before she knows it, it's already 1:50. She grabs her purse and rushes out the door to try and make it to her favorite salad bar before it closes.


Concept Wireframes

Creative Explorer Concept Wireframes

Creative Explorer Concept Wireframes

Creative Explorer Concept Wireframes
Creative Explorer Concept Wireframes

Visual Design



Prototyping

Before every feature release we build prototypes to test the proposed interactions with users. Prototypes are also used to review with stakeholders for feedback and buy-off.

The following is an example (FIGMA URL):
Filtering & Tagging Ads in Creative Explorer


Design System

The UX Team created and maintained a Design System that documents all Styles, Components & UX Patterns. We worked closely with Engineering to build-out a CSS repositiory that housed the styling and code for each element, and co-owned updating the repository when elements were added, changed or removed. Some examples below:

Design System Styles
Design System Components
CONSTRUCT Pattern Library


Usability Study & Test Kit

After every launch we conduct a Usability Study in order to get insights into how well users are able to complete tasks along with their overall satisfaction using the application.

We recruited the following internal candidates and remote SaaS customers to take the study:
8 SaaS Marketing Team users
6 Internal Performance Marketers
3 Internal Graphic Designers
2 Internal Copywriters

From our research we were able to determine that user's had a successful task completion rate of 82% and the application had an initial SUS score of 77. We plan to test again in 4 months and will use these baseline scores and will monitor as more users adopt the tool.

Usability Study & Test Kit (PDF)


First Run & Welcome

At launch we included a first run and onboarding tour to orient users with the main features and benefits of the application.

Creative Explorer Concept Wireframes

Creative Explorer Concept Wireframes

Creative Explorer Concept Wireframes
Creative Explorer Concept Wireframes

Let's Work Together!

I am currently based in Seattle.
I love to travel and can meet you anywhere in the world.