THE CHALLENGE

Overview
With the demise of the third-party cookie - brands, businesses & agencies were seeking new solutions that would provide precise and efficient ad targeting. In 2020, Silverbullet, a data smart marketing company launched 4D, an advanced contextual targeting and insights platform enabling the delivery of display and video campaigns in environments consumers trust.

My role
I joined the company later that year as UX Designer, when the platform was a MVP and within 2 years, working within a solid Product team (UX, PM, Data Science & Engineering), we delivered a host of industry-first features.
This case study shows what we built, how we did it and my role, responsibilities and processes in this journey.

THE PRODUCT

Using the most advanced machine learning and AI technologies, the 4D platform offers:

Brand & Privacy-safe Contextual Targeting
- Advanced Video Placement Targeting including YouTube using state-of-the-art Computer Vision models to ensure greater accuracy.
- Programmatic Display using Topical Targeting & Semantic Search.

Insights & Optimizations
- 4D’s Insights solution, providing real-time insights and optimisation recommendations to improve campaign performance through real-time data.
- Auto-optimisation of Insights campaigns leading to 200%+ increases in CTR.
- Performance dashboards.
- Metrics reporting functionality.

Intelligent Partner Targeting
- Dimension Marketplace that enables technology partners to plug in their algorithms and technology as additional intelligence and targeting layers. Dimensions parters added include Sentiment, Emotion, Brand Safety & Domain Quality.

THE PRODUCT | SITE MAP

Showing what the platform site map looked like when I joined (top) and what it looks like 2 years later (bottom). Click right arrow to see more.

THE PRODUCT | INDUSTRY-FIRST FEATURES

One of our most impressive features we built was advanced Video Targeting. The UX team worked very closely with the Data Science team to understand how the models worked and how we could get this into the UI. 4D allows advertisers to build video targeting contexts by choosing topics, faces and brands - by doing so, they can pinpoint the specific video environments where their advertising will be shown including YouTube.

Advanced technology and machine learning break down the video to understand the context of the video across a multitude of frames and by using expert computer-vision models, 4D can derive what the video is about, ensuring targeting accuracy. This feature offers higher scale across premium inventory and is ground-breaking in the MarTech world. Other solutions on the market can only derive what a video is about by converting audio tracks into text to use to categorize content and they don’t offer YouTube targeting.

 Insights reports which can then be created to offer recommendations which will provide better performance (More impressions, clicks and completed views).

THE PRODUCT | INDUSTRY-FIRST FEATURES

We also created the first contextual solution that surfaces actionable insights and recommendations through real-time data. By connecting to a DPS and a creating a tag, 4D can digest media data into the platform, analyse it with artificial intelligence and then surface insights and recommendations that will boost the performance of campaign. Shown in the UI in the form of a downloadable online report, insights are actioned at a touch of a button.
We then optimised the feature by automating the process so traders, account managers and media planners could simply select their optimisation goal (eg, better Click Through Rate) and 4D would automatically apply it to their contexts to boost it’s performance.

STRATEGY 

In the first couple of weeks of joining, we held several online workshop sessions to gain an understanding on the immediate and long term business goals of the company. Processes for each departments were refined.

STRATEGY | PRODUCT VISION & ROADMAP

Stakeholders, Product heads, members of Data Science, Engineering and UX discussed what was happening in the industry, what their visions were and what were the current technical capabilities and restrictions.

Part of those workshops was to discuss roadmap priorities for the next 12 months and we voted on priorities.

RESEARCH

Next, I needed to speak to the platform users to gain an understanding of their goals, restrictions and behaviours. I’d also like to audit the platform myself. After its launch, 4D would go on to offer self-serve and Insights models but they initially offered Managed Services with global account managers running the campaigns. They would be the user group I’d speak to and user test.

RESEARCH | INTERVIEWS & USABILITY TESTING

After agreeing clear goals with the Head of Product, I conducted interviews and tested 3 AMs - one from America, Italy and UK.
Each recorded session would include the user walk-though of the platform to highlight features that they liked or the ones which caused pain-points. I also set several tasks including setting up a context from scratch and also using one of the keyword search functionalities.
We spoke about their suggestions as well as other competitors in the market (Peer39, Grapeshot and Gumgum) and reviewed their interfaces too.

RESEARCH | KEY FINDINGS

After that process, I organised, segmented & analysed the data findings...

...and produced a user testing debrief document for the Product team.

RESEARCH | PLATFORM AUDIT

Using the Jakob Nielsen's 10 general principles for interaction design, I conducted a heuristic evaluation of the platform to see what usability issues it had. Obviously taking into account that this was a MVP, it was helpful to assess issues that I would like to tackle in the months ahead.

RESEARCH | DEFINE & FRAME THE CHALLENGE

STRATEGY | ROADMAP

With a roadmap of new and optimized features defined and new processes in place, it was time for some design-thinking. 

DESIGN

Post-Covid, working practices has changed for most people and the UX landscape was no different. To move with the times, the head of UX and myself decided on processes and software that would make our online collaborating 
lives easier. Daily video catch-ups on Slack or Zoom and we chose Figma design tool for it's great real-time collaborating and prototyping features.

DESIGN | FIGMA DESIGN SYSTEM

We built a design system and an ever-growing list of unified components that can be applied to any project. This significantly improves the product development process by scaling design across an organisation and ensuring improved UX, UI, and product delivery. Our Engineering team aligned the design system to a Storybook component library that would help build UIs faster.

DESIGN | PRODUCT REQUIREMENT DOCUMENT

The process of working on a new project begins with a kick-off meeting between the UX team and a PM when they discuss a signed-off PRD. A Product Requirement Document defines the feature we are going to build, it's purpose and functionality. It focuses on user stories, why we are building the feature, what problem it solves, how to measure success and the time-frame. The document is put together by the PM with input from Stakeholders, Head of Product, Data Science, Engineering and UX during workshop sessions. As an example, this follow PRD and case-study is about designing a new homepage and the processes we go through in the feature life-cycle.

The design team will need clarification on any aspects of the document they are unsure of.

We put together visual moodboards of other products that answer the questions we are asking for our project.

DESIGN | INITIAL WIREFRAME DESIGNS

Working to the requirement of the PRD, I get down some rapid wireframing ideas / flows (using components from our Figma design system). My preferred 2 or 3 ideas are presented to UX Head and PM for feedback.

The best idea is iterated following the feedback.

DESIGN | SHOW-AND-TELL SESSION

The design flow is shown to stakeholders and the wider Product team for further feedback.

DESIGN | USABILITY TESTING PROTOTYPE

Feedback is incorporated into the designs and once we have approval, I build the prototype to test it on the account managers. The iterated prototype is shown to management and wider Product team for final sign-off. 

IMPLEMENTATION

To ensure a smooth handover, communication between both parties needs to be key. As well as the designs themselves, validation & empty states, loading states, responsive states are also required.

IMPLEMENTION | DESIGNS & DOCUMENTATION 

Detailed final Figma designs and documentation are handed over to the Engineering team and any questions or queries are answered. The designs are later broken down to more managable smaller projects by the Engineers, ticketed and then added to the sprint. 

IMPLEMENTATION 

In an effort to rigorously test our new releases and existing features, we hold a User Acceptance Testing (UAT) session as the final stage of the product development process. Any features that fail these tests / tasks cannot be set live in the Production version of the 4D platform until they are fixed.

IMPLEMENTATION | GROUP USABILITY TESTING  

Each session is ran at the end of a sprint, attended by 10-15 users within the company and is hosted by one of our PMs. 

IMPLEMENTATION | DEPLOYED

Once all tests have been passed, the release or feature can be deployed to production.

ANALYSIS 

The UX team conduct fortnightly interviews with users to gain feedback regarding new feature releases and platform pain points.

ANALYSIS | PLATFORM RESULTS 

4D has delivered excellent results across many industries.