Show and tell for better design
At Canvs, over the past two years we have been figuring out what makes up the core DNA of our working style — and as we come to a resolution on this two things come to the surface -
Long-form narrative building (Tell) around design and
Hyper-deep dive prototyping (Show)
The process, at large
When designing a product, it’s a clutch responsibility of a designer to create a strong backbone of a narrative to a design (not just bulleted lists of stories and principles) along with creating near realistic renditions of the motion and interaction of the designs, to give a complete understanding of what happens where, and when it happens.
This is the best way to deliver the design for both design-centric and non-design-centric teams. Context gets filled up wherever gaps may exist via strong, and through narrative + a clearer pathway emerges on what the finished product can potentially look like as prototypes get denser.
Narrative helps create a common storyline amongst people working on the product and Prototypes help in creating transparency in what to expect.
At Canvs, we seem to be taking this responsibility more and more seriously with each passing day. Our internal narrative+prototyping practice has become something of a formidable one, and we thought we should share some of what we have done over the past year with the world.
Design Narratives and Strategy
A highly central part of not just how we design, but how we think is to look at design as a narrative. Now by narrative, we don’t just simply mean user stories, substories and such — in fact, what we mean is a long-form thread, that takes the reader through the causes and effects of all the broadest and narrowest portions of the design we create.
The heart of why we took on this approach is straightforward, the more a narrative is pertinent and interlinked, the easier it becomes to remember and make it relevant across large teams. When a set of features, no matter how clever the ideas are, are left as simple bullet points in a document, there is a high chance that things get left behind as they all don’t interlink into one cohesive story — this leads to wasted time on checks — and more importantly, a lack of a central vision on the product designs outcome. With a narrative that the team all come together to write and read comes a common language spoken by the team. To say that again, but succinctly, the heart of our problem statement is leveraging good quality, human storytelling to affect the design process.
Design callouts
Additional to our design writing, comes a specific type of design presentation. Of course, one portion is the Prototyping, which we will speak about at length in just a moment, but the other component becomes our design callouts — simple, concise imagery that provides detailed shots of the design decisions to explain in visuals and text about how things are mean to be used.
Take a look at the items above to get a view of how callouts like so can help enable one’s understanding of a design strategy and the details therein.
Prototyping
With our recent solutions (from the past year and a half, at the least) — we have been creating some pretty gnarly renditions of how the finished product should look — so much so that we seem to make product managers simultaneously happy and sad about how close to a finished product our prototyping experiments have taken us.
Our prototyping practice relies heavily on two software:
- Figma — to create the fully interactive piece
- Adobe After Effects — to create the Lottie assets the team will need once things start getting developed in code
Let’s focus primarily on Figma. Our workflow in creating highly immersive prototypes can be structured into three pillars — Individual components, Layered Components and Larger State Changes/Overlays.
The creative process follows in order of how these three were mentioned. You first open up with individual assets that are cleanly designed and prototyped (with their respective animations) and then stack those into composite Layered Components — the collective use of Layered components across various modules and sub-modules within the product help bring light to the final portion, Larger state Changes.
The examples we’ll be showing you are from a recent project we did for Aditya Birla Capital, a large non-banking finance company from India. The project we are showing you here depicts portions of our solutions for their careers portal.
Let’s look at some examples between the three aforementioned pillars.
1 - Individual components
These unitary bases are the foundation of the prototypes’ operations, providing the fundamental principles that enable them to work effectively. They are the building blocks for creating successful prototypes, as they provide a solid and reliable structure for the prototypes to follow. Without these unitary bases, the prototypes would not be able to function as expected.
Without strong individual assets, you will not have the full impact of a deep-dive prototype.
Notice the breakup of the search into two bits — interestingly enough, this component is both a unitary Individual component and a Layered component given the three portions to the interaction here.
2 - Layered components
These make up the composite motions and interactions in a screen — with strong layering and mindful animations, these layered elements truly help create a clear focus on what module structure looks like.
Without well-structured layered elements, the more complex motions in a product get left out.
Notice within this layered state — there is more than just the motion within the search field — for instance, the count-up effect on the number above the title, or the hover animation over the image of the person on the right-hand side.
3 - Larger state changes
These clarify in the motion what a change from one origin to a destination looks like in the larger flow.
Without clean and simple state changes you are leaving out a fair amount of readability and clarity on the product user flows on the table.
Notice how the layered components exist within both screens that this video traverses through — for instance — the hover animations on the job listing cards or the pulse animations on clicking the checkboxes.
Simple steps can lead to impressively complex results
The process of moving from the unitary to the composite is a very simple one, but over time, if done meticulously, pays off greatly. Thinking of interactions from the ground up helps not only create highly detailed interactive experiences but also over time, helps us smooth out design issues that wouldn’t have perceptually been clear as a static design.
Another facet of this practice is essentially the practice itself. Repetition and considerable amounts of work in this space can help in developing a clearer understanding of these moving portions than simply a prototype — it can also help you translate the thoughts into a more technical canvas — in turn simplifying these problems for engineering teams — which we also do with a fervour here at Canvs.
Canvs Editorial regularly brings you insightful reads on design and anything related. Check out the work we do at Canvs Club.
This article is from the Editor’s Desk - Aalhad Joshi with Content Operations by Abin Rajan
Follow Canvs on Instagram and Medium as well for more design-related content.
