COS
Role
Digital artworker
Date
2023
Project Type
HTML5 banner ad campaign
Adapting COS’s 2023 summer campaign for three global markets, I collaborated with the motion designer and project lead to video edit, reformat and localise HTML5 banners across multiple formats. Balancing last-minute brand updates with creative consistency, I focused on accessibility, typography, and visual clarity to ensure every asset worked seamlessly across placements.
Brief
To deliver 2 versions of digital banner ads, adapted for multiple formats and markets for COS’s 2023 summer campaign.
Goal
To aim was to deliver consistent, brand-aligned assets that retained the aesthetic of the original motion creative while ensuring legibility and usability across different placements.
My Focus
To collaborate with the motion designer in translate storyboards in Figma and master assets into HTML5 deliverables in After Effects, localising them for three markets.
Challenge
Late design updates:
Midway through production, visual guideline updates were introduced, particularly around typography and graphic placement - requiring multiple iterations with very tight turnaround times.
Complex reformatting:
The campaign required adapting wide-format master footage into unconventional formats such as long, narrow HTML5 banners. This involved extensive positional key-framing to maintain visual balance and keep creative intent intact.
Consistency at speed:
Ensuring all assets adhered to the updated visual guidelines while meeting strict deadlines demanded a highly efficient workflow and clear team communication
Process
Collaboration:
I worked closely with the motion designer, using collaborative Figma storyboards for alignment and After Effects master files as the foundation for adaptations.
Localisation:
I adjusted typography and layouts for UK, German and French markets, paying close attention to spacing and rhythm to ensure accessibility and legibility across languages.
Video Editing:
I used precise positional key-framing in After Effects to adapt the master footage for non-standard banner formats, ensuring that the composition, pacing and overall aesthetic of the original creative were preserved. This approach allowed me to maintain COS’s distinctive visual style across even the most restrictive layouts, keeping the brand experience consistent for users.
Iteration & Feedback:
I maintained an active feedback loop through team channels, daily stand-ups and a shared Figma board. This iterative process allowed for rapid response to brand guideline updates from the client and market-specific requests.
Tools & Methods
Adobe After Effects - Reformatting master footage, key-framing for non-standard banner formats and localisation of copy.
Figma - Reviewing storyboards, collaborating with design leads and aligning visual direction.
Team channels & stand-ups - Quick, transparent communication to respond to changing guidelines.
Localisation workflow - Ensuring text adaptations in German and French fit within visual design constraints while maintaining accessibility and brand consistency.
Outcomes
12 HTML5 banner formats across 3 markets, on time and in-line with revised brand guidelines.
Creative aesthetic of COS’s original campaign were preserved whilst making assets usable across non-standard digital placements.
An efficient multi-market delivery by aligning localisation and adaptation with a collaborative, feedback-driven workflow.
This project highlighted the importance of flexibility and strong communication in fast-moving digital campaigns. From a UX perspective, I learned how detailed production work such as typography adjustments and responsive key-framing directly impacts accessibility and user experience across channels. It also reinforced how collaborative tools like Figma and structured feedback loops can help teams respond quickly to shifting requirements without compromising quality.