INTERVIEW
Supermarket

Who is Supermarket?

Supermarket is a design & development studio who helps design focused clients build useful & beautiful digital work. We specialise in 3D in browser, 2d web animation, data visualisation and rapid product prototypes. We are based in Devon, UK.

For this project we partnered with Public Websites, a design studio focused on high quality, contemporary digital design. They are based in Sydney, Australia.

We saw the book in Magma books, Covent Garden. We knew within seconds that it was going to be something that would chime with the practice of both studios. We are a team that is led by the idea of developers as designers. We spend a lot of time systemising other designers’ work so we can translate it to the variations of the web. We were very taken with the idea of a system that can be reused to generate work that can be applied flexibly across various outputs. We thought this could become a bible for the design practice at Supermarket and/or Public. We were very glad that someone had gone to the trouble of writing it all down for us.

When we were reading the book, in general we could see the potential scale of each application. We weren’t distracted by the fact the examples were limited in colour and composed of simple geometric shapes. We could see the system behind each application and could see how it would deliver some wildly varying designs based on switching those shapes and colours. However, we wanted to see these variations in action and run some tests on how this would actually look. We could have done them in Figma, but it would have been slower and the results less immediate. It also wouldn’t be as shareable as an in-browser tool. We wanted to send a link to our friends, clients, colleagues for them to play with. We wanted it to be quick and easy to understand the concept and therefore see the potential scale of the systems.

We build a lot of product prototypes so we follow a loop of sketch, build, test, repeat. 

The first iteration of this loop was built when someone in the studio was just getting started with our framework of choice, React. They built the first iteration as part proof of concept and part learning project. This version just had a control component and examples of repetition but we could instantly see the fun and potential of the tool.

We were then able to allocate a bit more time to explore an application. So the second iteration was picking one of those from the book (pg. 119) and extending the tool. This version also walked a user through the concepts of component, repetition and application. 

The third iteration was a refinement of that. We decided that walking through the concepts step by step was nice but ultimately users just want to play immediately. We put the component next to the application so you could instantly see the effect your changes made and added some features (colour schemes and presets)

Our final iteration has been to integrate ChatGPT. We used the openAI playground to craft a prompt that could reliably return a js object based on a natural language prompt. The js object had to fit our build so that we could populate the tool with the generated response. The crafting of this prompt is going to take some time and we wonder whether this is just stopping people using and understanding the system but we think it worth the exploration at this early stage.

Aside from the obvious dev challenges we have on all projects the biggest challenge was and still is getting a clear picture of what the use of the tool will ultimately be. I don’t think we have agreed on that yet. Some of us are FVS zealots and see it as something that will replace the entire way we, and others, deliver design for clients. Some are less convinced and think it is interesting but essentially just entertainment and a good example of what we can build for clients. 

Lots, but the best thing has been discovering the potential of flexible design systems as described by the book. To see in action the variations that just one application can deliver was amazing and was the purpose of the tool. If we as a studio can design many of our own applications, specific to the type of work we deliver to clients, and then build them into this tool, then we will be able to greatly increase the speed, consistency and rigour that we deliver work to clients. 

The other eye-opener was the experimentation with using ChatGPT to deliver designs based on text input. The nature of a systematic design means that each variation is described by a small javascript object. This makes it very easy for language models like ChatGPT to deliver designs back to us. These can be loaded into the tool and then tweaked by the designer to fit. We haven’t worked through all the implications of this but it has been great to learn how the ChatGPT api works and think about the possibilities it holds in our practice and for this type of design.

The heart of the tool is really three steps. Step 1 is styling the control component. This is a 2 x 2 grid and we have given 9 simple shapes as options. You can select the colour and rotation of this. 

Step 2 is the repetition. We took the lead from the FVS book on this and included repetition, mirroring over one axis and mirroring over two axes. 

Step 3 are the variations related to the application. For our first application we chose the one on page 119 of the book. This suited as it was very simple and thus had limited possible variations. This meant a quick build for our first go. 

We use React to build and Zustand to save the state of the design. The settings selected in the steps above are saved as a js object a bit like this:

quad1: { color: …, shape: …, rotation: … }
quad2: { color: …, shape: …, rotation: … }
quad3: { color: …, shape: …, rotation: … }
quad4: { color: …, shape: …, rotation: … }
repetition: …,
x: …,
y: …,
xCols: […],
yRows: […],
textTop: …,
textBottom: …,
textColor: …,
background: …,

It is a very simple object really and that just shows the power of the system. With very few rules, all combined, a lot of wonderful variations can be achieved. 

We can’t understate how beneficial we think the FVS concepts could be to our work. Currently the tool is just an exploration of what a design program using these concepts could look like. Given more time we think this could turn into a custom design program to deliver work for our clients. 

A design program built with FVS thinking at its core means we could deliver quality at scale. Delivering options for client’s to pick from has always been problematic. It is easy to fall into the trap of having a favourite, one that has been through a rigorous process and then some others that are less rigorous. We could deliver multiple options at speed, safe in knowledge that each option was grounded in quality design systems crafted by us over time.

A program like this would mean that we are not starting from scratch each time we begin work for a client. Each time we used the program we would be building and refining our own systems, specific to our studio. This means that we are always beginning from a very advanced place for each client. That is a very programmatic way of thinking about design and we like that.

This efficiency and ability to deliver quality at scale may become very important for all designers in the very near future. If we can harness the power of AI within the tool then perhaps we can keep up with the output of other AI based design tools, but in a way that is founded in beautiful and rigorous design methods rather than large scale plagiarism of other designers work.

We have a long list. We can’t stop thinking about it. Aside from creating many more applications we want to add:

• Animation
• Better AI
• 3D
• Better typography options
• User logins
• Sharable links
• User gallery
• Custom colours
• Custom SVGs as shapes
• Filters
• More shape sets

… as you can see, we can’t stop thinking about it.

Right now we want people to make some fun pattern based tiles as a way of educating themselves about FVS. It is a great, hands-on way to explore the basic concepts and hopefully as we build more and more applications into it it becomes even better.

Ultimately though, when we add more features we want people to use the tool to deliver entire design systems for their clients.

Thank you! https://fvs.supermarket.london