The Search for Curves in a Rectangle World.
The struggle in starting a design system, the breakthroughs, the knowledge funnel and adopting a scientific approach to design.
Herein begins a small homage of the time pragmatic robots and experimental humans danced in design. A collection of posts sharing approaches, learnings and sledge hammer solutions to developing a framework of design. All in order to create the building blocks of an A.I. Designer we lovingly referred to as “Alan”.
A simple question, a hard answer
Question: “Can you design a system that produces a beautiful, unique and purposeful website in 3 minutes for every person on the internet?”
Answer: “erm…yeah, sure…maybe…I think…yeah, ok. I’ll give it a go!”
Let me be upfront, two things. One, this is me paraphrasing a three month conversation which contained far too many “bro’s”, “crazy [insert tech idea]” and “changing the world” statements for day time viewing. Two, during this whole time I had absolutely no idea how I would even begin to genuinely tackle this. Zero. None. Bupkis.
Backing up a bit, I have been producing ‘designs’ for several years in the form of websites, products, platforms, brand guidelines, style-guides et al but a one for all solution seemed such a massive undertaking I wasn’t even sure it would be feasible to produce it in any meaningful or useful way. I mean it felt like I was asked to design a system that could produce any or all sites on your favourite award site.
Go to your favourite web design showcase site like spyline.de, siteinspire.com or awwwards.com and in the back of your mind while looking round ask yourself how you could produce them all in one process, one guideline, one design system. I’ll wait for a minute or two as you feast your eyes on the pixel par-tay.
If, like me, you have a look with the whites of you eyes beaming, furrowed brow and pursed lips…yes friend, I know. Don’t worry you can say it…fork me, I am done.
So, what happened?
First, accepting the struggle.
So, in the early days what was I doing? Not much, I’ll be honest. I think a day or two was spent looking as blankly at a sheet of crisp white paper as it looked at me. A series of sudden bursts of perplexed grimaces and randomly holding on to things tighter than I would ever need to like the desk, my beanie and a few random strangers. After that, a period of time aimlessly looking in the top corner of the room as if I was counting balloons — I even followed a few across the room from time to time which only resulted in nervous laughter from my wife. You know, that laughter you make when you think something is seriously wrong.
The point I am making, especially for new and maybe more seasoned designers, is that the struggle we go through is natural. It can be pushed on but not forced on. It has always been there for me, on every project. No one ever told me that it was ok to struggle. That it was ok to take your time, that you can think about a problem for more than a day without being guilt-ridden because you haven’t shown anything. In the midst of all these arbitrary deadlines and pressures we set on ourselves. Or, the expectations imposed upon us in this result focused world. Breathe. It is ok. Think about it for a little while. Struggling is a necessary part of paving the solution, the more you struggle the less others will have to — makes it sound more progressive, that’s because it is.
Breaking down the problem
I kept revisiting the original question, breaking that down into as many bite sized chunks as I could. Just something more manageable and approachable in order to get some answers to something, anything. The question again;
“Can you design a system that produces a beautiful, unique and purposeful website in 3 minutes for every person on the internet?”
From this we could extrapolate that any system we design should strive to:
The ask: Design a system.
The aim: A system or platform that allow designs to be created.
I had experience beforehand in creating single sites, in style-guides and brand. The scope of this one was seemingly pushing to create a system in which they all could live. Now, internally you build up your own approaches over time but usually they are seemingly intuitive.
The ask: Be beautiful.
The aim: A way to quantify and measure beauty.
Which brought more questions like: What is beauty? How could we measure it? What are the attributes, influences and characteristics that make up beauty? Is my perception of beauty different from yours?
The ask: Be unique.
The aim: The framework had to allow huge diversity in its production.
Was it personally unique? Was it in the content? What about branding? This is the “design every website on the showcase site” problem. Tall order to get it to a point it felt ‘unique’ yet still beautiful in the eye of the beholder.
The ask: Be purposeful.
The aim: Allow a person’s purpose to direct the the outcome in a meaningful way.
Not only was there the subjectivity problem with “beauty” but also a way of transitioning a person’s intent and reasoning into the design. Where was the purpose? Was the purpose in the content? Was it through explicit direction or declaration?
The ask: In 3 minutes
The aim: It had to be fast and easy to create for both the tech and the user.
To be produced in three minutes there is was a fuck-ton to automate. A lot on the developers’ shoulders but I wanted to make sure I wasn’t a blocker to their progress. This wasn’t going to be a traditional web builder, there wasn’t the time. It had to feel as easy as copy, paste and create while factoring all that human fluffiness. What do we do with all that content? How do we tie it together in a meaningful way?
The ask: For every person on the internet.
The aim: Endless scope and scalability.
Admittedly, this one is a little in the clouds. You wouldn’t start here obviously but it does highlight the vision of it all. It was aiming to be fully inclusive of all the various requirements of squidgy little humans. Ok, we can put that one on the shelf for a while and loop back in when we feel brave.
Aaaaaargh, that didn’t make it better. It made it worse. The scope of the problem was getting exponentially larger as I threw more questions at it. Then those questions would lead to more questions and more and more. I still felt like I had no clue how to go about it.
The struggle continued. Goodbye confidence, hello despair.
Staring into the abyss, start with what you know, anything.
There was no doubt that the amount of questions, variables and different paths to explore were overshadowed by what seemed like pointlessly chipping away at a ten ton boulder with a toffee hammer. Regardless I picked up the toffee hammer and chipped away.
Out of sheer frustration and fear we start, to get past the canvas being so white and feel like we are progressing. Probably the opposite of when you are sat on the toilet for so long that your phone battery fades and all you are left with is your blood filled reflection on the black screen. The universe’s way of telling you to wrap it up and move on, boy-o.
Pants back on. One thing I have come to appreciate over time though, is that shifting my mindset of this time spent in frustration. It is not confirmation of failures but a filter to what is feasible. Filtering has become and is a big part of what I do as a designer. More on this later though.
Along the course of the weeks of research and discovery I couldn’t shake that this was just full of hunches and whimsies of thought. Nothing substantial, nor elegant, nor concrete enough to give me the confidence to actually set a direction and investigate it further. The scope was overwhelming and all inclusive, maybe it was a confidence issue, I’m not sure. Yet, getting starting in any meaningful and motivating way was eluding me.
Mystery → Heuristic → Algorithm → Code
As one of those random events in which you think the stars align in your favour, I received a surprise package, well gift, in the post from a friend in North Carolina. A business magazine that you can’t get here in the UK he thought I may be interested in. As a side note, many of the sparks of inspiration for me come from unorthodox sources and rarely were they ever in the form of designers or design centric blogs, books, podcasts or how to’s. A healthy disconnect from the “design world” is something I actually spend a lot of time reinforcing.
Here is an excerpt from the site:
To innovate and win, companies need design thinking. This form of thinking is rooted in how knowledge advances from one stage to another — from mystery (something we can’t explain) to heuristic (a rule of thumb that guides us toward solution) to algorithm (a predictable formula for producing an answer) to code (when the formula becomes so predictable it can be fully automated).
The light at the end of the tunnel! The olive branch! The “holy fucking shit, it IS doable”! The relief. The ‘fog of guilt’ slightly lifts. Your focus narrows, you clench your fist and whisper “Let’s fucking do this”. You flush the toilet, think about washing your hands, and leave. Fair to say four years ago this was a breakthrough for me.
Finally, a mental model to actively process all this chaos into “binary code”. The reassurance in the value of heuristics, not as a solution but as a “higher probability of success” was all that was needed to get the confidence to probe the problem further. Now looking back at the question that was broken down earlier I could classify what stage each question was at. There were a lot of mysteries, no algorithm’s and fair to say no code — the rest were in the camp of heuristics.
Reenergised with confidence in the value of listening to your own gut and the value of applying theses general rules-of-thumb, two areas fascinated me. Obviously, the first, is applying this to visual design and traversing through this knowledge funnel and unearthing an “algorithmic” understanding which could lead to code. Second, how do I fine tune my intuition so much that the heuristic part was shortened as much as possible. There was a lot of heuristics to get through and…well…I am lazy as sin.
I now needed a method to test these assumption and a way to validate the gut feelings in order to adapt, improve and get sharper.
One last point, Mr Martin you have a beautiful mind, thank you! All hail Mr Martin.
Question everything you think you know
As a first step, this pursuit of challenging assumptions was helped massively by having such a curious, respectful and understanding team around me. Not only with the generic questions of how we approach quantifying ‘beautiful’ or why one composition of a website design is better than another but also a barrage of specific questions. Here is a small selection as an example:
- Why is that font ‘x’ size and this one ‘y’ size? Why did you decide on that difference? What is the purpose of having those different sizes?
- Why did you choose that colour or palette? What does it invoke? Why pick that hue/brightness/saturation level?
- Why did you add that much padding/margin? What is the point of indenting the text by ‘x’ amount? Why did you go full width with this image and not that one?
- Why did you add that line detail? That graphic? Why didn’t you add that decoration here? What would be the reason that would make you add decoration on one site but not another?
I think you get the idea. Nobody had ever really wanted to understand the “whys” on such a granular level before. I never really had to explain it beyond it makes it looks good or attempting to be more direct “The hierarchy of type helps a person scan the page to find what is the most important content to digest first.” Not a bad answer but bear in mind that the team were looking to effectively get that answer into a computer to replicate the results, it wouldn’t quite work being so vague.
The biggest hurdle was actually understanding it myself. Why I would design the way I did, what influenced the choices made, what are the qualities that internally I would check off as ‘finished’ vs ‘unfinished’. Then, first, be able to communicate that to another human being. Then let’s say a “non-designer”. Finally, translate this into algorithms and code that a computer could understand and use.
We understood that an ideal output was “code”, as per Roger Martins’ knowledge funnel. A binary representation of any part or whole of design; be it the colour, the typography, the layout or composition and combination of those parts. Understanding design on a binary level would then allow us to express that information in the form of a formula. Then orchestrate rules off this formula into useful abstract algorithms that could replicate a desired output many times over.
Over time and practise I developed an over-simplified rationale to get from one stage to another so we could collectively understand how far we have come and how far we had to go.
Stage 01, Mystery.
Do I understand it?
Full of all of that struggling and filtering I mentioned earlier, I saturate myself with research, examples and references in the search of patterns or connections to the phenomena. Can I find the causes and general reasons and distill these patterns into a loose theory or rule-of-thumb? If yes, go to stage two.
Stage 02, Heuristic.
Do we understand it?
This is where I start to open up the theory to the team or peers. Can they understand it, do they agree with it, can they make it better? Open up testing in different ways in order to find rules or constraints that make it more applicable.
Stage 03, Algorithm.
Could we all understand it?
This is the part where the “can you explain it to a five year old” comes in. Have you developed the theory to a degree that works and has understandable rules that can be grasped by our non-designer friends, customers or in my case my son? Who at the time was five. Win Win.
Stage 04, Code.
Could a computer understand it?
Drill down and actually quantify design or its component parts. Boil that bad boy into binary. Build models, produce, test, analyse, refine, repeat. Usually this uncovers some great answers and insights, often though more questions.
What I also found was that there is more that can be done beyond the code stage. There are patterns in binary results when you go through the process several times. Crossing many fields of interest. You drill down on; typography, colour, geometry, form, animation et al and there is a commonality to it all, an elegance. A way it all clicks together that seems reachable in an abstraction a level or two away. So, for me, there was a stage five.
Stage 05, Principle.
Could it be a ‘natural truth’?
My good friend Svetly coined a term with me of “natural truths”. He told me that he felt like I was doing more than just boiling design into 0’s and 1's because the hunt of uncover these “yes’s” and “no’s” evolved into formulas, expressions, theories aka “natural truths”. He could see a use in his world of finance, business or even personal life in which they could be applied. Truths that didn’t just apply to the parameters of visual design but extended out and became more universally applicable.
The Science in Design
The combination of the Roger Martin’s knowledge funnel and the scientific method (below) has been the mental framework I’ve applied to myself and design throughout this process. All in search of a very self-indulgent, ‘unified theory of design’. Grandiose as a statement, yes, but as an intention it was the driver toward digging deeper and deeper and revealing what I would hope is a more elegant solution across visual design.
So, let us recap, we got past the struggle, we started. We broke down the problem into slightly more manageable challenges. We have a plethora of data—thanks to the tinter-webs. We can qualify the stage at which our findings live within the knowledge funnel. Plus, an inquisitive, curious and patient team allowing room for a designer’s mind to become less ambiguous. Lastly, a scientific method of approach to test hunches until course corrected into something more substantial. Now we can set goals and kind of see where we were going.
To get there was effectively a huge reverse engineering project. It looked a little like this:
- Set a goal of a problem or phenomena you want to tackle.
A binary representation of [insert macro/micro area of design] e.g. typography, colour palette, layout and so on.
- Establish where it is on your knowledge funnel.
Label it as mystery, a heuristic, an algorithm or code.
- Gather data
Research, discover and gather relevant data.
- Apply the scientific method.
Observe the phenomena to uncover or realise patterns. Then come up with a hypotheses or an explanation to why or how those patterns may exist. Develop tests in order to prove or disprove your explanation. Gather additional data to justify, refine or reject that explanation. Document and develop a theory in order to communicate this among peers, then other humans and finally computers.
- Rinse and repeat.
Really just keep going, keep testing, adapting and evolving the solution depending on the results that are coming out. The more answers you get the more questions you will find.
However, there is a trade-off with academic research and product development. Do you go broad in research or deep in development? Ego wants you to go deep, vision wants you to go broad—it’s a constant balancing act to get the right pace of applied learning. One that is a struggle to get right with yourself, let alone a team.
Next up we will look at finding the building blocks and forces required to create an all encompassing design system. We will explore the methods used to: Gather data and reverse engineer design. Create self imposed design constraints and why it’s useful. Highlight problems with categorising, semantics and communicating intent and more.
Next post: Distilling a Web of Design (in progress)