Fresh8 Gaming

Personalised sports betting
How AdTech can so educate a product designer

I have, for most part, designed and maintained the Standardised Ads product in the multi-faceted, young ad-tech startup Fresh8.

Fresh8 is a marketing automation platform that allows sports betting operators to generate, publish and track their marketing content. I was responsible with running the product design process on the standardised ads system, which had its own team of 10 people and cross team efforts were also common. I was collaborating with 4 front end developers, a dev team lead, a project manager and occasionally was a line manager in a 2 person design team. I was also directly corresponding with the client services team, reporting to main stakeholders and managing the feedback loops that occurred.

The Problem

When I joined Fresh8, the ad product was able to generate banners for different clients. The main aim of the product was; fetching the bet data from the feed, pick the most relevant market based on user profile or the article content and the finally display this content in a sports betting ad layout. The backend was already stable however the workflow wasn't streamlined in an end to ed product yet, meaning we had to do extra customisations for each client. This is where my role started to evolve and my challenges became more about infrastructure than skinning. I wanted to productify the way we build ad banners. This is where my initial standardisation efforts began. I created simple "components" that could display the required markets for each ad slot size.

This first system was able to produce consistently performing ads but it still wasn’t flexible enough to cater for some of the client requests that were coming in. Some were pushed through as customisations on specific skins, which fundamentally meant that the original problem was not fully addressed.

The Solution

Around this time I fully realised the unique position i sat in, compared to my designer peers: My day to day challenges had to do with a very wide range of mostly unorthodox sizes. Most times the slot sizes had strict dimensions so I developed a sense of working within specific horizontal and vertical spaces, and what general shapes imply for the layout. After preliminary talks with key team members and reporting to client services team and the major stakeholders, I decided to create a size agnostic design system that made use of atomic design principles. A theory of everything, within the world of dynamic banners, so to speak.
‍
When we decided to refactor the standardised ads, I already had a massive backlog of improvements and notes around pain points. I also logged detailed stories on Jira for better rounded ideas. Most of the layout improvements required a new way of thinking about components and this is where I applied the atomic design principles. I also had a clearer definition of the layers that make up the dynamic ads product.

The second big design challenge was how we handled different strings being fed into the ads .  My solution for this was setting up an automated spreadsheet that generated character count averages and relevance points based on numbers of impressions for a given competitor. This allowed us to see where the edge cases lie and understand what range of characters are most relevant to us.

In my sitting between the Dev and the Client Services team, I constantly provided for their needs  through an optimised delivery system. On top of that I made sure the ongoing work was in line with high level business requirements and I made that clear to key stakeholders through periodic presentations.

Setting up the handover process was really fun because throughout the productisation phase I was already thinking of smart ways to setup an optimised sketch file. Sketch at this point was mature enough to cater for the design system we needed. Still I needed to be constantly mindful of the strict dimension implications of the product since as I said, being a designer of small pixel dimensions, I still felt challenged by the native functionality being geared towards app or web designers. Setting up custom artboard sizes, making full use of pinning and fixing functionalities at symbol level and creating optimal artboard hierarchies are some of the solutions that made the sketch workflow more fitting for our dynamic banner system.

What we ultimately ended up with was an ad template file, ready to be configured and skinned. The skinning process was set up so laying down all the branding choices generated the front end document and the client review documents at the same time, cutting down on massive prep/deck work time.

The Standardised Ads product today serves 30 clients, many of which are industry leaders, garnering around 1,000 impressions per second in an active period. This was achieved by pairing smart tech with lean product development and in turn generate ads that succeed in displaying relevant data and do so clearly, beautifully and on brand.