Welcome to the Figma series brought to you by Design at Scale™ – Academy(↘︎Link). This article aims to show how Figma(↘︎Link), let alone FigmaJam(↘︎Link), can bring your research closer to your product team.
To clarify the situation from the beginning of the research, we mean a pre-initiative competitive landscape analysis and basic hoovering of available assets and patterns in your well-established design library.

Landscape Analysis

Before we ask our research colleagues for qualitative and quantitative data(↘︎Link) about the proposition, we need to establish a basic understanding of the landscape we are about to craft. 

What

To do so, here are basic understandings that a designer must have to start working on the project: 

1. Proposition Brief(↘︎Link) – well, no brief, no project.
2. Existing framework - Design System(↘︎Link) or at least UI KIT(↘︎Link).
3. Brand Research(↘︎Link) – Is there a brand guideline or brand reference 
4. Competitive Analysis Research(↘︎Link) – 3-5 direct competitors and their representation of a function of the style.  
5. Behaviour Analysis(↘︎Link) – what behaviour are they implementing to achieve desirable outcomes?
6. Content Analysis(↘︎Link) – what content is in place, and how well is it redistributed? 
7. Data Model(↘︎Link) – what is the data model? Do we have one?
8. User Analysis(↘︎Link) – What are the main objectives for the user, and how do competitors resolve this challenge? What can we do better in this space? 

How

Understanding how we approach the research and what deliverables we expect at each stage is important. Some of them might be mandatory, and some optional. It will most certainly depend on the company size. However, the common dominator here is the company size and the project stage. If you support deployment, doing landscape analyses wastes energy and time.
Every Studio, Agency, or department must have basic criteria for delivering the research and for what outputs and outcomes we should expect from the team.

1. Proposition Brief(↘︎Link)
   1. Basic Word doc
   2. Ideally, an integrated Confluence page
      (Ideally linked to Figma research) 
2. Existing framework(↘︎Link)
   1. Figna Design System
   2. UI KIT.
   3. Basic Figma File
      (Ideally linked to Figma research)
3. Brand Research(↘︎Link)
   1. Minimally, Brand Guideline – PDF
   2. Basic Brand Guideline – Figma
   3. Ideally, Brand Gudeline – StoryBook
      (Ideally linked, copied or shared to Figma research)
4. Competitive Analysis Research(↘︎Link)
   1. Three direct competitors 
   2. Five broader competitors
   3. their representation of a function of the style
      (Ideally, FigmaJam research File of assets)
5. Behaviour Analysis(↘︎Link)
   1. How does the competitor proposition behave 
   2. How does our proposition behave 
   3. Difference and improvements
      (Ideally, FigmaJam research File of assets)
6. Content Analysis(↘︎Link)
   1. Content Structure – wireframes
   2. Content Strategy – document  
   3. Content Model – dBase
      (Ideally, Figma File of assets)
7. Data Model(↘︎Link)
   1. Design the high-level data model? 
   2. Do we have one?
8. User Analysis(↘︎Link)
   1. Ideal user 
   2. Minimally three personas
   3. Ideally five personals
   4. Key behaviour for the feature 
   5. % likelihood of interaction 

Why

Why does Landscape analysis matter? To define early KPIs that can serve as the basic measurement foundation for future development – define what the good looks like / feels like and, most importantly, how we measure it. Sometimes, this little detail and some one or two days of work can save you months of changes called Agile. When progressing in the wrong direction, we call it increments in the world of building something just for the sake of building something.  

Visual Board Mapping

We all have heard about visual mapping. One way or another, we have visually mapped our room before we moved in. Draw the journey on a piece of paper or Google Maps(↘︎Link) for a friend to reach out to our party. Simply put, we must visually map a scenario or destination for someone to understand. Visual mapping is not different.

Have you heard of Moodboards?

Visual Board Mapping is essentially Moodboard creation. I remember all the early days in a creative studio in Bath Spa –Summerset, creating mood boards for POS designs (Point of Sales) or Licensing(↘︎Link) like Transformers, Nutcracker, Jack Daniels and many others. With a movie like Transformers, you have to create different badges for different transformers; for each, you need different mood boards to represent the character, creative direction, colour, etc.

Custers 

These specific clusters then drive the intention behind the mood board itself. Brand, colour, behaviour or motion mood boards. Regardless of the type, you can reference a certain information cluster under the one common dominator: visual reference. Genuinely, the easiest way to agree between designers as well as non-designers.  

Functions 

The essential part of the process is attaching the function to it. All Product design is about translating behaviours. Visual reference > motion reference > brand reference = new pattern. Do not hesitate to sketch things up, draw a silly wireframe, and throw some arrows on it to explain our ambition.  

Heuristic Evaluation 

If you are in a simple project scenario like branding for a Pre-Seeed Series startup, you’ll probably not go to this length. However, if you reach the point of designing an integrated proposition, you’ll need a basic level of heuristic knowledge and assessment. (↘︎Link)

1. Visibility status(↘︎Link) – system feedback through appropriate channels
2. Behaviour standards(↘︎Link) – maintained across the proposition 
3. Consistency(↘︎Link) – including consistent terminology, layout, and interaction patterns across the proposition
4. User control(↘︎Link) – the ability to undo or redo actions, as well as escape paths from unexpected states of interactions
5. Error(↘︎Link) – guide through error scenarios and resolve them by educating
6. Recognition(↘︎Link) – Minimizes the user’s load by making information visible.
7. Flexibility(↘︎Link) – customisation by providing shortcut accelerators to tailor the system to their needs.
8. Aesthetic(↘︎Link) – simplicity and clarity over maximal function.
9. Document(↘︎Link) – comprehensive and easily accessible documentation or support resources

Schemas Workshop.

You are ready to run a Schemas(↘︎Link) Workshop from the above data set. In prehistoric times, we call it a whiteboard session. You know, people go to the office, plan the meeting and stand in front of the whiteboards and jam about a new piece of behaviour or function.
Nowadays, cool kids use FigmaJam—god and sit in their pyjamas in their bedrooms. I miss that vibe when copyrighters, content strategists, developers, and designers define a new generation of behaviour so that our customers feel privileged to use our product or service. Well, this workshop will take place in FigmaJam now and allow you to define the first skeleton of your proposition. This way, the team will agree on why, how, and what will be shipped in the next release.  

Our Experience Mapping 

All these little boards and interactions lead to one comprehensive blueprint, an Experience Map(↘︎Link). UXR(↘︎Link) combined with FigmaJam has brought several teams together and standardised on not one proposition. Having a single place as a blueprint completes the team's decision-making process. It’s like a campfire. All people, individually in clusters, huddled around the map and discussed their perspectives and suggestions. One important change to previous campfires. They need to leave the trace/evidence they have done so and document the changes.   

Impact Mapping

By documenting the change, you make the Map a living organism and visualise your entire business's invisible structure. This way, all surrounding parties can make an informed decision that will impact the department, function, delivery, and, inevitably, the outcome. Figma, in this instance, plays a key role in these interactions.

The next article will move UXR to CX and look at how Customer Experience Professionals can help their UI colleagues design smarter propositions using Figma. 

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.