Welcome to the Figma series brought to you by Design at Scale™—Academy (↘︎Link). Our previous articles have focused on the product(↘︎Link) and service design(↘︎Link) verticals in product design development(↘︎Link). The underlying factors for both are user research and customer experience(↘︎Link). This article will explore how customer experience professionals use Figma to their advantage and help other team members craft their propositions. 

Understandably, this article requires a little bit more space and perhaps deserves its own separate section. Experience Design(↘︎Link) is about helping our colleagues from Product, UI designers, and Engineering(↘︎Link) to collect, synthesise and process all information into logical clusters so that they can deliver the value proposition across defined verticals. 

The Experience Design is not different from the others. However, we tend to focus on far greater analysis and further investigation of navigation and mental models that are closely tied up with Content Modeling(↘︎Link). 

Gap Analysis

The majority of the gap analysis(↘︎Link) is called “research” explored in the previous article. Your CX team is researching a proposition with an objective in mind – to either increase or decrease the spending, steps, consumption, behaviour or all the above. Some companies prefer the Gap Analysis to happen in silos with dedicated teams that produce qualitative and quantitative heuristics that inform the next stage of the project. Where the rest of the spectrum tends to collaborate on research, which is more accurate or profoundly important to your organisation is decided by who is creating it and who is manifesting the findings.

In DaS™ – Academy(↘︎Link), we teach our designers to be
A/ very good observers and
B/ excellent analysts. When combined, we have a
C/ great Interaction Designer—the designer who becomes an architect of a behavioural model. 

Step one – Collect the print-screens 
Step tow – Organise screen into behavioural clusters
Step three – Find a common dominator for the behaviour or paradigm.
Step four – Create a support case. 
Step five – Broadcast

This part of the work stays in FigmaJam. You can use other means for collecting data, but as these will only be reused here, there is no need to make extra effort and replicate these resources. 

Heuristic Evaluation

So many design teams go through a great length of research and collecting the resources, yet far too often, we see that analysis and evaluation take less than 5% of the study. There are two sides to the same problem. One, the team did not set the objective against which they would measure success. The second is skipping the evaluation together and calling it “understanding”.  The problem in both cases is the inevitable lack of knowledge that can be shared widely throughout the business and, more importantly, across the proposition.
Heuristic evaluation offers three main points that should be addressed in further development, which we call catalysts.

1/Collecting the evidence(↘︎Link) is not only the case of understanding but also evaluating whether the competitor’s site, app or proposition acts accordingly with their mission statement
2/Consistency of navigational model(↘︎Link). Which become a fundamental foundation for further exploration and definition of primary behaviour
(avoiding copying and pasting from previous none related projects)
3/ Having the proof in visual, written, and calculated form will empower all designers to battle through biases and design by committee session, which often comes with unprecedented truth from cousins, friends, and grandma, who will likely become your target audience. 

In DaS™ – Academy(↘︎Link), we often show all four models that reflect the majority of scenarios: a team of one, a team of ten, a team of one hundred, and a so-called moving target.

FigmaJam (and its layered setting) allows us to have multiple research boards in one file reflecting the changes across one proposition. This setting can be easily adopted in Confluence(↘︎Link), where we document our knowledgebase,  and in Jira(↘︎Link), where we tick off all our research tasks across the research phase—Discover.

Schemas

Feel free to skip this if you are in an iterative process of an existing product. However, if you are in the break of developing a completely new branch of behaviour and challenging the status quo, feel free to listen and get some inspiration.

Heuristic evaluation allows us to understand what model we’ll use and how we use it. Now, we just need to document it. The easiest way is to start with schemas. What is schema(↘︎Link) – well, before we flooded our computers with wireframes and glossy UI, we used to draw the Schenas to understand where we swipe, what will open and whether this specific behaviour will be an overlay or simple chevron/hidden behaviour. We now have dynamic frameworks and many other case studies that show that we should use this specific behaviour against others. 

If we consider CTV–Connected TV(↘︎Link) proposition, we often have a TV, 

Set-top Box, Remote, Mobile, Tablets and Computers leave us no choice but to combine all behaviours in the mental ecosystem. Schemas help us to articulate the majority of behaviours that can be overpowered by local product/feature owners who only care about delivering one feature. 

At DaS™ Academy(↘︎Link), we examine the ecosystems and how well they need to be prepared and communicated across the business. At this point, we start combining and perfecting the schemas into wireframes. The confluence of these things allows us to start crafting user journeys that help us structure the experience.

Figma has become a unique proposition for CX-experience designers. Many of my colleagues consider combining Research, CX, Brand, and UI under the Product umbrella.

Content Modelling

After all these stages and documenting, we come down to competent modelling. This exercise is made for Figma. Seriously, after the last two decades and a number of Excel sheets(↘︎Link), UML diagrams(↘︎Link), Database Schemas(↘︎Link), and hundreds of drawings, we finally have an interactive place to put all of them on one board. It might not be ideal for an experience with +30k states (customising the building or car), but it's more than enough for an application booking flights or hotels.

There are three stages:
1/ Content Structure(↘︎Link) – reflecting the structure on the page and how the layout reflects and displays the content in different viewports and modes.  

2/ Content Strategy(↘︎Link): What needs to be displayed and when for whom? What message is the business communicating to the prospect or new customer? 

3/ Content Model(↘︎Link) – how the data are structured and the interface calls them. 

At DaS™ Academy, we examine all three elements mentioned above, diving into the finest details that allow designers to articulate a value proposition not only through pretty branded images but also via a value proposition and optimised content model that is ready for MLM(↘︎Link). 

Figma allows us to import JSON(↘︎Link), XML(↘︎Link), UM diagrams(↘︎Link), and much more. Often, plugins flood our workspace, minimising the gap between us and our engineering fellows.

Navigation Model Mapping

Being at the forefront of interaction design for close to two decades, you’ll see there is far more appetite to jump the gun and start directly in the UI. Corporations build millions on navigation propositions without understanding the ultimate challenge and having a well-articulated gap analysis. 

Hundreds if not thousands of design engineers and experienced technologists craft new navigation models daily just to please the eye of the senior stakeholder without actually developing the navigational concept.

Design System Engineers craft one component navigation across multiple touch points where colleagues on the production line <DETOUCH> the instance and do not even use the component correctly.

Waste is everywhere. As sad as it sounds, it’s not due to Figma; it’s due to a lack of understanding and documentation that teaches the design function to reuse, integrate, and learn some new trick.

If you are moving your team into the 21st-century automated product design development world, check out the Design at Scale™ – Academy(↘︎Link).

Happy scaling through design!

Hey, I’m Jiri Mocicka. A London-based Designer, Trusted Advisor and author of Design at Scale™ – A method that allows individuals to shape the future organisation through design. Grid Magazine – brings weekly articles about product design development. An Online Academy helps designers find their feed in teams of 01, 01, and 100, supported by Supply, a collection of digital artefacts that helps you become a 1% designer. 

If you have a question or are hesitant to ask, join our Design at Scale™ Community to connect with like-minded individuals who scale design propositions.