All projects

ESW Client Prototype

This is a short summary and demonstration of the work I have done putting together an advanced prototype I use to demo ESW's shopper facing experience to potential clients and how I've now leveraged AI code to speed up my own workflow.

UI.UX

Conor Casey

Role:

Design, Prototyping, AI

Date:

2025

Project Overview

Creating mockups and prototypes has been a part of my role since I joined ESW as a junior designer back in 2019, the objective has always been to create something we can demo to our potential Clients on early sales or scoping calls, to give them an idea of what our solutions will look like with their branding, products, languages etc and in cases where further customisation and dev work is required, the prototype becomes the source of truth.

I've kept this on as part of my role as something of a subject matter expert by now, running demos for and working with, large brands such as Tommy Hilfiger, Nordstrom, Ray-ban, Tarte Cosmetics and many more.

As you can imagine this can become something of a bottle-neck. I have rebuilt the template from scratch multiple times now, it was originally a fairly rudimentary file with a few screens that could be updated via Figma's built in styles (much less available at the time). We moved to Sketch for a while which gave a good opportunity for improvement, but it wasn't until we migrated back to Figma and Variables became available that things got a bit more interesting.

How it works

Creating these mockups was very manual, any specific requests from retailers to change anything including adding additional countries was all done one by one and with back and forth in the comments, could take days. I've now created many collections of local variables within Figma that cover different countries, languages, addresses and even calculations for product pricing.

Along with what is essentially a mini design system within the file made up of atoms and components, I had brought the majority of cases, even including some customisations down to a few hours at most.

To the right you'll get an idea of how many connections are made across the main pages of the prototype, not even counting the additional features on other pages or the nested interactions within each screen.

I'll leave some examples of the 'database' of variables below so you can get an idea of the amount of info stored within this template and how versatile that can make it. These have been a great asset for increasing the interactivity within the prototype, we're now able to quickly switch languages and countries, turn on / off payment methods and additional features directly in the prototype with no interruptions.

Creating these mockups was very manual, any specific requests from retailers to change anything including adding additional countries was all done one by one and with back and forth in the comments, could take days. I've now created many collections of local variables within Figma that cover different countries, languages, addresses and even calculations for product pricing.

Along with what is essentially a mini design system within the file made up of atoms and components, I had brought the majority of cases, even including some customisations down to a few hours at most.

Below you'll get an idea of how many connections are made across the main pages of the prototype, not even counting the additional features on other pages or the nested interactions within each screen.

You'll also see some images from the 'database' of variables below so you can get an idea of the amount of info stored within this template and how versatile that can make it.

In action

I mentioned a few of our clients that I directly worked with in the early and later run stages but a good example of the recent usage of this file would be our original pitch for THG, we were aiming for a partnership with both Lookfantastic and MyProtein and so needed branding available for both. This could've just been a simple case of duplicate the file and swapping between tabs, but this would also leave a disconnect later. These brands would require custom checkouts and having 2 files means duplicating any custom changes across both, more work, more time.

What I was able to do with Figma variables and the collections I'd already created, was simply create a new 'Mode' for each brand, allowing us to have fully unique styling, products etc for both while still only having one actual set of screens meaning we have perfect parity and only have to make changes once. We could even make this interactive within the prototype so no having to leave the one full-screen window at all during the pitch, I'll include a video below.

Leveraging AI

One of the more recent additions to the prototype I've been working on, is capitalising on AI to even further speed up the work-flow and potentially simplify the process to the point where I can fully hand off initial creation of the files.

By leveraging Cursor/Claude and iterative prompting, I created a tool that can quickly replace logos, change fonts, populate retailer names, and adjust styles—all through a simple UI.

What used to take hours now takes minutes, dramatically simplifying the file creation process. The plugin transforms placeholder templates rapidly, and I'm excited to continue refining it into a more comprehensive wizard-style interface.

I've included a video below to show this process, taking our basic placeholder template for Belgium, in Euros and styling it for Lululemon, Canada, CAD$ in about a minute.