<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
	<channel>
		<title>Design Resources | Infinum</title>
		<atom:link href="https://infinum.com/blog/category/design/feed/" rel="self" type="application/rss+xml" />
		<link>https://infinum.com/blog/category/design/</link>
		<description>Building digital products</description>
		<lastBuildDate>Thu, 30 Apr 2026 13:44:05 +0000</lastBuildDate>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>

					<item>
				<image>
					<url>19274352https://infinum.com/uploads/2026/01/img-a11y-review-1.webp</url>
				</image>
				<title>5-Step Figma Accessibility Review</title>
				<link>https://infinum.com/blog/accessibility-review-in-figma/</link>
				<pubDate>Thu, 29 Jan 2026 11:06:27 +0000</pubDate>
				<dc:creator>Iva Omazić</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19274352</guid>
				<description>
					<![CDATA[<p>Discover how to conduct an Accessibility Review in Figma to ensure your already existing designs are accessible to everyone.</p>
<p>The post <a href="https://infinum.com/blog/accessibility-review-in-figma/">5-Step Figma Accessibility Review</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-248"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-92">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-95"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-93">
	<p	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-94'
	>
	With the <a href="https://infinum.com/european-accessibility-act/">European Accessibility Act</a> in place, accessibility is no longer just a “good idea”. It’s now mandated by the law, compelling many teams to revisit older or still-in-progress products to make them accessible. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-98"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-96">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-97'
	>
	While engineers and testers do their part in an accessibility review, we recommend that designers dive into their Figma files.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-101"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-99">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-100'
	>
	This guide, written by designers for designers, covers conducting accessibility reviews in Figma from start to finish for projects that already exist and need improvements.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-104"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-102">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-103'
	>
	Whereas for new projects, the best move is to <a href="https://infinum.com/accessibility/">build accessibility in from the very beginning</a>, so it’s not something you have to fix later.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-107"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-105">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-106'
	>
	Okay, has everyone opened their Figma yet?</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-110"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-108">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-109'
	>
	<strong>Step 1: Pre-audit setup</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-113"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-111">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-112'
	>
	Before you dive into the review, make sure you’re properly set up. That means knowing what you are looking for and which tools will help you along the way.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-116"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-114">
	<h3	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-115'
	>
	<strong>Get familiar with accessibility guidelines</strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-119"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-117">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-118'
	>
	There’s no way around it – you need to get comfortable with WCAG (<a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines</a>). These are the internationally recognized standards that most regulations use to determine if a product is accessible. If you’re not sure whether this affects your product, learn <a href="https://infinum.com/blog/european-accessibility-act/">what the European Accessibility Act means for your business</a>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-122"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-120">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-121'
	>
	WCAG is organized into four core principles: Perceivable, Operable, Understandable, and Robust. Each principle includes a set of success criteria that a product must meet to be considered accessible. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-125"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-123">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-124'
	>
	These criteria are grouped into three conformance levels:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-128"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-126">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-127'
	>
	<li><strong>A &amp; AA</strong> → sufficient for most digital products to be considered accessible. Meeting these levels covers the majority of accessibility needs and makes the product usable for most people with disabilities.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-131"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-129">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-130'
	>
	<li><strong>AAA</strong> → the highest level of accessibility. It is not legally required and is rarely expected in full, but some AAA criteria can be valuable to consider if you’re designing for older users or audiences with specific accessibility needs.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-134"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-132">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-133'
	>
	They are structured this way to cover the entire user experience, making sure people can perceive content, operate the interface, understand the information, and rely on robust code that works across technologies.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-137"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-135">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-136'
	>
	The WCAG documentation is long and sometimes intimidating, but we have resources to make it easier to understand. We created an <a href="https://infinum.com/handbook/accessibility">Accessibility Handbook</a> and a<a href="https://www.figma.com/community/file/1162686263875105735"> Figma Accessibility Overview community file </a>with visual examples of what passes and what doesn’t. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-140"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-138">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-139'
	>
	These are enough to get you started. As you progress, you’ll feel the need to check the official WCAG page for a deeper understanding of specific topics, but by then it will already feel more familiar and less overwhelming.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-143"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-141">
	<h3	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-142'
	>
	<strong>Know which criteria you will audit</strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-146"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-144">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-145'
	>
	Not every criterion can be reviewed in Figma. In existing projects, screen reader order and accessibility labels will be tested in the working product, so your development and QA teams will handle them. Depending on your product, some criteria may not apply. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-149"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-147">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-148'
	>
	For example, if you don’t use animations or have video captions, you can cross out the criteria that apply to them. Narrowing down the list right from the start makes your process quicker.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-152"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-150">
	<h3	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-151'
	>
	<strong>Gather tools and prepare your Figma file</strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-155"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-153">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-154'
	>
	<li><strong>Dedicated file.</strong> Create a separate <em>accessibility review file and</em> a<em> solutions proposal file</em> for redesigns you’ll need later.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-158"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-156">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-157'
	>
	<li><strong>Highlight the issues.</strong> Use simple lines or highlights to point out problematic elements on the screen.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-161"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-159">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-160'
	>
	<li><strong>Label issues directly.</strong> Use notes or annotations to explain which criterion failed and why. Color-coding by WCAG principles helps you quickly identify issue categories and how many there are.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-164"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-162">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-163'
	>
	<li><strong>Use plugins.</strong> We have a long <a href="https://www.figma.com/design/XHKlFNWIQAEU81KlhrtjJY/Accessibility-Guidelines?node-id=3827-5790&amp;t=8EGRTqsfEe5VrUq5-1">list of Figma plugins</a> and community files that you will find helpful, but a contrast checker is essential. Figma’s built-in picker works for some cases, but not always if you’re using styles/variables. So, I recommend starting the <a href="https://www.figma.com/community/plugin/748533339900865323">Contrast</a> and <a href="https://www.figma.com/community/plugin/733343906244951586">Color Blind</a> plugin.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-167"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-165"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-166">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2026/01/Design-review-blog-visual-backup-1400x1384.webp				media='(max-width: 699px)'
				type=image/webp								height="1384"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2026/01/Design-review-blog-visual-backup.webp"
					class="image__img block-media__image-img"
					alt=""
										height="2236"
															width="2262"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-170"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-168">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-169'
	>
	<strong>Step 2: Run the audit</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-173"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-171">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-172'
	>
	How you run the audit depends on your project scope and the setup of your Figma file.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-176"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-174">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-175'
	>
	At Infinum, we usually go flow by flow, starting with the most critical user journeys. Making a full product accessible takes time, so it helps to start small, often with a simpler flow to build momentum and avoid overwhelm. From there, check each screen against your criteria list, annotate issues, and move forward. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-179"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-177">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-178'
	>
	The first few screens will feel like the hardest, but once you get into the rhythm, you’ll start recognizing repeating issues. After a few flows, you will know most of the criteria by heart.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-182"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-180">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-181'
	>
	For smaller projects, you can take a different approach by reviewing one principle or criterion at a time, across all screens. For example, check all screens for contrast first, then go through them again to check the correct form labels.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-185"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-183">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-184'
	>
	<strong>Step 3: Document findings</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-188"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-186">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-187'
	>
	The advantage of running reviews in Figma is that the file itself doubles as documentation. For some teams, this will be enough, especially if your clients are comfortable with Figma. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-191"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-189">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-190'
	>
	In some cases, however, using multiple formats can make collaboration smoother. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-194"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-192">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-193'
	>
	Here is a breakdown of the ones we use most often:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-197"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-195">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-196'
	>
	<li><strong>Figma review file</strong> – This is where all the annotated screens live. For tracking issues and a high-level overview, you can use our <a href="https://www.figma.com/design/XHKlFNWIQAEU81KlhrtjJY/Accessibility-Guidelines?node-id=518-30382&amp;t=8EGRTqsfEe5VrUq5-1">Accessibility Checklist</a>. You can also add a dedicated <em>findings page</em> that summarizes the most common mistakes and action points. Once you begin working on fixes, set up a separate <em>solutions proposals </em>page or file where you keep before/after examples to review with the team.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-200"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-198">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-199'
	>
	<li><strong>Document or presentation</strong> – Useful when handing findings off to stakeholders. This format adds context: why accessibility matters, which criteria failed, the most critical issues, and before/after examples that show the impact of fixes.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-203"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-201">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-202'
	>
	<li><strong>Tasks (e.g., Productive, Jira, Miro)</strong> – Turning discovered issues into tasks makes them actionable and trackable. Usually handled by a project manager, this approach keeps everyone aligned from design through development to QA. It will also come in handy when tracking fixes later in the process.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-210"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple card-simple--is-ad block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-204"
	 href='https://infinum.com/accessibility/'>

	
	
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<p	class='typography typography--size-36-text js-typography card-simple__heading'
	data-id='es-205'
	>
	Don’t let your digital solution frustrate customers</p>		</div>

		<p	class='typography typography--size-16-text-roman js-typography card-simple__paragraph'
	data-id='es-206'
	 id='es-204-paragraph'>
	We can support your accessibility efforts by auditing your existing digital product or building a new, inclusive solution from scratch.</p><button	class="btn btn--color-infinum btn--size-small btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn js-card-simple-link"
	data-id="es-207"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-208'
	>
	<strong>Make your solution accessible</strong></div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-209'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button>	</div>
</a>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-213"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-211">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-212'
	>
	Step 4: Align with the team</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-216"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-214">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-215'
	>
	Once the review is finished, the next step is to align with developers and project managers.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-219"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-217">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-218'
	>
	A live handoff session is the best way to do this. Here, designers walk developers through the main findings, identifying which fixes will be design-driven and which will require code changes. It’s also a good opportunity to get developer input, since they may notice issues you missed. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-222"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-220">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-221'
	>
	Together with PMs, the team then prioritizes the fixes, agreeing on scope and order. This ensures everyone is aligned on what to tackle first and how to move forward.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-225"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-223">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-224'
	>
	<strong>Step 5: Track fixes</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-228"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-226">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-227'
	>
	Tracking fixes can be done in several ways, depending on your project setup and team size.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-231"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-229">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-230'
	>
	Once you’ve prioritized what to fix and in which order, start by creating solutions in your <em>solutions proposals</em> file. Review them with developers, align on the changes, then apply them to your actual flows and design system. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-234"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-232">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-233'
	>
	If tasks were created earlier, use them to track progress. If not, open your own tasks or create a to-do list; sometimes even something as simple as adding checkmarks next to the screens in your review file works, giving you a quick overview of what&#8217;s already been fixed and what’s left.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-237"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-235">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-236'
	>
	Consistency beats perfection</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-240"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-238">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-239'
	>
	Accessibility reviews can feel daunting, especially if you’re not fully familiar with the rules or the process. But with the right setup, clear guidelines, and good collaboration with your team, they become manageable. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-243"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-241">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-242'
	>
	Reviews won’t always run smoothly. Some fixes will be straightforward, while others will require deeper research and team support. That’s normal. Over time, you’ll also figure out how to adapt the review process to best fit your team and your workflow. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-246"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-244">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-245'
	>
	What matters is being consistent with accessibility and making steady progress with every project. Hopefully, this guide will help you feel more confident as you take on your next review.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/accessibility-review-in-figma/">5-Step Figma Accessibility Review</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19265803https://infinum.com/uploads/2025/05/Designing-for-the-IoT-experience-hero.webp</url>
				</image>
				<title>Designing the IoT User Experience</title>
				<link>https://infinum.com/blog/iot-user-experience/</link>
				<pubDate>Mon, 08 Sep 2025 13:58:06 +0000</pubDate>
				<dc:creator>Vedran Brblić</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19265803</guid>
				<description>
					<![CDATA[<p>Discover key principles for designing intuitive IoT interfaces that connect devices and deliver engaging experiences in our increasingly connected world.</p>
<p>The post <a href="https://infinum.com/blog/iot-user-experience/">Designing the IoT User Experience</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-271"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-249">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-252"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-250">
	<p	class='typography typography--size-36-text js-typography block-paragraph__paragraph'
	data-id='es-251'
	>
	As devices seamlessly connect and integrate into our daily lives, IoT design challenges traditional UX approaches. Creating intuitive interfaces for these interconnected ecosystems offers unique opportunities to craft engaging experiences that bridge digital and physical worlds.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-255"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-253">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-254'
	>
	IoT has revolutionized the way we interact with technology, enabling seamless connections between devices, applications, and services. As a result, <a href="https://infinum.com/ui-ux-design-services/">UX/UI and product design</a> have evolved, with designers striving to create engaging and personalized experiences tailored to this new paradigm.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-258"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-256">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-257'
	>
	The IoT landscape offers vast opportunities to explore innovative concepts that push the boundaries of traditional user interaction. But it also introduces new design challenges that must be addressed with care. In this article, we explore the core principles of IoT user experience design – what makes it different, what pitfalls to avoid, and how to craft intuitive and efficient IoT applications.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-261"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-259">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-260'
	>
	Overcoming IoT design challenges</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-264"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-262">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-263'
	>
	Designing an IoT app is a whole different ball game compared to, for example, banking or telecommunications apps. Designers must consider not only the user, app, and cloud, but also an array of interconnected devices communicating in real-time. Navigating this intricate landscape requires thorough research, validation of design choices, and a focus on simplicity – while keeping user experience the top priority.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-266"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-265'
	>
	<strong>IoT enables more intuitive and personalized interactions by connecting devices, applications, and services. These interconnected systems can be deeply integrated into daily routines, enhancing overall user satisfaction.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-269"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-267">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-268'
	>
	To bring out the most in any IoT platform, designers need to understand both its limitations and true capabilities. A major friction point in IoT is communication delay – interaction between phones and connected devices tends to be slower than standard mobile-to-cloud interactions due to signal interference or physical distance. This is why certain actions in IoT apps can be slower, so designers must adapt the interactions to prevent damage to the UX.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-290"
	 data-animation-target='inner-items'>
		
			<div class="block-columns" data-id="es-289">
	
<div class="block-column" data-id="es-288">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-287"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="grid block-grid__grid" data-id="es-286">
	
<div class="block-grid-item" data-id="es-274">
	
<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-272"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-273">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2023/07/card-masterconnect-square.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1240"
															width="1241"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>
</div>

<div class="block-grid-item" data-id="es-285">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-284"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-275"
	 target='_blank' rel='noopener noreferrer' href='https://infinum.com/work/philips-masterconnect-iot-lighting/'>

	
	<div class="intro-label card-simple__intro-label" data-id="es-276">
	<p	class='typography typography--size-14-text-roman js-typography intro-label__intro-label'
	data-id='es-277'
	>
	PROJECT EXAMPLE</p></div>
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<h2	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-278'
	>
	<strong>Designing intuitive control for Philips MasterConnect smart lighting systems</strong></h2>		</div>

		<p	class='typography typography--size-16-text-roman js-typography card-simple__paragraph'
	data-id='es-279'
	 id='es-275-paragraph'>
	Our team turned complex commercial lighting management into a user-friendly mobile experience that reduced setup time and cut energy costs by 75%.</p><button	class="btn btn--color-infinum btn--size-medium btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn"
	data-id="es-280"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-281'
	>
	Read the case study</div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-282'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button><div class="tags card-simple__tags" data-id="es-283">
	<div class="tags__items">
		<div class="tags__list">
					</div>
	</div>
</div>	</div>
</a>	</div>
</div>
</div>	</div>
</div>
</div>	</div>

<div
	class="wrapper"
	data-id="es-351"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-294">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-293"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-291">
	</div>	</div>
</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-297"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-295">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-296'
	>
	Ensuring an engaging user experience</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-300"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-298">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-299'
	>
	IoT enables more intuitive and personalized interactions by connecting devices, applications, and services. These interconnected systems can be deeply integrated into daily routines, enhancing overall user satisfaction.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-303"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-301">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-302'
	>
	For designers, this opens up numerous opportunities for innovative UX and UI. They can create engaging interactions between devices and mix them with the interactions in the apps, resulting in exciting experiences.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-306"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-304">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-305'
	>
	Here are a few examples of providing an engaging user experience through IoT.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-309"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-307">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-308'
	>
	Controlling devices in the user&#8217;s environment</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-312"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-310">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-311'
	>
	IoT ecosystems often consist of multiple connected devices. We can visualize these devices in-app and allow users to monitor their current status. For example, controlling smart lights can be enhanced with a preview of coloured lighting in the app. With this type of interface, it becomes easier to pair, manage, and control devices.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-315"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-313">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-314'
	>
	Real-time data visualization</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-318"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-316">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-317'
	>
	IoT devices often generate a vast amount of data. Designers can create intuitive and interactive dashboards that display this data in real-time, helping users make informed decisions. For example, this can be implemented for energy consumption data coming from smart home appliances.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-320"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-319'
	>
	<strong>For a deeper dive into how businesses can extract value from IoT data, </strong><a href="https://infinum.com/blog/iot-data-business-value/" target="_blank" rel="noreferrer noopener"><strong>check out our article on analytics and decision-making</strong></a><strong>.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-323"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-321">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-322'
	>
	Context-aware interfaces</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-326"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-324">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-325'
	>
	Interfaces can be adapted based on the user&#8217;s context, such as location, time, or activity. An example would be a smart thermostat that adjusts the temperature based on the user&#8217;s preferences and daily routine.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-329"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-327">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-328'
	>
	Gesture control</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-332"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-330">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-331'
	>
	IoT devices can be designed to recognize specific gestures, allowing users to interact with them without physically touching the device. An example is the Google Nest Hub, which lets users control it with air gestures.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-335"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-333">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-334'
	>
	IoT technology enhances user experiences in both home and work environments. In residential settings, smart thermostats, lighting systems, and appliances create comfortable, energy-efficient living spaces. Each of these devices can have a companion app, offering endless opportunities for designing innovative new features.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-337"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-336'
	>
	<strong>IoT design translates complex functionalities into visually appealing, intuitive controls within apps. This allows users to interact with their environments in new ways, bridging the gap between the digital and physical world.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-340"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-338">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-339'
	>
	In professional environments, IoT transforms workspaces through smart lighting, HVAC systems, and occupancy sensors. These technologies can optimize energy usage and adjust environmental conditions based on real-time occupancy data, and even improve workplace efficiency by helping employees locate available meeting rooms or resources – just one example of how machine learning can optimize business processes using IoT insights. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-343"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-341">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-342'
	>
	The beauty of IoT design lies in translating these complex functionalities into visually appealing, intuitive controls within apps. This visual representation of physical systems allows users to interact with their environments in novel, engaging ways, bridging the gap between digital interfaces and the physical world.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-346"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-344">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-345'
	>
	Designing user interfaces for IoT applications</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-349"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-347">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-348'
	>
	Designing user interfaces for IoT applications is a complex process that requires a strong emphasis on interaction design. That’s why drawing sequential and flow diagrams, alongside system maps, is necessary to cover all cases and create logical flows. To make sure everything is in the right order, creating prototypes is always useful. Additionally, since many devices may interact with an app, it is important to clearly communicate their statuses to give the user a clear overview and alert them if troubleshooting is needed.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-354"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-352"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-353">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/05/Dijagram--1400x803.webp				media='(max-width: 699px)'
				type=image/webp								height="803"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2025/05/Dijagram-.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1147"
															width="2000"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-395"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-358">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-357"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-355">
	</div>	</div>
</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-361"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-359">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-360'
	>
	Usually, the scale of most IoT apps and systems requires a comprehensive design system that addresses aspects such as usability, adaptability, and scalability. Having a system in place not only facilitates consistency but also streamlines the design process for new components and features. IoT apps are often paired with desktop dashboards, and a design system that is used for both ensures consistent UX.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-364"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-362">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-363'
	>
	One of the most exciting aspects of designing user interfaces for IoT applications is the opportunity to develop engaging UI controls that captivate users and enhance their overall experience. IoT applications often involve a diverse array of connected devices, which lets us design different digital representations of controls for each of these devices. Showing a realistic in-app preview of the look of a device has proven to be useful during our usability tests.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-367"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-365">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-366'
	>
	Prototyping and testing IoT devices and apps</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-370"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-368">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-369'
	>
	Since most IoT projects are relatively large and have a long development time (more than two years), the design has to be done right from the start. Any slight change can result in additional development effort, even if it is just a small aspect of the UI. That’s why it is essential to properly research and validate before making any big design decision.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-372"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-371'
	>
	<strong>When building new IoT products, the app and device are often developed simultaneously. This approach ensures that the app adapts to the device&#8217;s unique features and, in turn, makes it easier to enhance devices with new functionalities.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-375"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-373">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-374'
	>
	Usability testing is one of the main UX techniques used to evaluate the usability of an app. In recent years, unmoderated and remote usability tests that eliminate the need for participants to travel to a physical location have become increasingly popular because of their cost-effectiveness, flexibility, and efficiency.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-378"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-376">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-377'
	>
	Nevertheless, evaluating the usability of IoT apps often calls for in-person testing. To fully assess an app’s usability, designers usually need to be able to interact with a device physically. Such tests are generally conducted in the lab where the app is under development. It&#8217;s also worth noting that during the design and development stages, IoT devices are frequently in the prototype phase, which complicates sending them to users for testing.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-381"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-379">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-380'
	>
	When developing new products, it&#8217;s not uncommon for the app and device to be created simultaneously. This collaborative approach ensures that the app adapts seamlessly to the device&#8217;s unique features. Moreover, when designers conceive an especially valuable feature for users, the device can be further enhanced to support this new functionality – often through <a href="https://infinum.com/blog/iot-embedded-devices-firmware-updates/" target="_blank" rel="noreferrer noopener">firmware updates</a> that extend device capabilities and ensure long-term performance.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-384"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-382">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-383'
	>
	IoT design in an increasingly connected world</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-387"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-385">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-386'
	>
	The IoT landscape offers an array of opportunities for UX/UI and product designers to create engaging, context-aware, and user-centric applications. As the devices and systems we interact with become increasingly interconnected, designers need to develop innovative ways to enhance user experiences and seamlessly integrate IoT technology into our daily lives. However, this comes with its own set of challenges, which designers must address through rigorous research, validation, and usability testing.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-390"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-388">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-389'
	>
	As the IoT ecosystem continues to grow and evolve, the importance of thoughtful UX/UI and product design will only increase, making it a crucial aspect of successful <a href="https://infinum.com/custom-iot-development-services/">IoT product development</a>. By embracing these opportunities and addressing the associated challenges, designers can ensure their IoT applications stand out in a rapidly evolving market, delivering exceptional user experiences that cater to the needs and preferences of an increasingly connected world.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-393"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-391">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-392'
	>
	<em>This article is adapted from our <a href="https://infinum.com/iot-implementation/" target="_blank" rel="noreferrer noopener">Guide to Successful IoT Implementation</a>, where we cover the technical foundations and strategic considerations behind building modern IoT solutions. For more insights, download the full guide.</em></p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/iot-user-experience/">Designing the IoT User Experience</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19266110https://infinum.com/uploads/2025/06/dark-patterns-hero-2.webp</url>
				</image>
				<title>Ethical UX Moves from Principle to Policy</title>
				<link>https://infinum.com/blog/ethical-ux-becomes-competitive-advantage/</link>
				<pubDate>Tue, 24 Jun 2025 15:05:58 +0000</pubDate>
				<dc:creator>Chris Bradshaw</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19266110</guid>
				<description>
					<![CDATA[<p>As the new UK law bans fake reviews and hidden fees, designers must build trust by design or risk fines, backlash, and losing user loyalty.</p>
<p>The post <a href="https://infinum.com/blog/ethical-ux-becomes-competitive-advantage/">Ethical UX Moves from Principle to Policy</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-507"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-396">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-399"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-397">
	<p	class='typography typography--size-24-text js-typography block-paragraph__paragraph'
	data-id='es-398'
	>
	A ban on fake reviews and hidden fees in the UK just made ethical UX a legal requirement, not just a nice-to-have. We explore why building trust by design is now a competitive edge and the future of product strategy.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-402"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-400">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-401'
	>
	In the world of digital product design, trust has always been our most valuable asset. At Infinum, we’ve long believed that good design should empower, not deceive. That belief just received a major boost from UK lawmakers.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-405"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-403">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-404'
	>
	In a landmark move, the UK government has officially banned fake reviews and hidden fees through the <a href="https://www.gov.uk/government/news/fake-reviews-and-sneaky-hidden-fees-banned-once-and-for-all">Digital Markets, Competition and Consumers Bill</a>. Under the new rules, businesses must:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-408"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-406">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-407'
	>
	<li><strong>Take reasonable steps </strong>to ensure customer reviews are genuine.</li><li><strong>Show the full price</strong> of a product or service, including all mandatory fees, upfront, not just at checkout.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-411"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-409">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-410'
	>
	This isn’t a minor policy tweak; it’s a pivotal shift in the digital landscape. Regulators now have the power to fine companies up to 10% of global turnover for manipulative or misleading user experiences.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-414"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-412">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-413'
	>
	This is a clear signal to product teams that UX is no longer just about usability. It’s also about responsibility.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-417"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-415">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-416'
	>
	Why this changes the role of digital product teams forever</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-420"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-418">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-419'
	>
	By outlawing shady practices, this legislation redefines the responsibilities of digital product teams. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-423"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-421">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-422'
	>
	For years, ethical UX has been treated as an internal value, something designers and researchers advocated for out of principle, building digital products around these values not because they had to but because they knew it was better for users and business. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-426"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-424">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-425'
	>
	However, many designers and developers had no option but to optimise for business goals that didn’t always align with user needs. Stakeholders pushed for higher conversions, longer sessions, or more sign-ups, even when those outcomes relied on grey-area tactics.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-428"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-427'
	>
	This legislation finally levels the playing field, as brands that have relied on misleading tactics are now facing consequences, and design decisions carry legal and reputational risk.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-431"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-429">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-430'
	>
	This fundamentally shifts how product teams must operate:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-434"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-432">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-433'
	>
	<li><strong>UX and compliance are no longer separate conversations;</strong> they need to be built together, from the ground up.</li><li><strong><strong>Trust isn’t just a brand promise; it’s a system requirement.</strong></strong></li><li><strong>Every part of the user journey, from reviews to checkout, is now a regulatory surface area.</strong></li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-437"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-435">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-436'
	>
	For many businesses, this is a much-needed turning point.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-440"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-438">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-439'
	>
	<strong>Dark patterns will evolve, and so must we</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-443"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-441">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-442'
	>
	Coined by Harry Brignull in 2010, the term “dark patterns” refers to interfaces that manipulate users into decisions they didn’t intend, such as signing up for a subscription or sharing personal data.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-446"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-444">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-445'
	>
	Some of the worst offenders are now banned, but others will adapt. We’re already seeing manipulative practices evolve:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-449"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-447">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-448'
	>
	<li><strong>Confirmshaming</strong>: “No thanks, I don’t like saving money.”</li><li><strong>Obstruction</strong>: Making cancellations or opt-outs nearly impossible.</li><li><strong>Nagging</strong>: Pop-ups or modals that disrupt user flow to force action.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-452"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-450">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-451'
	>
	These aren’t just bad UX; they’re becoming risk factors.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-455"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-453">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-454'
	>
	Infinum deploys best practice design in every product; we use <a href="https://infinum.com/strategy-design/">journey mapping, UX audits, and design systems</a> to ensure we build honest, user-first experiences.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-458"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-456">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-457'
	>
	<strong>Users are getting smarter, and less forgiving</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-461"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-459">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-460'
	>
	Users, especially younger ones, are more digitally literate than ever and far less tolerant of deception.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-464"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-462">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-463'
	>
	A 2022 study by the Norwegian Consumer Council found that:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-467"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-465">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-466'
	>
	<li><strong>97% </strong>of users <strong>encountered at least one dark pattern </strong>during account creation flows.</li><li><strong>74%</strong> <strong>felt manipulated</strong> when they discovered misleading UX after the fact.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-470"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-468">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-469'
	>
	Users now expect experiences that are not only usable but also <strong>trustworthy by design.</strong><br><br>This creates a major opportunity: brands that lead with transparency will stand out. Just like eco-labels or ethical sourcing in retail, we may soon see <strong>“</strong>ethically designed<strong>”</strong> badges or trust certifications in digital products.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-472"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-471'
	>
	The brands that win in the next decade will be those that say:<br />
“Here’s what we offer. Here’s what it costs. Here’s why it matters.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-475"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-473">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-474'
	>
	<strong>Success metrics will shift, from clicks to confidence</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-478"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-476">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-477'
	>
	One of the most damaging effects of dark patterns is that they can<strong> inflate short-term metrics</strong> while hiding long-term costs.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-481"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-479">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-480'
	>
	Some examples:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-484"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-482">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-483'
	>
	<li>A deceptive free trial form increases sign-ups but also refund requests.</li><li>Hidden fees boost average basket size but destroy repeat customer trust.</li><li>Tricky opt-in forms grow email lists but reduce actual engagement.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-487"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-485">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-486'
	>
	Now, companies must reframe how they measure performance. At Infinum, we guide clients to shift focus to:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-490"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-488">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-489'
	>
	<li><strong>Lifetime value</strong>, not just revenue per session</li><li><strong>User retention and loyalty</strong>, not just conversion</li><li><strong>Clarity and consent</strong>, not just opt-in volume</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-493"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-491">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-492'
	>
	This is more aligned with long-term growth, better user relationships, and the new legal environment.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-496"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-494">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-495'
	>
	<strong>This is a defining moment for UX</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-499"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-497">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-498'
	>
	The UK’s ban on fake reviews and hidden fees isn’t the end of dark patterns, but it marks the end of <strong>pretending they’re harmless.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-502"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-500">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-501'
	>
	For product teams, the signal is clear: You’re now responsible for the ethical integrity of your digital experience. And for the first time, there are consequences when you get it wrong.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-505"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-503">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-504'
	>
	At Infinum, we are proud to already operate at this standard, designing and building digital products that earn trust by default. And we’re ready to help others do the same. Reach out for our <a href="https://infinum.com/contact/">expert advice</a>.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/ethical-ux-becomes-competitive-advantage/">Ethical UX Moves from Principle to Policy</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19265734https://infinum.com/uploads/2025/05/infinumcom_Website_UI_layer_decomposed_reminiscent_of_Figma_log_b02c4e03-c4a2-4fa4-8824-3f1d45d3ecdc.webp</url>
				</image>
				<title>Figma Sites: Bold Move, Half-Built Future</title>
				<link>https://infinum.com/blog/figma-sites-bold-move-half-built-future/</link>
				<pubDate>Tue, 13 May 2025 14:24:43 +0000</pubDate>
				<dc:creator>Bojan Bajić</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19265734</guid>
				<description>
					<![CDATA[<p>New website builder promises to unify design and web publishing in a single workflow. But does it deliver on that promise?</p>
<p>The post <a href="https://infinum.com/blog/figma-sites-bold-move-half-built-future/">Figma Sites: Bold Move, Half-Built Future</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-593"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-508">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-511"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-509">
	<p	class='typography typography--size-36-text js-typography block-paragraph__paragraph'
	data-id='es-510'
	>
	<strong><strong>Figma’s new website builder promises to unify design and web publishing in a single workflow. But does it deliver on that promise — or just stir up another layer of design-tool hype?</strong></strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-514"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-512">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-513'
	>
	In a move that sent ripples across design Twitter (and a few Slack channels), Figma recently launched <strong><a href="https://www.figma.com/sites/" target="_blank" rel="noreferrer noopener nofollow">Sites</a>, a no-code website builder</strong> integrated directly into its design platform.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-517"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-515">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-516'
	>
	The pitch? <strong>Design, prototype, and publish </strong>a fully responsive site — without leaving the tool you already live in. It’s a bold step into territory once reserved for Webflow, Framer, and the increasingly blurred line between design and development.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-520"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-518">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-519'
	>
	This isn’t just a new feature. It’s part of a broader trend: design tools are no longer content with the design phase. They’re chasing the entire product lifecycle, pushing deeper into the workflows traditionally owned by engineers. Figma Sites is the latest, and arguably boldest, expression of that ambition.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-523"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-521">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-522'
	>
	The Good: Vision, Velocity, and a Taste of the Future</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-526"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-524">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-525'
	>
	Out of the box, Figma Sites delivers <strong>a visually impressive experience.</strong> You get responsive layout controls with multi-breakpoint editing, prebuilt templates, drag-and-drop site blocks, and interactive components — all in the familiar Figma interface. You can even <strong>publish your site live </strong>to the web with a<strong> </strong>custom domain, no dev team required. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-529"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-527">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-528'
	>
	For solo designers, personal portfolios, and internal teams, it’s a compelling offering. The time-to-launch is absurdly short, and the<strong> learning curve is basically zero </strong>for anyone already fluent in Figma. It’s also a win for those tired of bouncing between Figma, Miro, Webflow, and Google Docs just to get a concept online.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-532"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-530">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-531'
	>
	The Bad: Pretty on the Surface, Beta Under the Hood</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-535"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-533">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-534'
	>
	But spend a few hours with Sites, and the cracks start to show. First, the underlying code structure is what some would call <strong>“div soup”</strong> — a mess of non-semantic HTML that undermines accessibility and long-term maintainability. There’s <strong>no way to export the code </strong>or host it elsewhere, meaning you’re effectively <strong>locked into Figma’s ecosystem.</strong>That’s a serious red flag for developers and anyone who’s been burned by vendor lock-in before.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-538"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-536">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-537'
	>
	Critically, Sites doesn’t support dynamic content, form handling, or any kind of CMS — features that are standard in tools like Webflow. Without those, Sites can’t support anything beyond static pages. Add in performance glitches, UI crashes, and missing polish, and it becomes clear this is still <strong>beta software wearing a production-ready badge.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-541"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-539">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-540'
	>
	Then there’s the community reaction. While many users are intrigued, there’s growing frustration that Figma prioritized this launch over long-requested updates to prototyping and collaboration. As one user put it: “Cool, but can we fix Smart Animate first?”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-544"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-542">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-543'
	>
	<br />
<strong>The Adobe Shadow: Shareholders, Speed, and Strategic Pressure</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-547"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-545">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-546'
	>
	It’s impossible to look at this release without seeing it in the shadow of the <strong>failed Adobe acquisition</strong>. After a high-profile deal that was set to reshape the design software industry fell through due to regulatory scrutiny, Figma has been left to prove — to both users and shareholders — that it can grow on its own.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-550"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-548">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-549'
	>
	And that’s where Sites starts to feel less like a fully formed product and more like a strategic push to accelerate monetization and market expansion. Shipping a high-visibility feature like Sites sends a message: <strong>Figma isn’t standing still.</strong> But it also exposes cracks in the foundation. Instead of doubling down on refining its already market-dominant design tools, Figma seems to be stretching itself thin in an effort to look bigger, faster.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-553"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-551">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-552'
	>
	There’s a real sense that this isn’t just about product vision — it’s about <strong>optics, positioning, and pressure </strong>to prove post-Adobe independence. Whether that leads to meaningful innovation or a wave of half-baked features remains to be seen.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-556"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-554">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-555'
	>
	Designers React: Curious, Cautious, and a Little Confused</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-559"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-557">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-558'
	>
	Despite its flaws, Figma Sites has struck a chord with parts of the design community. Indie creators are already using it to launch sleek personal pages. Internal teams at startups and agencies see real value in using Sites for prototypes, internal tools, and marketing experiments. In those contexts, where the bar for accessibility and code quality is lower, the appeal is obvious.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-562"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-560">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-561'
	>
	But few see it as ready for client-facing work. Enterprise teams and developers are unlikely to embrace a tool that doesn’t support code handoff, proper CMS integration, or performance tuning. For now, <strong>Figma Sites feels like a sidekick tool</strong> — useful, but not yet mission-critical.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-565"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-563">
	<h2	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-564'
	>
	Competitors Shouldn’t Panic — Yet</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-568"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-566">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-567'
	>
	On paper, Figma now <strong>competes directly with Framer and Webflow.</strong> But feature-for-feature, it’s not a fair fight. Framer offers a more robust CMS, cleaner code output, and greater production readiness. Webflow remains the gold standard for designers who want full control, dynamic content, and semantic markup — without touching a line of code.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-570"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-569'
	>
	<strong>Figma’s competitive advantage isn’t just its feature set — it’s its massive, loyal user base.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-573"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-571">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-572'
	>
	Millions of designers already live in Figma. By adding publishing to the mix, Figma introduces tool consolidation as a differentiator. Even if Sites can’t beat Framer or Webflow today, its sheer convenience could reshape how teams approach early-stage design and prototyping.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-576"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-574">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-575'
	>
	Looking Ahead: The Roadmap That Could Change Everything</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-579"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-577">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-578'
	>
	If Figma commits to evolving Sites into a fully capable platform, <strong>it has enormous potential</strong>. Imagine semantic HTML output with accessibility baked in, a CMS built natively for designers, AI-generated code blocks, exportable handoff-friendly code, and performance insights built into the canvas. Add deeper integration with tokens and design systems, and suddenly Sites stops being an MVP and becomes an actual workflow hub.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-582"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-580">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-581'
	>
	That’s a big “if,” but not outside the realm of possibility. Figma has a <strong>track record of improving </strong>rapidly post-launch. If they can keep momentum — and not just rush to ship headlines—they might just build something game-changing.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-585"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-583">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-584'
	>
	A Cautious Bet on a Promising Future</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-588"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-586">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-587'
	>
	Figma Sites seems to be more than a feature — it’s a statement of intent. It shows where the industry is headed: tighter loops, fewer tools, faster launches. But as of today, it’s not the Framer or Webflow killer some might wish it to be. It’s a sleek, <strong>undercooked beta</strong> that works best for prototypes, portfolios, and internal tools—not serious, client-ready websites.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-591"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-589">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-590'
	>
	Still, there’s something thrilling about what it hints at. And in a market where every tool is trying to do everything, Figma’s vision — if properly executed — could redefine what “designing for the web” means.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/figma-sites-bold-move-half-built-future/">Figma Sites: Bold Move, Half-Built Future</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19262413https://infinum.com/uploads/2025/01/UX-flowcharts-hero.webp</url>
				</image>
				<title>Creating UX Flowcharts Is Easier Than You Think</title>
				<link>https://infinum.com/blog/ux-flowcharts/</link>
				<pubDate>Thu, 30 Jan 2025 11:29:43 +0000</pubDate>
				<dc:creator>Ana Svalina</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19262413</guid>
				<description>
					<![CDATA[<p>Learn how to create clear and effective UX flowcharts without the overwhelm. Get started with our Figma template and step-by-step guide.</p>
<p>The post <a href="https://infinum.com/blog/ux-flowcharts/">Creating UX Flowcharts Is Easier Than You Think</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-617"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-594">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-597"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-595">
	<p	class='typography typography--size-36-text js-typography block-paragraph__paragraph'
	data-id='es-596'
	>
	<strong>UX flowcharts can feel intimidating at first, but they don’t have to be. This guide helps you map out clear user journeys without overcomplicating the process – plus, we’ve got a Figma template to help you get started right away.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-600"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-598">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-599'
	>
	If you’ve ever tried creating UX flowcharts, you know how intimidating that first blank page can feel. Have you found yourself staring at it, wondering where and how to begin? You’re not alone – I’ve been there. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-603"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-601">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-602'
	>
	Maybe you’ve already read countless articles, explored Figma libraries, and tried every plugin, yet you’re still stuck. Don’t worry – in this article, I’ll walk you through the steps of creating a UX flowchart, share tips and tools, and even provide a <a href="https://www.figma.com/community/file/1440693290237350132/ux-flowchart-template" target="_blank" rel="noreferrer noopener">Figma template</a> to help you get started right away.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-606"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-604">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-605'
	>
	When and why to create a UX flowchart</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-609"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-607">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-608'
	>
	If you&#8217;re designing a new app or feature, you’ve probably mapped out its architecture in your head. But heads are notoriously unreliable – this approach can lead to oversights and leaves your team out of the loop. That’s where flowcharts come in. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-612"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-610">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-611'
	>
	Just as I first outlined this article to ensure a clear, logical flow for you as a reader, UX flowcharts serve the same purpose in design. They organize user flows, provide value to stakeholders, and align the project team. Simply put, a flowchart is a diagram of user flows and tasks in processes (Source:<a href="https://www.interaction-design.org/" target="_blank" rel="noreferrer noopener"> Interaction Design Foundation</a>).</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-615"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-613">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-614'
	>
	Flowcharts are one of the most commonly created user experience deliverables after wireframes and prototypes (Source:<a href="https://www.nngroup.com/articles/common-ux-deliverables/"> NNG survey of UX Professionals</a>). At Infinum, our design process has four steps: discover, ideate &amp; validate, define, and build. Our design team typically creates flowcharts during the ideation &amp; validation phase, as part of the information architecture process. They’re most effective after gathering requirements and before wireframing. However, design isn’t always linear – UX flowcharts can be created at any stage. You can even use them for existing flows to identify potential improvements.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-620"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-618"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-619">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/1-visual-design-process-1400x877.webp				media='(max-width: 699px)'
				type=image/webp								height="877"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/1-visual-design-process-2400x1503.webp				media='(max-width: 1199px)'
				type=image/webp								height="1503"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/1-visual-design-process.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1697"
															width="2710"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-641"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-621">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-624"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-622">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-623'
	>
	UX flowcharts offer numerous benefits. They act as a blueprint for <a href="https://infinum.com/ui-ux-design-services/">UI design</a> and play a vital role in enhancing the user experience. By mapping out flows, they help identify pain points, address edge cases, and ensure a smooth user journey. They also foster team alignment and provide stakeholders with a clear overview, making it easier to secure buy-in before moving on to wireframing.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-627"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-625">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-626'
	>
	Know your UX deliverables</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-630"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-628">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-629'
	>
	With the abundance of UX methods out there, it&#8217;s easy to get tangled in the terminology. The field is constantly evolving, with new methods emerging all the time. That’s why understanding your deliverables is important. For example, flowcharts are often confused with user journey maps (sometimes called customer journey maps), sitemaps, wireflows or screenflows – each of which serves a distinct purpose in the design process. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-633"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-631">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-632'
	>
	Here’s a breakdown of how these deliverables differ:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-636"
	 data-animation-target='inner-items'>
		
			<div class="block-group" data-id=es-635>
	
<div
	class="wrapper"
	data-id="es-634"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			
<figure class="wp-block-table has-medium-font-size"><table class="has-fixed-layout"><tbody><tr><td><strong>Deliverable</strong></td><td><strong>Definition</strong></td><td><strong>Focus</strong></td><td><strong>Artifacts</strong></td><td><strong>Approach</strong></td></tr><tr><td><strong>Flowchart</strong></td><td>Diagram of user flows and tasks in processes</td><td>Maps processes and decision points within workflows</td><td>Symbols, diagramming elements</td><td>Technical</td></tr><tr><td><strong>User journey</strong></td><td>A map that captures the emotional experience of users interacting with a product</td><td>Demonstrates the overall emotional experience with a product</td><td>Touchpoints, emotions, user actions</td><td>Narrative</td></tr><tr><td><strong>Sitemap</strong></td><td>Hierarchical diagram representing a product’s structure</td><td>Visualizes the hierarchy of a product</td><td>Hierarchical diagrams with branches and nodes</td><td>Hierarchical</td></tr><tr><td><strong>Wireflow</strong></td><td>Hybrid deliverable that combines wireframing with flow diagramming to map out user interactions</td><td>Defines user interactions with wireframes</td><td>Wireframe screens, arrows, annotations</td><td>Functional</td></tr><tr><td><strong>Screenflow</strong></td><td>Hybrid deliverable that visualizes user interaction using high-fidelity design screens</td><td>Defines user interactions with high-fidelity designs</td><td>High-fidelity screens, arrows, annotations</td><td>Illustrative</td></tr></tbody></table></figure>
		</div>
	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-639"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-637">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-638'
	>
	To help visualize these distinctions, here’s an example of what each deliverable looks like in practice:</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-644"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-642"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-643">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/2-visual-deliverables-1400x1056.webp				media='(max-width: 699px)'
				type=image/webp								height="1056"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/2-visual-deliverables-2400x1810.webp				media='(max-width: 1199px)'
				type=image/webp								height="1810"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/2-visual-deliverables.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1900"
															width="2520"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-671"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-645">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-648"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-646">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-647'
	>
	Choosing the right flowchart for the job</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-651"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-649">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-650'
	>
	Different flowcharts serve different purposes, and choosing the right one will depend on your project and task. For example, if you need a high-level overview, you’ll map out the app flow, but if you want to show specific user journeys through features, you’ll create a user flow. A task flow can be used to outline the steps for a specific task. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-654"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-652">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-653'
	>
	Flowcharts often complement user stories, helping to translate them into a visual representation of the user’s journey. If your user story describes how a person completes an action – such as inviting a friend to an app – a user flow or task flow can break it down into step-by-step interactions.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-657"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-655">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-656'
	>
	Here’s a quick guide to help you decide:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-660"
	 data-animation-target='inner-items'>
		
			<div class="block-group" data-id=es-659>
	
<div
	class="wrapper"
	data-id="es-658"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><strong>Flowchart Type</strong></td><td><strong>Focus</strong></td><td><strong>Example</strong></td><td><strong>When to use</strong></td></tr><tr><td><strong>App flow</strong></td><td>Provides a high-level overview of the product</td><td>Health &amp; fitness app, social media app, etc.</td><td>When designing a new app, during a redesign of an existing app, or for complex flows</td></tr><tr><td><strong>User flow</strong></td><td>Visualizes the path a user takes through a feature or process, considering different user types</td><td>Existing user &#8211; login flow, new user &#8211; sign-up flow</td><td>When designing new features in an existing app; can be part of an app flow or standalone</td></tr><tr><td><strong>Task flow</strong></td><td>Maps the steps a user takes to complete a single task</td><td>Completing a purchase, filling out a form</td><td>When creating new features; can be part of a user flow</td></tr></tbody></table></figure>
		</div>
	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-663"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-661">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-662'
	>
	By choosing the type of flowchart that fits your needs, you’ll create deliverables that are not only effective but also aligned with the goals of your project.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-666"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-664">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-665'
	>
	UX flowchart symbols and how to use them</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-669"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-667">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-668'
	>
	To make sure everyone understands your flowchart, it’s important to use standard symbols. These include ovals, rectangles, parallelograms, diamonds, lines and arrows, and annotations. Depending on the complexity of your flow, you’ll use different symbols to represent various steps and actions.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-674"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-672"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-673">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/3-visual-legend-1400x700.webp				media='(max-width: 699px)'
				type=image/webp								height="700"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/3-visual-legend-2400x1200.webp				media='(max-width: 1199px)'
				type=image/webp								height="1200"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/3-visual-legend.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1440"
															width="2880"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-764"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-675">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-678"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-676">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-677'
	>
	Let’s take a closer look at these symbols and their uses:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-681"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-679">
	<h3	class='typography typography--size-30-text js-typography block-heading__heading'
	data-id='es-680'
	>
	<strong>Oval</strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-684"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-682">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-683'
	>
	The oval symbol represents the start or end of a process. The beginning marks the starting point for the user, while the end indicates where they finish their task.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-687"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-685">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-686'
	>
	<strong>Tip</strong>: To determine if you need an oval, ask yourself:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-690"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-688">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-689'
	>
	<li>Where does this flow begin and end? </li><li>Is there a part of the flow that takes place outside the app?</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-693"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-691">
	<h3	class='typography typography--size-30-text js-typography block-heading__heading'
	data-id='es-692'
	>
	<strong><strong>Rectangle</strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-696"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-694">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-695'
	>
	The rectangle symbolizes a process, often representing a screen or a step in the flow. A rectangle with vertical lines indicates a predefined process already represented elsewhere in the flow. A rectangle with a dotted stroke denotes a group or screen not part of the app.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-699"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-697">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-698'
	>
	<strong>Tip</strong>: To determine if you need a rectangle, ask yourself:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-702"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-700">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-701'
	>
	<li>Will there be a specific screen for this process?</li><li>What would that screen look like? </li><li>Is this part of the flow already represented elsewhere?</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-705"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-703">
	<h3	class='typography typography--size-30-text js-typography block-heading__heading'
	data-id='es-704'
	>
	<strong><strong><strong>Parallelogram</strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-708"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-706">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-707'
	>
	The parallelogram symbol represents an input or output operation, typically a user action like clicking or tapping.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-711"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-709">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-710'
	>
	<strong>Tip</strong>: To determine if you need a parallelogram, ask yourself:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-714"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-712">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-713'
	>
	<li>Does the user need to perform a physical action (e.g., click, tap)? </li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-717"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-715">
	<h3	class='typography typography--size-30-text js-typography block-heading__heading'
	data-id='es-716'
	>
	<strong><strong><strong><strong>Diamond</strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-720"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-718">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-719'
	>
	The diamond symbolizes a decision point, where the user chooses between multiple outcomes. This is often a yes/no or true/false question, with arrows splitting the flow based on the decision.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-723"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-721">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-722'
	>
	<strong>Tip</strong>: To determine if you need a diamond, ask yourself:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-726"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-724">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-725'
	>
	<li>Can the user make different decisions? </li><li>If so, what are the possible outcomes, and how do they affect the flow?</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-729"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-727">
	<h3	class='typography typography--size-30-text js-typography block-heading__heading'
	data-id='es-728'
	>
	<strong><strong><strong><strong><strong>Arrows and annotations</strong></strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-732"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-730">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-731'
	>
	Arrows indicate the direction and order of the process, connecting different blocks. Annotations provide additional comments or explanations for steps in the flow.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-735"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-733">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-734'
	>
	Step-by-step guide to mastering UX flowcharts</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-738"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-736">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-737'
	>
	Now that we’ve covered the basics, let’s go through the steps of creating a UX flowchart. To illustrate, we’ll use an example: designing a referral program feature for a mobile app. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-741"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-739">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-740'
	>
	<strong>Pro tip</strong>: Before diving into digital tools, sketch your flow on paper. This allows you to quickly map out the entire process without being limited by screen elements. At this stage, don’t worry about symbols – just focus on outlining the main steps the user will take. You can refine the details later.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-744"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-742">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-743'
	>
	1. Identify key steps</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-747"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-745">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-746'
	>
	The first step is defining the key actions a user needs to take. Start by identifying: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-750"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-748">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-749'
	>
	<li>Where the flow begins and ends.</li><li>Any alternative user paths (e.g., success and error states).</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-753"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-751">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-752'
	>
	For example, in a referral program flowchart: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-756"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-754">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-755'
	>
	<li><strong>A user sending a referral code</strong> starts on the home screen and ends on a success screen after sharing the code.</li><li><strong>A new user entering a referral code</strong> begins outside the app, while their in-app journey starts at onboarding. Their flow could end successfully (code accepted) or lead to an error state (invalid code). </li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-759"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-757">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-758'
	>
	Remember, a flowchart can have multiple endpoints. Showing both happy and unhappy paths ensures a complete and realistic representation of the user experience.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-762"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-760">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-761'
	>
	Once you&#8217;ve outlined the key steps, you can transfer your workflow from paper to a digital tool.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-767"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-765"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-766">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/4-visual-steps-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/4-visual-steps-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/4-visual-steps.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1500"
															width="2500"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-785"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-768">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-771"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-769">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-770'
	>
	2. Define user inputs</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-774"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-772">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-773'
	>
	Next, identify the specific steps where users need to input data or make decisions. These are the moments when the user actively participates in the process.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-777"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-775">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-776'
	>
	Ask yourself: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-780"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-778">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-779'
	>
	<li>Does the user need to click, enter information, or select an option?</li><li>How do their inputs affect the next steps in the flow?</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-783"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-781">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-782'
	>
	Use a parallelogram symbol to represent these actions in your flowchart. Clearly mapping out user inputs ensures that every interaction is accounted for.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-788"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-786"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-787">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/5-visual-inputs-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/5-visual-inputs-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/5-visual-inputs.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1500"
															width="2500"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-815"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-789">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-792"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-790">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-791'
	>
	3. Identify decision points</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-795"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-793">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-794'
	>
	Now, pinpoint the moments when users must choose between options or when the system makes a decision. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-798"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-796">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-797'
	>
	In our referral program example, decision points might include: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-801"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-799">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-800'
	>
	<li>The app user deciding whether to use a referral code or skip it.</li><li>The system checking if the user has already been assigned a code. </li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-804"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-802">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-803'
	>
	Use a diamond symbol to represent these points in your flowchart. Each decision point should have clear branches (e.g., yes/no or true/false) that guide the flow in different directions. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-807"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-805">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-806'
	>
	Remember to keep your flow clean and manageable. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-810"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-808">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-809'
	>
	<li>Watch out for return loops and connections to other flows to avoid unnecessary complexity.</li><li>If the flowchart starts looking tangled, simplify it to improve clarity. </li><li>Review each step and ask yourself: Does this add value to the user journey? If not, consider removing or merging steps. </li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-813"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-811">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-812'
	>
	The goal is to make the user’s path intuitive without sacrificing key interactions.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-818"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-816"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-817">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/6-visual-decision-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/6-visual-decision-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/6-visual-decision.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1500"
															width="2500"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-833"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-819">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-822"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-820">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-821'
	>
	4. Account for all paths, including edge cases</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-825"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-823">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-824'
	>
	A complete flowchart doesn’t just map out the ideal happy path – it also considers unhappy paths and edge cases. Start with the critical path: outline the main user journey, ensuring the core process runs smoothly. Once the primary flow is in place, identify potential deviations. In our example, these could be: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-828"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-826">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-827'
	>
	<li>Errors or invalid inputs (e.g., entering an invalid referral code).</li><li>System constraints (e.g., an expired or inactive referral campaign).</li><li>User actions (e.g., abandoning the process before completion).  </li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-831"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-829">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-830'
	>
	Mapping out edge cases helps you and the whole product team identify solutions. It also provides a solid foundation for wireframing and high-fidelity UI design, making it easier to bring the flow to life visually.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-836"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-834"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-835">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/7-visual-edge-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/7-visual-edge-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/7-visual-edge.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1500"
															width="2500"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-845"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-837">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-840"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-838">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-839'
	>
	5. Keep every type of user in mind</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-843"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-841">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-842'
	>
	Different users interact with the same feature in different ways, so it’s important to create multiple variations of the flow based on user type. For example, in the referral feature, the user sending the code follows one flow, while the user entering the code follows a different one. Each journey should be clearly outlined so that your flowchart accurately represents all possible interactions.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-848"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-846"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-847">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/8-mobile-full-width-visual-users.webp				media='(max-width: 699px)'
				type=image/webp								height="3390"
												width="1405"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/8-full-width-visual-users-2400x1545.webp				media='(max-width: 1199px)'
				type=image/webp								height="1545"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/8-full-width-visual-users.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1745"
															width="2710"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-872"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-849">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-852"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-850">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-851'
	>
	6. Give your UX flowchart a clear title</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-855"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-853">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-854'
	>
	A clear title makes your flowchart easy to present and share. For our example feature, the titles can be as simple as <em>Referral program for existing users </em>and <em>Referral program for new users</em>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-858"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-856">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-857'
	>
	7. Use standardized symbols</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-861"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-859">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-860'
	>
	Symbols are not an opportunity to get creative – just stick to the standard ones. You already know them, and so will everyone else. Use them for consistency and clarity.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-864"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-862">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-863'
	>
	8. Always include a legend</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-867"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-865">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-866'
	>
	Even though flowchart symbols are standardized, there may be exceptions. Clients may share your flowchart with other stakeholders, so it’s crucial to prioritize clarity.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-870"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-868">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-869'
	>
	<strong>Pro-tip: </strong>Identify multiple entry points for the same feature and account for them in your flowchart. For example, in the referral feature, users might enter via a home screen banner or a profile screen banner – both should be reflected in the flow.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-875"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-873"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-874">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/9-visual-pro-tip-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/9-visual-pro-tip-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/9-visual-pro-tip.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1500"
															width="2500"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-887"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-876">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-879"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-877">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-878'
	>
	9. A polished flow – share and iterate</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-882"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-880">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-881'
	>
	Once you’ve gone through all the steps, your flowchart is ready. Not too tricky, right? Now, share it with your product team for feedback. After discussing it, you may need to iterate on the flow. Don’t worry – iteration is a normal part of the design process, and that’s why flowcharts exist in the first place.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-885"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-883">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-884'
	>
	Refining the flow early saves time later, allowing you to <a href="https://infinum.com/blog/2025-design-trends/">focus on UI design</a> without second-guessing the structure. Most flowcharts go through multiple revisions before they reach full clarity, so embrace the process!</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-890"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-888"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-889">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/10-mobile-full-width-visual-final-flowchart.webp				media='(max-width: 699px)'
				type=image/webp								height="3390"
												width="1500"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/10-full-width-visual-final-flowchart-2400x1855.webp				media='(max-width: 1199px)'
				type=image/webp								height="1855"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/10-full-width-visual-final-flowchart.webp"
					class="image__img block-media__image-img"
					alt=""
										height="2095"
															width="2710"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-913"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-891">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-894"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-892">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-893'
	>
	Tools to help you get started – and a Figma template!</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-897"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-895">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-896'
	>
	There are many tools available to make flowcharting earlier. If you&#8217;re working in Figma, try plugins like <a href="https://www.figma.com/community/plugin/733902567457592893/autoflow" target="_blank" rel="noreferrer noopener">Autoflow</a>,<a href="https://www.figma.com/community/plugin/1146491528527031645/flow-connect" target="_blank" rel="noreferrer noopener"> Flow Connect</a>, and<a href="https://www.figma.com/community/plugin/988836825341227586/draw-connector" target="_blank" rel="noreferrer noopener"> Draw Connector</a> to save time and effort. <a href="https://www.figma.com/figjam/" target="_blank" rel="noreferrer noopener">FigJam</a> is another great option. It has predefined elements, templates, and collaboration features, making it perfect for workshops. Other useful tools include <a href="https://www.lucidchart.com/" target="_blank" rel="noreferrer noopener">Lucidchart</a>, <a href="https://whimsical.com/" target="_blank" rel="noreferrer noopener">Whimsical</a>, and <a href="https://miro.com/aq/ps/flowchart-1/?gclsrc=aw.ds&amp;utm_source=google&amp;utm_medium=cpc&amp;utm_campaign=S%7CGOO%7CBRN%7CTIER2%7CEN-EN%7CBrand%7CExact&amp;utm_adgroup=&amp;adgroupid=140183595039&amp;utm_custom=18265637429&amp;utm_content=620319628985&amp;utm_term=miro+flowcharts&amp;matchtype=e&amp;device=c&amp;location=1007618&amp;gad_source=1&amp;gclid=Cj0KCQiA57G5BhDUARIsACgCYnwD8empXFoJuG3J-WuHuNtcgs11QvAXbf0_p5r1hw8GCA4FsUhf2NYaAoAsEALw_wcB" target="_blank" rel="noreferrer noopener">Miro</a>. Each has its own strengths, so explore what works best for your workflow.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-899"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-898'
	>
	<strong>For a quick and easy start, grab our </strong><a href="https://www.figma.com/community/file/1440693290237350132/ux-flowchart-template" target="_blank" rel="noreferrer noopener"><strong>Figma flowchart template</strong></a><strong> – courtesy of Infinum&#8217;s design team – and start mapping out your flows right away!</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-902"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-900">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-901'
	>
	Beyond rectangles and arrows</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-905"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-903">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-904'
	>
	Flowcharting is a valuable skill for your design toolbox. When you master flowcharts, you can clarify use cases, flows, and scenarios, preventing confusion in later design stages. With a clear blueprint in place, you can focus on designing the user interface, minimizing the need for extensive iterations. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-908"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-906">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-907'
	>
	Early planning also helps identify overly complex flows, allowing you to simplify them before diving into design screens. Like any skill, flowcharting takes practice, but the effort pays off. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-911"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-909">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-910'
	>
	If that blank page still feels intimidating, our <a href="https://www.figma.com/community/file/1440693290237350132/ux-flowchart-template" target="_blank" rel="noreferrer noopener">flowchart template</a> is here to help. You&#8217;ve got this!</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/ux-flowcharts/">Creating UX Flowcharts Is Easier Than You Think</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19261517https://infinum.com/uploads/2025/01/Design-trends-2025-blog-hero-min.webp</url>
				</image>
				<title>What&#8217;s Next in UX and UI? Key 2025 Design Trends to Watch</title>
				<link>https://infinum.com/blog/2025-design-trends/</link>
				<pubDate>Fri, 10 Jan 2025 10:24:15 +0000</pubDate>
				<dc:creator>William Reid Hitt</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19261517</guid>
				<description>
					<![CDATA[<p>Stay relevant in 2025 with the top design trends in UX and UI. Explore the blend of simplicity, creativity, and inclusivity in digital design.</p>
<p>The post <a href="https://infinum.com/blog/2025-design-trends/">What&#8217;s Next in UX and UI? Key 2025 Design Trends to Watch</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-943"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-914">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-917"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-915">
	<p	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-916'
	>
	<strong>The 2025 design trends bring us something old, something new, and a very vibrant shade of blue. Let’s explore the trends shaping UX and UI design this year.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-920"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-918">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-919'
	>
	Design trends don’t exist in a vacuum – they evolve alongside technology, user preferences, and broader societal shifts. Staying ahead of these changes isn’t just about keeping up; it’s about staying relevant in today’s competitive digital market.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-923"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-921">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-922'
	>
	In <a href="https://infinum.com/blog/innovative-design-trends-2024/" target="_blank" rel="noreferrer noopener">last year’s annual round-up of design trends</a>, we looked at AI, micro-interactions, and hybrid styles. In 2025, the focus shifts further toward innovation with purpose. Designers are balancing efficiency with ethics in AI, blending simplicity with bold creativity, and prioritizing inclusivity and sustainability in their work.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-926"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-924">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-925'
	>
	As we enter what some are calling the “age of augmented creativity,” 2025 promises to reimagine some traditional tactics, bring fresh ideas, and open new opportunities to make a statement. From playful yet purposeful minimalism to bold colors and the rise of 3D animations, the 2025 design trends reflect a growing demand for designs that are not only visually striking but also meaningful and responsible.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-929"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-927">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-928'
	>
	Let’s explore the trends that will shape <a href="https://infinum.com/ui-ux-design-services/">UX and UI design</a> in 2025.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-932"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-930">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-931'
	>
	<strong>Artificial intelligence – balancing innovation, efficiency, and ethics</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-935"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-933">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-934'
	>
	Having passed the initial buzz phase, AI is now comfortably integrated into our daily lives, from social media and search engines to the applications and tools designers use. When used with knowledge and care, AI can help designers deliver better results to clients – and deliver them faster. It can streamline complex and time-consuming tasks, including analyzing research materials, prototyping creative ideas, and generating high-fidelity images, video, or audio.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-938"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-936">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-937'
	>
	In recent years, generative AI has made significant strides, delivering increasingly high-quality results. At Infinum, we&#8217;ve been testing AI-powered tools like <a href="https://openai.com/index/dall-e-2/" target="_blank" rel="noreferrer noopener">DALL-E</a> and <a href="https://www.figma.com/community/plugin/1334452585172921151/fast-canvas-ai" target="_blank" rel="noreferrer noopener">Fast Canvas AI</a> to quickly explore different visual directions when planning our designs. We use Midjourney to <a href="https://www.linkedin.com/feed/update/urn:li:activity:7179099045854920704/" target="_blank" rel="noreferrer noopener">generate blog visuals</a>. We also use tools like <a href="https://openai.com/index/chatgpt/" target="_blank" rel="noreferrer noopener">ChatGPT</a> and <a href="https://www.descript.com/" target="_blank" rel="noreferrer noopener">Descript</a> in <a href="https://infinum.com/blog/ai-in-user-research/" target="_blank" rel="noreferrer noopener">user research</a>. If you want to learn more about how we’re using AI tools in our everyday agency operations, Senior User Experience Designer Kerrin Whipple has a detailed <a href="https://infinum.com/blog/ai-agency-ai-tools/" target="_blank" rel="noreferrer noopener">summary of our efforts</a>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-941"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-939">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-940'
	>
	However, as we continue to explore AI&#8217;s potential, it&#8217;s important to balance efficiency with ethics and trust. As our Product Strategy Director Chris Bradshaw writes in a <a href="https://infinum.com/blog/generative-ai-vs-responsible-ai/" target="_blank" rel="noreferrer noopener">blog post about generative AI and responsible AI</a>, &#8220;It&#8217;s about empowering humans to build, deploy, and monitor the necessary oversight in the generative AI &#8211; responsible AI dance, as much as it is about leveraging the technology for driving speed, efficiency, and ideation.&#8221;</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-946"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-944"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-945">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/Ai-web-img-min-1400x915.webp				media='(max-width: 699px)'
				type=image/webp								height="915"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/Ai-web-img-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1547"
															width="2367"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Pentagram utilized Midjourney to produce on-brand icons for Performance.gov		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-962"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-947">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-950"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-948">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-949'
	>
	A standout example of designers applying mindful oversight to maximize efficiency is Pentagram&#8217;s design for <a href="http://performance.gov" target="_blank" rel="noreferrer noopener">performance.gov</a>. The project required a consistent visual style across thousands of government reports hosted on the website. To address this, the designers trained the AI image-generation system Midjourney with a set of hand-drawn illustrations. After several rounds of refinement, the system produced a collection of 15,000 matching icons that met the design brief.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-957"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple card-simple--is-ad block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-951"
	 href='https://infinum.com/ai-readiness-assessment/#form'>

	
	
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<p	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-952'
	>
	<strong><strong>If you&#8217;re considering moving beyond existing tools and integrating AI into your digital product, the first step is to evaluate your current state. Fill out our survey and get a free personalized assessment of your business&#8217;s readiness for AI implementation.</strong></strong></p>		</div>

		<button	class="btn btn--color-infinum btn--size-small btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn js-card-simple-link"
	data-id="es-954"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-955'
	>
	Learn more </div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-956'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button>	</div>
</a>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-960"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-958">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-959'
	>
	<strong>Evolved minimalism – simple yet striking aesthetics</strong></h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-965"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-963"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-964">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-01-web-img-min-1400x934.webp				media='(max-width: 699px)'
				type=image/webp								height="934"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/minimalism-01-web-img-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1596"
															width="2393"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Taking traditional minimalism a step further – Peek Insights		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-971"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-966">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-969"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-967">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-968'
	>
	Building on the foundation of minimalist design – characterized by white space, clean typography, and monochromatic color palettes – the evolved minimalism trend redefines simplicity by introducing elements of surprise and delight. While traditional minimalism is austere and uniform, this emerging trend breaks conventions with playful accents and unexpected design choices. The result retains the familiarity of minimalist design while capturing the audience&#8217;s attention.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-974"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-972"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-973">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-02-1400x759.webp				media='(max-width: 699px)'
				type=image/webp								height="759"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-02-2400x1302.webp				media='(max-width: 1199px)'
				type=image/webp								height="1302"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-02-3000x1627.webp				media='(max-width: 1999px)'
				type=image/webp								height="1627"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/minimalism-02.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1920"
															width="3540"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			 White Bay Power Station adds bold accents and vibrant color palettes to clean and structured designs		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-977"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-975"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-976">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-03-1400x780.webp				media='(max-width: 699px)'
				type=image/webp								height="780"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-03-2400x1338.webp				media='(max-width: 1199px)'
				type=image/webp								height="1338"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/minimalism-03-3000x1672.webp				media='(max-width: 1999px)'
				type=image/webp								height="1672"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/minimalism-03.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1980"
															width="3552"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Popcorn – breaking out the rigidity of a traditional layout while maintaining an intuitive UX		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-986"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-978">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-981"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-979">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-980'
	>
	Evolved minimalism embraces bold accents and vibrant color palettes to add authenticity and personality to otherwise clean and structured designs. These design elements break free from the rigidity of traditional layouts while maintaining an intuitive user experience. For example, traditional elements might be used in intentional overlap, or a playful navigation interaction can be employed to spark the user&#8217;s curiosity. Design that embraces this trend often does so to a meta degree, showing a witty self-awareness that lets the user in on the joke.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-984"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-982">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-983'
	>
	<strong>Rise of 3D animations – adding depth to digital experiences</strong></h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-989"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-987"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-988">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/3d-1400x871.webp				media='(max-width: 699px)'
				type=image/webp								height="871"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/3d-2400x1493.webp				media='(max-width: 1199px)'
				type=image/webp								height="1493"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/3d-3000x1866.webp				media='(max-width: 1999px)'
				type=image/webp								height="1866"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/3d.webp"
					class="image__img block-media__image-img"
					alt=""
										height="2300"
															width="3698"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Wise – refreshing the user interface through 3D illustrations		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1009"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-990">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-993"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-991">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-992'
	>
	Over the last decade, a significant trend has been flat design characterized by cleanliness, minimal color, crisp edges, and flat illustrations. Recently, we&#8217;ve started to see more brands break out of the mold using 3D graphics to add texture, depth, and refreshing point of view. Not just rehashed skeuomorphism (a trend where UI mimicked real objects and materials), the 3D trend is about creating an authentic vibe that feels analog, earthy, and nostalgic.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-995"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-994'
	>
	<strong>By putting a fresh twist on UI design as we&#8217;ve come to know it, 3D offers moments of delight that connect with users on a personal level.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-998"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-996">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-997'
	>
	Drawing inspiration from claymation, risograph printing, and other lo-fi, handcrafted techniques, designers use 3D to infuse their work with energy through motion. 3D illustrations and animations evoke a sense of nostalgia while feeling contemporary and unexpected.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1001"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-999">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1000'
	>
	By putting a fresh twist on UI design as we know it, 3D offers moments of delight that connect with users on a personal level. As tools and technology make 3D design more accessible, we&#8217;ll continue to see a wave of 3D graphics that bring interfaces to life.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1004"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1002">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1003'
	>
	<strong>Sustainability at the forefront of design</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1007"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1005">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1006'
	>
	As sustainability continues to gain traction as an imperative for forward-thinking businesses, more and more companies are sharing their environmental commitments, certifications, and initiatives. UI design can support a brand&#8217;s environmental commitment by using imagery that conveys environmental consciousness, like using the color green and earthy or nature imagery.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1012"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1010"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1011">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/sustainability-1400x707.webp				media='(max-width: 699px)'
				type=image/webp								height="707"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/sustainability-2400x1212.webp				media='(max-width: 1199px)'
				type=image/webp								height="1212"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/sustainability-3000x1515.webp				media='(max-width: 1999px)'
				type=image/webp								height="1515"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/sustainability.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1788"
															width="3540"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Beco presents sustainability as an integral part of the brand identity		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1024"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1013">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1016"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1014">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1015'
	>
	Keeping up with this trend, it&#8217;s important that brands be wary of the pitfalls of greenwashing and always lead by educating the audience about their environmental initiatives. In the case of the pet brand<a href="https://www.becopets.com/pages/sustainability" target="_blank" rel="noreferrer noopener"> Beco</a>, sustainability is not just a value but an integral part of the brand&#8217;s identity.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1019"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1017">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1018'
	>
	However, sustainable design isn&#8217;t just about the message – it also includes the technical side of design and development. Small changes like lightweight media and leaner code can significantly impact energy consumption. Since the internet accounts for an <a href="https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think" target="_blank" rel="noreferrer noopener">estimated 3-4% of global emissions</a>, digital organizations have a unique opportunity to conserve resources and influence their customers&#8217; habits. At Infinum, <a href="https://infinum.com/sustainability/" target="_blank" rel="noreferrer noopener">we&#8217;re proud to support environmental goals</a>, maintain sustainability certifications, and ensure our designs reflect our commitment to a sustainable future.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1022"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1020">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1021'
	>
	<strong>Subtle and striking color palettes: neon, pastels, and glow effects</strong></h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1027"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1025"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1026">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/color-1400x681.webp				media='(max-width: 699px)'
				type=image/webp								height="681"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/color-2400x1167.webp				media='(max-width: 1199px)'
				type=image/webp								height="1167"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/color-3000x1458.webp				media='(max-width: 1999px)'
				type=image/webp								height="1458"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/color.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1610"
															width="3312"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Eye-catching use of color by Popcorn, Gitbook, Shopify, and Cleo		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1061"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1028">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1031"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1029">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1030'
	>
	Another innovative 2025 design trend is the subtle and sophisticated use of color. Many website designs employ eye-catching colors, whether it’s electric neon, soft pastels, or glow effects.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1034"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1032">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1033'
	>
	Pops of saturated color and neon can add charged energy to a design. Pastel colors, by contrast, are soft and desaturated, creating a calm and welcoming atmosphere. We often see neons and pastels combined with subtle glow effects that recall the ambiance of soft lighting.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1037"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1035">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1036'
	>
	Radiant glow effects can give a design an ethereal quality without overwhelming the overall experience. Glows of green, pink, and purple might float behind a navigation bar or sit behind illustrations and call-to-action buttons. These moments create visual interest as they subtly guide the user through the experience. As this trend evolves, we’ll surely see more creative pairings of unexpected color choices with soft glow effects.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1040"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1038">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1039'
	>
	<strong>Accessibility – the shift toward inclusive design</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1043"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1041">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1042'
	>
	Web accessibility is the practice of designing and building websites that are usable by people of all abilities. This includes features like alternate text for images, which allows screen readers to interpret visual content, and sufficient color contrast for better readability.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1046"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1044">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1045'
	>
	While accessibility standards are designed to help users with specific disabilities, they also enhance digital experiences for all users – for example, better contrast reduces eye strain, and alt text helps content get indexed by search engines.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1049"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1047">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1048'
	>
	It is no wonder the digital accessibility movement is gaining momentum. By building accessible digital products, companies can demonstrate their commitment to inclusivity, widen their reach, and ensure compliance with evolving regulations. The latter bears special significance in Europe, where <a href="https://infinum.com/blog/european-accessibility-act/" target="_blank" rel="noreferrer noopener">the Accessibility Act</a>, requiring all digital products to meet global accessibility standards, will be legally enforced this year.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1056"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple card-simple--is-ad block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-1050"
	 target='_blank' rel='noopener noreferrer' href='https://infinum.com/website-accessibility-audit/#form'>

	
	
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<p	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-1051'
	>
	<strong><strong>Not sure if your products or services meet the European Accessibility Act’s standards? Find out with a free website audit. Eligible candidates can learn their website’s accessibility level, understand critical issues, and get practical advice for improvement.</strong></strong></p>		</div>

		<button	class="btn btn--color-infinum btn--size-small btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn js-card-simple-link"
	data-id="es-1053"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-1054'
	>
	Learn more </div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-1055'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button>	</div>
</a>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1059"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1057">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1058'
	>
	Scope, a non-profit that campaigns to transform attitudes about disability, has exemplified accessibility in its website design. With a prominent accessibility statement in the header and easy keyboard navigation, Scope sets a strong example of inclusive design in action.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1064"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1062"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1063">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2025/01/accessibility-1400x759.webp				media='(max-width: 699px)'
				type=image/webp								height="759"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/accessibility-2400x1302.webp				media='(max-width: 1199px)'
				type=image/webp								height="1302"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2025/01/accessibility-3000x1627.webp				media='(max-width: 1999px)'
				type=image/webp								height="1627"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2025/01/accessibility.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1920"
															width="3540"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Scope allows the user to quickly navigate the site via a keyboard or screen reader		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1082"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1065">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1068"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1066">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1067'
	>
	Another example that is closer to home is <a href="https://www.vnshealth.org/" target="_blank" rel="noreferrer noopener">VNS Health</a>. Partnering with one of the largest non-profit, home- and community-based healthcare organizations, we set out to make their website fully accessible. Through several code and design choices, we ensured that the website could be navigated in its entirety with a keyboard or screen reader, including often problematic interactive areas, such as navigation menus and carousels. Sometimes accessibility improvements are hard to spot by those who don’t use assistive technology, but make a world of difference for those who do. This, for example, includes using ARIA labels to clarify section headings and ambiguous links, which VNS Health also does well.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1071"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1069">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1070'
	>
	If you want to read more about accessibility, we have also published posts on <a href="https://infinum.com/blog/best-practices-accessibility-design/" target="_blank" rel="noreferrer noopener">best practices for designing accessible products</a>, <a href="https://infinum.com/blog/digital-product-accessibility/" target="_blank" rel="noreferrer noopener">digital product accessibility</a>, and a <a href="https://infinum.com/handbook/accessibility" target="_blank" rel="noreferrer noopener">handbook</a> full of valuable guidance and advice.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1074"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1072">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1073'
	>
	<strong>Shape meaningful experiences with 2025 design trends</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1077"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1075">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1076'
	>
	Judging by the industry trends we’re observing, design in 2025 will continue to blend innovation and purpose. In addition to the playful evolution of minimalism, the rise of 3D animations, and the bold use of bright colors, we’re seeing escalating technological advancements and the continued emphasis on social and environmental responsibility driving UI and UX design this year.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1080"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1078">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1079'
	>
	By embracing these 2025 design trends, brands can connect meaningfully with their audiences and build digital experiences that truly stand out. Let’s see how it all unfolds – and you can count on us to share the highlights next year.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/2025-design-trends/">What&#8217;s Next in UX and UI? Key 2025 Design Trends to Watch</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19256809https://infinum.com/uploads/2024/09/PDD-blogpost-illustration-hero-1.webp</url>
				</image>
				<title>Drive Successful Product Outcomes with Purpose-Driven Design</title>
				<link>https://infinum.com/blog/purpose-driven-design/</link>
				<pubDate>Tue, 27 Aug 2024 10:10:35 +0000</pubDate>
				<dc:creator>Karri Offstein Rosenthal</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19256809</guid>
				<description>
					<![CDATA[<p>Discover the power of Purpose-Driven Design – our custom design framework that solves real-world problems for users and businesses alike.</p>
<p>The post <a href="https://infinum.com/blog/purpose-driven-design/">Drive Successful Product Outcomes with Purpose-Driven Design</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-1153"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1083">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1086"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1084">
	<p	class='typography typography--size-36-text js-typography block-paragraph__paragraph'
	data-id='es-1085'
	>
	<strong>In an era where digital design often prioritizes aesthetics and speed, Purpose-Driven Design (PDD) shifts the focus to intention and impact. Developed over two decades, PDD is more than a framework for stunning designs – it&#8217;s a strategic approach to solving real-world problems for users and businesses alike.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1089"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1087">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1088'
	>
	Whether it’s cola wars, mobile plan battles, GPT jousting, or shampoo brands one-upping each other, every industry has its arms race for bragging rights on differentiation. In the digital agency arena, that arms race often centers on the design process. Of course, every company has embraced or created a design framework that works for them, but we are proud of the one that is uniquely ours.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1092"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1090">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1091'
	>
	<a href="https://infinum.com/purpose-driven-design/">Purpose-Driven Design (PDD) is the custom design framework</a> we’ve been developing over the last 20 years, fine-tuning it based on experience from project work. In this piece, we’ll look at what makes it work and makes it successful both for us and our clients.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1095"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1093">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1094'
	>
	Why Purpose-Driven Design?</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1098"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1096">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1097'
	>
	“We aim to create design solutions that solve real problems suffered by real users,” says Greg Podunovich, senior product design strategist at Infinum. “Solving these problems can produce concrete, sometimes profound, impacts.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1101"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1099">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1100'
	>
	Not surprisingly, these impacts ladder directly up to the goals of our clients.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1103"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1102'
	>
	<strong>PDD is intended to de-risk investments, boost the accuracy of estimates, save time and money, improve customer satisfaction and retention, drive growth, and meet user needs. It exists to improve business outcomes across a variety of KPIs.  </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1106"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1104">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1105'
	>
	“You can be confident you’re putting something out in the world where very little has been left to chance,” says Podunovich. “It has all been deeply investigated and validated.”<br />
<br />
Todd Doyle, creative director for North America, echoes the sentiment. “Clients are always looking for confidence that they’ve made the right decision, and practitioners want to have confidence they are on the right track. PDD bridges this gap earlier because it forces everyone to always answer ‘why’ with everything they do.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1109"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1107">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1108'
	>
	What is PDD?</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1112"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1110">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1111'
	>
	Rather than focusing so much on how we get things done, PDD focuses more on why we do the things we do. It’s not just about how to attack a website or a logo redesign or a product design. It applies to any sort of design challenge that could be thrown at the agency. The “why” can best be outlined by PDD’s principles.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1115"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1113">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1114'
	>
	PDD’s six principles of design</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1120"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1116">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1117'
	>
	1</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1118'
	>
	<strong>Real value is discovered.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1119'
	>
	We strive to understand your business, customers, goals, and aspirations. Your knowledge and our expertise combine to drive innovation.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1125"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1121">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1122'
	>
	2</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1123'
	>
	<strong>You can’t guess your way to credibility.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1124'
	>
	Successful designs are based on facts and data, more so than opinions and personal beliefs. Intuition is valuable, but validation is everything. </p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1130"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1126">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1127'
	>
	3</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1128'
	>
	<strong>Usefulness depends on empathy.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1129'
	>
	We bring value to users when we’re able to walk in their shoes. Our whole process is centered around getting the user into the conversation, even though we’re rarely in the room.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1135"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1131">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1132'
	>
	4</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1133'
	>
	<strong>Design for context, not device.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1134'
	>
	Who you are, where you are, and what you’re trying to accomplish are more important than your operating system, hardware, or screen dimensions (if there is a screen at all). Users bring many different abilities and expectations, and we design to accommodate and include them.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1140"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1136">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1137'
	>
	5</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1138'
	>
	<strong>​​​​Innovation = aspiration ÷ feasibility.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1139'
	>
	We deliver because we design systems that can be built on time and within budget. We embrace technology and risk, focusing on innovative differentiators rather than trying to reinvent the wheel.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1145"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--number bullet__color--infinum block-bullet__bullet" data-id="es-1141">
	<p	class='typography typography--size-14-text js-typography bullet__dot'
	data-id='es-1142'
	>
	6</p>	<div class="bullet__content">
		<p	class='typography typography--size-24-text js-typography bullet__heading'
	data-id='es-1143'
	>
	<strong>Keep it human.</strong></p><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1144'
	>
	Emotion is at the core of every design decision we make. As AI and machine learning increasingly impact our lives, it’s more important than ever to keep this in mind. The best-performing teams recognize we’re all human, and we’re in it together.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1148"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1146">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1147'
	>
	“This principle-centered approach doesn&#8217;t just lead to visually stunning designs,” says Chris Bradshaw, Infinum’s product strategy director. “It results in impactful solutions that resonate with users and drive real-world success. We&#8217;re not confined by rigid rules but liberated to explore, innovate, and deliver value in every project.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1151"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1149">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1150'
	>
	The process</h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1156"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1154"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1155">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/08/PDD-blogpost-illustration-inline-process-map-1400x735.webp				media='(max-width: 699px)'
				type=image/webp								height="735"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2024/08/PDD-blogpost-illustration-inline-process-map.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1260"
															width="2400"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1223"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1157">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1160"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1158">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1159'
	>
	The basic building blocks of the PDD process are Strategy, Implementation, and Growth. Within each phase are the key activities we normally conduct.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1163"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1161">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1162'
	>
	For example, Strategy often involves things like context and framing exercises, research analysis, technical feasibility studies, audience definition, and roadmap creation. In Implementation, it’s setting the art direction, infrastructure setup, development, security modeling, and testing, among other activities. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1166"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1164">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1165'
	>
	The framework guides project planning and scoping and also helps Infinum lead clients through their process. It establishes a clear path forward and helps keep everyone aligned when a project is humming along at full speed.<strong> </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1171"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="blockquote block-blockquote__blockquote" data-id="es-1167">
	
	<div class="blockquote__content">
		<i
	class="icon blockquote__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='blockquote-24' data-id='es-1168'>
	<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='m12 24c6.6274 0 12-5.3726 12-12 0-2.79685-.9568-5.37021-2.561-7.41062-.581.22951-1.0832.60583-1.5069 1.12898-.5132.60844-.7698 1.41969-.7698 2.43375v.07605h2.5789v5.59004h-5.6197v-5.01962c0-1.11547.154-2.06616.4619-2.85205.3336-.81125.757-1.48307 1.2702-2.01545.528-.52161 1.1175-.92155 1.7687-1.1998-2.0728-1.70651-4.7279-2.73128-7.6223-2.73128-6.62742 0-12 5.37258-12 12 0 6.6274 5.37258 12 12 12zm-3.53811-18.05347c-.30793.78589-.46189 1.73658-.46189 2.85205v5.01962h5.6197v-5.59004h-2.5789v-.07605c0-1.01406.2566-1.82531.7698-2.43375.5389-.63379 1.1804-1.05209 1.9245-1.2549v-2.28164c-.7441.07605-1.4626.25351-2.1555.53238-.6928.27887-1.3086.68449-1.84752 1.21688-.51321.53238-.9366 1.2042-1.27019 2.01545z' fill='currentColor' fill-rule='evenodd'/></svg></i><p	class='typography typography--size-36-text js-typography blockquote__quote'
	data-id='es-1169'
	>
	<strong> &#8220;The process helps us ensure we approach our projects strategically and don&#8217;t fall into the trap of doing design for design&#8217;s sake. The goal is not just to make something visually attractive. The goal is to design something that effectively solves a problem.&#8221;</strong></p>
		<div class="blockquote__caption-wrap">
			<div	class='typography typography--size-12-text-roman js-typography blockquote__caption'
	data-id='es-1170'
	>
	<strong>SHANNON RUETSCH</strong>, HEAD OF EXPERIENCE DESIGN, INFINUM</div>		</div>
	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1174"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1172">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1173'
	>
	<br />
“Before we had this process in place,” Podunovich says, “the paradigm was the agency would provide a few options, the client would pick the one they liked the best, and then we&#8217;d go with that. We&#8217;ve found that by staying true to the principles of PDD, we are positioned to hit the mark much more effectively. And when we can arrive at the solution to the user problem faster, we have more ability to innovate elsewhere on the project.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1177"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1175">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1176'
	>
	The design process is a fast-paced loop informed by data and insights. It’s the idea of design, test, learn, design. There&#8217;s a lot of flexibility built in because we&#8217;re not fixated on processes. We’re fixated on our principles.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1180"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1178">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1179'
	>
	In simple terms, what that means is that we are not obligated to move from Step 3 to Step 4 simply because that’s the way we always work. We are able to reset quickly by looking back at what was learned in discovery or in testing and make swift adjustments. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1183"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1181">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1182'
	>
	“PDD provides a lens into the future that everyone can use,” says Doyle. “It reminds teams about where they’re heading and prevents them from getting distracted by interim steps or immediate obstacles.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1186"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1184">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1185'
	>
	Shannon Ruetsch, head of experience design, echoes these thoughts about the framework’s grounding effects: &#8220;Following the PDD process helps our team ensure we approach all of our digital design projects strategically and don&#8217;t fall into the trap of doing design for design&#8217;s sake. The goal is not just to make something visually attractive. The goal is to design something that effectively solves a problem.&#8221;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1189"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1187">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1188'
	>
	How is PDD different?</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1192"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1190">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1191'
	>
	The component pieces of PDD may be similar to other frameworks, but the way we put them together is unique for a couple of reasons. First, we know how to leverage the process because we designed it based on decades of client experience. It’s one of the benefits of being in business for a while: our design framework is essentially a years-long research project. (Similarly, Infinum created the project management software <a href="https://productive.io/" target="_blank" rel="noreferrer noopener">Productive</a>, which is now deployed by hundreds of other agencies around the globe.)</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1195"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1193">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1194'
	>
	And, critically, PDD is a reflection of our people and their values. According to Podunovich, “It grew from our thinking, so it provides a north star for all we do, and it also attracts like-minded people who appreciate our way of working with clients. To the extent that it is a kind of secret sauce, it has to do with the makeup of the people who are here.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1198"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1196">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1197'
	>
	The magnetic pull of PDD works in other ways as well. Client fit is critical to success, and what we’ve found is that not only does PDD help attract the right people to our team, it helps attract clients who appreciate the way we work and that amplifies our success.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1201"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1199">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1200'
	>
	The bottom line of PDD</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1204"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1202">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1203'
	>
	To clients accustomed to kicking off design immediately following a brief, a system like PDD may seem slow or full of added steps. Indeed, PDD’s success relies heavily on discovery and definition. There may be more upfront time spent in these areas, but as Podunovich explains, in his experience, PDD is cost-efficient<strong>: </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1207"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1205">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1206'
	>
	<strong>“</strong>When clients see designs that reflect everything that we&#8217;ve been talking about with them up to that point, it removes a lot of the swirl that can come from subjective opinions about the design.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1210"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1208">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1209'
	>
	Some of our steps may necessitate more cost initially. But that is where we differentiate between initial investment and long-term savings.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1212"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1211'
	>
	<strong>PDD is foundational. It is not based on features. It is based on needs. And it enables us to solve complex problems in elegant ways.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1215"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1213">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1214'
	>
	“PDD is there not just to get the best work out of our team, it exists to help clients get the best work out of their teams,” says Doyle. “One of the most rewarding things is when clients adopt these processes as their own and see how much they can impact their productivity.”</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1218"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1216">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1217'
	>
	<em>If you are interested in learning more about Purpose Driven Design and how it might support the needs of your business, </em><a href="https://infinum.com/contact/" target="_blank" rel="noreferrer noopener"><em>reach out to learn more</em></a><em>.</em></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1221"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1219">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1220'
	>
	<em><strong>Karri Offstein Rosenthal</strong> is a digital strategist, writer, and podcast host-producer whose latest series, “Held,” was a Top 25 Apple documentary podcast. Her play, “Broken Water,” was presented as part of the Lab@Piven and The Oil Lamp Theater Play Reading Series in the Chicago area. She was Director of Online Selling for the Scholastic Education Group and a marketer for startups and established firms in the education and beauty industries. </em></p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/purpose-driven-design/">Drive Successful Product Outcomes with Purpose-Driven Design</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19255478https://infinum.com/uploads/2024/06/User-experience-problems_-Lets-fix-whats-puzzling-you-min.webp</url>
				</image>
				<title>User Experience Problems? Let’s Fix What’s Puzzling You</title>
				<link>https://infinum.com/blog/user-experience-problems/</link>
				<pubDate>Fri, 28 Jun 2024 11:30:00 +0000</pubDate>
				<dc:creator>Karri Offstein Rosenthal</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19255478</guid>
				<description>
					<![CDATA[<p>Don't let user experience problems hinder your brand's success. Learn how our framework can help you identify and solve UX issues.</p>
<p>The post <a href="https://infinum.com/blog/user-experience-problems/">User Experience Problems? Let’s Fix What’s Puzzling You</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-1314"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1224">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1227"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1225">
	<p	class='typography typography--size-36-text js-typography block-paragraph__paragraph'
	data-id='es-1226'
	>
	<strong>In a world where digital presence can make or break a brand, user experience problems are not to be taken lightly. Companies often struggle to pinpoint why their UX is falling short, which is where our framework comes in very handy. </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1230"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1228">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1229'
	>
	It is difficult to overstate the importance of user experience. Most companies today deliver some – and in many cases all –&nbsp;of their products and services online.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1233"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1231">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1232'
	>
	Companies face an increasingly sophisticated consumer whose expectations have been set by the Apples, AirBnBs, and Amazons of the world. Even the basic marketing site, one without e-commerce functionality, is a critically important representation of your brand.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1236"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1234">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1235'
	>
	Failure to ensure user satisfaction and meet your customers’ expectations in these settings can mean the end of the most important commodity you have – your relationship with them.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1239"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1237">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1238'
	>
	User experience problems – a common issue with a multitude of causes</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1242"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1240">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1241'
	>
	A significant issue that companies face today is determining which parts of their digital ecosystem are functioning well and which are not.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1245"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1243">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1244'
	>
	There are a multitude of reasons for this: these digital systems are complex and opaque. Unlike a physical store or in-person service situation, you can’t see your customers. You may not be able to speak to them, tell if they’re lost or confused, or even if they are a robot or a human.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1248"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1246">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1247'
	>
	A technical issue could be related to network connection quality, tied to a particular device type, or to issues with the underlying code.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1250"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1249'
	>
	<strong>Absent a concerted research effort, it’s hard to understand what real users think of your online brand. Are they happy, or are they irritated and telling their friends to avoid you? Are you maximizing your digital potential or falling way short? </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1253"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1251">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1252'
	>
	Simply put, it’s not easy to know.&nbsp;Faced with these truths, executives who are responsible for their digital business often don’t know where to begin. That’s a problem because it means you could be leaving money on the table or losing out to competition.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1256"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1254">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1255'
	>
	Fortunately, there are ways to handle your user experience problems, which we’ll explore in this piece.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1259"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1257">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1258'
	>
	First things first: Houston, we have a problem</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1262"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1260">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1261'
	>
	To come up with a cure, you first need to acknowledge the symptoms. Oftentimes, problems bubble up organically. Online sales numbers start to fall off. Customer complaints trickle in or show up on review sites. User interaction drops. Conversion rates start to go the way of the U.S. stock market in 2008. Members of internal teams start criticizing elements of the digital experience. Maybe it’s several all at once. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1265"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1263">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1264'
	>
	Once it’s clear you&#8217;re dealing with user experience problems, it can be difficult to see a path forward. At this point, these scenarios might seem familiar:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1268"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-1266">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-1267'
	>
	<li>Half the company is saying: “It isn’t badly broken. Leave it alone!” The other half is saying: “This is horrible! We need to fix this!” It’s a stalemate.</li><li>You are so close to your business and your digital experience, you can’t step back enough to evaluate it.&nbsp;&nbsp;</li><li>There are a half-dozen possible user experience problems. How do you know the ROI of fixing one issue versus another?</li><li>How can any of these things be measured, anyway?</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1271"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1269">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1270'
	>
	“Many times, clients are aware there are issues. Maybe they have even isolated where they are,” says Infinum product strategy director Chris Bradshaw. ”But they don’t know why these user experience problems are happening or exactly how to correct them, and it helps to have the experience of having helped literally hundreds of clients work through similar scenarios.”&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1274"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1272">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1273'
	>
	When these problems arise, we can step in. &nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1277"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1275">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1276'
	>
	We have a framework for dealing with user experience problems</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1280"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1278">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1279'
	>
	Good digital agencies have developed processes for helping companies overcome these challenges. At Infinum, we have created and implemented a proven methodology that simplifies the UX design process, including ways to execute improvements and optimizations. It’s called <a href="https://infinum.com/purpose-driven-design/" target="_blank" rel="noreferrer noopener">Purpose-Driven Design</a>, or PDD.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1283"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1281">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1282'
	>
	We spent a lot of time thinking about how we might add some kind of secret sauce to our own process. We discovered that it had very little to do with what design deliverables we chose to embrace or throw overboard. At the end of the day, we found that differentiation comes through principles more than process. A process describes <em>how</em> you do something, while a set of principles describes <em>why</em> you do something. <a href="https://infinum.com/blog/purpose-driven-design/" target="_blank" rel="noreferrer noopener">Our process is rooted in a set of six design principles</a>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1286"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1284">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-1285'
	>
	Defining a path forward starts with the discovery</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1289"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1287">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1288'
	>
	As we say, “real value is discovered” and “you can’t guess your way to credibility.” There’s no shortcut around research.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1292"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1290">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1291'
	>
	The steps we take in discovery workshops vary, but we’ll often start by interviewing stakeholders and real users to uncover the roots of the user experience problems, using the benefit of our 20 years’ experience and objectivity to gather our findings. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1295"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1293">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1294'
	>
	Quantitative tactics are used to validate hypotheses: surveying real users or running A/B tests, among others. These approaches are augmented by deep dives into analytics and competitive analyses.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1297"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1296'
	>
	<strong>The goal is to assess the status of the perceived user experience problem, learn where the blockers are, and determine what real users think and feel about it. </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1300"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1298">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-1299'
	>
	Mapping out solutions for user experience problems</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1303"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1301">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1302'
	>
	After gathering data, our solution architects, strategists, designers, and technical teams are able to map out different potential solutions and, critically, to pull together estimates so that clients can make more informed decisions about which path fits their budget or offers the best payoff.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1306"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1304">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1305'
	>
	This is where PDD really makes an impact. Rather than dealing in ambiguity or the world of opinion, clients are able to step back and look at facts and figures. We find this stage is transformative for clients who have been struggling with where to start. &nbsp; &nbsp; &nbsp; &nbsp;<br><br>“So often when clients come to us, they are overwhelmed,” says Kerrin Whipple, senior user experience designer and researcher. “They’re overwhelmed with how to initiate improvements, with data overload, by lack of expertise, and resources and tool constraints. We are able to take this load off their shoulders.”&nbsp;&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1309"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1307">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1308'
	>
	Each client and problem is unique, but there are lessons in our experience</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1312"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1310">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1311'
	>
	You may not run a medical company or bank, but you might see yourself reflected in their challenges. Here are a couple of examples that we believe highlight how our methodology helps businesses identify starting points quickly.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1333"
	 data-animation-target='inner-items'>
		
			<div class="block-columns" data-id="es-1332">
	
<div class="block-column" data-id="es-1331">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1330"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="grid block-grid__grid" data-id="es-1329">
	
<div class="block-grid-item" data-id="es-1317">
	
<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1315"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1316">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2023/10/Stryker-showcase-square.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1240"
															width="1240"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>
</div>

<div class="block-grid-item" data-id="es-1328">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1327"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-1318"
	 href='https://infinum.com/work/stryker-medical/'>

	
	<div class="intro-label card-simple__intro-label" data-id="es-1319">
	<p	class='typography typography--size-14-text-roman js-typography intro-label__intro-label'
	data-id='es-1320'
	>
	STRYKER<br></p></div>
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<h2	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-1321'
	>
	<a href="https://infinum.com/work/stryker-medical/">A rapid-fire workshop to help Stryker kick off a redesign</a></h2>		</div>

		<p	class='typography typography--size-16-text-roman js-typography card-simple__paragraph'
	data-id='es-1322'
	 id='es-1318-paragraph'>
	Stryker needed to address the usability and performance problems in one of their critical hospital-based reporting systems, so we ran an intensive two-day, user-focused design workshop with the key stakeholders on the initiative. The goal was to provide Stryker with a core UX strategy their internal teams could use as foundation for a redesign.</p><button	class="btn btn--color-infinum btn--size-medium btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn"
	data-id="es-1323"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-1324'
	>
	See the case study</div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-1325'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button><div class="tags card-simple__tags" data-id="es-1326">
	<div class="tags__items">
		<div class="tags__list">
					</div>
	</div>
</div>	</div>
</a>	</div>
</div>
</div>	</div>
</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1352"
	 data-animation-target='inner-items'>
		
			<div class="block-columns" data-id="es-1351">
	
<div class="block-column" data-id="es-1350">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1349"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="grid block-grid__grid" data-id="es-1348">
	
<div class="block-grid-item" data-id="es-1336">
	
<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1334"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1335">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2023/04/RBA-showcase-square_02.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1241"
															width="1241"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>
</div>

<div class="block-grid-item" data-id="es-1347">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1346"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-1337"
	 href='https://infinum.com/work/rba-mobile-banking/'>

	
	<div class="intro-label card-simple__intro-label" data-id="es-1338">
	<p	class='typography typography--size-14-text-roman js-typography intro-label__intro-label'
	data-id='es-1339'
	>
	RBA<br></p></div>
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<h2	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-1340'
	>
	<a href="https://infinum.com/work/stryker-medical/"><a href="https://infinum.com/work/rba-mobile-banking/">Studying user behavior to help a bank excel in the mobile era</a></a></h2>		</div>

		<p	class='typography typography--size-16-text-roman js-typography card-simple__paragraph'
	data-id='es-1341'
	 id='es-1337-paragraph'>
	In 2019, Raiffeisen Bank decided to fully embrace the digital age and trusted us with digital transformation. Gaining clarity about customer needs and expectations was our priority. Each iteration and feature flow was tested and validated with real users.</p><button	class="btn btn--color-infinum btn--size-medium btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn"
	data-id="es-1342"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-1343'
	>
	Learn more</div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-1344'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button><div class="tags card-simple__tags" data-id="es-1345">
	<div class="tags__items">
		<div class="tags__list">
					</div>
	</div>
</div>	</div>
</a>	</div>
</div>
</div>	</div>
</div>
</div>	</div>

<div
	class="wrapper"
	data-id="es-1364"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1353">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1356"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-1354">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-1355'
	>
	Struggling with where to start? Let’s discover a path forward together</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1359"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1357">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1358'
	>
	In today&#8217;s digital world, a bad user experience is simply not an option. If you feel you have a problem in your user journey, but don’t know where to start, <a href="https://infinum.com/">reach out to Infinum</a>. By leveraging a proper discovery phase, we’ll help you identify risks and rewards, and chart the best path to greater business success.  </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1362"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-1360">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-1361'
	>
	<em><strong>Karri Offstein Rosenthal</strong> is a digital strategist, writer, and podcast host-producer whose latest series, “Held,” was a Top 25 Apple documentary podcast. Her play, “Broken Water,” was presented as part of the Lab@Piven and The Oil Lamp Theater Play Reading Series in the Chicago area. She was Director of Online Selling for the Scholastic Education Group and a marketer for startups and established firms in the education and beauty industries.</em></p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/user-experience-problems/">User Experience Problems? Let’s Fix What’s Puzzling You</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>19253229https://infinum.com/uploads/2024/04/Exceptional_Visualizations-hero-ig-min.webp</url>
				</image>
				<title>AI Data Visualization – The New Frontier</title>
				<link>https://infinum.com/blog/ai-data-visualization/</link>
				<pubDate>Tue, 23 Apr 2024 13:56:41 +0000</pubDate>
				<dc:creator>Kelly Cutler</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=19253229</guid>
				<description>
					<![CDATA[<p>Discover how AI data visualization can help businesses uncover meaningful insights, make predictions, and develop informed decisions efficiently.</p>
<p>The post <a href="https://infinum.com/blog/ai-data-visualization/">AI Data Visualization – The New Frontier</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-1398"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1365">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1368"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1366">
	<p	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-1367'
	>
	Discover how AI data visualization can help businesses uncover meaningful insights, make future predictions, and develop informed, data-driven decisions at lightning speed. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1371"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1369">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1370'
	>
	In the age of big data, the ability to transform complex information into understandable and actionable insights is more important than ever. Data visualization – the graphical representation of information using elements like graphs, charts, and infographics – plays a pivotal role in helping people find and understand patterns, enabling decision-makers to grasp intricate concepts and identify emerging trends.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1374"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1372">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1373'
	>
	Data visualization is an essential tool for the collection and analysis of large quantities of information. However, as the volume and complexity of data continue to increase, traditional visualization techniques often fall short.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1377"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1375">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1376'
	>
	This is where artificial intelligence (AI) can help, revolutionizing the field of data visualization. By using AI for data visualization, businesses can efficiently uncover meaningful insights, make future predictions, and develop informed, data-driven decisions at lightning speed. AI data visualization tools utilizing natural language processing (NLP) offer even greater capabilities, allowing for more intuitive interaction and deeper analysis.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1380"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1378">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1379'
	>
	This article explores the transformative impact of AI on data visualization, highlighting how this synergy is reshaping industries and redefining the way companies interact and communicate with data.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1387"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple card-simple--is-ad block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-1381"
	 href='https://infinum.com/artificial-intelligence/agent-development/'>

	
	
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<p	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-1382'
	>
	<strong><strong>If you’re considering integrating AI into your digital product, our 14-day sprint helps you move fast with confidence. We turn rough ideas into validated prototypes with clear logic, smart design, and intuitive UX. Learn how it works.</strong></strong></p>		</div>

		<button	class="btn btn--color-infinum btn--size-small btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn js-card-simple-link"
	data-id="es-1384"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-1385'
	>
	Learn more </div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-1386'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button>	</div>
</a>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1390"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1388">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1389'
	>
	The democratization of data</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1393"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1391">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1392'
	>
	Data visualizations can be found everywhere in the modern world, from company board meetings to live sports to fitness apps to journalism in mainstream media. Modern organizations use data visualizations for customer data analysis, results forecasting, campaign reporting, and more.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1396"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1394">
	<p	class='typography typography--size-20-text-roman js-typography block-typography__typography'
	data-id='es-1395'
	>
	Even the tradition-bound world of golf is not immune, as evidenced by our work on the data-driven interface of the Skytrak simulator, which embraces math, physics, and eye-grabbing visualization in pursuit of a better handicap.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1401"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1399"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1400">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2024/04/Visualizations_Can_Supercharge-the-power_-of-your_data-in-article-01-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="901"
															width="1201"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1444"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1402">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1405"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1403">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1404'
	>
	<em>We designed the user interface of the popular golf simulator</em><a href="https://www.expandtheroom.com/case-studies/skytrak/" target="_blank" rel="noreferrer noopener"><em> Skytrak</em></a><em>. Club speed, ball spin, and launch angle are among the many data points presented to the user.</em></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1408"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1406">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1407'
	>
	Enhancing communication</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1411"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1409">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1410'
	>
	There’s a good reason why data visualizations have become more and more a part of your communications lexicon. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1413"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1412'
	>
	<strong>Human beings are drawn to visuals, including color and patterns. We register and remember visuals faster and longer than text. </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1416"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1414">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1415'
	>
	In business settings, this is amplified by the fact that most executives are overwhelmed by an influx of data, presentations, email, meetings, and other communication. To stand out from the noise and present information in a more palatable and memorable format, companies must embrace data visualization as a central internal communications tool and within their consumer-facing digital products. Generative AI can enhance these visualizations, making them even more engaging and insightful.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1419"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1417">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1418'
	>
	Data visualizations can be modest formats like bar graphs, pie charts, or even simple drawings that illustrate an idea. These formats can be effective for showing comparisons, trends over time, peaks, ranks, types, components, groups, percentages, and pieces.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1422"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1420">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1421'
	>
	More advanced data visualizations can include histograms, scatter plots, alluvials, flow charts, interactive visualizations, and more. These can be effective visualization tools for demonstrating clusters, distributions, relativity, connections, if/then, structure, relationships, and more.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1425"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1423">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1424'
	>
	The stage is set for AI</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1428"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1426">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1427'
	>
	As organizations and customers generate increasing amounts of data, AI is becoming an indispensable visualization tool for making sense of this information.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1431"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1429">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1430'
	>
	For AI to be a successful tool in the art of creating data visualizations, it must rely on the best possible data set. AI uses <a href="https://infinum.com/machine-learning-development-services/">machine learning</a> and natural language processing to digest enormous datasets for the purpose of identifying and correcting mistakes and inaccuracies. This process includes the detection and correction of outliers, missing values, and other anomalies that could skew results.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1433"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1432'
	>
	<strong>AI can visualize complex patterns and relationships that are not readily apparent. For instance, clustering algorithms can group data in meaningful ways, uncovering underlying trends that might be invisible to the naked eye. </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1436"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1434">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1435'
	>
	This capability allows business decision-makers and researchers to gain important insights into customer behavior, market trends, and other relevant dynamics. As an additional AI-powered benefit, utilizing a language model in this context can provide narrative explanations of these trends, making them more comprehensible and actionable.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1439"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1437">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1438'
	>
	Further, AI-driven tools like NLP enable the transformation of qualitative data into quantifiable visual representations. This can be of particular value in areas like social media analysis, customer feedback, and sentiment analysis, where vast amounts of text can be converted into meaningful visualizations.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1442"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1440">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1441'
	>
	Infinum integrated numerous internal and external data sources to create<a href="https://infinum.com/work/edmond-revenue-management-system/" target="_blank" rel="noreferrer noopener"> an elegant interactive dashboard for the hospitality group Maistra</a>, which they use to predict hotel occupancy and autonomously adjust accommodation rates. This is an excellent example of how AI can be used to mine different sources of data that would be extremely difficult for a user to process, synthesize, and act upon without a powerful visualization tool. </p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1447"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1445"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1446">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2024/04/Visualizations_Can_Supercharge-the-power_-of-your_data-in-article-04-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="490"
															width="1201"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1472"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1448">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1451"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1449">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1450'
	>
	<em>The</em><a href="https://infinum.com/work/edmond-revenue-management-system/" target="_blank" rel="noreferrer noopener"><em> Maistra revenue optimization tool</em></a><em> presents data from multiple disconnected sources in an array of easy-to-consume graphics formats from scatterplots to distribution curves. These are all designed to empower the user to make faster decisions on pricing to reduce vacancies and maximize revenue. Machine learning models perform an array of data analyses, predicting the optimal price for every accommodation unit across the portfolio.</em></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1454"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1452">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1453'
	>
	Here are just a few ideas for using AI data visualization to power better business decision-making:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1458"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1455">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1456'
	>
	<strong>Consumer insights</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1457'
	>
	Visuals can present survey results, demographic and psychographic data to highlight key audience personas. Line graphs, statistics, bar charts, and maps can depict visual representations of audience segments.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1462"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1459">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1460'
	>
	<strong>Market trends</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1461'
	>
	Diagrams provide summaries of trends in markets over time using line graphs, histograms, scatter plots, treemaps, and 2&#215;2’s to show changes in behavior, sales, market share, competitive landscape, or market forces. </p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1466"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1463">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1464'
	>
	<strong>Media performance</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1465'
	>
	Infographics can summarize campaign metrics such as engagement rates, follower growth, top-performing assets with colorful images and graphs to represent a brand’s online positioning and presence in a memorable way.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1470"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1467">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1468'
	>
	<strong>Sentiment analysis</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1469'
	>
	Qualitative data such as reviews and feedback can be analyzed with AI and used for associations with products or services in data visualizations. A language model can further enhance these visualizations by providing detailed explanations and narratives that help decision-makers understand the sentiments behind the data.</p>	</div>
</div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1475"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1473"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1474">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2024/04/Visualizations_Can_Supercharge-the-power_-of-your_data-in-article-02-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1080"
															width="1201"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1504"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1476">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1479"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1477">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1478'
	>
	<em>For digital experience company FirstTube, our goal was to provide the end-user with an intuitive, real-time dashboard that displayed critical metrics such as concurrent viewers and peak concurrent views, allowing them to make informed decisions on the fly. We aggregated all the data to generate comprehensive visualizations that charted the best-performing platforms, ad placements, total watch time, and total view counts.</em></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1482"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1480">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1481'
	>
	Digital products can incorporate AI data visualizations in a number of ways. Here are a few:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1486"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1483">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1484'
	>
	<strong>Health trackers</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1485'
	>
	Users’ behaviors can be analyzed to make recommendations on ways to improve workouts or health outcomes. Charts, graphs, and illustrative suggestions can indicate where to focus for the best results.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1490"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1487">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1488'
	>
	<strong>Entertainment recommendations</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1489'
	>
	Spotify’s Wrapped is an obvious exemplar of this potential. By presenting a visual snapshot of music consumption, users can gain insights about their own behavior and identify trends and valuable insights that might otherwise be lost in the rhythms of everyday life.  </p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1494"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1491">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1492'
	>
	<strong>Product comparisons</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1493'
	>
	Original graphics can be used to compare features, benefits and pricing using side-by-side charts or tables, vibrant icons, and statistics to help customers discover more information and facts about offerings.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1498"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1495">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1496'
	>
	<strong>Consumption trends</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1497'
	>
	As one example, utility providers could illustrate a user’s consumption patterns in ways that could help customers reduce their carbon footprint or save on their energy bills.</p>	</div>
</div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1502"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="bullet bullet--left bullet__type--dot bullet__color--infinum block-bullet__bullet" data-id="es-1499">
			<div class="bullet__dot"></div>
		<div class="bullet__content">
		<h3	class='typography typography--size-20-text js-typography bullet__heading'
	data-id='es-1500'
	>
	<strong>Smart homes</strong></h3><p	class='typography typography--size-20-text-roman js-typography bullet__paragraph'
	data-id='es-1501'
	>
	Users can learn more about their usage of<a href="https://infinum.com/work/philips-connected-kitchen-appliances/" target="_blank" rel="noreferrer noopener"> appliances</a>, thermostats, doors and windows, and<a href="https://infinum.com/work/philips-masterconnect-iot-lighting/" target="_blank" rel="noreferrer noopener"> lighting</a> to improve energy efficiency, lower their bills, or even<a href="https://infinum.com/blog/building-a-recommendation-system-for-a-culinary-app/" target="_blank" rel="noreferrer noopener"> find new recipes</a> tailored to their equipment and tastes. By presenting this information in easy-to-consume formats, homeowners can be engaged and motivated to evaluate and act up their behavior.</p>	</div>
</div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1507"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1505"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1506">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2024/04/Visualizations_Can_Supercharge-the-power_-of-your_data-in-article-03-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="551"
															width="1201"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1596"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1508">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1511"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1509">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1510'
	>
	<em>The app we designed for</em> <a href="https://infinum.com/work/smart-home-concept/" target="_blank" rel="noreferrer noopener"><em>The Arbour Smart Homes</em></a><em> features numerous data visualizations that are intended to make it easier for residents to gauge their energy consumption and make energy-saving adjustments on the go. Because it</em>’<em>s a deep experience, consistency and cohesiveness help tie everything together and create mental shortcuts when moving between functions.</em></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1514"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1512">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1513'
	>
	Best practices for AI data visualization</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1517"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1515">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1516'
	>
	From forecasting to communications, it’s critical to be precise, meaningful, and authentic. Several best practices come into play, specifically with data and design, for data visualization and common business processes. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1520"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1518">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1519'
	>
	<strong>Accuracy</strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1523"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1521">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1522'
	>
	Beginning with the data and the source, accuracy is the most important factor. Inaccurate data can lead to incorrect assumptions, conclusions, and messaging. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1526"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1524">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1525'
	>
	<strong><strong>Relevance</strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1529"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1527">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1528'
	>
	Ensuring the data is relevant to the audience will help build a case.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1532"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1530">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1531'
	>
	<strong><strong><strong>Contextualization</strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1535"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1533">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1534'
	>
	Contextualizing the data is important as it allows the audience to evaluate and understand its significance. Titles, subtitles, labels, annotations, and explanatory text are beneficial. Comparisons and benchmarks will provide value by showing progress and patterns over time. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1538"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1536">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1537'
	>
	<strong><strong><strong><strong>Providing actionable insights</strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1541"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1539">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1540'
	>
	Actionable insights can serve as a narrative aid that help users form opinions and make educated decisions based on patterns, trends, and concepts that are highlighted within the data visualization.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1544"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1542">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1543'
	>
	Similarly, there are several design best practices for creating and using data visualizations in business and marketing. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1547"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1545">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1546'
	>
	<strong><strong><strong><strong><strong>Simplicity</strong> </strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1550"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1548">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1549'
	>
	As with most design concepts, simplicity is the first and most important element. Avoid overwhelming viewers with too much information, too many colors or fonts. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1553"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1551">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1552'
	>
	<strong><strong><strong><strong><strong><strong>Consistency</strong></strong> </strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1556"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1554">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1555'
	>
	Consistent use of design elements will create a cohesive experience.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1559"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1557">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1558'
	>
	<strong><strong><strong><strong><strong><strong><strong>Visual hierarchy</strong></strong></strong> </strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1562"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1560">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1561'
	>
	Establishing a clear visual hierarchy will guide the users to view the most important parts of the visualization in the correct order. Labels and fonts (weight and size) can be used to create hierarchy. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1565"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1563">
	<h3	class='typography typography--size-30-text js-typography block-typography__typography'
	data-id='es-1564'
	>
	<strong><strong><strong><strong><strong><strong><strong><strong>Accessibility</strong></strong></strong></strong></strong></strong></strong></strong></h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1568"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1566">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1567'
	>
	<a href="https://infinum.com/blog/best-practices-accessibility-design/" target="_blank" rel="noreferrer noopener">Accounting for all users</a> is important, and including alternate text with visuals is central to any visual element.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1571"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1569">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1570'
	>
	Keeping best practices top of mind while developing charts and graphs will create a stronger user experience while drawing in the audience.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1574"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1572">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1573'
	>
	Proceed With Care</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1577"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1575">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1576'
	>
	While AI can enhance the process of creating data visualizations, there are also cautions. Companies should not over-rely on artificial intelligence for data visualizations. Instead, combining AI tools with human interface is the best approach. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1579"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-36-text js-typography block-highlighted-text__typography'
	data-id='es-1578'
	>
	<strong>While AI can deliver many efficiencies to the process, it is best when administered by creative and development teams with full knowledge of the subject, the data, the audience and the idea. </strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1582"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1580">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1581'
	>
	AI is known for inherent bias, hallucinations, inaccuracies, and lack of tone and voice. It is critical to consider company standards, policies, and ethics prior to using any new technology, visualization tool or AI. For these reasons, use of AI should always be managed closely.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1585"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1583">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1584'
	>
	Entering the new frontier with AI data visualization</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1588"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1586">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1587'
	>
	As businesses enter the new frontier of big data and technology, AI can be a valuable visualization tool. When utilized with care, and together with best practices in data and design, companies can convey complex information in a highly visual and engaging way – whether that’s to the board room or to customers, empowering decision-makers with the insights they need. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1591"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1589">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1590'
	>
	Selecting a strong digital partner can provide data visualizations and AI tools to scale a business. If you are interested in utilizing AI in your digital product, <a href="https://infinum.com/artificial-intelligence/custom-solutions/" target="_blank" rel="noreferrer noopener">check out what we can do to help</a>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1594"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1592">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1593'
	>
	<em><strong>Kelly Cutler</strong> is an educator, author, and marketing leader. She currently teaches digital marketing and communication across programs at Northwestern University. An active adviser and consultant, Kelly brings more than two decades of experience to Northwestern. The author of &#8220;Search Marketing: A Strategic Approach to SEO and SEM,&#8221; Kelly enjoys researching digital marketing, web3, generative AI, and the future of marketing. You can connect with Kelly on<a href="https://www.linkedin.com/in/kellycutler/" target="_blank" rel="noreferrer noopener"> LinkedIn</a>.</em></p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/ai-data-visualization/">AI Data Visualization – The New Frontier</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
					<item>
				<image>
					<url>49941https://infinum.com/uploads/2024/01/Six-Design-Trends-You-Will-See-in-2024-min.webp</url>
				</image>
				<title>Six Innovative Design Trends That Will Define 2024</title>
				<link>https://infinum.com/blog/innovative-design-trends-2024/</link>
				<pubDate>Tue, 30 Jan 2024 14:19:47 +0000</pubDate>
				<dc:creator>William Reid Hitt</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=49941</guid>
				<description>
					<![CDATA[<p>Innovative designs of 2024 will be marked by designers embracing AI, accessibility, and hybrid styles to redefine how users interact with digital products.</p>
<p>The post <a href="https://infinum.com/blog/innovative-design-trends-2024/">Six Innovative Design Trends That Will Define 2024</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-1620"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1597">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1600"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1598">
	<p	class='typography typography--size-36-text js-typography block-typography__typography'
	data-id='es-1599'
	>
	<strong>Want to create innovative designs aligned with the latest trends? In 2024, we envision designers embracing innovations like AI, accessibility, and hybrid styles to redefine how users interact with digital products.</strong></p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1603"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1601">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1602'
	>
	In the field of design, trends come and go. As technologies evolve and user preferences shift, design naturally follows suit. Keeping up with the latest innovative design trends helps brands stay current and create immersive experiences for consumers as their preferences evolve.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1606"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1604">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1605'
	>
	Last year, it was dynamic color, bold typography, personalization, and simplicity. In 2024, we envision designers embracing innovations like AI, accessibility, and hybrid styles to redefine how users interact with digital products.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1609"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1607">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1608'
	>
	Some industry thinkers have labeled 2024 “<a href="https://uxdesign.cc/the-state-of-ux-in-2024-enter-late-stage-ux-e9b403b67667" target="_blank" rel="noreferrer noopener">late-stage UX</a>,” a period marked by automation, commoditization, financialization, and other factors. We’re noting some of these trends in the design realm. It’s an interesting time because as AI makes design more accessible, it opens up the potential for more innovation and different kinds of design problem-solving.  </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1612"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1610">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1611'
	>
	With these macro shifts in mind, let’s dive into six innovative design trends shaping the digital landscape in the coming year.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1615"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1613">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1614'
	>
	Innovative design supported by artificial intelligence</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1618"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1616">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1617'
	>
	Not surprisingly, our designers and researchers chose AI as the most significant trend of our present moment. New advancements in AI tools are creating efficiencies and opening up new avenues in the design industry. </p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1623"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1621"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1622">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_3-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_3-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_3-3000x1801.webp				media='(max-width: 1999px)'
				type=image/webp								height="1801"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2024/01/Trends_in-article_3.webp"
					class="image__img block-media__image-img"
					alt=""
										height="2055"
															width="3424"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			3M’s Visual Attention Software uses AI to generate “heat maps” that predict where users will look on a website design.		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1642"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1624">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1627"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1625">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1626'
	>
	Design teams now have access to a wide range of powerful tools like <a href="https://openai.com/blog/dall-e-3-is-now-available-in-chatgpt-plus-and-enterprise" target="_blank" rel="noreferrer noopener">Chat GPT’s new DALL·E integration</a> to create images on-the-fly, or 3M’s <a href="https://vas.3m.com/" target="_blank" rel="noreferrer noopener">Visual Attention Software</a>, which predicts where users will interact with websites. (If you want to learn more about how we’re using AI as an agency, we’ve written a <a href="https://infinum.com/blog/ai-agency-ai-tools/" target="_blank" rel="noreferrer noopener">piece summarizing what we&#8217;re doing</a>.)</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1630"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1628">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1629'
	>
	We’re also seeing brands roll out standout examples of AI experiences for users. <a href="https://blog.duolingo.com/duolingo-max/#:~:text=What%20is%20Roleplay%3F,by%20tapping%20on%20the%20character" target="_blank" rel="noreferrer noopener">Roleplay on Duolingo Max</a> is an AI-driven chat that allows language learners to practice conversations. <a href="https://app.buildlegends.com/" target="_blank" rel="noreferrer noopener">Visualizer by Legends</a> is a short story generator based on students’ responses to prompts. <a href="https://www.linkedin.com/pulse/celebrating-1-billion-members-our-new-ai-powered-linkedin-tomer-cohen-26vre/?trk=public_post_feed-article-content" target="_blank" rel="noreferrer noopener">LinkedIn&#8217;s career actions</a> offer users personalized suggestions to build their careers. We will undoubtedly see more adaptive user interfaces that leverage AI to create personalized experiences by combining bespoke digital content like copy, images, animation, and more.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1637"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<a	class="card-simple js-card-simple card-simple--is-ad block-card__card-simple card-simple--has-link js-card-simple-link card-simple__content-align--left"
	data-id="es-1631"
	 href='https://infinum.com/artificial-intelligence/agent-development/'>

	
	
	<div class="card-simple__content">
		<div class="card-simple__heading-wrap">
			<h2	class='typography typography--size-24-text js-typography card-simple__heading'
	data-id='es-1632'
	>
	As the pressure to implement AI grows, many businesses don&#8217;t know where to start. Our 14-day sprint helps you cut through the noise, turning early ideas into validated prototypes with clear logic, smart design, and real momentum. Learn how it works.</h2>		</div>

		<button	class="btn btn--color-infinum btn--size-small btn--width-default btn__icon-position--right card-simple__btn js-block-card-btn js-card-simple-link"
	data-id="es-1634"
	 tabindex='-1'>
		<div class="btn__inner">
					<div	class='typography typography--size-none js-typography btn__label'
	data-id='es-1635'
	>
	Learn more </div>		
		<i
	class="icon btn__icon icon--size-16 icon--scale-100"
	 aria-hidden='true' data-name='arrow-right-16' data-id='es-1636'>
	<svg fill='none' height='16' viewBox='0 0 17 16' width='17' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='currentColor' stroke-width='2'><path d='m.5 7.99999 14 .00001'/><path d='m9.23352 2.7251 5.97848 5.97852'/><path d='m9.23352 13.2744 5.97848-5.9785'/></g></svg></i>	</div>
	</button>	</div>
</a>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1640"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1638">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1639'
	>
	Inclusive and accessible design</h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1645"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1643"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1644">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_1-min-1400x840.webp				media='(max-width: 699px)'
				type=image/webp								height="840"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_1-min-2400x1440.webp				media='(max-width: 1199px)'
				type=image/webp								height="1440"
												width="2400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/Trends_in-article_1-min-3000x1801.webp				media='(max-width: 1999px)'
				type=image/webp								height="1801"
												width="3000"
				 />
												<img
					src="https://infinum.com/uploads/2024/01/Trends_in-article_1-min.webp"
					class="image__img block-media__image-img"
					alt=""
										height="2055"
															width="3424"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1663"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1646">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1649"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1647">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1648'
	>
	Web accessibility is the practice of designing and building websites that are usable by people of all abilities. The European Accessibility Act, which requires all websites to meet global accessibility standards, came into effect in 2019 and will be legally enforced in 2025. Examples of these standards are using alternate text for images for people who read content through screen readers and having sufficient color contrast.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1652"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1650">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1651'
	>
	By following these standards, designers can make websites that give equal access to everyone, regardless of their abilities. While these improvements are designed to help users with specific disabilities, the evolution can elevate digital experiences for all users. For example, better contrast reduces eye strain, and alt text can allow content to be indexed by search engines. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1655"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1653">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1654'
	>
	If you’re interested in reading more about accessibility, we have also published posts on <a href="https://infinum.com/blog/best-practices-accessibility-design/" target="_blank" rel="noreferrer noopener">best practices for designing accessible products</a>, <a href="https://infinum.com/blog/digital-product-accessibility/" target="_blank" rel="noreferrer noopener">digital product accessibility</a>, and a <a href="https://infinum.com/handbook/accessibility/design/intro" target="_blank" rel="noreferrer noopener">handbook</a> full of valuable guidance and advice.   </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1658"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1656">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1657'
	>
	Animated graphics and micro-interactions</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1661"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1659">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1660'
	>
	Micro-interactions are events triggered by user activity that signal a particular interaction was successful. Beyond just a confirmation when submitting a form, this could be small events on specific parts of a webpage. Through animations (which are often charming or surprising), these events create a more interactive experience for the user. They help them feel connected to the website as they navigate or progress through a task, series of tasks, or the overall digital experience.</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1666"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1664"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1665">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/01/2024-trends-micro-interactions-1400x617.webp				media='(max-width: 699px)'
				type=image/webp								height="617"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2024/01/2024-trends-micro-interactions.webp"
					class="image__img block-media__image-img"
					alt=""
										height="665"
															width="1509"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Examples of micro-interactions on Grammarly.		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1681"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1667">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1670"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1668">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1669'
	>
	This year, we predict that websites that don’t use animation and micro-interactions well will seem lifeless and outdated.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1673"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1671">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1672'
	>
	Examples like Grammarly (shown above) showcase how micro-interactions create a frictionless and immersive user experience.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1676"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1674">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1675'
	>
	Evolved responsive design</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1679"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1677">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1678'
	>
	We’re witnessing a shift in web design from responsive design to unique cross-platform layouts. Companies now invest in creating consistent experiences across different screen sizes and devices, from phones to TVs to IoT devices.&nbsp;</p></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1684"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1682"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1683">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/01/2024-trends-grid-1400x613.webp				media='(max-width: 699px)'
				type=image/webp								height="613"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/2024-trends-grid-2400x1051.webp				media='(max-width: 1199px)'
				type=image/webp								height="1051"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2024/01/2024-trends-grid.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1168"
															width="2666"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Examples of designs that experiment with the grid to redefine responsive design: Barber Hauler, Stills, Dot Dash, Studio Kardum, RBB.		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1705"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1685">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1688"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1686">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1687'
	>
	With this shift to more devices, we’re also tracking a related shift to revisiting the experience on larger screens after years of prioritizing mobile-first above all else. This change marks a departure from simplistic responsive design, introducing richer and more varied user experiences across different platforms.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1691"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1689">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1690'
	>
	We’re seeing experienced designers look back while looking forward by emphasizing visual elements like the grid, typography, and white space.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1694"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1692">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1693'
	>
	Incorporating sustainable design practices</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1697"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1695">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1696'
	>
	As sustainability has become a global movement, brands and organizations aim to reduce their websites’ carbon footprint. We’re seeing real-world examples with major players like Google and Patagonia committing to carbon neutrality and e-commerce sites like Made Trade highlighting eco-conscious shopping choices. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1700"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1698">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1699'
	>
	Sustainable design practices include reducing the amount and file size of images and videos and educating users to make sustainable choices as they use websites. When the internet accounts for an <a href="https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/" target="_blank" rel="noreferrer noopener">estimated 3–4% of global emissions</a>, digital organizations have a unique opportunity to both conserve resources and influence their customers’ habits.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1703"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1701">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1702'
	>
	Hybrid styles</h2></div>	</div>
</div>
</div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1708"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-1706"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-1707">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2024/01/2024-trends-grid-02-1400x613.webp				media='(max-width: 699px)'
				type=image/webp								height="613"
												width="1400"
				 />
								
			<source
				srcset=https://infinum.com/uploads/2024/01/2024-trends-grid-02-2400x1051.webp				media='(max-width: 1199px)'
				type=image/webp								height="1051"
												width="2400"
				 />
												<img
					src="https://infinum.com/uploads/2024/01/2024-trends-grid-02.webp"
					class="image__img block-media__image-img"
					alt=""
										height="1168"
															width="2666"
										loading="lazy"
					 />
					</picture>

			<figcaption class="image__figcaption block-media__image-figcaption">
			Hybrid designs: Opus, Stack, Interstellar Lab, Google’s Gemini, Elion.		</figcaption>
	</figure></div></div>		</div>
	</div>

<div
	class="wrapper"
	data-id="es-1726"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-1709">
	

</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1712"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1710">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1711'
	>
	Another major trend we are tracking this year is combining design elements from other trends to create new visual styles. More of an approach than a singular style, this trend is exemplified by designs that seamlessly blend existing trends, like bento box layouts, dynamic island-inspired navigation menus, pastel gradients, stark minimalism, and cheeky neo-brutalism.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1715"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1713">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1714'
	>
	This dynamic approach challenges users’ expectations by creating captivating new styles. Interestingly, it also seems that 3D elements are making a comeback after many years of flat design. As just one example, Shopify’s <a href="https://uxdesign.cc/is-the-flat-design-trend-finally-over-1e531ceb0ffa" target="_blank" rel="noreferrer noopener">Polaris design system introduced 3D buttons</a>, building off a trend some say started with Apple’s Big Sur icons in 2020.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1718"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1716">
	<h2	class='typography typography--size-52-default js-typography block-typography__typography'
	data-id='es-1717'
	>
	Create innovative designs in 2024</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1721"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1719">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1720'
	>
	That wraps up our recap of 2024 UI and UX innovative design trends. In summary, we’re seeing escalating technological advancements and the continued emphasis on social and environmental responsibility driving design innovation in 2024. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-1724"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-typography" data-id="es-1722">
	<p	class='typography typography--size-16-text-roman js-typography block-typography__typography'
	data-id='es-1723'
	>
	By embracing these trends, organizations can create visually impressive products that resonate with their audience. Thanks for reading, and see you next year!</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/innovative-design-trends-2024/">Six Innovative Design Trends That Will Define 2024</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
		
	</channel>
</rss>