aianimatepremieresketchwordpressangular
Adobe IllustratorAdobe AnimateAdobe PremiereSketchWordpressAngular

Fluid Ads

Fluid Ads is an advertising platform with technology to build and handle the creation, delivery and maintenance of custom ads. I joined the company as a Digital Designer, and later moved into a Front End Development role.

Showreel

One of the earlier projects I worked on was a showreel for the features that Fluid Ads offers. The three main branches of the company were captured in this showreel.

Using existing iconography, I recreated the three icons in Adobe Animate and animated each to provide some visual flare. This was meant to provide intrigue and attract users to learn more.

Digital Design

My role as a Digital Designer was to create dynamic adverts for clients as well as producing in house digital and print graphics for the marketing department.

At this time Fluid Ads was still developing the advert builder they have now, so the adverts I was creating at this time was using HTML / CSS. Later on this method would shift to building customer ads in the platform. Below are a few examples of the multitude of templates I created.

Digital and print assets were a core fundamental for the company's exposure. The booklets and leaflets created would be shown at events.

The digital assets would be used on social media and on the website. The graphics included a combination of custom illustrations and illustrations from a free library - UnDraw.

At some point during my time in this role, I also took on the maintenance of the website, and then later recreated it with fresh new styles.

Web Development

As the app was progressing, and nearing the time of release - we realised the website needed an overhaul. Working closely with a UX Designer we began implementing new designs and features. New styles were introduced using the BEM system within SCSS to keep it organised.

Some of the features included search and filter functionality as well as dynamic carousels that loaded information in from WordPress custom fields. These were implemented with the idea that the marketing department could add new content in WordPress - and it would automatically populate the components.

The pricing page required some real workarounds using flexbox and JavaScript. It appears as normal on desktop, however on mobile, the details of a package are hidden behind the card. Once the info button is pressed, the card will flip over - displaying the content.

App Development

I began learning Angular5 to help with the Apps development. After some learning I began to work on some components. My main role was adding styling to the platform to make it look pretty.

I started by implementing the styleguide across the platform. I used an atomic design structure to style the components, so it would be consistent across the entirety.

I personally revamped most of the styling. Some of the front end features and functionality was also my doing, however the majority of the back-end development was done by the very talented team of developers at Fluid Ads.

You can sign up for a free account to use the app, and see if it is something you might use. The technology is great and the team is super helpful and lovely. You can also see my work in action this way - but to launch an advert you must sign up for a package.

Video Editing

On a couple of occasions I was asked to create videos that showcased the platform, so potential customers and investors could see an overview of the features. Here is one of the videos shown at the DMEXCO event.

Scripts

The Fluid Ads app integrates a technology called Geofencing, that allows ads to be served in a specifically targeted fence. These ads, once clicked, will usually take you to the product page or a landing page for that company.

One of the ideas we had was to have a script that shows the user the closest store to the Geofenced area, however any location can be added. A user is able to pass through URL parameters appended to the url "https://inmapadvertising.com/" - setting the company name, address and/or lat and long values.

The link will take you to a page that will give you redirect options - depending on the passed parameters. The redirect will either give you directions to the specified place, or use the company name to show you all available stores. On mobile devices, it will automatically redirect you to Google Maps.

You can view it in action here, feel free to change up the parameters in the url.

Projects