Size is arguably the most effective way to emphasize visual elements. Simply put, larger elements draw greater attention than smaller elements.It’s the precise reason why newspaper headlines appear in larger fonts. In any design, larger elements—whether they be words or images—not only will be most noticeable, but they also will carry the strongest message.Another important principle related to this concept is scale, the size of an object in relation to another. A large or small object, has no scale until it is compared. It allows us to create balance in design and focus on dominant elements.

Size Impacts Visibility 

Visual hierarchy principles are key to creating effective UX and UI designs 

Visual hierarchy is a method of organizing design elements in order of importance. These are the 12 virtual hierarchy principles you need to know.

problemsolving

Problem Solving

communication

Communication

product

Product & Design

12 Visual Hierarchy Principles Non-Designers Needs to Know

What’s the process of creating a backlog?Step by step process:1. Run a workshop with your team/s to first capture and prioritise research questions.2. Using the template, move the identified research questions into the “Backlog” section. New research questions can also be added as they emerge.3. Starting with the high priority questions, try to fill out as many of the columns as possible4. Based on the importance and effort estimates, pull the research questions that you are confident you can deliver that month (you can change this to weekly/quarterly if needed) into the “Monthly Backlog”.

User Research X Agile Product Devlpmt - The Research Backlog 1/4

5. Set up a regular meeting (Every two weeks, or monthly) with you key stakeholders (Product, Design etc.) to review the Monthly Backlog and confirm what the high priority projects are.6. Once you pick up a research question, move it into the “In Progress” section7. As you progress with the project, you can update the “Status” column accordingly to keep stakeholders informed e.g. Planning, Testing, Analysis, Reporting8. Once the project has completed, move it into the “Completed” section. You may wish to add a link to your final report in the “Status” column.

User Research X Agile Product Devlpmt - The Research Backlog 2/4

Backlog contentSquad/Tribe/Area — which squad/tribe/area would this work fall under?Key stakeholders — who are your key stakeholders for this project?Research question — what’s the question you’re trying to answer?Type — is this evaluative or discovery research? Keeping track of this over time, will help you to ensure there’s a good balance.What’s involved? — what UX research methods could you use to answer the question?UX Researcher Effort — how much effort will it be for you to complete this research? 1 = Low Effort (e.g. days), 2 = Medium Effort (e.g. weeks), 3 = High Effort (e.g. months).

User Research X Agile Product Devlpmt - The Research Backlog 3/4

Importance — how important is it to answer this research question? Think about the business and customer impact — you may want to rely on the POs to guide you on this. L= Low importance, M = Medium importance, H = High importance.When is it needed by? — Is there a deadline for this work?Who/what else could we rely on? — It may make more sense for another team to pick up this research question e.g. Analytics, Customer Insights.How much do we know currently? — What previous research has been done? Are there insights from other teams/sources which we could use to help answer this question.

User Research X Agile Product Devlpmt - The Research Backlog 4/4

Managing Research and feeding hypothesis and areas to test into a regular research cadence are critical for mature user experience teams and products

Jas Nijhar is a user researcher who supports multiple teams and squads, which can be tricky in an agile environment. They decided to make use of his product ownership experience of maintaining and…

Backlogs: The secret to managing user research

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify all graphic and technical components display and function properly. As the design gets passed from design teams to product owners and development teams, they each make changes due to temporal or business issues, which can mean the final product doesn't correspond with the design team’s vision.

Quality Assurance needs to be done by Designers not just Software Engineers

Here are some (non-exhaustive) elements to check in order to ensure the graphics and ergonomic quality of the developed project: Alignments:<ul><li>Text Block alignments, images, buttons, logos or icons</li><li>Margins: margins, padding, optical alignments</li><li>Spaces: titles linked to paragraphs, numbered lists</li></ul>Typography:<ul><li>Have the right fonts been used?</li><li>Are the fonts used royalty free? Are they regulated? There are specific rules with green numbers, and Maestro or Visa credit card details.</li><li>The typographic hierarchy: H1, H2, H3, italic, labels, etc</li></ul>

Design QA Checklist on Developer Build (Part 1 of 3)

Media:<ul><li>Check the pictures used. Are they royalty free? If not, did you think about crediting the authors?</li><li>Check the size of illustrations, hero banners and icons in the case of a responsive display (breakpoints between desktop, tablet, and mobile)</li><li>Observe scrolling images of carousels</li><li>Check video playback (pictures and sound) for any bugs when displaying JSON files created with the Lottie plugin</li><li>Check micro-interactions and transitions between pages</li></ul>Responsiveness:<ul><li>For websites, test across several browsers (Chrome, Safari, Firefox, Opera, Internet Explorer etc.) to detect display differences.</li></ul>

Design QA Checklist on Developer Build (Part 3 of 3)

Colors:<ul><li>Respecting primary colors and accents</li><li>Background colors, illustrations, text, buttons, icons, card shadows, etc</li><li>Different interface states e.g. a “night” mode</li></ul>Affordance:<ul><li>Component states (buttons, links, icons, checkboxes, etc.) like “normal,” “hover,” “pressed” and“disabled”</li><li>Micro-interactions in navigation menus or tab bars</li><li>Have proper links been added?</li><li>How do different states of form fields appear? (Normal, errors, mandatory, dropdowns, focused, typing, disabled)</li><li>Should open dropdown menus have a specific appearance?</li><li>Do form fields have the correct size on each device?</li></ul>

Design QA Checklist on Developer Build (Part 2 of 3)

As designers, we review our design work a lot, especially in an agile context. Reviews and feedback at each stage of the creative process are both useful and crucial to the success of a product or…

computerscience

Computer Science

softwareengineering

Software Engineering

The ‘Design Review’ Between Designers and Developers

The girl reported missing from Asheville, N.C., was in distress in the passenger seat of a car and flashed a new distress hand signal created by the Canadian Women's foundation. It was created as a way for people to indicate that they are at risk of abuse and need help.One person in a nearby car recognized the signal from TikTok, and conveyed to police suspicion that the girl was in trouble. The car was pulled over, a male driver charged and the girl reunited with her family that reported her missing two days earlier.

Power Of Non Verbal Communication: TikTok Hand Signal Saved Girl

Power of social media and non verbal communication

motivationandinspiration

Motivation & Inspiration

https://www.nytimes.com/2021/11/08/us/tiktok-hand-signal-abduction.html

Design System Organiser is a must-have for anyone dealing with large-scale Design Systems in Figma.It enables you to quickly bulk-manage styles and components; something Figma lacks out of the box.<a href="https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer">Grab Organiser</a>

Figma Plugins - Design System Organiser 

Accessibility is not a ‘nice to have’; it’s a ‘must have’ today.The Contrast plugin makes it easy to check the contrast ratios of colours in your designs as you work so you can make sure the project you’re currently working on adheres correctly to the Web Content Accessibility Guidelines (WCAG).It’s a super-useful and required plugin that can even scan entire pages and generate a report of all text-based contrast issues it finds, allowing you to work through and fix them as required. <a class="idea-content-link" href="https://www.figma.com/community/plugin/748533339900865323/Contrast">Grab Contrast</a>

Figma Plugins - Contrast Accessibility

Blush is a fantastic Figma plugin created by the excellent Pablo Stanley and his top-notch Illustrator team.I can use the Blush plugin in Figma, select from a vast number of Artists and Collections, customise the Illustrations to my preference, and drop them directly into my project. <a class="idea-content-link" href="https://www.figma.com/community/plugin/838959511417581040/Blush">Grab Blush</a>

Figma Plugins - Blush Illustrator

The Unsplash plugin is straightforward, and practical, with no unnecessary frills.There’s no need to download and insert photos into Figma anymore manually. <a class="idea-content-link" href="https://www.figma.com/community/plugin/738454987945972471/Unsplash">Grab Unsplash</a>

Figma Plugins - Unsplash Images

So you’re starting a new project and want to switch from Roboto to Inter in multiple places. Is it possible to achieve this quickly in Figma?Erm. Nope! Figma currently only allows you to update one style at a time manually. Yeah, a real pain.With this super-convenient plugin, you can change numerous text styles simultaneously while keeping all font weights and other stylings intact and saying goodbye to all that laborious nonsense.<a href="https://www.figma.com/community/plugin/818203235789864127/Batch-Styler">Grab Batch Styler</a>

Figma Plugins - Batch Styler

Line charts, Pie charts, Area charts, you name it, they’re here for you to easily select and drop into your project with so much customisation available to you.With the option to use real or random data from sources such as Excel or Google Sheets to create your charts, you have the strongest, I feel, of all the chart plugins available in the Figma community.<a class="idea-content-link" href="https://www.figma.com/community/plugin/734590934750866002/Chart">Grab Chart</a>

Figma Plugins - Chart

Third-party animation tool integrations are improving as Figma matures, but what about unique animations created within Figma?Well, that’s what Figmotion is trying to change.Creating intricate animations within Figma saves time, and Figmotion has impressed me greatly with its capabilities. It's similar to Principal in Sketch.<a class="idea-content-link" href="https://www.figma.com/community/plugin/733025261168520714/Figmotion">Grab Figmotion</a>

Figma Plugins - Figmotion

I’ve used plugins like Flowkit before and as good as they are and have more features than Autoflow, you still have to manually move items around to link wires and construct flows.With Autoflow, you select the objects between which you want to build a flow, and this lil’ package of plugin delight will magically draw a connectivity line. There is no need to insert and move connecting lines manually.<a class="idea-content-link" href="https://www.figma.com/community/plugin/733902567457592893/Autoflow">Grab Autoflow</a>

Figma Plugins - Autoflow

Having something like the Iconify plugin working alongside Figma makes things a lot simpler for your day-to-day workflow when working with icons.The Iconify icon collection includes over 50,000 icons from well-known sets like Font Awesome, Material Design, and Jam Icons, so you’re never short on choice.<a class="idea-content-link" href="https://www.figma.com/community/plugin/735098390272716381/Iconify">Grab Iconify</a>

Figma Plugins - Iconify

Over the past few years, I’ve tried out and regularly used many plugins from the amazing Figma community. Day by day, the offerings provided by this generous community keep on improving and show no…

20 awesome Figma plugins to improve your workflow

A business or corporation is made up of people. When only 20% of the people who make up the organization are fully engaged in their particular job in that organisation, most of the potential is left untapped. How to bring out this potential becomes a very important question.Just as a professional athlete has a recognised physical talent or a natural aptitude to be strong in some area of physical performance, so does an individual have natural aptitudes or talents inherent to his or her particular personality type. These natural aptitudes need to be recognised and employed in the person’s work.

Businesses Are Run By People So We Need To Nurture  Potential

The talent and knowledge-set of a team is identified as we determine:<ol><li>The unique direction in which each directs his or her energy</li><li>The context requirements to drive his or her motivation</li></ol>By identifying these two things we can understand their personality type and the natural aptitude of each team member including their basic beliefs, values and set of expectations about the world.

Personality Types Can Help Nurture Teams Talent And Knowledge

Jung’s theory of psychological types is perhaps the most influential creation in personality typology. One of Jung’s key contributions was the development of the concept of Introversion and Extraversion – he theorised that each of us falls into one of these two categories, either focusing on the internal world (Introvert) or the outside world (Extravert). Besides Introversion and Extraversion, Jung also coined the concept of so-called cognitive functions, separated into Judging or Perceiving behaviours that people naturally rely on in everyday situations.

What Is Myer Briggs Personality Test Part 1/2

In the 1920s, Jung’s theory was adapted by Katharine Cook Briggs, and Isabel Briggs Myers to create the Myers-Briggs Type Indicator® (MBTI®).This is how the four-letter personality acronyms were born. We are of course referring to those mysterious acronyms like INTJ, ENFP, or ESTJ. The four personality aspects are based on Mind, Energy, Nature and Tactics. Each of these aspects is a two-sided continuum, with the “neutral” option placed in the middle. I.e. Mind consists of Introvert & Extrovert depending on your percentage in the personality test you get the first letter I or E.

What Is Myer Briggs Personality Test Part 2/2

This aspect shows how we interact with our surroundings:Introverted individuals prefer solitary activities and get exhausted by social interaction. They can be sensitive to external stimulation (e.g. sound, sight or smell) in general.They’re good at pacing, likely to listen to others more carefully and are good at reading situations.Extraverted individuals prefer group activities and get energized by social interaction. They can be more enthusiastic and more easily excited than Introverts.They enjoy pushing limits, take more initiative and rely on the world around them for validation.<a href="https://www.16personalities.com/articles/our-theory">Read more</a>

Myer Briggs: Mind Aspect - (I)ntrovert (E)xtrovert

This aspect determines how we see the world and process information: Observant individuals are highly practical, pragmatic and down-to-earth. They tend to have strong habits and focus on what is happening or has already happened. They like observable facts and more straightforward outcomes.Intuitive individuals are very imaginative, open-minded and curious. They prefer novelty over stability and focus on the theoretical- hidden meanings and future possibilities. They ask "what if" and like to connect the dots in the bigger picture.<a href="https://www.16personalities.com/articles/our-theory">Read more</a>

Myer Briggs: Energy Aspect - Ob(S)ervant I(N)tuitive

This aspect determines how we make decisions and cope with emotions. It reveals the extent to which we value emotions or rationality more when considering options:Thinking individuals listen to their head over heart. They focus on objectivity and rationality, prioritizing logic over emotions. They tend to hide their feelings and see efficiency as more important than cooperation.Feeling individuals listen to their heart over head. They are sensitive and emotionally expressive. They are more empathic and less competitive than Thinking types, and focus on social harmony and cooperation.<a href="https://www.16personalities.com/articles/our-theory">Read more</a>

Myer Briggs: Nature Aspect - (T)hinking (F)eeling 

This aspect reflects our approach to work, planning and decision-making:Judging individuals are decisive, thorough and highly organized. They value clarity, predictability and closure, preferring structure and planning to spontaneity. They would rather come up with five backup plans than deal with events as they come. Prospecting individuals are very good at improvising and spotting opportunities. They are flexible, and prefer keeping their options open. They are much more flexible when it comes to dealing with unexpected challenges and make their own luck.<a href="https://www.16personalities.com/articles/our-theory">Read more</a>

Myer Briggs: Tactics Aspect - (J)udging (P)rospecting

Tap into an employee's potential. Pinpoint the natural aptitudes of each person’s personality type for building team talent and making the best use of their potential.

Understand yourself and those around you.

psychology

Psychology

corporateculture

Corporate Culture

business

Business

Effective Team Building by Using MBTI Personality Strengths

The state of Washington approached NASA to ask them to build a protective clear structure around their beloved monument and save it from corroding. By using the five whys problem solving method they saved the state money by recommending they didn't need any structure they just needed to turn the lights off earlier...

Using 5 Whys Problem Solving To Save The Washington Monument

Problem: One of the monuments in Washington D.C. is deteriorating.Why #1 – Why is the monument deteriorating? Because harsh chemicals are frequently used to clean the monument.

Saving The Washington Monument: First Of Five Whys

Problem: One of the monuments in Washington D.C. is deteriorating.Why #2 – Why are harsh chemicals needed?To clean off the large number of bird droppings on the monument.

Saving The Washington Monument: Second Of Five Whys

Problem: One of the monuments in Washington D.C. is deteriorating.Why #3 – Why are there a large number of bird droppings on the monument?Because the large population of spiders in and around the monument are a food source to the local birds

Saving The Washington Monument: Third Of Five Whys

Problem: One of the monuments in Washington D.C. is deteriorating.Why #4 – Why is there a large population of spiders in and around the monument?Because vast swarms of insects, on which the spiders feed, are drawn to the monument at dusk.

Saving The Washington Monument: Fourth Of Five Whys

Problem: One of the monuments in Washington D.C. is deteriorating.Why #5 – Why are swarms of insects drawn to the monument at dusk?Because the lighting of the monument in the evening attracts the local insects.Solution: Change how the monument is illuminated in the evening to prevent attraction of swarming insects.

Saving The Washington Monument: Fifth Of Five Whys

Great example of the five whys in design thinking

The 5 whys example about the crumbling monument is known to most in the Lean, Six Sigma & improvement worlds, but very few know the true story. Until now.

5 Whys Example: The Truth Behind a Monumental Mystery

"Help me brush my teeth in the morning” is not a great example of a Job to Be Done statement.It infers an existing solution (a toothbrush) and there’s only so far you’ll be able to expand your thinking within that bubble.It's a valid approach to designing innovations that impact customer satisfaction in the near-term. But it will not lead to disruptive new products and services.For more innovative product design and more 'aha' moments we could use:“Keep my teeth healthy.”This is people focused - the same problem people faced hundreds of years ago, face today, and hundreds of years from now.

How To Write A Jobs To Be Done Statement

Jobs to be done is a leading way of writing user and business problems, and when done right it can feed into agile product development, by linking the customer need to the feature.

If you're trying to integrate Jobs to Be Done into your design process, you've probably found yourself looking for some concrete examples of Jobs to Be Done statements to be sure you're on the right track.

How to Write Jobs to Be Done Example Statements

JOBS-TO-BE-DONE is a perspective — a lens through which you can observe markets, customers, needs, competitors, and customer segments differently, and by doing so, make innovation far more predictable and profitable. <ul><li>Markets aren’t defined around products, but groups of people trying to get a job done.</li><li>Customers aren’t buyers, they are job executors.</li><li>Competitors aren’t just companies that make products like yours, they are any solution used to get the job done.</li><li>Customer segments aren’t based on demographics or psychographics, they are based on how customers struggle differently to get a job done.</li></ul>

What Is Jobs To Be Done Theory

People buy products and services to get a “job” done.Jobs are functional, with emotional and social components.<ul><li>A Job-to-be-Done is stable over time, customer needs don't change - only evolve.</li><li>A Job-to-be-Done is solution agnostic.</li><li>A deep understanding of the customer’s “job” makes marketing more effective and innovation far more predictable.</li><li>People want products and services that will help them get a job done better and/or more cheaply</li><li>People seek out products and services that enable them to get the entire job done on a single platform</li></ul>

The 5 Key Tenets Of Jobs To Be Done Theory

Jobs to be done is an important form of business problem solving and user centred design

Jobs-to-be-Done Theory is comprised of a group of principles or tenets that explain how to make marketing more effective and innovation more predictable by focusing on the customer’s job-to-be-done.

The Core Tenets of Jobs-to-be-Done Theory

Card sorting is a research method used by UX and user researchers to uncover users’ mental models and better understand how people naturally categorize information. It involves having study participants group information by sorting cards into categories.  There are three types of card sorting exercises:Open — Users sort cards into groups, and then name the groupsClosed — Users sort cards into an existing set of categories Hybrid — Same as closed, except users can also create new categories

What Is Card Sorting In UX?

Moderated card sorts<ul><li class="ql-align-justify">Typically done in-person</li><li class="ql-align-justify">Usually more expensive and time-consuming</li><li class="ql-align-justify">Requires more coordination</li><li class="ql-align-justify">Allows for user “narration” of sorting choices to provide additional visibility into thought process</li><li class="ql-align-justify">Provides the option for a debrief in which to ask follow-up questions and capture qualitative insights</li><li class="ql-align-justify">Requires additional time and resources for data analysis</li></ul> Unmoderated card sorts<ul><li>Usually done remotely via an online tool</li><li>Tends to be faster and less expensive</li><li>Fairly easy to organize</li><li>May provide shallower qualitative insights</li><li class="ql-align-justify">Often used as a complement to moderated sessions</li></ul>

To Moderate Or Not To Moderate In UX Card Sorting

Moderated vs. unmoderated card sorting

Pick your poison: old-school paper or new-fangled technology. Paper card sorts<ul><li>Uses physical cards</li><li>More flexible and forgiving for the user</li><li>Allows user to see all content in one place</li><li>No technology learning curve</li><li>In-person sessions require more coordination&nbsp;</li><li>Requires manual documentation and data analysis</li></ul> Digital card sorts<ul><li>Uses digital cards in an online tool</li><li>Can require quick technology training</li><li>Fast and easy to coordinate and implement</li><li>Software captures input and automates analysis</li></ul>

Paper VS Digital Card Sorting In UX

A comprehensive list of the best digital card sorting tools for moderated and unmoderated UX research. Includes user reviews and 2021 pricing information.

12 Visual Hierarchy Principles Non-Designers Needs to Know

Backlogs: The secret to managing user research

The ‘Design Review’ Between Designers and Developers

https://www.nytimes.com/2021/11/08/us/tiktok-hand-signal-abduction.html

20 awesome Figma plugins to improve your workflow

Natasha Bee