Author: UXPin

UXPin is a web-based design collaboration tool. We’re pleased to share our knowledge here.

How to Hook Users With Habit-Forming UX Design

Apple. Facebook. Twitter. Google. Pinterest. These companies all have one thing in common–they create habits among their users. People use these products habitually on a daily basis, and they’re so compelling that many of us struggle to imagine life before they existed.

But creating habits is easier said than done. Even though I’ve written extensively about behavior engineering and the importance of habits, there are few resources to give designers the tools they need to design and measure customer habits. That’s why I wrote “Hooked: How to Build Habit-Forming Products,” which explains the four-step Hook Model that can help form habits among your users.

Design habit-forming digital products your customers will love with UXPin’s design tool. Prototype at higher fidelities with real-like functionality for improved testing and results. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Who is Nir Eyal?

nir eyal

Before Nir describes the Hooked Model in his own words, we thought we’d give him a quick introduction. Nir Eyal is a Wall Street Journal bestselling author of Hooked: How to Build Habit-Forming Products and “Indistractable: How to Control Your Attention and Choose Your Life.”

Nir taught as a Lecturer in Marketing at the Stanford Graduate School of Business and Design School and has worked in the video gaming and advertising industries, where he learned and applied behavioral strategies and techniques for influencing users.

Nir is an active investor, backing habit-forming products and startups. His most notable investments include Eventbrite, Kahoot!, Anchor.fm (acquired by Spotify), Canva, Refresh.io (acquired by LinkedIn), Product Hunt (acquired by Angelist), and Wise App, to name a few.

Check out Nir’s blog, nirandfar.com, about behavioral design–the intersection of psychology, technology, and business. We also recommend watching Nir’s 2015 Ted Institute talk about habit-forming technology.

What is Behavioral Design?

Nir Eyal’s Hooked Model is based on behavioral design–how to influence user behavior through product design.

Human beings are creatures of habit. If you can design a habit-forming product, you essentially have someone “hooked,” thus increasing usage, user engagement, customer life cycle, growth, and other crucial business metrics for long-term success.

The hooked model is one of the most effective behavioral design frameworks because it identifies patterns that keep users habitually engaged. Most importantly, Nir’s Hooked methodology aims to apply these methods ethically so that companies deliver habit-forming products customers love.

Here is more about the Hooked Model from the creator himself, Nir Eyal.

The Hooked Model

Before we take a look at Habit Testing, it’s important that we familiarize ourselves with the Hook Model–aka the Hooked Model.

As described in my book, the Hook Model is a four-step process businesses use to hook users and form new habits among them. The four parts of the model include trigger, action, investment, and variable reward.

Trigger

The trigger is the spark for a behavior that gets someone into a system. There are two types of triggers: 

  • External Triggers
  • Internal Triggers 

The external trigger alerts users with something like an email, link, or icon. Internal triggers happen within the system and are formed as users cycle through successive hooks while using the product.

Action

Action is the behavior taken when a user anticipates a reward–for instance, the action of clicking on an image on your Facebook feed. 

testing user behavior prototype interaction

When you click that image, you anticipate that you’ll be taken somewhere interesting, such as the latest listicle on Buzzfeed. This anticipation is essential to the model because it draws upon usability design to drive users to take action.

Variable Reward

The variable reward is the part of the model that allows you to create a craving in users. Rather than using a conventional feedback loop, you can serve a multitude of potential rewards to hold a user’s interest.

For example, Pinterest does this by showing you images that are relevant to your interests along with other things that might catch your eye.

Investment

The investment phase is the part where the user now has to do some work. Think of it as giving back to the product, which can take time, data, effort, social capital, or money. 

But this isn’t solely about swiping their credit cards. Investment is an action that will improve the product, such as inviting new people into the system, giving feedback on features, etc.

The Hook Model is a great way to start considering how you bring users into a system, hook them and keep them there through variable rewards and internal triggers. In the end, you’ll be able to build habits among your users that will have them coming back for more.

An Introduction to Habit Testing

Habit Testing fits perfectly into the Hook Model.

With Habit Testing, you’re better able to answer three vital questions:

  1. Who are your devotees?
  2. What part of your product forms habits?
  3. Why do those parts of your product form habits?
designops picking tools care

A prerequisite to Habit Testing is having some kind of product up and running. Of course, completing your business model hypotheses and exploring how your product will create user desire before launching a minimum viable product is a good idea.

Once you’ve released your site or app into the wild, you must start reviewing data. Don’t track everything: focus on when users interact with your website, including the path of their visit. 

Let’s go through the three steps of Habit Testing.

Step One – Identify

The first step is where we look at the first question of Habit Testing: “Who are the habitual users?”

Here are some tips for doing that:

  • Define the characteristics of a devoted user. Ask yourself how frequently someone should use the site, assuming that you will resolve most bugs and the product is nice and polished.
  • Be real with yourself. If you’re working on a social network app like Instagram, you’d expect habitual users to be on the app many times a day. But if you’re building a movie recommendation site, you might not expect people to visit more than three times per week. 
  • Crunch the numbers. Once you know how often someone should use your site, check the data to see how they stack up against expectations. Create a cohort analysis as a baseline for measuring upcoming iterations.

When defining the frequency of use, don’t be overly optimistic by thinking only of super users. Aim for a reasonable guess. For example, you could average the product use between yourself and your coworkers. 

search observe user centered

The more frequently someone uses a product, the more likely they’ll form a habit.

An excellent way to measure whether someone will actually use your product is to see whether your team is using it. Take, for example, Twitter. The social media giant was born within Odeo–the original company Biz Stone and Jack Dorsey founded. They knew they were on to something with Twitter because the engineers couldn’t stop playing with it.

In any case, you’ll hopefully have at least a few users who interact frequently enough with your product for you to call them devotees.

Editor’s note: To learn more about how to influence customer behavior with design, check out the free e-book Interaction Design Best Practices.

Step Two – Codify

The next step is to codify the steps devotees took using your product so you can understand what hooked them.

First, how do you know you have enough devotees? A safe guideline is roughly 5%.

Keep in mind, however, that your rate of active users will need to be much higher to sustain your business. If at least 5% don’t find your product useful, you have a problem. If you have that 5%, it’s time to find the Habit Path, a series of similar behaviors shared among your most loyal users.

Not every user will interact with your product in the same way. Each one will have a unique data fingerprint, which will reveal usage patterns that will help you discover the Habit Path.

Let’s go back to Twitter. The social media app discovered that once new users followed enough other members to odds of more people using their site increased.

Here’s how you determine which of the steps in the Habit Path were critical for creating devoted users:

  • Create a hypothesis. Where was the turn that turned passers-by into devotees? This hypothesis could feel like assuming causation from correlations–but it’s the best you’ll have in the murkiness of launching a new product. 
  • Talk to users: Learn how they use the product and why they use it. For instance, you can walk them through the actual steps that got them hooked.

Step 3 – Modify

Now that we have a hypothesis, it’s time to return to the build. We need to measure, learn and take new users down the Habit Path we’ve discovered.

For example, leveraging their Habit Path, Twitter’s onboarding process suggests accounts for new users to follow. You’ll want to do something similar once you’ve identified the path that turns onlookers into devoted users of your product.

Design Habit-Forming Products With UXPin

UXPin is a design tool that enables designers to prototype and test at higher fidelity with real-like functionality. Usability participants and stakeholders no longer have to “imagine” what a feature does with UXPin’s fully functioning interactive prototypes.

This higher fidelity and functionality means design teams get meaningful feedback and accurate results during testing with end-users. The limitations of a design tool no longer constrain designers. Instead, they can focus on building products and features customers will love.

Discover how code-based design can revolutionize your product development and deliver high-quality user experiences to your customers. Sign up for a free trial to explore UXPin’s advanced prototyping features.

Try UXPin for free

How to Use UXPin Merge Patterns? A Quick Tutorial

A product and its design system are ever-evolving projects. As the product scales, designers must create new UI patterns and components to meet business goals and user needs while solving usability challenges.

UXPin’s Patterns allow design teams to combine existing Merge components with standard UI elements to create new UI patterns and save them to a UXPin library.

Create a fully-integrated design system and deliver a single source of truth to your product development teams with UXPin Merge. Head over to our Merge page for more details and how to request access to this revolutionary code-based design technology.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

What is UXPin Merge, and how can it help you?

Merge allows you to import a component library‘s elements hosted in a Git repository, Storybook or npm package to UXPin’s design editor, so the entire team uses the same design system. Then, designers can use those elements and build prototypes that are fully consistent with end product.

uxpin merge component responsive 1

Traditionally, most design systems feature two UI libraries:

  1. Design teams use a static UI kit
  2. Engineers use a coded component library

Although many organizations claim this dual system is a single source of truth, achieving it takes a lot of time and resources.

UXPin Merge is genuinely a single source of truth because there is only one component library. Designers and engineers use the same UI elements and patterns from the same repository.

You can sync React components using Merge for Git or UXPin’s Storybook Integration for other popular front-end technologies like Vue, Ember, Web Components, Angular, and more.

Designers can also import the npm packages of open-source component libraries like MUI, Bootstrap, Ant Design, Lightning, etc., through Merge’s npmIntegration to build fully-functioning prototypes or a minimum viable product (MVP).

What is the UXPin Patterns?

Patterns is a Merge-exclusive feature enabling design teams to combine Merge components and standard UXPin UI elements to build more complex UI patterns.

In the context of Brad Frost’s Atomic Design, Patterns allows designers to take atoms and molecules (foundational UI elements and components) to build larger, more complex designs like organisms and templates (cards, forms, navigation, headers, footers, etc.)

design system atomic library components

Some of the most common use cases for UXPin Patterns include:

  • Creating advanced components not available in your current library
  • Save properties for your most commonly used component variants
  • Grouping and saving Merge elements into bigger UI patterns
  • Sharing new UI patterns with design teams to enhance consistency
  • Promoting new patterns for engineers to add to the component library

Designers can combine UI elements from multiple component libraries or UXPin Classic components to create new patterns. This flexibility is beneficial if your design system doesn’t have the parts required for a new UI pattern.

For example, let’s say you want to build a header navigation with dropdown menus, but your current design system doesn’t have them. You can use UXPin’s npm Integration to import a dropdown menu from MUI (or another open-source library) and use it to build the new navigational pattern. Engineers can read MUI’s docs and view the JSX code to understand how to code your new pattern and add it to the design system.

3 Benefits of UXPin Patterns

Patterns offer three primary benefits to product development and design system teams. The common thread among these three benefits is that Patterns provides a comparable alternative when your Merge repository doesn’t have what you need. 

1. Nesting UI Elements to Build Complex Components

Even with a comprehensive design system, designers often have to create new components and patterns as the product evolves. Often, these patterns don’t exist in the design system, so designers must build them from scratch every time.

Designing from scratch can add valuable time to your project, especially if you’re building something like a graph or data table. Instead, you can create these complex patterns once and save them to your UXPin Pattern library. You can also share these with other designers so teams aren’t doing duplicate work or creating inconsistencies.

While many design tools offer this functionality, none allow you to manipulate and combine code components. With Patterns, designers take on a hybrid designer/engineer role capable of building fully functioning, complex UIs without writing a single line of code.

2. Reusing Properties for the Same Component

Even though Merge allows designers to build prototypes significantly faster than image-based design tools, there’s always room to create greater efficiency.

For example, you might want to save patterns for various Merge form input or button states, like default, error, warning, and success. With Patterns, you can set these up once and save them to your pattern library, ready to drag and drop for the next user interface.

design system library components 1

These pre-built patterns are especially useful for design sprints or making quick changes during stakeholder meetings and user testing. Instead of fiddling with properties in UXPin’s Properties Panel, you simply drag the desired pattern onto the canvas, ready to go!

3. Promoting & Testing new Design System UI Elements

New UI elements don’t magically appear in your design system. The DS team must build and test these patterns before release. With UXPin Patterns, the DS team can combine existing components with UXPin Classic or open-source libraries to test and iterate at higher fidelity and functionality.

Component-driven prototyping with UXPin Merge and Patterns allows designers to test and iterate with less input from engineers, who are free to focus on developing the final component and working through any design system technical backlogs.

collaboration team prototyping

With Patterns, design teams don’t have to wait for engineers to develop the new component. They can use the prototype pattern created by the DS team to continue the design and testing process without compromising fidelity and functionality.

UXPin Patterns is a fantastic tool for creating one-off or rarely-used UI components. These patterns aren’t used enough for promotion to the design system, but design teams still need access to them.

Storing these in your UXPin Patterns Library provides the benefits of fully functional Merge components without adding them to the design system’s repository. Engineers can store the component in a separate repository and use it when needed.

How to use UXPin Merge Patterns?

This quick demo shows how easy it is to create a new Merge Pattern in UXPin. We’re using the same components we imported for our MUI npm Tutorial, which you can check out here.

The pattern below features three MUI components imported using Merge’s npm Integration and two UXPin Classic text elements–not going to win any design awards, we know!

But even a simple pattern like this takes some setting up, so it would be nice to eliminate that repetitive task by creating a reusable pattern.

Step 1

Add and arrange the components you want for your pattern. Remember, you can combine multiple component libraries and UXPin Classic elements.

Step 2

Set the properties for the Merge components. 

  • We’ve created an email input field with a placeholder and some help text for accessibility. We’ve also made this field required so users know they must complete it.
  • Next, we’ve added an MUI checkbox that users must check to accept marketing from us.
  • Lastly, we’ve chosen an MUI button and set it to primary so it’s obvious where users must click once they complete the email field and checkbox.

Here is an example of the email component’s Properties Panel.

Step 3

Switch to the Patterns tab on the left sidebar above your component library.

Step 4

Select the group of UI elements or a single component you want to save as a pattern. Click the large white + Add button in the left sidebar, and your new pattern will appear.

Step 5

Click on the pattern’s name to change it to something more descriptive or to align with your design system’s naming convention. Once you have multiple patterns, you can use UXPin’s search feature to filter what you need.

Deleting a Pattern

You can also delete any old patterns by clicking the pencil icon (“Enter edit mode”) below.

Select the patterns you want to remove and click Delete.

Creating Different States

Now that we have a default pattern, we might want to create additional states to optimize our workflow further.

For example, we can set up an error state pattern triggered when the user doesn’t enter an email address.

We could also create a disabled state for the button that’s only active once the user enters a valid email address and checks the marketing terms.

Now we have three newsletter patterns ready to start prototyping. Designers can drag and drop to make quick changes without worrying about setting properties or switching individual components from the pattern.

Ready to streamline your workflows with UXPin Merge and Patterns? Request access to Merge and let’s get going.

Discover Merge

UX Business Case – How to Build a Strong Case for Investing in Design

business case ux

With limited resources and competition from other departments, creating a compelling business case for UI/UX design initiatives is crucial to secure buy-in. You must prove you have the best solution and can execute your initiative successfully.

This article discusses how user experience design professionals can create a convincing UX business case, including an example from the UAE-based home delivery service, Delivery Hero.

Use UXPin to create a fully functioning prototype to support your business case. Stakeholders and usability participants can engage with prototypes like they would the final digital product. Sign up for a free trial to discover how code-based design can revolutionize your UX workflows and usability testing to improve product development.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a Business Case?

A business case outlines the benefits of a project, initiative, or strategy and why the company or department needs it. A UX business case relates specifically to design-related projects–for example, building a design system, purchasing a design tool, or investing in a big UX research project.

scaling process up 1

Through a business case, the UX team must:

  • Demonstrate a need (or problem) for the expense(s)
  • Offer a design solution

The solution is often more effective when paired with a value proposition. How will this project deliver an ROI for design and the organization?

Why do you need a Business Case for UX?

Getting buy-in from stakeholders can be challenging, particularly for UX projects. Many non-designers don’t understand user-centered design principles or design thinking and are reluctant to make design investments.

Your UX business case must show stakeholders how improving a product’s customer experience is good for the bottom line. For example, a design system is a significant investment. Stakeholders often can’t see how a library of reusable components will deliver business value, so designers must demonstrate this value through a business case.

Delivery Hero’s Business Case Value Proposition

Delivery Hero is an excellent example of using a value proposition in a business case for a design system. After several attempts at pitching their design system to stakeholders, Delivery Hero’s product design team realized they had to make a more convincing case, including a real-world case study and value proposition.

Delivery Hero’s product design team used a single screen to compare building a user interface with and without a design system. The results were staggering:

  • Building without a design system – total time: 7.5 hours
  • Building as a reusable component – total time: 3.25 hours

The experiment demonstrated a 57% time reduction in front-end effort and zero percent front-end debt with a reusable component.

Front-end debt had become a compounding issue for Delivery Hero, so eliminating this problem and reducing delivery time by almost 60% demonstrated a significant return on investment for stakeholders.

Delivery Hero’s stakeholders were impressed with the results and gave the go-ahead for the company’s design system, Marshmallow–read more about Delivery Hero’s story here.

What should you include in a UX Business Case?

Now that you understand a business case’s purpose and importance let’s explore the points to include. 

  • Executive Summary
  • Mission Statement
  • Market
  • Problem Statement
  • Proposed Solution & Value Proposition
  • Risks
  • Roadmap
  • Required Resources
  • Team

It’s important to note that you won’t always use all these points, only those relevant to your business case and project. The goal is to keep your business case thorough but concise. If stakeholders want to see the research, you can present that separately.

task documentation data

Executive Summary

An executive summary summarizes your business case and its sections. Essential elements to include in a business case executive summary are:

  • The problem
  • Your solution

Mission Statement

The mission statement summarizes the project’s purpose and goal. It’s usually a few sentences and can appear on the same slide as your executive summary. The mission statement guides the design process while uniting team members and stakeholders on a common idea and purpose.

Check out ProjectManager’s article, “How to Write a Mission Statement.”

The Market (or Users)

If your UX business case is for an internal initiative, you can replace this section with The Users and identify who your project aims to serve. For example, a design system helps product, UX, and engineering teams, but it also positively impacts end-users. You can represent your end-users with personas so stakeholders can empathize with real people.

Problem Statement

Your problem statement outlines a key issue, who it impacts, and its effect on the business. Laura van Doore, a Design Manager at Atlassian, says, “there are two parts to executing a good problem statement.”

Problem Selection: 

“Select and emphasize problems that will appeal to your audience.” 

When pitching to stakeholders, demonstrate how the problem impacts the business, rather than only focusing on the design team. 

In Delivery Hero’s case, the product team showed that their current project workflow accumulated front-end debt, inconsistencies, and slow time-to-market, ultimately costing the business time and resources.

If you’re presenting a problem that directly impacts users, you may want to include UX artifacts like a customer journey, user research, and other UX insights to give stakeholders a clear understanding of the issue.

Framing the Problem:

Laura’s next step is to frame the problem around your target audience:

  • Identify the core problem
  • Outline who the problem impacts and how
  • Describe the adverse effects on your audience and the business

Proposed Solution & Value Proposition

Describe how your solution solves the company’s problem and its value proposition. The value proposition is critical for your business case. It describes the value and return on investment (ROI).

Stakeholders are less concerned about solving workflow issues than business-related impacts. How does your solution deliver an ROI?

designops picking tools care

Amber Jabeen from Delivery Hero’s design system team says your solution must use business metrics and KPIs to describe the positive benefits for the organization. How will you reduce costs, increase revenue, improve time-to-market, or make the product more competitive?

Risks

A thorough business case also considers the risks and how you plan to tackle them. Stakeholders like to see that you’ve looked at your solution from multiple angles and prepared for potential issues.

In her article, Laura van Doore from Atlassian says, “Be realistic, rather than utopian…If you sell the dream too much and present a utopian story of success-only, your case will seem too biased and might get chucked to the bottom of the pile.”

Roadmap

Another critical element to your business case is a timeline or roadmap. How long will it take to deliver the project, and when can the company expect to see the value you outline in your solution. What are your KPIs so stakeholders can monitor progress?

Again, it’s important to use relevant business metrics. For example, when discussing human resources, estimate the total hours per department, i.e., design, product, engineering, etc. This breakdown allows stakeholders to see how the project affects the company’s human resources and other projects.

Required Resources

What resources will your project need?–human, financial, technical, design, etc. If possible, include multiple scenarios to give stakeholders options based on available resources.

lo fi pencil

Think about what resources you’ll need before, during, and after the project delivery. For example, a design system requires a design audit before you start, people to build and deliver it, and a team to manage and scale it. As a design system matures, it requires more resources.

Team

Describe your core team behind the business case and the people you’ll need to deliver and scale the project, most notably:

  • UX Designers
  • Engineers
  • Product managers
  • Analysts
  • Stakeholders

Best Practices for a Strong UX Business Case

We’ve borrowed some of these best practices from our May 2022 webinar, Enterprise Design System – How to Build and Scale, with Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat).

1. Start with a real pain point

Your business case must include a pain point that adversely impacts the product, its users, and the business. Stakeholders are less likely to take action if you only show how a problem affects team members. 

Suppose you can prove that problem creates rework (extra cost), usability issues (losing users and producing costly support tickets), technical debt (extra cost), and slow time-to-market (less competitive and revenue loss). In that case, you have a real pain point to grab stakeholders’ attention.

2. Build a value proposition

Build a value proposition around your pain point. Your solution must solve the issue and deliver a return on investment. Remember to be realistic and show stakeholders you have weighed the risks.

3. Identify your biggest supporters and sponsor

Finding leaders and stakeholders outside of UX to support your business case will give it more weight. They will advocate that:

  1. The problem you identify is real.
  2. Your solution and value proposition are the best option.

Include these advocates in your business case and possibly a quote from your most influential stakeholder.

4. Show before you tell

People outside of UX have trouble understanding user experience and design thinking principles. Explaining the problem isn’t enough; you must show them what’s wrong and how it impacts the business. App prototyping tools and interactive mockups are powerful ways to demonstrate potential solutions visually.

prototyping paper pencil lo fi

As we saw from Delivery Hero, Amber’s team presented an experiment showing the inefficiencies and problems costing the company time and money. They proved their solution could solve the problem and deliver value to the organization.

If you present a theory to stakeholders, they’ll send you back for proof. Take the time to conduct tests and experiments to prove you can execute your solution, and it works!

5. Talk business metrics

Your problem and solution must include numbers to support your business case. Stakeholders want to see metrics and KPIs to assess:

  • The state and scale of the issue
  • How your solution improves these numbers

6. Don’t go alone – build your network

Talk to cross-functional team members, leaders, managers, and everyone impacted by the problem to get their support and buy-in for your solution before presenting a business case to stakeholders. When you have the organization behind your project, it’s more likely to get approval from decision-makers.

Support Your Business Case With a UXPin Prototype

UXPin’s code-based design tool allows designers to build fully functioning prototypes with code-like fidelity and functionality. Instead of imagining how a feature will work, UX designers can accurately replicate the final product experience–creating a more convincing business case for stakeholders.

Sign up for a free trial to build better quality prototypes for stakeholders and user testing.

Try UXPin for free

How to Choose the Right Mobile App Design Software?

How to choose the right mobile app design software

App design tools help craft smoother design processes – breathing life into concepts and bringing teams closer together. 

However, mobile app development processes are often fraught with frustrations. Especially at the design handoff stage, which can derail the entire project through an endless volley of back-and-forths. 

If you’re struggling to foster cross-departmental collaboration, if your user interface designs aren’t coming out like the prototyping tool promised, or the workflow feels inefficient, then looking for a better alternative to your current mobile app design tool is a must. 

But what key features should you look for when choosing your app design software? Let’s see what are your options if you want to build a prototype of your next mobile app, gather feedback, and pass your product design to developers for their app building process.

Table of contents

App Design Software – 7 Must-Have Features

1. Creating lifelike, interactive prototypes

Any app design software needs to let you build prototypes for various stages of your design process. You may want the start with creating wireframes – basic, non-functional templates used to communicate a broad outline of your UI design, so this is the feature you may focus on.

But you’ll also need to design fully functional mock-ups that look, work, and feel exactly like the finished mobile application. These are essential when conducting user testing and gathering feedback (which helps to make your app user-friendly.)

A top app design tool like UXPin makes it simple to innovate designs at every stageof a mobile app design. 

UXPin will let you build an interactive prototype that’s high-fidelity by default. By setting up custom triggers and conditional interactions, which only activate after a user performs a specific set of actions, you can effectively breathe life into previously non-interactive prototypes – whether it’s a simple click-through or advanced animations. 

The app design software makes it really simple to create more than one default state for these elements. You can create a single button with default behavior depending on a user’s action. To help tailor the experience further, variables offer a way to store inputs and take actions based on that data.

Ideally, you want your prototypes to mirror the final product as closely as possible. It’s vital, getting buy-in from stakeholders in the company, gathering user feedback, keeping everyone working on the project on track, and nailing that awesome vision for eCommerce store, Android application, or an Apple plugin. 

But one of the biggest obstacles to keeping that vision ‘pure’ is the back-and-forth between design and development. An exasperated ‘I want it to X’ met with an equally exasperated ‘It doesn’t work like that, the transitions are completely off.’ 

That’s why you need a design tool that doesn’t have a huge learning curve for your developers to get it. Tools like UXPin has a Spec mode in which your engineers can inspect the design, be it for a web app or mobile one, and clearly see what should be built and how it should behave before they start implementing the prototype in their development platform.

2. Easy design handoffs

Design handoffs are a tricky part of the process. Design proudly hands over their brilliant ideas – only to be met with stone-code reality. Bottlenecks are pretty common, irritations become frustrations, projects feel like they grind to a halt as the teams go back and forth with fresh ideas to make it all work as imagined. 

Any UX app design tool worth its weight in gold needs to make these handoffs smoother. For the good of the design process and everyone involved in it.

team collaboration talk communication ideas messsages

Because UXPin is a high-fidelity app design tool, developers will be immediately familiar with the components laid out by designers (and design projects automatically generate CSS details for devs). Just to keep everyone on the same path, all project-specific specs and documentation are a few clicks away.

The result is a smoother design handoff. Designers know what’s possible and developers know how it all works. Some designers are using Zeplin or Marvel to pass on their designs from Figma or Proto.io to developers, but with UXPin you can design interactive prototypes of MacOs, Android or web apps, and hand them over to developers without switching to another tool.

Other people skip prototyping phase and they go straight to no-code app builders like Adalo. It’s okay to use them when you’re a beginner who learns their craft or if you are making an MVP, yet complex, comercial apps may find no-code solutions hinder their ability to scale.

3. Designed for fast iterations

A robust design process goes big on iterations. They’re a snapshot of the project at various stages. Instead of sharing an actual work in progress, you can link to previous iterations to help you assess design ideas (and assumptions, thoughts, and hunches). 

Ideally, your mobile app design tool needs to be able to quickly create iterations of a project – and just as quickly let you pull up an older iteration if user testing reveals a flaw in the latest design. In UXPin, you’re easily able to grab past iterations. 

UXPin Merge extends that level of control to all your different versions. At best, using different design system versions for different prototypes can be frustrating. At worst, they can derail the workflow. UXPin Merge makes it quick and easy to manage and move between each project’s library.

4. Ability to manage the design system within your app design tool

A design system is a set of standards and standard components used by everyone on the project to design and develop a product. Think of it as a bible for your mobile app design that says, ‘This is the way.’ 

Teams that build without a design system in place don’t just risk the odd bit of inconsistency for users looking for intuitive, frictionless experiences. They risk hitting the brakes on the design process, as time and resources are thrown away creating and recreating components. 

When you’re looking for the best app design tool, Design System management is a necessity.

uxpin design system components states icons 2

In UXPin, the Design System lets you create and maintain a comprehensive library of interactive components to ensure consistency from design to development and beyond.

Your Design System is a way of ensuring consistency across your brand with a clear style guide, component library and what not that set you apart from the competition. If you want a tutorial on building a design system, go to our open web eBook where we outline the steps of creating a design system.

5. Using real data inside the project

Prototypes don’t always need to feel like prototypes. When they’re two steps up from a sketch on a napkin, that’s fine. However, as your project begins to take form, you’ll want to start populating the prototypes with real-life data that replicates what users might actually see, like names, cities, and text, and images.

That doesn’t have to mean hours spent downloading stock images and copy-pasting lorem ipsum. UXPin lets you insert and sync real data into prototypes, giving designs a detailed polish. Teams can see how the finished article should look. 

But a bigger benefit comes during user testing. If your app design tool can more accurately recreate the real-life UX design, then user feedback becomes much more valuable and actionable (and they won’t be distracted by immersion-breaking walls of lorem ipsum). 

6. Advanced collaboration features

Collaboration is the backbone of the creative industry. You only have to look at how a vague but genius flash of inspiration in one mind grows into a fully realized app to see that. And with the rise in hybrid working, choosing a mobile app design tool means choosing advanced collaboration features that bring teams together, remotely and in real-time. 

design and development collaboration process product communication

UXPin makes live collaboration as easy as possible. With Slack and Jira integration, in a few clicks you can transform communications and project management, and improve visibility over any design edits made by team members.

Whether you’re working in real-time on a design, sharing project status with the team via email or Slack, or waiting for stakeholder approval, UXPin’s collaboration tools keep colleagues on the same page.

7. Sharing your designs with the team

Sharing isn’t just caring. It plays a strategic and tactical role in successful collaboration. Designers bounce ideas around with each other. When the thoughts start flowing, it can be hard to keep track of all the brilliant concepts. It means the right mobile app design tool needs to be equipped with friction-free sharing options to effortlessly communicate ideas that might make the design an even bigger success.

Let’s start with the basics. UXPin supports the popular PDF, PNG, and HTML exports – so as long as your colleague can turn on a computer, they can probably view your designs.

The UXPin Mirror app, meanwhile, lets authorized users live-preview prototypes on mobile devices. It’s a great way to see how your app looks and feels, with edits updated in real-time to make before-and-after comparisons a breeze. 

These app design tools make it easier to collect feedback from the rest of your team to refine a product into its best possible iteration.

High-fidelity Prototyping with UXPin

Not all app design tools are equal, though. And not every tool packs features that seamlessly drive you from initial idea to final iteration. It’s critical to assess where your current processes are lacking and how a tool like UXPin can improve them. This can be done through real-time collaboration and smooth design handoff that let design and development teams work seamlessly.

Try UXPin for free

8 App Design Trends for 2022 & Beyond

Top app design trends for 2022 beyond

If you’re just about to launch an app (or update your existing one), then it’s essential to be aware of the latest app design trends. Here is a list of the top eight evolvements that you should be aware of in the coming years.

1. No password login

Simplicity has always been critical to app design. Great designers build innovations that draw the eye. The details easily parsed by the user – without them even needing to think about it – create a seamless, free-flowing user experience. 

And nothing is simpler than ‘nothing’. 

That’s why no password logins are one of the latest user experience app design trends to consider. No forgetting passwords. No resetting passwords. No trial and error as users guess their way through or rely on password managers. 

Facial recognition is one option, if you want passwordless solutions in your app. Apple’s FaceID and Windows Hello for Android have familiarized users with simply looking at the camera to unlock the system, so you’re building on existing foundations. 

Fingerprint sensors are already in place on most modern phones. In the smartphones’ sphere, most banking apps already feature this because a fingerprint is a lot less guessable than a password you can write down. 

Voice recognition, popularized by Alexa and Google Home, offers another login method. Still, it’s worth considering whether, in a world where most phones are switched to silent or vibrate, your users will be comfortable using this outside the house.

So long as you offer the traditional alternative (it’s also a good backup when you’re not looking your best), ease the user journey with no password logins. 

2. Designing for inclusivity

Everyone’s using mobile devices these days. Phones and tablets aren’t just for youngsters, oldsters, and the somewhere-in-between stars. 

Kids today learn how to crack find videos on YouTube before they learn the alphabet. Elderly users have grown up during the technological revolution of the last thirty years. Folks with physical and mental disabilities rely on phones and tablets to keep them connected. 

user choose statistics group

That informs one of 2022’s biggest trends in app development: inclusivity. 

Your mobile app design needs to consider everyone who’s using your app. Accessibility is key to creating experiences that are appealing to everyone and usable by anyone. After all, it makes no sense to cut off potential audiences when you can be inclusive of all. 

There are tons of ways to create an inclusive experience and earn points for UX design trends. 

You might want to make tappable buttons big and bold – helping those with visual impairments or younger children. Or bump up the font size, adjust typography and add alt text to imagery, for the benefit of those using screen readers. Popping subtitles on videos is one of the most common ways to increase accessibility for those that need it (and those that just like to watch videos without the sound up). Adding a colorblind mode for those that need it. Really simple solutions that open up your app to a broader user base. 

Want to make sure you’re creating accessible, inclusive designs? Use a tool like UXPin, which offers a whole range of accessibility features like a color blind simulator and a contrast checking feature, so you can be confident you’re building app experiences that work for everybody. 

3. The use of augmented reality

Everyone’s talking about the metaverse. Augmented reality is a step towards that future – where the digital and the real are indistinguishable. 

AR is one of several app design trends that takes advantage of device features to create a more interactive experience, inserting itself into a user’s life in fresh, new ways (so, users aren’t just mindlessly scrolling as they stare at the screen). 

Let’s say you’ve developed an app to increase geography knowledge among students. The easiest angle would be a series of Wiki-style pages, maybe a quiz or three. But imagine if users could scan a code and view a virtual globe right on their mobile’s screen. And as they dive in for a closer look at the world, the app displayed location-based information, supplemented by artificial intelligence. 

That’s a lot more powerful than boring walls of text and a library of videos and images. 

That’s essential to the user and your goals. 

Smaller design teams may find AR a bit tricky to implement. It’s a pretty technical undertaking, after all. But if you have the power already, you’re ready for the challenge, or you’re ok with outsourcing, augmented reality implementation will put you in a strong position in the years ahead. For teams looking to build and launch custom apps without extensive coding resources, Adalo is a no-code app builder that pairs AI-powered generation with a visual canvas, making it easier for entrepreneurs and business teams to design and publish database-driven apps to the Apple App Store, Google Play Store, and web. 

4. Incorporating gaming in app design

Gaming is big business. Globally, the industry is worth more than $138bn – putting it well above the value of even the biggest Hollywood blockbuster machine. Everyone’s got a phone in their pocket, a console under their TV. Gaming, in other words, is accessible in unimaginable ways. 

testing user behavior prototype interaction

But there’s another good reason gaming is one of the major trends in app design in 2022: interactivity. 

Just like augmented reality, whether it’s the principal reason to download your app or an optional extra that keeps users coming back, gaming creates an entertaining space for users. It’s not just screen-based dialogue. 

Similarly, many online reading classes utilize these interactive milestones and reward systems to keep young students motivated throughout their learning journey.

Duolingo is a great example of adding a gaming aspect to an app. Rather than mimicking fusty old textbooks and hard-to-follow listening and translating tests, it makes learning a new language fun. It adds novel ways to challenge users. As a user progresses, they unlock new levels, new challenges to prove themselves. Just like in gaming. 

5. Multidirectional navigation

Up and down is so last year, right?

Ok, not really. It’s an integral part of the mobile experience. But multidirectional navigation is a mobile app design that means you don’t have to limit yourself to traditional scrolling. 

By introducing horizontal as well as vertical sliders, users can scroll and swipe their way around your app in a way that’s intuitive and interactive. It’s fulfilling in a way that simple, overly familiar vertical navigation in web design isn’t. 

Multidirectional navigation is a core function in multimedia apps – swipe to see the next radio station, music artist, or video. And social media dating apps are famous for it. ‘Swipe right’ and ‘swipe left’ have already entered popular parlance. No wonder it’s become one of the latest UX design trends to watch out for. 

6. Putting illustrations at the forefront

Nothing says ‘phony’ faster than a stock image. Our eyes glaze over. Our trust-o-meter starts to ping. 

So, expect to see illustrations take center-stage over the coming months. Drawings help build and humanize your brand. 

Visuals are important in mobile app design – your testing has probably already shown that users respond better to human faces than inanimate objects, for instance. Illustrations act to signal to users what you’re about, what they need to do, displaying information in a way that, and, in many cases, it’s unique to you and enticing to your target audience.

color id brand design

They also help make otherwise unengaging screens, data visualization, and graphs look more approachable. 

Let’s go back to the geography app we’ve mentioned above. A wall of text about the capital city of Canada isn’t going to entice anyone half as much as a series of screens broken up into bite-sized paragraphs and complemented with ‘home-grown’ illustrations. 

By putting illustrations to the forefront of your app design, you can effortlessly (and instantly) create a warm, comfortable environment for the user.

All in all, don’t underestimate the power of graphic design, as illustrations are one of the leading UI design trends.

Dark mode has been an unbeatable trends in the recent years. An evergreen in the world of app design trends. It’s been around for ages, and it’s just as relevant now as it’s always been. A simple toggle switch and a ‘negative effect’ that makes navigation easier on the eye, especially at night. 

Yet, despite its intense popularity among users, there are some brands that still haven’t incorporated dark themes into their desktop and mobile applications. So, for many businesses, it’s a chance to attract users’ attention. To offer something that’s intensely popular among users before anyone else does. 

Better still, it’s a chance to. After all, the user experience is critical to successful mobile app design. Dark mode eases eye strain (and can also look really cool), meaning users are comfortable using your app any time of day without getting blasted by rays of white light. 

If you want to get super-technical, you could also offer a dark mode schedule. This would let the mode kick in during certain hours of the day (or, more appropriately, night). 

8. Transparent elements

You may have already heard of transparent elements when it comes to the latest app design trends. It’s sometimes known as glassmorphism. And it’s a way to create a lightweight aesthetic by letting on-screen elements ‘float’ on the screen. 

The main design characteristics of glassmorphism are:

  • Layering, placing one element over another rather than directing users to a new screen
  • Transparency – particularly the ‘frosted glass’ effect that overlays an element in the foreground while blurring out the background
  • Stand-out colors to help users differentiate actionable elements
  • Borders around the transparent element, again to help users understand the limits of the transparent element.

To create a great glassmorphism user interface, you need to consider the background as much as the foreground. For example, a really bright, vivid background without too much detail highlights the tonally different transparent foreground, making it simple, visible, and super-clear to direct users to their next action in the app. 

Which Trend Are You Going to Follow?

User Experience and User Interface Design are all about the user. They always were. Always will be. 

Little wonder, then, that the biggest trends in app design continue to be focused around how to create simple experiences for users that ‘just work’, exactly as they should, and exactly how they want. 

Successful mobile app designs can attract and retain users. You don’t want to expend resources on capturing an audience, only to have them uninstall it because they can’t find their way around the app, or because the experience itself is flawed. 

Because, when competition in the mobile app space is so high, companies can’t afford not to follow the trends. The best app experiences are those that users don’t even need to think about. That meet their needs before they even know they need them. And create a comfortable on-screen environment that keeps them coming back for more.

It’s time to put this knowledge into practice. Design user-friendly, highly realistic prototypes in our design tool, UXPin. Learn more about it.

Try UXPin for free

How to Import Ant Design to UXPin? An npm Integration Guide

Ant Design NPM Integration

Component-driven prototyping significantly improves user testing while providing stakeholders with realistic product design expectations. UXPin’s npm integration enables design teams to use open-source component libraries to design fully functioning, high-fidelity prototypes.

Get on board the code-based design revolution with UXPin’s Merge technology and npm Integration. Discover more about component-driven prototyping that maximizes the use of design systems, improves design handoffs, and scales design significantly.

Bring UI components via Git repo, Storybook, or through our newest npm integration. Learn more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

What is UXPin Merge?

UXPin Merge is a code-based technology allowing you to sync a component library hosted in a repository, Storybook or as an npm package to UXPin’s design editor. Designers can use these UI components to build prototypes that look and function like the final product.

Any changes engineers (or the design system team) make to functional components in the repository automatically sync to UXPin, notifying design teams of the update. Merge includes version control, allowing team members to switch to an older design system version if needed.

This single source of truth enhances collaboration while reducing the burden on DesignOps and the DS team to manage two design systems–one for design tools and the other for code.

What is UXPin’s npm Integration?

merge component manager npm packages import library

UXPin Merge required engineering expertise to set everything up until now. Not every team has valuable engineering resources for the setup, so we came up with a way of integrating npm components to UXPin.

Merge’s npm Integration gives designers complete control over installing and managing open-source component libraries available as npm packages. Designers can import and customize components to meet their prototyping needs using an intuitive interface. It requires zero coding skills to set everything up.

If you want to learn about npm for designer, read our introductory guide: What is npm package?

The Benefits of Working With Ant Design

Ant Design is the product of the Ant Group–a Chinese-based conglomerate of several tech/finance organizations, including Alipay, Huabei, and Yu’ebao, to name a few.

ant design

Organizations have used Ant Design to build a multitude of applications, including B2B, B2C, and enterprise products. The comprehensive design system includes React, Angular, and Vue component libraries, with a complementary icon set. You also get Ant Design Mobile for building native applications. For teams managing complex data integrations across these enterprise applications, Integrate.io provides a fixed-price, low-code data integration platform that can connect your design infrastructure with backend systems, databases, and data warehouses.

Ant Design npm Integration With UXPin Merge

Ant Design’s React component library is available as an npm package (antd). Designers can import Ant React components using UXPin’s npm Integration and customize properties in the Merge Component Manager.

logo uxpin merge npm packages

If design teams want to use Ant Design with other design tools, they must use one of Ant Design’s static vector-based UI kits, but with UXPin’s npm Integration, designers have access to the same components engineers use.

Component-driven prototyping with Ant Design creates a single source of truth between designers and engineers while ensuring the highest consistency between UX and product teams.

With UXPin’s npm Integration, you can choose which Ant Design React props you want to import–color, size, icons, states, etc.

Assigning Properties in Merge Component Manager

Our npm Integration includes Merge Component Manager–your central control for importing and managing each Ant Design’s component properties.

UXPin’s npm Integration works with React components, so you can follow Ant Design’s React documentation to reference which props you want to import. Once you set these up in Merge Component Manager, the component’s properties appear in UXPin’s Properties Panel.

For example, there are six types or variants of an Ant Design button:

  • Primary
  • Ghost
  • Dashed
  • Link
  • Text
  • Default

These button types (and all other properties) appear as a dropdown in the Properties Panel for designers to choose. Props can appear as text fields, checkboxes, code editors, etc., depending on the component.

Connecting UXPin to the Ant Design npm Package

Navigate to your UXPin dashboard and click “New Project.”

Name your project and click “Create New Project.”

Click “New prototype” to open the project in UXPin’s design canvas.

Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click “New library.”

Your sidebar and available libraries may differ from the example.

Select “Import React Components” and click “Next.”

import npm package

Name your library. This name is purely for your reference and won’t impact the import.

You also need to grab the npm package repository name, which you find under Install on Ant Design’s npm page. Copy and paste the Install contents from npm into the “Library package name” field (delete everything preceding antd).

To import component styling properties, Merge requires the path to Ant Design’s CSS (antd/dist/antd.css). You can find this under Usage in Ant Design’s React installation instructions.

Importing Ant Design Components

UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it’s time to select the Ant Design components you want to import.

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Click “Add new component.”

Enter the name of the component you want to import.

You’ll find the correct naming convention in the Ant Design docs under Component API. Ant Design’s components use CamelCase with no spaces. Always capitalize the first letter. For example, Date Picker would be DatePicker.

For this tutorial, we will import an Ant Design Button as our first component and add it to a new category called General. We recommend using the same categories as Ant Design’s docs, so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute or two.

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (General) and your first component (Button) in the left sidebar.

Click on the Button to begin adding properties. You can find these React props in Ant Design’s documentation under API in Components > General > Button.

Adding Component Properties with Merge Component Manager

Let’s add a few Ant Design button properties using the React props from the documentation.

The React button type prop imports the six Ant Design button styles.

  • Property name: enter “type” (always use lowercase for props)
  • Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Type” to keep things uniform
  • Description: Add a short description or instructions for designers–we’ve used “Type of button”
  • Property type: “enum”–allows you to create a dropdown display the six styles
  • Property control: “select”
  • Options: Add the options from Ant Design’s API docs–primary, ghost, dashed, link, text, default
  • Default value: Your preference–we’ve gone with “default” as per Ant Design’s docs

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

Once you have completed all the fields, click “Add property.”

Then “Save changes.”

Lastly, “Publish library changes.”

Component-Driven Prototyping in UXPin

Once you import the Ant Design components and properties you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three Ant Design components in less than a minute.

When you select an Ant Design component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Try building an Ant Design prototype with UXPin’s npm integration. Discover how component-driven prototyping can revolutionize your product development workflows to deliver better user experiences to your customers. Learn more about UXPin Merge.

Try npm integration

Checklist to Track DesignOps Maturity

Checklist to Track DesignOps Maturity

Maturing and scaling DesignOps is crucial for long-term success. But where do you start, what do you track, and how do you measure the right metrics?

We took inspiration from the NN Group’s DesignOps Framework and questions from our UXPin Community to create a checklist template DesignOps practitioners can use to track and measure maturity.

Sync your component library to UXPin’s editor to create a single source of truth and increase adoption with UXPin Merge. Check out Git for React libraries or our Storybook integration for other popular front-end frameworks. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Using Metrics to Track DesignOps

Without tracking DesignOps efforts, it’s impossible to know whether changes are successful or the organization’s maturity level. These metrics are also crucial for reporting success to stakeholders, getting buy-in, and scaling Ops.

Picking the Right Metric

Our December 2021 webinar with Patrizia Bertini looked at the ROI of DesignOps and picking the right metric. Patrizia framed DesignOps metrics in two categories, efficacy vs. efficiency.

  • Efficacy is about behavior and doing the right things. It can be subjective and challenging to measure.
  • Efficiency is measurable and quantifiable using numbers, percentages, and ratios.

Stakeholders like seeing efficiencies because it clearly shows cause and effect. But efficacy is just as significant because behavioral and subjective improvements help to increase efficiencies, thus helping to scale and mature DesignOps.

Watch the webinar again on our YouTube channel and learn how Patrizia approaches efficacy and efficiency. Subscribe for upcoming webinars on DesignOps, design leadership, and design systems.

Using a DesignOps Framework as a “Maturity Checklist”

The NN Group’s DesignOps framework is an excellent template for understanding the “DesignOps landscape.” DesignOps leaders can use this framework as a checklist for tracking maturity and identifying areas for improvement.

A 2020 survey of 557 design and UX practitioners from the NN Group found that DesignOps was “low in most organizations.”

The survey reported that “organizations only did 22% of recommended DesignOps efforts, did not have DesignOps-dedicated roles, and had low DesignOps maturity overall.”

Using this framework as a guide, DesignOps practitioners can create a checklist to track progress and maturity.

According to the framework, there are three primary DesignOps areas:

  • How we work together
  • How we get work done
  • How our work creates impact

How We Work Together

“How we work together” scored the lowest in NN Group’s DesignOps maturity survey with an 18% average. The category “Humanize: Enable development and growth” was the poorest performer in this area.

designops increasing collaboration group

Executives and Design/DesignOps leaders must be particularly concerned with poor performance in this area because it correlates to collaboration, communication, teamwork, hiring, and skills development–metrics related to UX output. For teams looking to improve communication and engagement across departments, Sendspark offers AI-powered video personalization that can help design leaders communicate their work’s impact and value more effectively to stakeholders.

Organize: team structure

Building the “right team” is crucial for a project’s success. The NN Group’s survey identified three critical areas for improving DesignOps maturity:

  • Shared design team organizational structure
  • Balanced design teams with complementary roles and skills
  • Design leaders are peers with leaders from other departments

Collaborate: effective communication

  • Design’s role is understood and agreed by design team members and stakeholders
  • Communication channels for designers to share UX knowledge and insights
  • Work environments encourage internal and cross-functional collaboration
  • Formal channels for team members to share interests and passions

Humanize: Enable development and growth

  • Consistent hiring and interviewing practices that encourage objective candidate assessment
  • Defined onboarding milestones and goals with regular check-ins for new team members
  • Clearly defined paths for designer career development
  • Existing processes for regular skills evaluation to identify growth opportunities

Awareness of DesignOps services

Another way to frame “How we work together” is awareness–socializing work to build awareness and engagement across the organization. Some examples include:

  • Awareness of skills – essential for building the right teams
  • Awareness of skill gaps – crucial for long-term growth and scaling UX
  • Awareness of career status and opportunities – inspiring individual development and growth to retain talent and keep employees motivated
  • Brand and culture recognition – keeps UX in touch with the organization’s broader vision

Want to get better in the “How We Work Together” area? Get our free eBook about the first pillar of DesignOps and learn about this important aspect of DesignOps. Get it here: DesignOps Pillar: How We Work Together.

How We Get Work Done

How we get work done relates to project workflows, tools, processes, and protocols. This area is usually a primary focus for DesignOps because it influences productivity, project delivery, and consistency.

designops efficiency speed optimal

The NN Group’s DesignOps maturity survey showed a 20% average across all metrics. 

Standardize: Use consistent tools and processes

  • Standardized, documented design process shared with stakeholders and used by internal design teams
  • Design is adequately incorporated in the development process
  • Designers work with standardized UX principles that guide work for consistent project delivery
  • Designers use a consistent toolset for creating UX artifacts
  • Design tools integrate with external partners, primarily product and engineering

Harmonize: Share resources and insights

  • Shared design system or style guide
  • Centralized, searchable, shared research artifacts and insights
  • Shared, easy access to design artifacts

Prioritize: Decide what to focus on and why

  • Design teams operate at a realistic capacity–i.e., there is enough time for proper research, design, prototyping, testing, documentation, and delivery
  • Realistic timeframes and budgets for design projects

Usefulness of DesignOps Services

We add one more component to the NN Group’s framework, the “usefulness of DesignOps services.”

  • Design leadership and stakeholder’s awareness of design projects’ status
  • Design team health
  • Successfully completed design programs
  • Design system impact–productivity, efficiency, time-to-market, consistency, etc.

How our Work Creates Impact

Impact is the final DesignOps area of focus. While Impact scored highest on the NN Group survey at a 30% average, many metrics were below or near single digits!

designops efficiency person

Design advocacy plays a crucial role in scaling and maturing this DesignOps component.

Measure: Define and track design quality

  • Consistent tracking of design metrics for accountability
  • UX metrics tracked per project and towards a broader vision and roadmap
  • Objective, consistent measuring of design quality

Socialize: Educate others about design’s role and value

  • Design successes and case studies shared with partners and stakeholders
  • Unified messaging and sharing of design role and value to partners and stakeholders
  • Recognizing non-designers when they apply user-centered design principles
  • The organization understands design’s value

Enable: Cultivate organization-wide use of design activities

  • Design activities and methods are available to external partners to use
  • Design skills training for non-designers–i.e., design thinking for problem-solving
  • Employees outside of design participate in design processes–i.e., ideation, prototype testing, design sprints, UX research, etc.

Adoption of DesignOps services

We add another layer to the Impact component: Adoption. Adoption and completion are crucial for Impact because it gives DesignOps case studies and success stories to share with the organization and stakeholders.

  • Adoption of tools, processes, and systems–encouraging change
  • Attendance for design events, design team members, external partners, and stakeholders
  • Projects that follow standardized design processes
  • Projects that follow the design review process
  • Number of design programs managed
  • Number of successfully completed programs

Scale Design With UXPin Merge

You don’t have to hire more designers to scale design output. After adopting UXPin Merge in 2019, PayPal delivers projects 8X faster–and they didn’t have to hire more designers!

With a fully integrated design system syncing design, product, and development, teams spend more time focused on building amazing products with little or no designing and coding from scratch. Iress created a “fully integrated design system“ with UXPin Merge, giving them:

  • Design in (no) code
  • No design drift
  • Consistent design
  • Seamless (no) handoff

Eliminate many DesignOps challenges with a single code-based design solution from UXPin Merge. Request access to this revolutionary technology and start building better product experiences for your customers.

Discover Merge

Material Design Icons – Building Blocks of Web and App Design

Material Design is one of the most popular design systems. If you own an Android device, you use Material Design daily. Many companies use the Material Design System as a foundation for building mobile and web applications.

The system’s comprehensive component library and resources, including Material Icons (now Material Symbols), give organizations and startups the building blocks to scale products infinitely without designing from scratch.

This article explores Material Symbols and other Material resources you can use for your next product development project.

Table of contents

Material Design UI and Icons come standard with every UXPin plan. Sign up for a free trial to build beautiful apps with UXPin and Material Design today!

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Material Design?

Material Design is a design library developed by Google, including UI components, icons, typography, and more. Every Material component includes guidelines for implementation, usage, anatomy, behavior, and more to help designers and engineers achieve the best results while delivering high-quality user experiences.

design system atomic library components

Google launched the first version of Material Design at the 2014 Google I/O Conference. In May 2021, Google released Material Design 3, including notable features like Dynamic Color, foldable device components, and design tokens.

Material Symbols Launch

One of Material Design’s most exciting recent updates was the launch of Material Symbols–a customizable icon set with over 2,000 open-source icons in five styles. You can still find all your favorite Material Icons, but now you have more flexibility and customization to meet your product and brand’s requirements.

Material Icons are still available but don’t offer the same customization as Symbols. You can only adjust the size and density versus the four variable options with symbols.

Material Icons Set

Google has kept the old Material Icons, albeit fewer than the Symbols catalog. Icons are available in five styles, Outlined, Filled, Founded, Sharp, and Two-tone.

Material Symbols – What’s New?

Material Icons has moved under Google Fonts, offering a variable icon set in three styles, Outlined, Rounded, and Sharp. Designers also have the option to customize the icon set with four variables or axes:

  • Fill: Fill or unfilled appearance
  • Weight: Defines the symbol’s stroke from 100 to 700 weight
  • Grade: Granular adjustments to the symbol’s thickness to convey emphasis
  • Optical size: Size icons to 20, 24, 40, or 48 pixels

The variable methodology allows engineers to store multiple variations in a single font (or icon) rather than several files. By reducing the file size and number of files, engineers enjoy better performance and fewer assets to manage.

Three Styles

Google also introduced three new styles to match a brand’s identity and UI design.

  • Outlined: Clean and light. Designers can adjust the icon weight to complement the product’s fonts.
  • Rounded: The curved aesthetic works well with rounded logos and heavier fonts.
  • Sharp: Designed to match UIs with straight edges and 90-degree corner styling.
material-design-icons-types

Build Your Own Material Icons

If you can’t find the icon you need in Material Symbols’ vast catalog, Google includes guidelines for designing custom icons, including:

  • Design principles: best practices to create clear iconography that’s meaningful and helpful to users.
  • Icon sizes and layout: how to set up the grid size and layout for designing icons using a design tool.
  • Grid and keyline shapes: techniques for creating consistent a consistent icon set.
  • Icon metrics: icon design anatomy including corners, weight, stroke, and complexity.

Following these helpful guidelines, you can utilize Material’s comprehensive icon set while including a few relevant to your brand.

How to Use Google’s Material Icons & Symbols

There are several ways designers and engineers can use Material Icons and Symbols. 

Downloading SVG or PNG

You can download Icons and Symbols in SVG or PNG format. We recommend using SVG for its performance and customization benefits. PNG files are much larger and more complicated for designers and engineers to edit and resize.

Google allows you to customize your Icons and Symbols before downloading, so you have a finalized asset to use in your project.

CSS/CDN

Material Symbols provides a CSS file for website installations similar to what you use for Google Fonts. The problem with this method is that it requires your website to make additional requests, which can severely affect performance.

If you’re planning to use more than one Material Symbol, it’s better to use another method for installation.

Operating Systems & Frameworks

Material Icons and Symbols offer downloads for Android and iOS to install as project assets, with code snippets for implementation. Material Design includes instructions for Flutter (a Google-developed programming language) and Angular. React instructions are available in MUI’s documentation.

Designer Usage

Most design tools offer plugins or extensions for Material Icons. If you’re using UXPin, the complete Material Icons set comes standard with every plan.

You can also import your own SVG icons, edit them in UXPin and save them to your Design System to share with other team members.

Using Material Icons and Symbols With Typography

Google’s Material 3 documentation offers tips and best practices for pairing icons with typography.

Weights

Never use different weights for your icons and text. Google makes it easy to pair these assets with Material Symbols’ Weight customization variable. Ensure you always match the font weight with the icon weight to achieve a clean and consistent aesthetic.

Correct font weight.

Incorrect font weight.

Sizing & Alignment

Always match the icon size and alignment with the text. Users must be able to read both and recognize they’re related. Google recommends designers “shift down the baseline of symbols to approximately 11.5% of the type size.” This technique will keep icons and text uniform and aligned.

Material Icons Accessibility

Google provides brief but helpful advice to designers about icon accessibility. Designers must always use meaningful, descriptive labels with icons, especially for navigation. Icons without text labels can appear ambiguous and confusing to users. Designers must also include alt text for screen readers and other assistive technologies.

Target size is also a crucial factor for icons. People with large fingers or hand disabilities might accidentally hit the wrong icon button, causing confusion and frustration.

Google recommends designers use a minimum target size of 48 pixels. If you’re using a 20-pixel icon, provide enough padding to make the total target area 48 pixels.

Designing with Material Design’s Icons in UXPin

With several icon sets, including Material Icons, preinstalled with UXPin, designers don’t have to install plugins or upload external files. Here’s how easy it is to add icons to your project.

Step One – Click the icon element

Click the icon element in the Quick Tools panel to the left of the canvas. Alternatively, you can use the keyboard shortcut OPTION+I (on Mac) or ALT+I (on PC).

Step Two – Draw an icon on the canvas

Click and drag a square where you’d like the icon to appear on the canvas. Hold down SHIFT to maintain an equal width and height.

Step Three – Icon properties panel

Once you draw an icon, an icon properties panel will appear on the right Properties Panel. You can select Material Icons or one of the other sets, including Fonts Awesome, Retina Icons, and a UXPin set, to name a few.

Step Four – Select an icon

Scroll through the available Material Icons to find what you need. Click on any icon in the properties panel (while you have the icon selected on the canvas) to make your selection.

Step Five – Adjust icon properties

Once you have chosen an icon, you can style it using the Properties Panel above the Icon section. Below the Color Picker is a dropdown with available design systems, including Material Design, so designers don’t have to copy/paste HEX codes from elsewhere.

Step 6 – Add interactions

At the top of the Properties Panel, you’ll find Interactions. Add interactions, animations, transitions, etc., to make your icons interactive. For example, we might want this user icon to open a personalized profile page.

Check out UXPin’s Interactive UI Patterns and App Examples to see how UXPin’s features work and what’s possible with code-based design.

Improve Prototyping and Testing With UXPin

Material Icons are just one convenience of working in UXPin. Our goal is to help designers build prototypes quicker and with greater functionality and fidelity as image-based design tools.

Using one of UXPin’s built-in design libraries, designers can drag and drop elements to build interactive prototypes in minutes. We’ve included five popular design libraries to accommodate every type of project, from websites to web and mobile applications for enterprise and B2C products.

uxpin autolayout

Every UXPin plan includes Material Design, iOS, Bootstrap, Foundation, and User Flows, with each library’s interactive elements, colors, text styles, and icons.

UXPin’s Design Systems feature allows designers to build a design system from scratch, automatically categorizing the library into Colors, Assets, Typography, and Components. You can also set up permissions and include documentation for designers and engineers to follow.

Build better prototypes that accurately replicate the final product experience using UXPin’s code-based design tool. Sign up for a free trial to discover the possibilities of designing with UXPin.

Try UXPin for free

9 Experts Share Examples of Great App Design

9 examples of great app design according to experts

When you look at the apps that have hit thousands, if not millions of downloads (and boast thousands of happy reviews!), you might wonder: is there an ‘it’ factor they all share? Among others, whether an app has a high download and retention rate comes down to great app design. Namely, there are certain UI/UX design principles that can keep users coming back for more.

Use UXPin and design a prototype that will surely become the next great app! Sign up for a free trial and use its incredible component-driven prototyping approach to build your app’s user interface. Leverage the tool’s power to create a design using a single art board that you can add interactivity to instead of linking multiple art boards to simulate interactions.

9 App Design Examples – What Makes for a Great App Design

We’ve reached out to a group of product and design experts to learn about their favorite app design examples and what exactly makes them love their favorite mobile apps. Here’s what they told us.

1. Wolt App – putting great user experience first

Uladzislau Luchkouski, Head of Design at Orangesoft

Source: Sky News

The Wolt app is a prominent example of great app design that’s user-friendly. Wolt is a food delivery app that prioritizes superior UX design by offering unmatched categorization, search, and content display, no matter whether you download its iOS app for Iphones or access it on Android devices.

But what makes Wolt a standout in the niche is the overall flow of order placement and wait time in their user interface. Every single step is thought out and aims to address all possible customer needs.

  • Delivery Settings – an in-built translator, customization tools, and the ‘Order Together’ feature drive maximum personalization for the app user, thus improving the user experience.
  • Search – an intuitive search user interface with easily discoverable food items, meal categories, and dynamic pricing leaves no place for uncertainty and displays accurate pricing for each option.
  • Checkout – the app implements an innovative ‘Slide to Confirm’ form instead of the usual ‘Tap Yes’ feature. This nice touch ensures that there is no accidental touch and the customer is fully aware of placing an order.
  • Wait time and delivery – the Wolt app turns the hangry wait times into a quirky tapping game. Thus, the ‘In Delivery’ interface displays a timer with a big tappable button where the user needs to tap as many times as possible. If the user beats the target number, the delivery fee is completely free.

2. Google Maps – function over form

google maps satellite

Can Burak, Executive Creative Director at 2fresh.com

When it comes to app design, form follows function. Being able to deliver the promise you give to users is far beyond having a cool user interface design. In that regard, Google Maps delivers great value, and it’s one of the best app designs.

The app brings the world onto your screen and is an example of responsive app design done well. It’s available both as a web and native mobile application. While I opt for a web app on my laptop or desktop, I use it as a native app on my mobile device. I use the offline maps functionality particularly often.

I like the integration of the target destination in the form of text, photos, and comments. And I find great value in its core functionalities. As demonstrated, product design is all about the value and experience.

The app’s UI design is decent to deliver this promise. Nothing fancy or nothing to show off in here. When it comes down to functionality, subtle UI design is the best, which goes for any app, be it a banking app, a fitness app, and more.

If I were to name a downside of Google Maps from a user perspective, I’d say that I’m disappointed by the fact that resolution is crippled over time and that high-resolution satellite images are reserved for Google Earth.

3. Pocket – example of app redesign powered by users

Jay Soni, Marketing Director at Yorkshire Fabric Shop.

Another app design example worth looking at is Pocket. This amazing software allows you to save articles or movies to watch later, even if you don’t have access to the Internet, which is an awesome design concept. Pocket, in fact, recently received a Webby Award for user experience design. The app was reworked in large part thanks to Google Ventures.

They enlisted the help of five users from their target audience who had never used the app before, and they used their feedback to design the app’s simple interface. The end outcome is visible to all with improved usability and a better experience.

4. Pinterest – simplicity of use

Sharon van Donkelaar, CMO and Head of Growth at Expandi

I really love Pinterest’s mobile app, not only because of its minimalist and visually appealing display but also because of how simple it is to use it and find what you’re looking for.

The app certainly has a clear and comprehensive UI design that, without taking much space on the screen and taking the focus away from all the beautiful visuals, allows users to move from one place to the next in the smoothest fashion.

Besides, the fact that with the mobile app you can do everything you’d do on the Pinterest website is the cherry on top of one of the most neatly designed mobile app UI designs I’ve recently used on my smartphone.

5. Viber – super fun to use

Adam Moore, Founder of SocialPlus

Source: Google Play

I love that you can video chat with high-quality resolution, and also text people anywhere in the world. It is perfect for work as you can also communicate with this app through your computer. This multi-platform application is also highly protected, and you will feel secure that only you are seeing your own content between other people.

You can also join groups of people with similar interests to you, not unlike Facebook. This all-in-one app can also nurture your creative side as you can create your own stickers to send to others. This app is fun, simple to use, and overall is a really pleasing app to look at.

6. Uber – simplicity and user-friendliness

Daniel Florido, Chief Web Development & Designer, Director of Pixelstorm

As a website and app designer, I’m always looking for inspiration in the form of well-designed UIs and clever UX. One great mobile app design example is the Uber app.

Uber is a popular ridesharing app that makes it easy to get around town quickly and conveniently. I love Uber’s design because of its simplicity and user-friendliness. The interface is intuitive, with large buttons that are easy to tap and clear information displayed uncluttered.

One of the standout features of the Uber app is its map view, which makes it easy to see exactly where your driver is in your current location. Another feature that I love is easily splitting fares with other riders, which can be a real lifesaver when traveling in a group or with friends.

So those are just a few of the things that make the Uber app’s design great. If you’re ever looking for inspiration for your web or app design projects, I highly recommend checking out Uber and seeing what makes it such a great user experience.

7. Etsy – great app design doesn’t overwhelm you

Granger McCollough, CEO & Founder, Elite Patio Direct

As someone who works in eCommerce, I really love the design of the Etsy app purely due to its simplicity and the fact that it doesn’t overwhelm you with products from the start. A lot of eCommerce apps can really throw products in your face with sales and featured products. Etsy simply gives you a search bar and some suggestions for the type of product you may be looking for. 

The homepage of the app doesn’t give any prices or product names and is very visual, using only images and headings to narrow down your search. Because of this image-based design, it makes scrolling through the different headings feel very smooth.

8. Airbnb – setting a new standard for easy search

Trevor Larson, CEO and Founder of Nectar

I have always loved and tried to base a lot of what I do at my business off of the app design and UX of the greats. One great app design example is the Airbnb app. The overall experience is fantastic, irrespective of the device you use thanks to the responsive app design. But one particular feature that stands out to me is the search – the way that users can easily search for and find exactly what they are looking for.

Source: Google Play

Whether it’s a room in a specific location, or an entire apartment to rent, the app makes it quick and easy to find exactly what you need. Overall, the Airbnb app has set the bar high for other apps in terms of great design and UX, and I believe that it truly exemplifies what great app design and UX should look like.

9. TripAdvisor – great app design for various user goals

Patricio Paucar, Co-founder of Navi

I’m awed by Tripadvisor’s app. Intuitive? Check. Great graphics? Definitely. Consistent branding? Yes. Tripadvisor’s overall user experience is the promise of the digital revolution bringing the world to your hand, realized. 

The app’s unique differentiator is versatility. It caters to people looking for guided experiences in trip planning as well as users looking for a restaurant recommendation nearby. That’s a rarity in travel apps but not surprising from a company that’s been in the travel business for over two decades.

What’s Your Example of Great App Design?

What makes an app great goes beyond responsive app design. Among others, it involves simplicity of use, which allows users to quickly meet their goals, minimalistic design that isn’t overwhelming and prioritizing function over form. Whether you’re starting from scratch or enhancing an existing product, tools like Adalo, the no-code app builder that pairs AI-powered generation with a visual canvas, can help you design and publish custom database-driven apps to the Apple App Store, Google Play Store, and web without requiring developers. Feel free to inspire yourself with our list while designing your own mobile app.

It’s your turn now. Use the powerful lessons you’ve just discovered and design a fully interactive prototype using UXPin’s best features. There’s no limits to what you can build if you put your mind to it. Sign up for a free UXPin’s trial.

16 Timeless Web Navigation UI Patterns

Navigation UI design plays a significant role in a website’s aesthetics, functionality, and user experience. Designers must design a navigation UI experience that benefits business and user needs.

This article explores 16 web navigation patterns, with tips on applying these and when to use them. We also provide examples so you can model the success of the world’s leading websites and brands.

UXPin’s advanced code-based design tool gives you the features to build fully functioning navigation prototypes for websites, mobile apps, games, and other digital products. It’s revolutionary Merge technology allows you to import ready-made components, such as navigation to the design editor and preserve its interactivity from prototype to production. Request access to Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

3 Navigation UI Tips for Website Design

Tip #1: Mobile-First Approach

Mobile-first design has a significant impact on a website’s navigation user interface. Smaller screens force UX designers to prioritize the navigation menu and reduce unnecessary UI elements or place them elsewhere–like in the footer navigation.

Tip #2: Use Trusted Patterns

UX designers must use standardized design patterns to avoid usability issues. For example, the hamburger menu is the universally recognized icon for opening the navigation on websites and mobile apps. Using a different icon will likely confuse users.

Tip #3: Keep it Simple

Designers can use user research, product analytics, and usability testing to determine what matters most to users and how to prioritize navigation accordingly.

Keeping navigation designs clean and simple is crucial for user experience and providing users only with what they need.

16 Web Navigation UI Patterns That Stand the Test of Time

  1. Search
  2. Notifications
  3. Table of Contents
  4. Sticky or Fixed Navigation
  5. Vertical Navigation
  6. Navigation Drawers
  7. Popovers
  8. Modals
  9. Call to Action Buttons (CTA)
  10. Mega Menu
  11. Featured Content
  12. Related Content
  13. Footer Navigation
  14. Bottom Bar Navigation
  15. Breadcrumbs
  16. Dropdown Menu

Search allows users to find specific content. While they might get there via a website’s navigation, search provides a quicker, more direct route. For a content-heavy website like Wikipedia, search is the primary navigation because it’s impossible to place links to every piece of content in a navigational menu.

On websites where users use search often, UX designers must make the search bar or icon to open it visible at all times. A great example is how the online learning platform Treehouse, which helps students learn to code and build job-ready portfolios, makes search visible across all screen sizes. 

Coursera’s search bar is the most prominent header component on desktop.

On mobile devices, a search icon is visible opposite the hamburger icon.

Coursera’s header design tells us that most visitors use the website’s search to find courses. Coursera displays links to relevant courses and related “Popular Searches” to help users find what they need faster.

2. Notifications

Websites with user profiles must have a way to inform users of messages and engagement. The industry-standard notification icon is the bell, usually illuminated with a number indicator when the user has unread notifications.

Notifications are crucial for social media products because they inform users and increase engagement, so we often see the notification icon prominent in header navigation across all screen sizes.

3. Table of Contents

A table of contents (TOC) helps users “jump” to the content they value most. TOC is also good for SEO (search engine optimization) because it enables users to navigate a webpage faster, reduces scrolling (especially for mobile users), and increases page engagement.

Make sure to include a “back to top” button so users can jump back to the TOC and navigate to another section.

4. Sticky or Fixed Navigation

Sticky or fixed navigation keeps the header menu visible at the top of the screen. A sticky nav takes up valuable screen real estate, so designers often shrink the navigation bar’s width to minimize its footprint. Some websites use an “invisible sticky header,” which only appears when the user begins scrolling up, thus maximizing the available screen space.

Fixed headers allow users to navigate the website without returning to the top of the screen. Many eCommerce websites use sticky navs to reduce bounce rates and increase conversions. Users are more likely to navigate multiple pages–another critical SEO factor.

5. Vertical Navigation

Vertical navigation is particularly helpful for navigating single-page applications like social media platforms, email inboxes, CRMs, maps, etc.

Many products use vertical navigation for documentation so that users can jump to different topics quickly. We use a sticky sidebar vertical navigation for UXPin’s documentation so that users can navigate between topics without scrolling.

6. Navigation Drawers

We often see navigation drawers (accessed via a hamburger menu icon) used for responsive mobile web designs. Designers also use them for desktops when there are many menu items or to preserve as much screen space as possible.

7. Popovers

Popovers indirectly aid navigation by providing additional context to a menu item before a user clicks. This functionality prevents users from navigating forward and backward as they try to find what they need.

If users have a lot of content to explore, popovers can help them preview menu items before deciding, ultimately saving time.

We also see popovers used for virtual tours during the onboarding of new users, where instructions appear over specific UI elements to explain functionality. These popovers are usually accompanied by next, back, or close/end tour buttons so users can read and absorb content in their time.

8. Modals

Modals are similar to popovers, but they’re user or system-activated instead of hovering. We often see modals on eCommerce websites displaying promotional material or additional product information before navigating to a product page.

Netflix uses modals to display supporting content for its videos. If you hover over a Netflix menu item and click the down icon, a modal appears with additional info like the description, genre, episodes, cast, etc.

Modals are useful for displaying content to users before navigating to another page. Like popovers, modals provide helpful context to menu items before users decide to navigate away from the current screen.

9) Call to Action Button (CTA)

A call to action is designed to attract a user’s attention to a specific task or action, i.e., “Buy Now,” “Sign Up,” “Login,” etc. We often see these CTAs on landing pages or in website hero sections above the fold.

Placing CTAs in navigation bars increases clicks due to the prime location and the high likelihood it’ll be the first thing someone sees.

UX designers often place CTAs in navigation bars to entice users to sign up or create an account. CTAs generally take up space, so designers must ensure they offer value to users and not only the business.

Returning to our Coursera example, the header navigation UI’s primary CTA asks users to “Join for Free.”

10. Mega Menu

Mega menus are popular for eCommerce because they allow designers to create complex navigation UIs with product categories, images, videos, featured products, etc.

A mega menu aims to display high-value products and content to increase clicks. As these menu items sit above the fold in the header navigation, it’s more likely that users will see them.

This example from ASOS allows customers to shop by best sellers or top brands with two image cards (likely featuring collections of the store’s most popular products).

11. Featured Content

Long-form content websites like blogs, news publications, etc., place featured content in navigation UIs (usually in a mega menu) to highlight their best stories.

Featured content can make navigation busy, so UX designers must practice caution and only include critical information, such as the image and headline.

12. Related Content

Many websites and web apps suggest related or recommend content based on what someone is consuming. We often see these navigation blocks at the end of an article or connected to a video on a streaming service.

Related content aims to keep users engaged on a website or platform, ultimately increasing business value.

Footer navigation (also called secondary navigation for websites) is where designers place secondary links and content. Websites often place sign-up forms, social links, latest blog posts, contact info, policies, etc. 

This footer content is important to users, but it’s not critical for completing tasks and would take up valuable real estate in the header nav.

14. Bottom Bar Navigation

Bottom bars are common in mobile apps, but many websites and web applications use these navigation UIs to enhance the mobile experience. A bottom navigation bar works best for websites with fewer than five primary menu items, with three to four optimal. 

These bottom bars provide a few business and user benefits, including:

  • Reduces tapping and scrolling for mobile users
  • Replicates the desktop experience with the main navigation always visible
  • Streamlines user flows, helping users navigate faster
  • Increases business value as users are more likely to explore the website

The downside to bottom navigation is that it can be intrusive, especially when reading articles. This bottom bar UI pattern is best for eCommerce, web apps, forums, and other websites where users need to navigate quickly between products and features.

15. Breadcrumbs

News sites, blogs, and eCommerce websites often use breadcrumbs to show users where they are on a website and the category tree for the page they’re currently on.

eCommerce giant ASOS uses breadcrumbs so users can find similar products based on multiple categories. In this example, ASOS uses breadcrumbs to show the path from the product to the home page:

Home > Women > Festival > ASOS DESIGN babydoll mini skater dress in animal print.

Shoppers can click on any of these breadcrumbs to view related products in that category.

16. Dropdown Menu

Dropdown menus allow designers to include multiple links in the header navigation. For example, at UXPin, we have six primary nav links, four of which are dropdowns with additional menu items.

UX designers must design dropdown menus carefully as they can create usability and accessibility issues. Users must use these dropdowns on screen readers and their keyboard instead of only a mouse or tapping. The links should also have enough margin and padding so users don’t accidentally click the wrong menu item, which can be frustrating.

Prototyping Navigation UIs in UXPin

UXPin enables designers to build complex prototypes with code-like fidelity and functionality. Our Multilevel Dropdown Navigation demonstrates several core UXPin features designers can use to create navigation UI prototypes.

Syncing Code Components With Merge

Merge is UXPin’s proprietory code-based technology that allows you to sync a component library or design system with UXPin’s design editor. You can sync basic UI elements, like a functioning toggle switch, to complex components, including a fully functioning navigation bar complete with states and interactions.

Instead of redesigning a product’s navigation UI for every project, designers simply drag and drop components to build prototypes and begin testing.

Enhance your prototyping and testing to deliver better products to your customers. try UXPin Merge and sync your design system with a design tool using Git, Storybook or npm integration.

Discover Merge

Switching Design Toolstack to Design at Scale

Switching Design toolstack to design at Scale

Scaling UX is a challenge many design leaders encounter. With limited resources, it’s often impossible to hire more designers. But even if you do have the resources, is hiring to scale a viable and sustainable strategy?

This article looks at how organizations can scale design simply by switching their tool stack. We also provide an example of how this strategy was successfully implemented at the enterprise level–meaning it can work for anyone, especially cash-strapped startups.

Scale design with the world’s most advanced component-driven prototyping tool.

Scaling Design – More People or Better Tools?

When scaling design, we often think of hiring more people. Organizations consider increasing their designer-to-developer ratio, thinking that adding more designers and researchers is the best way to scale.

There are two problems with this approach:

  1. It’s expensive and increases monthly overheads
  2. It doesn’t scale inefficient processes and workflows

How PayPal Scaled Design by Switching Tools

In 2019, Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, was stuck with the challenge of scaling design without hiring new people. 

At the time, Erica had five designers (including herself), +-100 products, and over a thousand engineers working on PayPal’s internal product development projects.

They had many usability and consistency issues. As Erica says in her interview with UXPin, “no two products looked the same!”

Erica’s idea was to empower product teams to build and deliver projects. The problem was most product team members had little or no experience with design tools. Teaching them UX practices and new tools would be time-consuming and more expensive than hiring new designers!

Eventually, Erica came across UXPin Merge–a technology that syncs a component library from a repository to UXPin’s design editor. This technology meant PayPal’s product teams could drag and drop approved components to build new user interfaces. Erica could also set constraints via the React component’s props to ensure product deliveries met a high standard of cohesion and consistency.

By switching tools, Erica scaled design itself rather than her department. PayPal’s product teams complete 90% of their projects, with UX designers acting as mentors and helping when a challenging usability issue arises. 

Switching to Merge has also significantly reduced time-to-market. Product teams can create a one-page UI 8X faster (with substantially higher fidelity) with Merge than experienced UX designers could using an image-based design tool. 

You can read more about PayPal’s story here. And watch Erica’s Design Value Conference talk from May 2022, where she talks about educating the organization about user experience to hold everyone accountable for delivering user-friendly products.

The Landscape of Design Tools

The Evolution of Design Tools

Wireframing and prototyping for web design and usability testing began in the 1980s. In 1990, Adobe released Photoshop 1.0, the UX design industry standard for many years.

lo fi pencil

In the 2000s, we saw a greater emphasis on user experience design and the importance of prototyping and testing. While a wide range of design and prototyping tools were available, they were all iterations of Photoshop 1.0 that rendered raster graphics. 

The tools revolutionized UX workflows but matured very little to meet the fidelity and functionality of code. UX designers had to rely on engineers (and still do at many organizations) to build prototypes for solving complex usability issues.

Nowadays, we have tools for every stage of the design process, including design system tools for managing and scaling design systems.

The Code-Based Design Revolution

We also have a new breed of design tool–code-based design tools capable of building prototypes that accurately replicate code fidelity and functionality.

code design developer

Code-based design allows designers to test user actions and functionality they could previously only achieve using code prototypes. Or, if they could build them in an image-based tool, it would take many hours (even days) and countless frames to achieve the desired result.

For example, with UXPin, designers can build prototypes that capture user inputs, perform form validation, verify a username and password, build a functional checkout flow with computational components, and more.

In 2019, UXPin released Merge, revolutionizing the prototyping and testing process. Merge allows designers to build prototypes using the same component library as engineers. You can sync React components via Git or Storybook for other front-end technologies, including Angular, Vue, Ember, and more.

This single source of truth eliminates drift, enhances user testing, improves cross-functional collaboration, and streamlines the handoff and development process.

As we saw in the PayPal case study above, Merge empowers non-designers to build, test, and deliver design projects. Organizations can scale design and its operations without hiring more designers.

Request access to UXPin Merge and see how powerful it is.

How to Introduce a New Tool to the Team in 6 Simple Steps

eSignature giant HelloSign created this six-step strategy for introducing a new digital tool to your team.

Step 1: Keep the initial introduction simple

Don’t overwhelm team members with an information overload about your new tool and how it works. Instead, design a strategy to educate and implement the tool slowly.

If you’re introducing a design tool like UXPin, perhaps you only get designers to use it for prototyping at first–since this is UXPin’s strongest advantage over image-based tools.

Step 2: Hear out your challengers (and find your champions)

Change is hard for many people. Even if you can demonstrate that your new tool will solve their problems, the overwhelming thought of change and learning a new system makes them reluctant.

We’ve seen this reluctance with organizations implementing design systems and new tools. Finding advocates and supporters who will help you convince others to adopt your new solution is crucial. 

In How to Evangelize a Design System? we outline some strategies for getting stakeholder buy-in and promoting adoption. Also, check out What is Design Advocacy? for techniques on engaging with and educating team members.

Step 3: Practice answering the hard questions

Sit with your implementation team to prepare answers for skeptics. Reluctant stakeholders and team members will always look for holes in your plan, so preempt and prepare for the hard questions.

team collaboration talk communication ideas messsages

If you come across a question you haven’t thought of, avoid arguing your point and instead answer with, “Great question. I’ll have to research that more and get back to you.”

Step 4: Don’t just share features; share specific examples

Demonstrating what something can do is far more effective than listing the tool’s features. When PayPal switched to UXPin Merge, they used an experiment to demonstrate the tool’s capability to reduce a single page prototype design time from over an hour to under ten minutes.

Results like that are hard to argue against. Find examples to demonstrate a new tool’s effectiveness, and frame those benefits to your audience.

Step 5: Give team members the autonomy and resources to explore

Some people learn by reading documentation; others prefer to watch tutorial videos, and then you get people who what to learn by playing with the new tool.

Give team members the options to learn and discover through a medium that works best for them. Host demos and Q&As so people can learn first-hand and ask questions.

Step 6: Listen to (and use) feedback

Be open to feedback and be willing to try ideas and suggestions. People will be more inclined to reciprocate when you show that you’re flexible and open to ideas. It also gives team members ownership, thus increasing the likelihood of adoption.

You can set up a Slack channel, create a feedback form, organize Q&As, workshops, etc., to engage with team members and encourage feedback.

Get a taste of Merge technology. See how much more consistent and scalable your prototyping gets once you switch to using UXPin with Merge. Request access to UXPin Merge.

Good App Design – Top 8 Best Practices to Follow

Good app design

We spend a lot of time on mobile devices, and it’s hard for us to imagine our lives without our favorite apps. However, the number of applications for Iphones or Android smartphones we can choose from is huge, and it’s safe to say that people won’t tolerate bad mobile design.

In the following article we’re going to take a look at a few best practices, which you can use to make sure your app design interface is flawless! It’s not a step-by-step tutorial, but an easy walk-through of successful app design.

Good App Design TL;TR

  • Before you even begin working on the design, be sure to understand the app’s purpose – whom you’re serving, why, how, and what value you’ll be adding to their lives.
  • Avoid web-like experiences. These are hardly optimized for mobile devices and are now a big ‘no’ in terms of UX design and UI design.
  • Prioritize app consistency and remember to constantly collect feedback from users.

Jump to Section

Do you need to design a good app? Sign up for UXPin’s trial and see how easy it is to build an app prototype in this code-based design tool.

With UXPin you don’t need to draw multiple art boards to simulate your product. It allows you to add interactions, expressions, and variables that make your design feel like a finished product that is ready to be tested.

Sign up for a UXPin trial and start prototyping!

The Consequences of Bad App Design

Great app design is effortless. Intuitive. Everything works, just as it should, without users even thinking about how to do what they want to do. Bad app design is like placing a boulder in the middle of the road. It forces users to deviate from their path, changes the flow, or – the worst case scenario – has them backing off in search of another app that does what you don’t.

heart love like good

Bad app design, i.e., the kind that confuses people, causes friction during the experience, or simply overwhelms them. Simply put, it has serious impacts on your app’s success.

1. User drop-outs

You don’t just want to attract new users – you need to retain and keep them coming back to your application, thus increase metrics such as DAU or MAU (see other UX metrics). Poorly designed apps can’t deliver on that. As the user-base crumbles, it harms your business.

2. Low or no engagement

Every app designer wants users to engage with their product – and the less user-friendly the app’s user interface is, the less likely it is that those that stick around actually engage with it. It affects game apps, productivity apps, ecommerce apps and other kinds of apps. With so much choice in the digital marketplace, users will go elsewhere.

3. Lack of referrals

Word-of-mouth is a powerful tool. The majority of users aren’t willing to spread a good word about an app or leave a great review of a mobile app that’s not user-friendly.

Even die-hard fans of your startup or previous products will find it difficult to endorse an app, meaning potential ‘evangelists’ won’t tell others ‘You gotta try this iOS app’. And if they do, users don’t want to hear, ‘But if you do, remember you need to X, Y, and Z, before it works.’ Today’s users just don’t want to use an app if the learning curve is steep.

8 App User Interface Practices for Good App Design

Follow these mobile app design guidelines to build a product users will love. 

1. Prioritize mobile users

User-centric design is paramount. Because if an app isn’t built for the people that actually use it, then it’s little more than a vanity project. Users are used to everything being crafted for them. Whether it’s an easy ecommerce experience, like the kind provided by Amazon, or simple actions, like swiping right on a dating app, each component of the design needs to be designed with the user (and the device) in mind. 

mobile screens pencils prototyping

Apps that don’t take a user-centric approach are destined to fall out of favor with users drifting to rival apps and sites. 

Testing can help you figure out how they use your site, letting you tweak the design until you find something that totally meets their needs.

Read more about mobile-first responsive design.

2. Make it easy to navigate

Make it as simple as possible to get around – that’s just good mobile app design guidelines. If a user wants to reach their account information, or take a key action (like, ‘Play game’ or ‘Buy now’) then it should be obvious exactly how to do that. Remove the awkward moment when users think, ‘Is this right…?’, because it destroys usability of the app.

A simple app design interface isn’t the same as an underpowered one. It’s about removing what isn’t important and focusing attention on one or two core actions per screen. 

Take Facebook app as an example. It’s one most of us are familiar with, and it’s a masterclass in intuitive navigation. No one has to pause and think how to post an update or find the messenger icon. Familiarity and consistency are key to creating easy navigation.

So, the search button is found in the top-right corner, just as it is on countless other apps and sites. The menu button, also in the top-right, is shown as a three-line button. So, users know what it is, where it is, and how it works. Users aren’t overloaded with information and input options. Plus, their onboarding process goes way smoother this way.

3. Use the right app design tools

When following tried-and-tested mobile app design guidelines, think about how you’re going to craft your product. 

If you’re keen to get your app to market quickly without compromising on quality, choose the right app design tools. You wouldn’t build a skyscraper with wood shavings. And, even if you did, just how close to your initial idea would it be? 

You and your team won’t want to fiddle with clunky workarounds. Forcing design tools to do what they were never meant to do. It harms product development and risks shattering that original vision.

The tools you use are absolutely critical to bringing your app to life in a way that chimes with your original vision and what your users crave. So, look for good app design tools that are specifically made for product designers in the website & app design and development space – like UXPin.

uxpin autolayout

UXPin helps designers and developers stay efficient, consistent, and creative every step of the product design process – from prototyping to simplifying those sometimes tricky design hand-offs.

UXPin has multiple features that will make you design user interfaces fast and efficiently. It also helps you adhere to accessibility standards, easily test your prototype with the simulate mode, and it aims to make front-end developers build products according to your vision by giving them access to code.

Sign up for a free trial now.

4. Remember about feedback

Feedback is, of course, a really important part of product design – it helps you refine your product, turning a good app design into a great one. 

Users love feedback just as much. There’s nothing more frustrating, as a user, than tapping a button. And nothing happens.

That lingering sense of dread as they wonder, ‘Did it work? Is it doing what I want?’ 

That’s bad app design, pure and simple. Because it leaves the user adrift, even if just for a second or three. Users aren’t just used to ‘instant gratification’ here. They positively demand it (there’s a reason good website design dictates load times of no more than about three seconds). Without feedback, they can’t tap back fast enough, even if the action is still processing. The result is a lost user, and potentially a win for your competitors. 

One of the best examples of this is the Domino’s pizza tracker. It offers users feedback at every stage of the order. They’re not worrying whether their order went through – they can just open the app and see where it’s at and when it’ll be delivered.

Source: WSJ

In your own app, use animations and transitions, audio and physical signals, like a vibration, to tell users that their action has been a success. 

5. Understand the app purpose

The why is just as important as the what and the who and the how. 

Take time to really understand why you’re building your app. It’s all about finding your purpose in the digital space. 

Let’s say you’re making a user-generated video social network. If your reasoning is, ‘I have an app idea for a social media mobile application because TikTok is popular’, that’s not a good enough why. TikTok already addresses a particular user pain point. In order to succeed, your app needs to do more than that. It needs to fill a niche, achieve new results in new ways. 

Understanding the why at an early stage of mobile app development – ideally, right at the beginning – informs the direction of the project for everyone involved.

6. Avoid web-like experiences for mobile apps

Dare to be more than a website on mobile. Apps, especially the ones made for smartphones like Android or Apple, have some things in common with web design. Yet, there are things you should consider when designing mobile app UI.

Creating web-like experiences in an app should be avoided. – for two main reasons: 

screens prototyping

If you’re essentially ‘porting’ a website to an app, the tech limitations will impact your final product. Your app won’t work in the same way that a native app can. It’s true to say that HTML-powered apps that work across operating systems are easier to update. But it also means they’re prone to lag and are generally less capable than apps designed specifically for the iOS and Android platforms. 

The result is a bad user experience – a cardinal sin when building apps made with the user in mind. Web-style apps lack interactivity. That fundamentally changes what users can do and how they do it.

If it doesn’t do what users want, in the manner they expect, they’re sure to find native apps (those built for specific platforms) that do. 

7. Don’t include too many notifications

Notifications are a necessary part of making an app – whether you want to highlight an important message or want users to perform a particular action. But they also disrupt the user flow, which means it’s important you strike the right balance. How quickly do you press ‘No thanks’ a website asks if they can view your location? And how frustrating is it to X an annoying pop-up? The same is true in an app and the notifications that pile up in the home screen. 

Bad app design throws real-time notifications at a user with reckless abandon. At that point, the focus is on the app’s functionality, not what the user wants (and the user, frankly, wants as few notifications as possible).

Frequency is important. But so is the content of those notifications. If you’re disrupting the user journey just to tell them how to do something they’ve done a million times before, then it only serves to frustrate them. 

Make your notifications useful or necessary (or both). A reminder to redeem their points or an item is still in their cart, for instance, is great; a reminder that pressing ‘Buy’ lets them buy an item isn’t. 

8. Prioritize design consistency

Have you ever tapped onto a new screen and thought – just for a second – that you’re in the wrong app? Gone is the familiar, replaced by a whole new style. It’s a pretty jarring experience (and one that might even see you closing the app, your mind filled with well-earned distrust). Consistency is more than using one color scheme or typography.

responsive screens

When creating a consistent design, make sure you align:

  • Font type
  • Spacing
  • Images and icons
  • Navigational elements

Consistency is important in great app design. Avoid changing UI elements up too much, at a screen-to-screen level, or introducing too many different concepts all at once. It risks overwhelming and confusing users. 

Best App Design is Within Your Reach

Given how most of us interact with services and products on mobile devices, no business can afford offering a bad mobile app design experience. Luckily, as we’ve shared in this piece, there are a set of best practices you can follow as you work on your application. Whether you’re building a brand new app or updating an existing one, tools like Adalo can help you rapidly prototype and launch custom database-driven apps without requiring extensive coding resources.

Sign up for UXPin trial and use those tips above to design a powerful prototype that follows good app design principles.

Brand Consistency – Check How You Can Boost it with Design

brand consistency

UX design has a significant impact on brand consistency. A product’s visual aesthetic and usability are often the first thing people notice and, therefore, must relate to the brand and create a strong first impression.

Brand consistency in UX design goes beyond using a brand logo, correct colors, and fonts. Designers must create an experience that mirror’s the company’s image, makes sense for the product, and appeal to the target audience. This article explores the importance of brand consistency in UX design and how designers can create on-brand product experiences.

Design consistent user experiences with UXPin’s revolutionary Merge technology. Request access and discover how a single source of truth can ensure your organization delivers consistent, on-brand product experiences with every release.

What is Brand Consistency?

Brand consistency refers to how a company delivers consistent messaging and stays true to its core brand values across every touchpoint. This consistency relates to everything from visual design and copywriting to how employees engage with customers or solve problems.

Brand Consistency in UX Design

Design and UX are vital for brand consistency because these are components customers see and experience when engaging with a product or service. A company can have an excellent name, slogan, logo, brand messaging, etc., destroyed by a poor user experience.

Why Does Brand Consistency Matter?

A brand gives a company human-like characteristics, making it easier for customers to relate and engage. Here are several reasons why design leads and stakeholders must prioritize brand consistency in UX.

Reason #1: Building Trust

If you meet someone and they tell you they stand for one thing, but their actions contradict this, you might become suspicious. If you notice more of these inconsistencies, you stop believing them and lose trust.

The same is true for brands, probably more so. People want to see consistency, even down to a product’s typography, colors, and microinteractions.

In a case study from the password manager, TeamPassword, Tony Caccavo, Director of Operations, stated, “Brand is essential in this market. Customers entrust us with sensitive information in their login records. Inconsistencies or an outdated design can cause some customers to question whether we are technologically up to date enough to keep that information secure. Front-end development builds trust and confidence in the backend performance.”

Reason #2: Strengthens Brand Recognition

Brand consistency enables customers to find your business and other products in app stores, social media, and physical locations. A great example is the global mega-brand Virgin.

Virgin competes successfully in multiple industries worldwide, including services, experiences, and physical and digital products. Loyal customers immediately recognize Virgin’s signature red and white branding–associated with its high-quality service delivery, playful nature, and friendly customer service.

Reason #3: Boosts Sales and Marketing Efforts

Strong brand consistency can have a significant impact on revenue, according to a Lucidpress study. The latest State of Brand Consistency Report found consistent branding can increase revenue by 33%–a trend that appears to be growing, as indicated by a 10% increase since Lucidpress’ 2016 report. This is why platforms like Baremetrics help SaaS companies track how brand consistency translates to revenue metrics and subscription growth.

Reason #4: Design and Development Efficiency

Branding, or any design inconsistencies, result in design drift, bugs, rework, technical debt, project delays, etc. These inconsistencies lead to poor customer experiences, but they also create workflow and delivery inefficiencies that cost organizations valuable resources.

To overcome these design and development inefficiencies, companies build design systems, including brand guidelines, to ensure teams deliver a consistent user experience across all touchpoints.

How to Increase Brand Consistency Through UX Design

Much of brand consistency is about building trust. If your company’s actions contradict messaging, people lose confidence in the brand. Here are six tips to ensure products deliver a consistent brand message.

Build a Design System with a Brand Style Guide

Design systems solve several big problems for companies implementing them, most notably cohesion and consistency–for the product and workflows.

A comprehensive design system includes brand guidelines that help reinforce the organization’s messaging and brand identity. Design systems ensure every project delivers the same design language, using the same principles and component library, creating a consistent brand experience for users.

Universal Design Patterns

Design patterns create familiarity, reducing a product’s learning curve and human cognitive load. These universally recognizable patterns give products a foundational consistency to strengthen the brand.

Furthermore, when a product is easy to use, customers are more likely to use and recommend it, thus increasing brand trust and affinity.

Showcase Your Brand’s Voice & Tone Using Design

Like a product’s messaging and copy, the color palette and visual elements must represent the brand’s voice and tone. The best way to define these UI elements is by testing designs with potential customers.

UX design agency Divami does this by developing a brand’s personality based on UX research. When Divami designed Celes Care, “a specialized healthcare platform – For Women, By Women,” they wanted to create a feminine UI without using the stereotypical “all pink.” By testing the color scheme, the agency found a “soft, mellow” palette that, most importantly, end-users associated with the brand’s personality.

Internal vs. External Brand Consistency

Internal consistency refers to the user experience within a product, while external consistency includes a suite of products. While each product might differ slightly, designers must meet a high level of consistency between products.

Apple has a wide range of hardware and software, but the brand’s physical and digital design features leave no ambiguity about who made it. Apple’s design consistency across products strengthens its brand and customer loyalty.

This consistency is easier to manage when the organization designs, develops, and manufactures every product, but what happens with third-party marketplaces?

Products like Shopify, Salesforce, Atlassian, and others, rely on third-party apps to complement their core product(s). While every app offers different features and functionality, the product’s design system ensures each matches the core product. 

For example, app developers must follow Shopify Polaris to ensure that every app in its marketplace meets Shopify’s guidelines (including branding) for content, design, components, and patterns. Even if someone uses multiple apps from different suppliers, it feels like one Shopify product.

Visual Design Consistency

Minor UI design details like spacing, sizing, layouts, colors, etc., can impact brand consistency. When these UI elements are consistent across all UIs, users can focus on completing tasks rather than thinking and searching for content and features.

Furthermore, designers must use consistent microinteractions, page transitions, and notifications that align with the brand’s voice and tone. Again, a design system can solve many of these issues, so user interfaces are always on-brand and consistent.

Be Transparent

Transparency is a significant factor in building trust and brand affinity. Designers must make features simple and transparent so users can complete any task, even those that adversely impact the business, like unsubscribing or canceling a paid plan.

A product must always inform users of a financial incentive, like affiliate referrals, sponsors, third-party data sharing, etc. Designers must also avoid clickbait or deceptive links that ultimately damage trust and brand.

Increase Brand Consistency With UXPin Merge

Merge enables you to sync a component library from a repository to UXPin’s design editor, so designers use the same UI elements as engineers. Any changes to the repository automatically sync to UXPin, creating a single source of truth across the organization.

The design system team can give designers the freedom to change components via React props (or Args for our Storybook integration). They can also hardcode and restrict specific properties teams aren’t allowed to change, like brand assets, colors, typography, microinteractions, etc.–maintaining brand consistency across the organization for every product release.

Programing brand elements and core values into the design system mean product teams can focus on developing new products rather than worrying about small (yet critical) design decisions.

Merge also streamlines the design handoff process because engineers already have copies of the components in a repository. Furthermore, UXPin renders JSX code for each component’s props. Engineers simply copy/paste components from the library and any changes from UXPin to start front-end development.

11 Powerful Lessons on Building and Scaling an Enterprise Design System

Powerful Lessons on Building and Scaling an Enterprise Design System

In May 2022, UXPin had the pleasure of hosting the lovely Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat), for a webinar titled: Enterprise Design System – How to Build and Scale.

This article summarizes part of Amber’s talk where she discusses her team’s challenges with getting design system buy-in and what she would have done differently.

Amber is a co-author of UXPin’s free eBook DesignOps 101: Guide to Design Operations. The book covers six chapters and provides an introduction to DesignOps and how to implement the practice.

Build, scale, share, and mature your design system in UXPin.

What Most Teams do to Win Design System Buy-In

In 2019, Delivery Hero was undergoing the all too familiar growing pains that many startups experience. Delivery Hero had nine teams working on the product with no UI library or design system. The startup had developed silos, and there was lots of duplication, making it difficult to scale, resulting in a “highly fragmented user experience.”

user choose statistics group

Amber and her team decided a design system was the best solution to their problems. So, they set about creating a case to get buy-in from stakeholders.

Run a Design Audit

Delivery Hero’s product team started with a design audit. The audit report revealed many user interface inconsistencies, including:

  • Several different CTAs
  • No typography styling standards
  • Multiple icon styles

Amber notes in her talk, “…our design language was all over the place. This was a big moment of realization.”

The team used the audit report to build a business case and presented it to Delivery Hero’s leadership, resulting in buy-in to redesign the app.

The product team started by redesigning key screens and user flows. The new design was more consistent, cleaner, better aligned with the brand, and improved the user experience.

Build a UI Library With UI patterns

The product team used the redesign to create a UI kit and style guide, including colors, typography, elevation, UI patterns, and components.

Delivery Hero’s product department scaled, onboarding new designers. Amber notes that even with this growth, consistency improved across Delivery Hero’s design projects, and they were able to scale design.

First Attempts at Building a Component Library

Having successfully designed a source of truth for designers, Delivery Hero’s product team wanted to do the same for engineering. Amber and her team put together another business case for a component library.

The business case outlined the core benefits of a Delivery Hero design system:

  • A single source of truth between design and development
  • Better user experience
  • Strengthened brand affinity
  • Faster experimentation, prototyping, and testing

Delivery Hero’s leadership liked the presentation and saw value in the product team’s proposal, but the answer to building a code component library was no! There was no money or resources for a design system.

Rethinking the Approach

Amber’s team went back to the drawing board. They decided to ship their new designs using the style guide to the entire app. The project took three months and was a huge success for the product development team.

Over the next six months, Delivery Hero shipped lots of new features and experiments. The product team’s new designs were fresh and consistent. The problem was, without a source of truth for engineers, Delivery Hero’s final releases lacked cohesion and consistency.

The product team decided to do another series of audits. They took screenshots of design handoff vs. production, which revealed many inconsistencies, including missing content and UI elements. These audits showed that Delivery Hero was collecting debt with every release. This is where proper data integration becomes critical—ensuring that design specifications, component libraries, and development assets stay synchronized across teams. Tools like Integrate.io can help teams orchestrate data flows between design systems, content management systems, and development platforms, reducing the friction that often leads to these inconsistencies.

Building a Convincing Case for Delivery Hero’s Design System

Delivery Hero’s design system team didn’t have any engineers, so they had to partner with a developer to build and test a component for their new pitch to leadership.

designops efficiency person

Amber’s team built a component for Delivery Hero’s ‘No results’ screen and experimented with vs. without a design system:

  • Building without a design system – total time: 7.5 hours
  • Building as a reusable component – total time: 3.25 hours

The product team only recorded front-end development time. The experiment demonstrated a 57% time reduction in front-end effort and zero percent debt with a reusable component.

Amber’s team used this new data to present another case for building a component library. Delivery Hero’s leadership was impressed by the results and gave the go-ahead to develop a design system.

Today, Delivery Hero’s design system, Marshmallow, has 30+ components in its UI kit and code UI library managed by a dedicated design system team–unifying design and development with a single source of truth.

Marshmallow includes:

  • A design system website
  • A dedicated Slack channel
  • Guidelines (brand, code, design, copy, etc.)
  • Design language
  • Protocols for working and communicating
  • A code component library
  • An icon template
  • A UI kit
  • UI examples
  • Design system governance procedures

Learn how to create a design system from scratch here: Design Systems: Step-by-Step Guide to Creating Your Own.

Getting Buy-In and Scaling for Building an Enterprise Design System

mobile screens pencils prototyping

Reflecting on lessons learned, Amber offers six pieces of advice for getting buy-in for an enterprise design system.

Start with a real pain point

Identifying a pain point that’s adversely impacting the product, users, and business is a crucial first step. Amber and her team used an auditing system to identify a significant drift between design and development.

Build the value proposition

Use the pain point(s) to build a value proposition for your business case. Your solution must solve the problem and deliver a return on investment for stakeholders.

Identify your biggest supporters and sponsor

Amber recommends finding support from other departments to back your design system pitch. These advocates will support your claim that 1, “this is a real problem for the company,” and 2, “this is the best solution.”

Show before you tell

Amber says the mistake she made in her first pitch was telling a story without proof. When the team showed stakeholders what a component library could do, their story became more compelling, and the business case was convincing.

Talk business metrics

“If we don’t tie the business case of the narrative with KPIs or the metrics that impact business, then the story is not complete.” Amber Jabeen

Amber says your business case must include design system metrics to demonstrate how the problem costs the company resources and what the solution will do to help.

Don’t go alone – build your network

Pitch your business case as a network of cross-functional partners, including tech, design, product, marketing, customer services, etc., to demonstrate that your design system is a solution for the organization and not just something to make the design team’s life easier.

Watch Amber’s entire one-hour webinar on YouTube.

Code-Based Design Systems With UXPin

Sync your design system’s component library with UXPin’s editor to create a single source of truth between design and development using our proprietary Merge technology.

Website Design for Higher Conversions – A Quick How-To Guide

Website Design For Higher Conversion Rates

It takes 50 milliseconds for visitors to form an opinion about your business from your website’s design. A poor user experience creates a negative sentiment resulting in high bounce rates and conversion loss.

Understanding UX design’s impact on a website’s conversion rate is key to removing potential roadblocks, creating business value, and delivering a higher ROI for design projects. This article explores how website design impacts conversions and how design teams can improve marketing campaigns.

Design better user experiences using meaningful insights from prototyping and testing your conversion rate optimization ideas in UXPin. Discover how code-based design can enhance UX workflows, increase website conversions, and create better experiences for your customers. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Website Conversion Optimization?

idea 1

Website conversions include successful sales, leads, form completions, and other tasks you want visitors to complete. Website conversion optimization is a practice of increasing opportunities for visitors to complete these tasks.

Much of this conversion optimization comes down to web design and user experience–a task for UX designers. Designing for optimization means UX teams must understand what users need and how the user interface can guide them to that goal quickest.

Why is Design Important for Conversion Rates?

Web design plays a crucial role in conversion rates. Here are some stats to support this case:

Setting the First Impression

A website’s design is often the first customer touchpoint and how people perceive your brand. Impressing customers with an aesthetically-pleasing user interface, experience, and content is the first step toward converting website traffic to revenue-generating customers.

Enhances SEO

Search engine optimization (SEO) is vital for websites because it delivers free organic traffic. UX designers must understand how search engines crawl and index web pages to optimize content, layouts, and hierarchy.

Read more about UX and SEO on our blog.

Accessibility

accessibility

Web accessibility is another SEO factor, but it’s also critical for creating inclusive website experiences. UX designers must factor in disabilities like low vision, color blindness, blindness, cognitive disabilities, deafness or hearing impairment, and mobility impairments to ensure websites meet Web Content Accessibility Guidelines (WCAG)–a legal requirement in many jurisdictions.

Promotes Trust

Trust is a significant factor in converting visitors. Customers want to know they can trust your company and website before handing over money or personal information. Good web design tells customers you care about your brand, value their business, and want to give them a good user experience–like welcoming people into a physical store.

Design ROI

Aside from user experience, designers must also recognize the importance of increasing conversions for design’s return on investment. Increasing opportunities and conversions establishes design’s value within the organization.

Design Tips and UI Patterns That Boost Conversions

testing user behavior pick choose 1

1. Call to Action (CTA)

CTAs are crucial for conversion optimization. They grab users’ attention with an offer with a UI element to take the desired action–like call-to-action buttons or an email form. CTA buttons are usually colorful and larger than other content to signify their importance and encourage engagement.

2. Landing pages

According to HubSpot research, “more landing pages a business has on its website, the more leads it generates.” Designers and marketers can collaborate to design high-quality, lead-generating landing pages.

Unlike regular web pages, landing pages remove all navigation and links to eliminate distractions and focus users on a single product or CTA.

3. Testimonials

Testimonials or reviews are vital for displaying social proof, especially if they’re from prominent figures or brands. Testimonials tell website visitors that others are using your product and are happy with what they received.

According to marketing software giant HubSpot, “People consult reviews and testimonials to determine whether or not they trust a product, service, and even a seller.”

4. Value Proposition

Your value proposition tells customers what problem your product solves. For example, if you’re selling high-speed internet, your value proposition is that customers can “stream Netflix and YouTube videos with no buffering or interruptions.” Nowhere do you mention high speed or internet; you’re selling the solution.

Marketers generally put value propositions above the fold, next to the CTA. Customers see the solution (value proposition) to their problem and follow the link to sign up.

5. Contact Information

People often visit business websites to find contact information like email addresses and phone numbers. Many websites include these contact details in a header bar above the main navigation, so users don’t have to scroll or navigate to another page to find them.

Designers must instruct engineers include a “tel:” or “mailto:” HTML link attributes so users can click to email or call.

6. Pricing

Pricing is another reason people visit company websites, particularly SaaS and other service-based businesses. A pricing table UI pattern comparing your product’s plans is helpful for users, and the transparency builds trust. Designers must always include CTAs for users to sign up for their preferred option and begin the onboarding process.

7. Human Faces

user laptop computer

Using relevant human faces for product images is crucial for creating a human connection while making the content relatable. Your about page must also include profile images of team members to give your brand a personal touch.

Onextrapixel has an interesting article, “On How To Use Human Face To Improve User Experience,” with examples from some of the biggest brands’ websites.

8. Negative Space

Negative space or whitespace is an excellent web design technique for drawing attention to specific content, like a CTA, important elements, or copy. Designers must also use appropriate negative space for text and UI elements to enhance readability and separate content.

9. Case Studies

Case studies are essential for B2B websites to demonstrate how your product solves problems and delivers results.

For example, our UXPin blog features a case study about “How PayPal scaled How PayPal Scaled Their Design Process with UXPin Merge.” Adoption from one of the biggest tech companies in the world gives Merge significant credibility and demonstrates that the product works.

10. Loading Speed

While loading speed optimization is typically the engineering team’s responsibility, designers can do a lot to reduce the page load time, including:

  • Use responsive design best practices and optimize layouts and content for desktop, tablet, and mobile devices.
  • Eliminate unnecessary “nice-to-have” features and functionality that don’t get users to their goals faster.
  • Find ways to reuse components and microinteractions to minimize CSS and Javascript file sizes.
  • Use JPG rather than PNG and scale and optimize images according to placement and web layout.
  • Use SVG for logos, icons, and other graphics.

Conversion Rate Optimization

Here are some tips design teams can use to analyze and optimize a website’s conversion rate. Designers can use these tests for existing websites or test new ideas.

A/B testing

A/B testing (split testing) is a technique for comparing two designs to determine which performs better. It’s an iterative process where UX designers make small changes to optimize websites and landing pages.

The secret to successful A/B testing is to compare minor changes, like color, copy phrasing, fonts, images, etc. Comparing two completely different designs makes it difficult to tell what specifically increased conversions.

Multivariate Testing

Multivariate testing is similar to A/B testing, but design teams test multiple designs instead of only two variations. Designers can test multiple layouts simultaneously to arrive at the best option faster.

These tests only work for high-traffic websites where designers can split visitors into multiple groups and still have a large enough sample size to achieve accurate results.

Heatmaps

image5

Heatmaps provide insights into how website visitors engage with a webpage and content, notably hover, scroll, and click/tap interactions. Design teams use this data to determine:

  • Are CTAs and user journeys obvious?
  • What navigational links are most important?
  • How far do users scroll?
  • Are there any UI elements distracting visitors from desired actions?
  • Is there a link or content further down the page that users find more valuable than what’s above the fold? i.e., does the visual hierarchy match user behavior?

Google Analytics for Designers

Google Analytics (GA) can tell designers a lot about demographics, user flows, traffic sources (organic, social media, referrals, etc.), and behavior. It’s a fantastic tool for identifying the best and worst-performing pages and where users often exit funnels. Designers can use GA data to identify issues and run tests and interviews with end-users to pinpoint the problem.

We recommend reading Alice Walker’s “The ultimate guide to Google Analytics for UX designers“ to understand the tool and its capabilities better.

Improve Prototyping and Testing to Enhance Website Conversions in UXPin

collaboration team prototyping

One of the challenges UX teams have when prototyping and testing website designs are that image-based design tools lack fidelity and functionality.

Without replicating a user flow or code’s fidelity and functionality, UX designers cannot get accurate feedback and insights. They must rely on front-end developers to program code-based prototypes. Tools like Sendspark can even help teams incorporate personalized video content into their designs to test how dynamic, personalized elements impact user engagement and conversion rates.

With UXPin’s code-based design tool, designers can achieve the same fidelity and functionality without writing a single line of code. UXPin prototypes deliver accurate, actionable results during testing, allowing designers to solve more usability issues before the design handoff.

Designers can build exact replicas of website user flows, landing pages, eCommerce checkouts, and more to test, iterate, and optimize prototypes with real end-users.

Get a clearer picture of your website’s user experience with accurate prototyping and testing in UXPin. Sign up for a free trial to discover how code-based design can optimize your website design for higher conversion rates.

Try UXPin for free