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

With 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 all stakeholders such as; sales, marketing 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.

Brainstorming Session Outcomes
1. Identified key metrics such as click-through rates, conversion rates, cost per click, and engagement metrics. We also highlighted the importance of platform-specific metrics to tailor insights accurately.

2. Explored ways to standardize reporting metrics and visualizations across different ad platforms to provide a cohesive view.

3. Highlighted the importance of comparing individual ad performance against the fleet of other ads and campaigns.

4. Emphasized the need for real-time data updates and the ability for users to customize their dashboards.

5. Discussed how the tool could provide actionable insights & recommendations based on data trends. Integrating Machine learning (ML) suggestions such as:

  • adjusting ad spend based on different performance metrics
  • targeting content tweaks & recommendations like too generic copy
  • auto-tagging ads to improve performance
  • adjusting bid modifiers to better target demographic segments
  • suggesting ad variants to test headlines, copy, imagery, and call to action
  • recommend negative keywords to increase ad efficiency
  • review ads pre-launch for campaign consistency and platform compliance
  • conduct a thorough responsive design test to ensure seamless UX across all devices
  • alert when ad spend is over or under allocated budget and is properly algined with desired ROI
  • rank the best to worst performing campaings and ads across each platform

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)

Test Result Metrics:

Task Success Rate: 85%
Task Completion Time: Average of 4 minutes per task
Error Rate: 2 errors per participant on average
Learnability: Participants took an average of 10 minutes to become proficient with the application
SUS Score: Average score of 77 out of 100
Participant Feedback: Positive feedback on ease of use, but some participants noted confusion with the filtering, and there was a clear tile layout preference
Feature Usage: Most frequently used feature was the search function, utilized by 90% of participants
Navigation Path Analysis: Majority of participants followed a similar path:
landing page >> search/filtering >> ad tile details >> task completion >> toggle view
Usability Issues Identified: 12 usability issues identified, with the most common being unclear labeling
Overall Satisfaction: Average satisfaction rating of 4.2 out of 5

Recommended Improvements:

1. Improve initial product orientation: Add better contextual help, and a first-run welcome tour
2. A/B testing results: Implement vertical tile layout, which was overwhelmingly preferred by users
3. Improve discoverability: Consider alternative affordance options for clicking into tile details such as: hover styles, peek feature, and progressive disclosure
4. Help text: Users struggles to recall what the different graph parameters met, provide definitions and examples for them to access
5. Accessibility review: Check color contrast and alternatives to ensure graph readability, improve labeling for screen readers, and test tab order and keyboard interactions


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.