Kalaurie
—— design, frontend
The Cleared Dev Team started Q3 2021 with a big scalability problem: each Cleared Quiz was a standalone piece of code, so it took forever to create a new one even though our product team wanted to spin up new quizzes quickly. Enter the quiz machine: a scalable, on-demand quiz system that allows the Cleared product team to quickly create quizzes with minimal developer involvement.
This post gives an overview of the pieces of the Quiz Machine and the biggest obstacles we faced that Zach, Barry and myself wrote together as a development team.
To see an example of the Quiz Machine in action, checkout our Environmental Allergy Quiz or watch the 6 minute demo below.
Quiz Machine demo, February 2020
There are three parts to our stack: the frontend, the backend, and Services. We use a NextJS application with Chakra and Formik on the fronted end. On the backend, we use ExpressJS with the Bulletproof Architecture and Postgres. We host both the NextJS and ExpressJS apps on Render.
There are a large number of 3rd-party services needed to make a digital health company like Cleared work properly. Here are some of the most important ones:
Both Capable Health and MDIntegrations are new services to the Cleared stack that are needed to make the Quiz Machine work.
The Quiz Machine has 5 phases on the frontend:
We also incorporated bookmarking so that a signed-in user can leave the application, come back to their account, and receive a “todo” notice which will take them back to their bookmark within the specific Quiz Machine step.
Finally, the checkout is the cornerstone of the Cleared ecommerce system: having gone through the previous 4 Quiz Machine phases, we want to “tie the bow” on the Quiz Machine experience. We support many types of purchases:
The checkout interface is multi-faceted: it has to group and clarify each product and clearly associate it with the listed totals to make it easy for a user to understand what they’re buying.
And because we require a Doctor’s prescription (via the MDIntegrations EHR), we don’t charge these payments immediately. Instead we accept the payment details (via Stripe) and await the Doctor’s prescription before triggering a Stripe charge.
Custom checkout with multiple user options
Cleared quizzes have many features: HIPPA compliance, conditional flows, product recommendations, analytics and more. We wanted a CMS that would support such rich quizzes and allow our product team to easily create ones: enter Capable Health.
Capable Health offers a survey product that allows our product team to log-in and create new quizzes on-demand. Our frontend then takes the quizzes created in Capable Health and renders them using the Cleared design language.
Two great benefits of Capable Health are product recommendations based on quiz responses (ie. If a user answer Yes to question 2, recommend treatment X) and quiz analytics. Both of these features are not provided in a typical CMS, especially quiz analytics. Setting up an easy-to-use dashboard of quiz stats and metrics was easy. This information is great for our marketing team to investigate things like the drop-off on each quiz.
Extending Capable Health, we were able to implement condition flows that allow quizzes to be dynamic based on users answers.
In the world of digital health, physicians need an Electronic Health Record (EHR) to manage sensitive patient data, handle patient cases and prescribe medications in a HIPAA compliant manner. We chose MDIntegrations as our new EHR replacing a legacy system.
One of the key benefits of MDIntegrations is webhooks. With webhooks, we no longer have to maintain our own system of cron jobs to periodically query the API. This is very useful for keeping synchronization between our server and our EHR system, saving the time of our doctors. When events reach our server in real time we can process cases without delay, meaning our doctors can approve medications, wait for payment and transmit the prescriptions all in one sitting. We also built a queue system to make the webhooks even more reliable. This adds the extra reliability of an events endpoint over webhooks.
MDIntegrations is an API based EHR. Being able to tightly integrate lets us reflect actions taken by doctors within the EHR in the Cleared portal. Doctors can recommend medications to a patient at any time without leaving MDIntegrations and a cart will automatically be created on the Cleared portal ready for the patient to checkout.
Our ExpressJS server coordinates between the frontend and all our services like MDIntegrations, Capable Health, and Stripe. Users interact directly with the Cleared frontend, while doctors can work within the tools they’re familiar with and handle cases entirely through MDIntegrations and the product team can create and modify quizzes in Capable Health.
Picking and then integrating with the right services for the quiz machine (ie. MDintegrations, Capable Health, and Stripe) was a large obstacle. In hindsight, we know exactly what is required to get the Quiz Machine working but making the right decisions among many different service options was a big challenge. One of the most important things we did during this period was developing close working relationships with the dev teams of MDIntegrations and Capable Health. Inevitably, things broke. And then we worked together to fix them. In using their product, we helped them scale their offering, and we got something that better suited our needs.
Here are some additional obstacles:
The Quiz Machine has been a great improvement to the Cleared Stack but it isn’t finished yet. There are improvements to make and features to add. Here are some of the projects are team plans to work on in the future:
While invention is fun, it only continues to exist if it’s maintainable. We did a good job of planning ahead for feature additions and maintenance in future by choosing to build base-level primitives (such as standardized query parameters). Whatever design decisions we made, we made with the intention of writing code that was as easy to understand—and extend or delete—as possible.
Written by Barry Hood, Zach Hay, and Callum Flack, March 2022
]]>With the majority of their audience in remote locations on reduced internet coverage, the site performance had to be best-in-class. For example, I used an image service to resize images on the fly to match a user's screen size, cutting down page load sizes. The resulting Google Web Performance results speak for themselves.
RAATSICC and I have been working together since rebuilding their website in 2016. Our relationship is fluent, so we're able to talk about their changing needs and update their platform quickly and easily. This helps RAATSICC contually improve their website to better educate and service their remote communities.
]]>Callum has responded to our needs by listening and helping us through the process so that we've got a website that helps us talk to our communities. We have trust and control in our relationship. Emma Schuh, Secretary
You don’t miss good tools until you have to use the old tools.
The web is a quarter century young and all the tools we use to make the web are mutating works in progress. We're starting to see platform maturity this decade and with this, a second generation of tooling methods has also matured, driven eagerly by the platforms themselves, well honed in the battle for your eyeballs. Given this, it shouldn't surprise you if I tell you there is a paradigm shift happening in modern web development.
The arrival of new tools is making the old tools painful. Web developers already understand this. And slowly, as a new breed of javascript-powered websites are using new techniques that result in no page loads, no server side rendering and pre-fetched assets—all of which result in signficantly better user interface performances—it's becoming obvious to audience and business alike that something is afoot.
So for the past four years or so, this blog has been running on WordPress. It was as fast, as custom, and as free of plugins as I could possibly make it, but WordPress is cumbersome, and there's only so fast and pleasant to use you can make it.
Tania Rascia, The End of an Era: Migrating from WordPress
I think we’re seeing a generational shift in web development between the proprietary bundled systems of the dominant web publishing platforms that emerged a decade or more ago as they struggle to modernise and compete against the fundamentally different approaches of modern web development, where a multiplicity of unbundled API services can be integrated together in a technology stack customised to publishing requirements. And the divide will grow because the proprietary systems must use their legacy tech stack for the backward compatibility of all their mid- to long-term subscribers.
Let me give you an example of how this is happening. Some of my clients have small- to medium-sized legacy websites on Wordpress. By legacy, I mean these websites have been alive for a number of years, I've inherited the project and it's my job to maintain and extend it's lifespan. Because they need a website.1
The problem I've seen lately is that these kinds of legacy websites are slow, graceless experiences and my clients and their audiences are starting to sense it. So they're asking me to upgrade these experiences but a quick glance at the codebase tells me 1) it's no wonder they're slow and graceless, and 2) I know there's a better way to do this. And this better way starts with understanding three important facts:
APIs change everything. In the past, bundling features into a web publishing tool made sense. It wasn't easy to integrate services with an external API because the technology wasn't available. But now it is. So instead waiting for your publishing platform to become a swiss army knife, you can choose to integrate an API-based service who lives and dies by doing that one service better they ever will.
Microservices can afford to do a better job. In the past, your website publishing platform was probably what we now know as a CMS. Like Wordpress. This platform would handle not only the CMS but also the building of your user interfaces. Today the UI build doesn't need to be tied to the publishing platform, and there are better tools for that job that will never be integrated back into the older publishing systems because backward-compatibility prevents it.
Javascript is everywhere. With the maturity of Node.js, developers haven't had to change languages between server-side (the backend) and client-side (the browser) environments for a while. That has allowed innovative new techniques to emerge and mature: code/data splitting, pre-loading, pre-caching, image optimisation and bucketloads of other enhancements—difficult or impossible to do with straight HTML, unheard of only a few years ago—are freely available in opensource frameworks.
We’re underinvested in developer tooling. Industry-wide, there are enormous efficiency gains still to be unlocked—tools today remain quite primitive.
Patrick Collison, Stripe CEO
If someone were to publish a new website today, so that it becomes a valuable asset tomorrow, what exactly are these better tools? And why?
JAMstack is an acronym (Javascript, APIs and Markup) that symbolises an approach to building websites where each part of your website publishing system—interface building, content and services management, and hosting—is treated as a separate concern. These concerns are then integrated together within a web development workflow so that you can create your own customised "technology stack". Because each concern is isolated, it allows free choice of the best tool available for that concern within the context of your business requirements.
In contrast to allowing a web publishing platform to determine the quality of your web publishing workflow based on their priorities and subsequent slow-moving feature set, the JAMstack method gives you the freedom to create a flexible, customised technology stack that exactly suits your needs.
Beginning in 2013 with Facebook's React.js and Vue.js 9 months later, Reactive Javascript libraries have proven to be a faster, more performant and highly flexible method for building your user interface (UI). More than just handling templating, they efficiently manage interface "state"—how the UI reacts to interactions—to make code more predictable and easier to debug. They are now regarded as the go-to method for building performant interfaces, and you can easily hire programmers for them because of their dominance within the programming language market.
The most significant gains in website loading speed have been made by prebuilding entirely flat web pages (that is, a "statically generated site") and serving them through a cached Content Delivery Network (CDN). By prebuilding the markup—that is, the scripts, styles and information within each web page—it does away with dynamically building pages on-the-fly with calls between a database and a remote server during delivery (otherwise known as "server-side" rendering), such as what happens with Wordpress.
This simpler delivery method is not insignificant. Serving prebuilt markup is not just easier to create fast page loads, it's also far more secure, with a far lower cost of scaling, and it completely removes the need for a backend. Yep, that's right: no backend operating systems, web servers, databases or different programming languages. Serverless cloud hosting is now a utility.
An ecosystem of deployment tools has also attached itself to your code repository, allowing easy, limitless publishing via Continuous Deployment (CD) methods. New builds—that is, a newly published website version—can be automatically triggered by webhooks based on scripts that are run when committing code to your website's code repository.
By hooking these deployment systems into with "headless" or "decoupled" Content Management Systems (where your content is integrated into yoru website front-end via an API), a robust, error-free deployment pipeline can triggered by anyone, developer or not, with a click. No more accidently overwriting the wrong file on your FTP and scrambling for the backup you didn't make.
When a paradigm shift occurs it’s rarely because the old methods don't work or aren't popular anymore. It just that the old guard can't change their identity quickly enough to keep up with the opportunities the shift provides. They'll want to keep playing to their prowess and strengths, but instead they accidently display their generational bias (a variation of the Shirky principle but for first-gen web developers, if you will).
Meanwhile, the new breed of crafted web experiences are being built with new tools made by a different generation of web developers who haven't had to unlearn the previous generation's best practises.2
As Patrick Collison noted above, the current paradigm of development tools will come to be seen as primitive in the near future. Which means the paradigm shift happening in web publishing tools will continue unabated, widening the gap between legacy web experiences and the new wave of crafted experiences.
Paradigms are the sources of systems. From them, from shared social agreements about the nature of reality, come system goals and information flows, feedbacks, stocks, flows and everything else about systems.
Donella Meadows, Places to Intervene in a System
Now is the right time to jump on the bandwagon, where you'll get the optimism and efficiency of a new generation of tools which will help you create superior website interfaces that also easier and faster to manage, iterate on and scale. The new tools are better and they're already here. They’re just not evenly understood yet.
Despite all the social media publishing platforms available, a website is still where a business can retain most control over the presentation of their core value proposition, and it's probably still the first thing a potential customer will click to from a search. Oh and forget native apps for business brand & value proposition sites, web search won.
I never had to transfer out of a decade of PHP in the early 2010s. Instead, I was a graphic designer for well over a decade before I started learning to program. this made it easier for me to embrace new web technologies. There was a lot I haven’t had to unlearn because I never learned it in the first place.
I’ve been doing a reading club on strategy for the past few months. We read books and pool notes on them. One book that has particularly stood out for me was "Deciphering Sun Tzu: How To Read 'The Art Of War'" by Derek M. C. Yuen, which Ben Mosior gladly shared. "Deciphering Sun Tzu" helped me understand the poetic paradoxes of ancient Chinese Philosophy as an alternative and coherent strategy to how we’ve been raised to think in Western society. Here's a mutated summary of Ben's notes, mostly for my own understanding.
The Western tradition of strategy is a means–end rational framework: it implies the use of certain means to achieve desired ends. Western thought assumes strategy to be causal, not consequential.
In contrast to Western strategic thought, the aphorisms of Chinese strategic thought may appear contradictory, even paradoxical. Our initial readings of Sun Tzu, et al. are more akin to reading poetry, which naturally lends itself to pondering metaphors, not checklists of action.
Indeed, pondering metaphor is the intent. Aphorisms of dual meaning are meant to help one understand the unforseeable nature of reality. By starting with "not knowing", Chinese strategic thought begins at “the inherent potential of the situation (Shih)” and is “carried along by it as it evolves.”
In Chinese thought, the end is impossible to predetermine (which is, strangley, the ultimate rational means-end insight). This means no plan can be worked out in advance. Instead, one can only understand consequences arising from conditions. Opposed to the Western mode of the rational means–end efficacy, the Chinese mode can be described as paradoxical condition–consequence. The condition–consequence mode teaches one not to aim directly, as a first-order goal, but to allow an effect to happen, as a second-order effect.
Condition-consequence is a process which transforms the situation by effects. This is markedly different from the means-end mode where a goal leads to direct action in order to achieve a result. There are subtle implications:
Conditions occur “upstream”. Like a fisherman paying attention to the weather, or a surfer to the waves, she won’t act without favourable conditions. Attention, patience and non-action become virtuous.
There are as many consequences as there are conditions. No two consequences will be alike. Outcomes are expected to be interchangeable.
Now we can understand how condition-consequence is manifested in “yin-yang” as a continuum of complementary opposites: Heaven-Earth, strong-weak, fast-slow, many-few. The yin-yang dialectic embraces ever-changing reality: whatever is opposite is a complementary condition to be respected. Externalities are always included in Chinese Strategy. The certainty of a result is taken far more lightly because “plans are easily disrupted. Increased certainty actually exacerbates this effect.”
Far from being two irreducible or even mutually exclusive states, yin and yang (or A and not-A) are two consecutive stages that are produced by the deployment of reality.
Given this understanding of condition-consequence as the mysterious unfolding reality of yin-yang, how then should one act?
A yin and a yang is what is called the Tao
The Tao is the uninterrupted interplay of yin and yang. Unifying their duality must happen before proceeding in The Way (Tao). This unification should be like water:
assisting the natural tendency is always preferable to opposing it as everything carries within itself its own seeds of destruction when it over extends.
The fundamental principle of Tao is Returning: “return is the movement of Tao”. And the fundamental function of Tao is Yielding: “yielding is the practical application that effects the manifestation of return.” Now we can understand the paradoxical poetry of Chinese strategic thought as a system that tries to keep inside the tempo of unfolding mysterious reality, and as a method of playing with the polarity of situations in order to deceive an opponent.
Thus, Chinese strategy is less a plan designed to achieve a predefined aim than a plan intended to outwit an opponent. By understanding and creating conditions, one allows reality to unfold in their favour. Conditions which predominantly draw on human factors or irrationalities can be created for the defeat of an opponent. The Chinese strategem is to discover potential or propensity, encourage its impetus, pushing it to the extreme, and finally exploiting it when it reaches the tipping point.
In this way, “yielding” is essential because it prevents one from reaching the extreme prematurely. It also greatly enhances one’s chance to “out-flex” his opponent. As in the Chinese and Japanese martial arts, technique overcomes force. When you rush without technique, your force can be returned with ease.
We can now understand the paradoxes at play in ancient Chinese philosophy are in fact a method of penetrating the enormity of experiential understanding about the tempo of action:
Plot against the difficult while it remains easy,
Act against the great while it is still minute.
Difficult affairs throughout the realm invariably commence with the easy,
Great affairs throughout the realm inevitably commence with the small.
For this reason the Sage never acts against the great
and is thus able to complete greatness.
What is tranquil remains easily grasped,
What has not yet betrayed signs is easy to plot against.
Lao Tzu, Tao Te Ching
For learning, you gain daily; for the Way, you lose daily.
Within ancient Chinese strategy, learning concretises mental models, which are always simplified models of reality “thereby preventing reality from being grasped as it actually is.” Thus, Tao stresses unlearning and not knowing, so as to see clearly. In this way, Tao resembles the Zen idea of “no mind”. (Zen Buddhism was originally influenced by Taoism but they are two different philosophies.) Because “the essence of warfare is to betray its model”, when one has unlearned and keeps “no mind”, it becomes particularly difficult to anticipate one’s moves. This is the Tao as strategy.
Again, the water metaphor helps to summarise the Tao philosophy: by being formless, one is endlessly adaptable, always open to potential. Your Shih is constantly replenished. And because potential always preceeds impetus, you can naturally find for yourself the right action under the right conditions.
By shedding dogma, by killing all your darlings, your mind can see clearly the opportunities right in front of you. You are not phased by finding problems you could never have foreseen because you know that is the natural order. You find the difference between your plans and what actually happens causes you no friction. This is how "the weak defeats the strong” and how “striking second” are “the products of the organic structure of Chinese strategic thought.”
Victories are won through propensity rather than force or actions.
Your strategy should recognise and assist natural propensity by encouraging its impetus. Just as a surfer waits for the right wave.
Never interfere with an enemy that is in the process of committing suicide.
Napoleon Bonaparte
In Chinese Strategy, the end is pre-determined. Like Kurtz in Apocalypse Now, Verbal Kint in The Usual Suspects or Macbeth’s witches, great strategists know the future before it happens. More than simply “wait-and-see,” a great Chinese Strategist “foresees-and-waits.”
“Double, double toil and trouble,” the witches chant, casting their spell on their Macbeth's propensity. To foresee the future, set the conditions for other actors to make their natural plays, avoid being meddlesome and instead wait for the tide of action to arise. And when conditions have given way to consequences, and when it is obvious to everyone that a sacrifice must be made, act decisively once and for all.
]]>In the words of the ancients, one should make his decisions within the space of seven breathes. Lord Takanobu said "If discrimination is long, it will spoil."
Yamamoto Tsunetomo, Hagakure
What most of us lack in order to be artists, is not the inceptive emotion, nor yet merely technical skill in execution. It is capacity to work a vague idea and emotion over into terms of some definite medium. John Dewey, Art as Experience
Rather than understanding taste as the particular way a person does a thing, I will argue that taste is a measurement of how well a person is able to see and act within a problem space. That it is the ability to skip ahead over previously assimilated decisions to get to the heart of a matter. And that the process of doing this over and over within a domain turns the many small insights made into a muscle memory of shortcuts that are stored as aesthetic feelings, away from the cognitive expense of language and reason. Much more than just a style of doing, good taste is a measure of a person's intuitive understanding of a problem space.
A differentiated product is “better” in some way, but all too often putting your finger on exactly what is better is a frustrating exercise. Ben Thompson, Selling Feelings
Given our revised definition of taste as a unit of creative problem-solving ability, the question is, so what? Why does taste matter? As software destroys, transmutes and unbundles markets into recursively smaller niches, the user experience of these products becomes a major battleground for competitive differentiation. When all is said and done, a successful product will be decided by how well the product's interfaces make people feel. A frustrating interface will be dismissed, and a satisfying interface will create a customer.
But what makes an interface successful? Beyond speed of performance, cohesive information sequences and anticipation of the human context and need, designing an experience that hopes to create feeling can only be done with feeling. The difference between good and bad becomes a matter of who can bring to bear greater focus and knowhow within the problem space. It becomes a matter of who can build with better taste.
Because information grows through human use, problem spaces have infinite depth. After deliberate practice within a problem space over long periods of time, what we have learned is assimilated into aesthetic intuitions. If intuitions are made of knowhow1 that don't need to be encoded into language, then taste is made of libraries of intuition.
Intuition is a suspension of logic due to impatience. Rita Mae Brown
These libraries help us shortcut logic and leap over the decisions we've already converted into taste so we can immerse ourselves deeper into the problem and see evermore clearly what matters. In this way, taste is a process of compression and acceleration through cultivated attention.
I think this place is beautiful, if you look at it right. David Lynch
Taste is stored at a pre-linguistic, pre-logical stage, and is understood as an emotional feeling before we can talk about it. Beauty is also understood in this manner. In fact, the two are often confused because good taste is more often than not beautiful. But beauty is not taste. Beauty signals rich information that is worth paying attention to. Whereas taste informs the creation of new information based on a history of previous attention.
Taste, like beauty, is misunderstood. And I think that's because it's difficult to rationalise. Even though we aren't rational at all, we like to think we are. As a result, anything that's hard to describe in words, we don't trust. And taste is difficult to describe in words. We only get things like taste and beauty when we're receptive to our intuition and curiosity.
PayPal was a very friendly name. It was the friend that helps you pay. Napster was a bad name. It was the music sharing site. You nap some music, you nap a kid. That sounds like a bad thing to be doing. Peter Thiel
The simplicity of understanding in Thiel's quote hides a receptivity to aesthetics, which we're used to rationalising away. We make them all the more powerful when we fail to notice them as rich information in plain sight. As we increasingly live our lives reacting to an attention deficit, we tend to fill the empty moments where previously feeling emerged. But that does not prevent most of our decisions being post-rationalised based on barely conscious gut feelings. We are parsing aesthetics and heeding them as emotions as automatically as we digest food. We may not be able to describe in words what we want, yet we know it when we see it. And I venture, in broader terms, we know it when we feel it.
When you have a cultivated your attention for a problem space so deeply that you've turned your knowhow into feeling—what German speakers call fingerspitzengefühl, translated literally as finger-tip-feeling—then you have created for yourself the competitive advantage of perspective. As Alan Kay says, “A change of perspective is worth 80 IQ points.” Thus, we can say that taste is a measure of imagination growth.
If we are drawn to beauty through curiosity,2 then a continued personal interest within this beautiful domain may lead us to begin developing taste within it. As we move from interested to fascinated, our learning within the space over time allows us to form a deliberate practice for working with it. The level of effort is driven not by willpower but fascination. The work is self-sustaining because it is constantly rewarding, even when it is difficult. We are cultivating taste for a given domain when we choose to do a thing and do it well. As such, taste can't be bought.
There are many alter-egos for the process of acquiring taste that I’ve just described. It has elements of Joseph Campbell's Hero's Journey myth. Steven Pressfield called the hard parts of this process The Resistance. The Greeks called it Daemon, which translates as a person's "inspiring force" or genius. And the Latin meaning for genius was "innate talent", or "the guardian spirit which watches over each person from birth".
In Lewis Hyde’s “The Gift” he tells the story of the original Latin concept of genius, which our modern meaning is now diametrically oppossed to.3 Instead of being a post-hoc title to canonise great work—as we currently understand it—genius was understood as an innate talent given to every person at birth. The gotcha was that we couldn't fully, potently receive the fullness of our gift until we could meet it as an equal by labouring with it in gratitude. This practice can only be done without obligation, at its own pace, and when we finish, we will barely remember producing the results. In other words, refined taste—the fulfilment of one's genius—can only be ground out in what Csíkszentmihályi called "flow" states over a long time. It's expensive stuff.
Taste, like ethics, can't be simply transferred between people as information. It is too complex. Instead, it has to be cultivated within each person according to the whims of that person. And each person's knowhow is locked up within them unless that person manages to convince other people of the worth of their perspectives.
Our society’s ability to accumulate information requires flows of energy, the physical storage of information in solid objects, and of course our collective ability to compute. César Hidalgo, Why Information Grows
The greatest bottleneck to the economy is not helping first home buyers to get on the property ladder but transferring the encoded knowhow trapped within an individual to a network of people that can, as César Hidalgo says, "crystallise imagination" into the solid matter of a scalable product.
Our collective ability to compute suffers from the high cost of transacting information between our selves. Each of us live completely individual experiences, which means we all know things nobody else knows. It is impossible to encode your experience for another so they feel it as you did, yet with mutually understood interests and stories, and an eagerness to socially engage, communication is made. So while taste can't be bought, some form of it can be shared.
Scenius stands for the intelligence and the intuition of a whole cultural scene. It is the communal form of the concept of the genius. Brian Eno
Scenius is a compound of the words "genius" and "scene", and was coined by Brian Eno to represent the creative intelligence of a community. Given Lewis Hyde's revised concept of genius as a cultivated gift, then scenius is the cultivated attunement of each team member's genius within a focus of mutual interest.
How an individual's taste is shared depends on the prior embedded knowhow within each person and how each person relates to everyone else on the team. Are you able to express and connect your ideas? Are others receptive to theses ideas? Does this generate interesting new conversations? Can you listen in return? Do you feel energised?
Sure, there's work to be done. But unless the work is orchestrated as a combined effort with an awareness of who's playing what note, and why, the product produced is far less likely to make people feel good enough about using it. And if you can't get people to feel good enough about using it in the first place, they're not going to use it at all.
Economic development is not the ability to buy but the ability to make. César Hidalgo, Why Information Grows
Just as you cannot not communicate, you cannot not have taste. Rather than being a throwaway complement, taste describes a person or a team's intuited ability to comprehend and create within a problem space.
Taste is cultivated by a natural curiousity for a problem space. Because one find it fun, it becomes easy to spend deep focus honing one's attention and skills within the space, squishing knowhow into smaller and smaller bundles in order to discover more and more interesting things within it.
Good taste is the embodied ability to work a vague idea and emotion over into terms of the medium. It is the invisible dark matter that makes one product a superior user experience over another. Indeed, you will know you're successful people call your product "beautiful". Good taste makes good things.
For more on this idea, see the article Driven by Compression Progress: A Simple Principle Explains Essential Aspects of Subjective Beauty, Novelty, Surprise, Interestingness, Attention, Curiosity, Creativity, Art, Science, Music, Jokes by J'urgen Schmidhuber.
Taste is knowhow, not knowledge. Knowhow encompasses knowledge and puts it to use. As César Hidalgo says: Knowledge involves relationships or linkages between entities. These relationships are often used to predict the outcomes of events without having to act them out. Knowhow is different from knowledge because it involves the capacity to perform actions, which is tacit.
The Latin root meaning of "genius" has fallen from modern usage but still lives on within some domains. For example, in landscape gardening, genius loci refers to a location's distinctive atmosphere, or spirit of place.
We sense the world before we are consciously aware of it through instinctive reactions to the aesthetics of our environment. We understand these reactions in ourselves emotionally. We do this well before we have time to use our linguistic system to think and create meaning. And we do this sensing unconsciously, like breathing, every second of our waking lives.
These processes happen quickly. At a glance, we notice and assess the multitude of patterns before us. When a pattern signals danger, we feel immediately that "something isn't quite right" even though we can't "put our finger on it".
And when a pattern draws us in, we feel it's beauty, and our curiosity. Like a shadow felt but not consciously seen, we're hardly aware that the language of aesthetics is our first mode of understanding the world.
When we use language, we have to think. We have to choose words, connect ideas, assemble metaphors, and then speak them. Thinking is expensive. We use aesthetic-based pattern-matching to give us answers before we consciously start thinking. We rely on aesthetics to make very fast decisions based on a library of intuitons built over a lifetime. The language of aesthetics is pre-verbal by necessity.
When we find a pattern in a scene to be dangerous, like the snake above, then we are electrified, instantly ready to react and avoid danger. All consciousness is focussed on the danger.
When we find symmetry in a scene to be pleasing, then we are calm, ready to begin investigating the scene. We may describe the scene as "interesting" or "beautiful" and begin consciously understanding it. We are drawn to beauty and repelled by danger.
Danger and beauty are the two extremes on the spectrum of the language of aesthetics. When we sense danger, we do not think. Instead we react to avoid the situation. Beauty, however, invites us to pause, pay attention, and then think. To find something beautiful is to find information we can use in our favour.
We understand danger overtly. Our body reacts like an electricity switch, automatically overriding the need for conceptual thought. Beauty, however, is far more subtle. Beauty invites. Beauty is a lure.
Predators often use beauty to their advantage. The Siphonophone (above) is an exotic creature, even to it's prey. Spiralling itself across a large area to attract whatever may pass, it invites curiosity and investigation. Each tentacle can sting, sedate and consume. There is no warning here, only beauty.
As an adrenalised response is the defense for a target animal, a beautiful invitation is a weapon for those seeking targets. The Siphonophone uses beauty to prey, eat and survive.
While predation is a zero-sum game, other games are not. When a flower uses beauty to attract partners in its gene dispersion scheme, every participant wins. Beauty invites participation and attention.
As pattern-matchers, we seek beauty because beautiful things signify opportunity. Like all animals, we intuitively know that beauty says "this thing has potential, it's worth investigating". From pain to pleasure, beauty is the subtle, calm opposite that invites us to think and act.
When found ripe by pre-agricultural humans, the bulging blackberries (above) would have been gorged before another animal could have taken the opportunity. The first glimpse of the berries on the tree would have elicited hushed enthusiasm, then quick maneuvering to capitalise on the scene.
Creativity is often misunderstood. We think it requires some form of talent or genius when, in fact, every human is innately predisposed to creatively find and exploit beauty. We just get hung up on concepts like "creative genius" because, as social animals, we hunger for status. But before beauty is given over to the subjective interpretation of taste, it has already triggered a calm and curious feeling that leads us to believe "this is interesting and worth my attention".
In this way, a spreadsheet can absolutely contain beauty. Humans naturally seek beauty in order to make use of it.
Our arational response to beauty is the reason why advertising sells not to our intellect but to our emotional feelings: "you’ll feel better when you have this". It's why people will say "I'll know it when I see it" even though they can't explain what they're looking for. It's why a picture is worth a thousand words. It's what Buckminster Fuller meant when he said "if the solution is not beautiful, I know it is wrong."
Arrational1 beauty initiates thinking. I can tell you to think of the brilliantly patterned sea slug that introduced this post, and then describe the above picture of Reebok Instapumps as "venomous", and I know you'll understand me.
Faced with a decision between two objects, we'll choose the one we developed an unaware bias for moments ago. By accessing the language of aesthetics, we know good from bad in an instant. Our innate sense for beauty draws us towards opportune information, with which we find ways to leverage our environment. But we only begin inspecting, interpreting, connecting and collecting information when beauty tells us it feels right.
Every one of us post-rationalises our decisions as it suits us. The reasons for our choices are deeper than we think. While they won't tell you, people will sense incongruence and walk away. Or they will notice seamless and cohesive symmetry in a fraction of a second, and begin inspecting.
As we move toward "peak attention", it pays not to underestimate how powerful, calming and attentive the feeling of beauty can be.
As an example, let's imagine Melbourne's laneways. Over a long period of time they have become naturally rich nooks and crannies such that when you walk them you discover hidden surprises at almost every corner. The essential character of Melbourne’s laneways is the accumulation of many overlapping details that each feedback and influence each-other over time.
Put it this way: if you tried to recreate Melbourne's laneways from scratch, all “Melbourne-ness” would be lost. By contrast, if you tried to recreate Canberra, Australia’s capital city, you’d do a better job. Canberra is high-modernist urban architecture devoid of rich experience because, as Christopher Alexander says:
…no piece of any unit is ever connected to other units, except through the medium of the unit as a whole.
The “natural semi-lattice” metaphor is a good way to understand how complex processes can’t be reduced to simple templates. Delineating the skillsets involved into distinct, separate domains cuts their interconnections and creates artificial order. The result lacks character.
The same holds true for the complexities of User Interface design. Why, for example, do most websites look the same these days? It probably has something to do with the rise of "magic bullet" UI frameworks such as Bootstrap. Reduction of complexity accidentally eliminates richness.
Hi! I’m a designer who really enjoys coding. I’m self-taught, and I started more than a decade into a graphic design career. Here’s a few reasons why I think designers should code:
How, might you ask? Working self-sufficiently as a web creator, I can execute what I’ve designed without asking or paying another person.
Not asking someone is more important than not paying. As soon as more than one person is involved in a project, I have to communicate to them a tangible vision of what my design is. This can be difficult. In this way, asking is more expensive than paying. Nor does paying prevent asking. (This doesn’t apply if you’re in a shit-hot “pizza team” who finishes each-other’s sentences. But most of us aren’t.)
If I can code the design myself, I don’t have to communicate the nuance of aesthetic or interaction choices. Nor do I have to roll out every instance of those choices as approximate “design” mockups to use to communicate with. Productivity and quality is increased when a craftsperson is self-sufficient enough to understand something of all the medium's necessary overlaps and gotchas that make up rich web experiences.
A cook sips the broth. A pilot feels G-forces. A painter paints, and sees mistakes become new ideas. As Bret Victor says:
Creators need an immediate connection to what they’re creating.
Not only is designing with code far more immediate than using design tools, if you’re a designer who codes, your design is the code. The degree of separation between your design work and the programmed interface is zero.
(I’ve got opinions on tools and frameworks within both design and development domains which I’ll leave for another time, but let me note that Storybook is the perfect UI design system tool: the design is a rendered compilation of the library of coded interface components.)
There's no doubt that doing both UI design and development is hard. Progress in design tools and modern frontend development is rapid and ceaseless, which is both a help and a hindrance. So when you're simulating a computer in your minds—as developers do—it's taxing to take a client call about strategy.
But if it’s an all-you-can eat buffet, do you dig in all night? You can’t master everything, and you shouldn’t try to. You can, however, embrace VUCA, go taste-testing and make informed decisions about what interests you. In this situation, I’d prefer the problem of abundance over that of scarcity. The trick is to reframe the problem as not one of input, but of throughput. Jump in. See what sticks.
The trick, William Potter, is not minding that it hurts. Peter O'Toole as Lawrence of Arabia
If you can let go of your identity, expose yourself to strange, new ways and give yourself “the freedom to search in the darkness where the problems lie”, you’ll come out the other side with some mutant pollen stuck to your skin. Those mutant pollen are “one-percenters” waiting to compound. And that’s why designers should code.
When designers code they understand surprising and contradictory insights are part of the trials of writing software. This is crucial knowledge that will increase a designer's agency and makes better outcomes.
If you're a designer who codes within in a team, you’ll have higher-resolution information you can use to communicate with, and make better decisions. If you're a designer who codes by yourself, you will have greatly enhanced your ability to implement your vision.
The hallmark of craftsmanship is to understand "both the limits and the possibilities of your medium". Within the craftsmanship of web experiences, learning to code helps designers to see and understand the necessary overlaps that create characteristically rich web experiences.
]]>My response was to focus on putting customers first by using portraits of real staff members, a clear, fast interface design and accessible information flows with forthright messaging.
Values of openness, honesty and accessibility are created through the interface design: strong, clear typography, with icons that highlight features, and reduced, straightforward forms.
VJ Ray's business is winning people's trust through their service. The new websites set the scene by being clear, fast and honest.
The website never shouts, never wastes a person's time. Instead, it starts by aiming to be helpful. In this way, the message is clear: VJ Ray are listening and ready to help.
]]>Vince, the owner, knows fishing boats. The website acts as a storybook, each page is a chapter that talks about Vince's boat making specialty, what the new factory workspace offers, the fabrication processes used and the base boat designs they customise.
I worked with J-Create Photography to capture the tight-knit team and the workshop space in action, portraying them as uncommon local craftspeople.
We love our new website. It tells out story really well, and our clients have found it engaging and easy to understand. Callum has understood who we build boats for, and why we do it. Vince Cassaniti, Owner
Our gift-giving model is innovative, and allows people to focus on the joy of giving and remembering by sharing the cost of great photography. Jannah Dryden, Founder
Album Registry bridges the gap between people celebrating the big moments of their lives, and artisanal photographers who do justice to those moments. We needed a way to showcase what great photographers do while giving gifters a first-class e-commerce experience.
The resulting website is fully responsive, provides multiple levels of user access, with a flexible backend content management system to record registry payments and an email notification system for admin, customers and gifters.
The codebase uses the Node.js ecosystem, allowing us to take advantage of the rapid developments in open-source web development.
We're able to design and adjust new features in the browser using the brand design system we designed and built.
We aim to offer the Album Registry photographers three ways to do what they love: an ecommerce platform, a website marketing toolkit, and a community to share with.
I begin every wedding I do with an event page, which I can setup in a minute. My clients are impressed when they get such a great web page done so fast, not to mention the huge burden the gift-giving model lifts from their shoulders! Benn, Bluesky Photography
Album Registry grows slowly but surely, and since joining as co-founder in mid 2017, I'm excited to focus on building tools that help photographers grow their business, and help people give the gift of memories.
Frontend development done in collaboration with Barry Phillip Hall. Please note that as of June 2018, I'm no longer part of Album Registry.
]]>Their metalworks are rugged and beautiful. To capture this, we collaborated with home and landscape specialist J-Create Photography. The website design makes full use of the results, immersing the viewer in the variety of works.
The visual design system uses highly structured fonts, with hand-drawn icons that match the 'craftsmanship' archetype central to their brand repositioning.
Callum showed us a bigger vision of what our work means to our audience. And he's been able to convert ideas into reality. The site naturally draws comments and filters our clients. It certainly creates better business for us. LeaAnne Cassaniti, Owner
The goal of the website is to become a place people can dream of their perfect home and office space, and create a community around Oceanblue's works.
]]>Callum has helped us understand and fix the many issues that we had with our previous site. After working with him over 2 years, we’re now able to put the artists we work with front and centre of our brand and digital marketing and confidently grow our profile. Brad Spolding, Managing Director
The visual redesign gave centre stage to each event's brilliant, eclectic photography, framing it with whitespace and clean typography.
Redesigning the user experience, we prioritised events. Event details and the 'buy' button were prioritised. Clear navigation and event grids allow easy persual without compromising the immersive experience.
We targeted usability and mobile performance in the upgrade to fulfil the needs of real people. For example, a person travelling home from work on public transport should be able to buy tickets from the site while in transit. To guarantee these opportunities, website performance and user flows were audited and a stack of improvements made.
Together, we've stemmed the constant maintenance costs that drained The Substation's digital marketing effectiveness. With a consistent digital design system integrated into a performant and adaptable codebase, The Substation can focus on talking to their customers.
]]>All data collected was anonymous. At survey completion, users were presented with a quality of life score, which they could share by email or SMS.
Close collaboration was essential: I had to understand the use cases for the survey for PHN staff, service providers and patients. The better the experience, the more people will complete the survey, and the greater benefit for PHN.
A well-defined series of workflows with clear interface design means the app can be used with no more than general smartphone knowledge. However, I also provided guides and screencasts for staff and their patients to encourage their use.
The resulting survey app immediately created value for PHN. It's an experience that patients and staff find fast, simple and easy. This helps PHN to collect quality data they can use to improve their services.
This app is not publicly available. Please get in touch for a demo.
]]>The Baxter Peritoneal Dialysis app (above) was a simple value proposition project, relative to the level of interaction we had produced in other projects. I used a clean, typographic approach paired with illustration, emulating editorial graphic design. The app is brought to life by calm, measured transitions on interaction and page loads.
The Actifuse Bone Graft Substitute app held a large information set, so it's success relied on clear a information architecture and well-designed navigation. I designed the user journeys, applied a design direction across the app, and also built it, managing detailed client feedback throughout.
These projects are not publicly available. Completed while working for Ward6.
]]>