npm is a package manager for JavaScript that helps developers install, share, and manage libraries or pieces of code that are commonly used in applications. These packages can range from small utility functions to full-fledged UI components like buttons, form elements, or even complex layouts.

npm is also a key enabler of the design-development collaboration that UXPin Merge facilitates. By packaging React components through npm, developers can hand off real, functioning UI components to designers, who can then integrate them into their designs effortlessly. This results in a more consistent and efficient workflow, ensuring that your design system and the final product are perfectly aligned.. Discover UXPin Merge.

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

Try UXPin Merge

What is NPM (Node Package Manager)?

npm or Node Package Manager is an open-source repository of tools engineers use to develop applications and websites.

npm is two things:

1. A repository for publishing open-source projects.
   Simplified version: a digital storage and retrieval facility.
2. A command-line interface (CLI) for interacting with the repository.
   Simplified version: a tool to communicate with the storage facility.

What is a Package Manager?

Before we can explain what npm package is, it’s essential to understand the idea of a package manager. Think of a package manager as a toolkit for developers.

Let’s say you’re building an application that uses Stripe for payments. A package manager installs all the code your product will need to communicate with Stripe and process payments.

Instead of writing all that code or copy/pasting it from Stripe’s docs, engineers simply enter a command, and the package manager installs the code dependencies they need from Stripe.

There are millions of these packages for everything you can think of to develop an application–like different types of search functionality, APIs, payments, authentication tools, maps, icons, hosting, and more.

You get public open-source repositories (like npm) where anyone can upload and install packages, as well as private package repositories with restricted access.

What is a Command Line Interface?

A command-line interface (CLI) is a text interface developers use to interact with computer programs. This CLI allows you to execute commands to run background operations necessary for software development.

In the case of npm, the CLI allows you to interact with the package registry. For example, engineers can use commands like npm install followed by the package name to install a specific package.

The npm Registry

The npm website is where engineers can search and learn about packages. This website is just a registry and doesn’t host the packages. Instead, engineers use platforms like GitHub, Packagecloud, AWS CodeArtifact, and others to host and distribute packages.

For example, if we look at the UXPin Merge CLI on NPM, it has displays GitHub as the repository and relevant link. Above that is the command to install the UXPin Merge CLI and its dependencies: npm i @uxpin/merge-cli. The “i” after npm is an abbreviation for “install.” So, typing npm install @uxpin/merge-cli would render the same result.

What are Dependencies?

Packages consist of other packages that engineers call dependencies–we know, confusing, right! These dependencies are packages of code that perform different tasks within the project.

For example, the UXPin Merge CLI uses Typescript and therefore requires the typescript package as a dependency. Typescript is just one of the 41 dependencies UXPin Merge CLI requires. 

What are Devdependencies?

Looking at the UXPin Merge CLI’s dependencies, you’ll notice 41 Dependencies and 41 Dev Dependencies (also referred to as devDependencies–one word).

• Dependencies: The packages required to run a piece of software
• Dev Dependencies: The packages needed during the development phase only

Dependencies and devDependencies reside in a separate folder called node_modules, so your packages.json file and project code know where to find them.

What is the package.json File?

There’s a package.json file that provides its metadata and dependencies. When installing the project on your computer, npm will reference the package.json file to install the dependencies and devDependencies.

Instead of installing each dependency individually, you simply type npm install in the command line.

Hosting providers also use the package.json file to install the dependencies (excluding devDependencies) needed to run the project on its servers.

What is package-lock.json?

The package-lock.json specifies the exact version of the package used to build the project. This file locks the dependencies so that when the project is installed, it references the versions used during development rather than the latest release.

Engineers update packages regularly, often changing the way the package works. So, locking your dependencies ensures the project operates as intended.

How to use npm

Here are some common npm commands and what they do:

• npm init: Creates a package.json file for your project. If you’re building an application from scratch, npm init will be one of the first commands you use to include key project information. NPM will automatically update your package.json file whenever you install or remove packages.
• npm install: Installs all of the project dependencies in a package.json file.
• npm install <package-name>: Installs a specific package from the NPM registry and saves it to your node_modules folder. For example, npm install @uxpin/merge-cli will install the Merge CLI.
• npm install <package-name> –save: Installs an NPM package and adds it to the dependencies in your package.json file.
• npm install <package-name> –save-dev: installs an NPM package and adds it to the devDependencies 
• npm uninstall <package-name>: Uninstalls a specific package from your project.
• npm doctor: Runs diagnostics on your npm installation to check if it has everything it needs to manage your packages.
• npm update <package-name>: Updates a specific package to the latest version.

These are just a few of the most common npm commands. You can find the complete list in the npm documentation.

Understanding npm as a Designer

npm is simply a toolkit comparable to plugins or app extensions for design tools. You don’t need to know the ins-and-outs of how packages are created, but it may be useful to know a thing or two about it.

First of all, some of code component libraries are shared as npm packages, such as MUI, Ant Design, etc.

How to find component libraries that are distributed as npm packages? Let’s say you search through Adele, UXPin’s library of publicly available Design Systems, for a component library that you can bring in to UXPin. You pick Shopify’s Polaris and notice that it is distributed via npm.

So, you go to the NPM site, look for Shopify’s Polaris, and find it.

UXPin with Merge technology allows you to import UI elements from component libraries via NPM packages. Then, you can use those elements to put together fully-functional prototypes.

UXPin Merge is usually being set up by a developer. But if you lack the development support, you can use our new tool – Merge Component Manager and manage UI components by yourself.

However, if you want to enhance your programming knowledge to collaborate with devs better, then learning about basic code principles (HTML, CSS, Javascript) and component libraries is far more valuable for designers.

What Can You Do with npm Integration?

Even though npm is typically a tool developers use, it plays a crucial role in enabling powerful design workflows—like bringing React components into UXPin for seamless drag-and-drop UI building.

Here’s why npm is important for technical designers working with tools like UXPin Merge:

1. Access to React Components: If your design system is built using React, npm allows you to package these components and make them accessible for use in other applications or tools—like UXPin Merge. React components that are available as npm packages can be directly imported into UXPin, giving designers the ability to drag and drop real code components into their designs without writing code.
2. Easily Manage Updates: npm simplifies version control. When a developer updates a package (such as a new version of a button component), npm can automatically manage this update in UXPin Merge, ensuring that designers always work with the latest components from the development team. This ensures consistency between design and development without the need for manual updates.
3. Collaborate Seamlessly with Developers: npm helps technical designers and developers work from the same source of truth. Developers use npm to publish the components they create, while designers can easily import those components into UXPin using Merge. This ensures that the components designers use for prototyping are exactly the same as the ones developers will implement in the final product.

Improve Collaboration With UXPin Merge

Merge enhances collaboration between design and development because designers and engineers work with the same component library. 

Instead of having a UI kit for designers and code for devs, Merge syncs a repository to UXPin’s editor so design teams can build fully functioning prototypes using code components.

You can sync your company’s design system or a component library like MUI so that you only have to drag and drop UI elements to build interfaces. Request access to Merge.

The post What is npm? appeared first on Studio by UXPin.

Some team members despise design system governance. They see it as a roadblock to rapid growth, creativity, and flexibility. However, design system governance can foster scalability and creativity if properly implemented while maintaining design and usability consistency.

Good design system governance prioritizes users before growth and profits. Company culture also plays a significant role in how a company implements a governance process that team members follow and embrace.

The tools UX and engineering teams also have an impact on design system governance. UX teams must update design tools to match changes to the final product, exposing the process to human error!

With UXPin Merge, teams don’t need to worry about updating two different design systems. UXPin Merge syncs our editor tool with code components from your Git repo or Storybook integration (allowing you to connect with React, Revue, Angular, Ember, and many more), eliminating the need for separate design systems and mitigating human error.

See how UXPin can enhance your design system governance!

What is Design System Governance?

Design system governance is the process and protocols for maintaining and updating a product’s design system.

Even minor changes, like changing an app’s close icon from an X to a — must go through a multi-step approval and implementation process.

Design system governance fulfills several purposes:

• Maintain’s design and brand consistency
• Prevents poor design decisions—leading to usability issues
• Encourages team members to think creatively and try to solve problems with the tools on hand before attempting to make changes
• Ensures updates consider accessibility
• Keeps the entire organization informed of changes
• Updates digital product and design documentation

Without effective design system governance, editing and updating new components is a free-for-all that could create usability issues, inconsistencies and ruin the product’s reputation.

The Challenges of Maintaining a Design System

There are many challenges to maintaining a design system. Every organization must have a dedicated individual or team to manage its design system. 

Here are six common challenges to maintaining a design system and why an effective governance model is essential!

Company Political Forces

Sadly, even successful design systems aren’t safe from power struggles within an organization. Team members might call on executive power to either push or block design changes, overriding the initial decision of a design system team.

Conversely, governance keeps executives and other stakeholders well informed on design changes and the reasoning, making it easier to get buy-in and approval.

Managing Input From Multiple Teams and Departments

A design system is not only for UX and engineering teams. Product teams and other stakeholders share ownership of the organization’s design system. 

Managing all of this input can be challenging without a proper system of governance.

Design Systems are Often an Afterthought or Side Project

In many organizations, especially fledgling startups, the product’s design system isn’t a priority. It’s a side project a UX designer maintains in their spare time or over the weekend—feebly trying to maintain consistency with the demand for growth!

In this environment, a design system is prone to abuse and poor design decisions. Often UX teams have to undo changes to fix usability issues due to poor governance.

Poor Communication

Without proper communication between departments, teams, and individuals, a design system falls apart. For example, two teams might unknowingly work on the same task separately, or worse, crucial usability changes go forgotten because everyone thought “someone else was working on it.”

Design system governance fosters organization-wide communication, so everyone is updated and informed!

Reluctance from Team Members

When teams are reluctant to adopt the product’s design system, they choose the parts they like and develop a “better way” to design the rest. New team members or those not involved in creating the design system believe they can do better—thus undermining the hard work of others.

This reluctance can not only affect the product’s usability and consistency but create unnecessary conflict.

A governance model with multiple checks and balances prevents team members from hijacking a design system.

Reluctance to Change

Sometimes the opposite is true. Design system managers believe the system is fine the way it is, blocking any changes. A design system is never complete. It’s a work in progress that must evolve for the organization to grow.

The Single Source of Truth Dilemma

Many companies struggle with the single source of truth dilemma—working with a single dataset between all departments, primarily UX design, product, and engineering.

The UX team works with design tools, engineers with code, and the product team (often with limited technical know-how) uses all sorts of tools, including powerpoints, PDFs, and paper, to name a few. 

With this scattered workflow, maintaining a single source of truth is challenging. Often requiring additional staff and resources to ensure everyone is up-to-date. Even with good systems of governance, the single source of truth dilemma is a constant challenge.

Global payment giant PayPal solved its single source of truth dilemma with UXPin Merge. PayPal uses UXPin Merge to build and maintain its design system for internal user interfaces with code components from a Git repository.

When developers implement new changes, UXPin’s design editor’s components update simultaneously, so designers and engineers always work with the same design system. 

Establishing Design System Governance Standards

There are four primary scenarios where a design system requires changes or updates. These scenarios require a submission process where teams must ask a series of questions and tests before prototyping or requesting amendments.

• Introducing new elements – Establishing a workflow for adding new elements ensures design system integrity while providing every team member with an equal opportunity to make additions. 
• Promoting patterns – Patterns fall into two categories: one-off or best new practice. Teams must test these new patterns against what’s currently available before promoting them.
• Reviewing and adapting patterns – Every design system must have a team (at least two members) to review patterns before release. This review process ensures new elements meet the standards and practices of the current design system.
• Releasing design system updates – Rather than releasing new updates when they’re ready, teams must establish a release schedule for updates. A strict release schedule ensures teams follow quality assurance and documentation processes correctly.

An effective way to manage this submission process is through a simple decision tree that maps every step a change must follow.

This excellent example from Inayaili de León shows how Canonical’s team adds new patterns to their design system following a simple decision tree—from concept to release.

Inayaili admits that, like their design system, the decision tree is a work-in-progress that they update and refine as the product evolves.

5 Different Design System Governance Models

Design system governance models refer to the frameworks and practices that organizations use to manage, maintain, and evolve their design systems. Effective governance is crucial to ensure consistency, scalability, and collaboration across teams, especially as design systems grow and evolve over time. Here are some common design system governance models:

1. Centralized Governance Model

In a centralized governance model, a single, dedicated team (often called the design system team or design system core team) is responsible for the development, maintenance, and updates of the design system. This team typically includes designers, developers, and product managers who collaborate closely to ensure the design system is aligned with the organization’s brand and user experience goals.

Key Characteristics:

• Unified Control: The design system team has full control over the design system’s direction, updates, and maintenance.
• Consistency: Centralized control helps maintain a high level of consistency across all components and design tokens.
• Streamlined Decision-Making: With a single team making decisions, changes and updates can be implemented quickly and efficiently.

Pros:

• Clear ownership and accountability.
• High consistency and quality control.
• Efficient decision-making and streamlined processes.

Cons:

• Can become a bottleneck if the team is small or overburdened.
• May lack input from various product teams, potentially leading to a less flexible or adaptable system.

2. Federated Governance Model

A federated governance model, also known as a decentralized or hybrid model, involves multiple teams contributing to the design system under a set of shared guidelines and standards. In this model, the design system team still exists, but other product or feature teams also have the ability to contribute components, patterns, or updates.

Key Characteristics:

• Shared Responsibility: Different teams contribute to the design system, fostering a sense of ownership and collaboration.
• Guidelines and Standards: The design system team provides overarching guidelines, but individual teams have flexibility within those guidelines.
• Cross-Functional Collaboration: Encourages collaboration across teams, promoting innovation and diverse perspectives.

Pros:

• Increased flexibility and adaptability.
• Encourages innovation and input from various teams.
• Reduces bottlenecks by distributing the workload.

Cons:

• Potential for inconsistencies if guidelines are not strictly followed.
• Requires strong communication and coordination among teams.

3. Community-Driven Governance Model

In a community-driven governance model, the design system is managed in a more open, collaborative manner, often with contributions coming from across the organization, including designers, developers, product managers, and other stakeholders. This model relies heavily on community involvement and collective decision-making.

Key Characteristics:

• Open Contribution: Anyone in the organization can propose changes, updates, or new components.
• Community Moderation: A committee or group of maintainers oversees contributions, ensuring they meet quality and consistency standards.
• Collaborative Decision-Making: Decisions are often made collectively through discussions, voting, or consensus.

Pros:

• Highly inclusive and democratic.
• Promotes widespread adoption and engagement.
• Encourages diverse perspectives and innovation.

Cons:

• Can be challenging to maintain consistency and quality.
• Decision-making can be slower and more complex.
• Requires a strong governance framework to manage contributions effectively.

4. Mixed Governance Model

The mixed governance model combines elements of the centralized, federated, and community-driven models, depending on the needs of the organization and the maturity of the design system. This model provides a flexible approach to governance, allowing teams to adapt based on specific circumstances, project requirements, or organizational culture.

Key Characteristics:

• Flexible Approach: Different governance styles are applied to different parts of the design system, based on complexity, importance, or other factors.
• Balanced Control: Centralized control is maintained for core components, while more flexibility is allowed for less critical elements.
• Adaptive Governance: The governance model can evolve over time as the design system and organization grow.

Pros:

• Balances consistency and flexibility.
• Can adapt to changing needs and contexts.
• Allows for experimentation and innovation.

Cons:

• Can be complex to manage and communicate.
• Requires clear guidelines to prevent confusion and maintain coherence.

5. Open Source Governance Model

The open source governance model is similar to the community-driven model but typically involves an external community beyond the organization. In this model, the design system is open to contributions from anyone, and the community helps drive its development and evolution.

Key Characteristics:

• External Contributions: Contributions come from a wide range of external developers, designers, and other community members.
• Open Development: The design system’s development process is transparent and open to public scrutiny.
• Community-Driven Decision-Making: The community plays a significant role in shaping the direction of the design system.

Pros:

• Leverages a broad pool of talent and ideas.
• Encourages rapid innovation and evolution.
• Promotes transparency and inclusivity.

Cons:

• More challenging to maintain quality and consistency.
• Requires robust community management and governance structures.
• Risk of diverging goals and priorities among contributors.

Choosing the Right Governance Model

Selecting the right governance model for your design system depends on several factors, including the size and structure of your organization, the maturity of your design system, and the level of collaboration and flexibility you want to promote. Some organizations may start with a centralized model and evolve to a federated or community-driven approach as their design system matures and adoption grows.

Ultimately, effective design system governance should align with your organization’s goals and culture, fostering collaboration, maintaining consistency, and ensuring scalability as your design system evolves.

A Step-by-Step Governance Model Example

There are many ways to approach design system governance, but here is a 10-step process inspired by design system guru Brad Frost:

1. Use what’s available – Product teams must exhaust every effort to find a solution using the current component library. This means a design system must be well documented and accessible to everyone. If the current design system does not fulfill the new requirement, teams can proceed to step two.
2. Contact design system (DS) team – Product teams contact the DS team to discuss the problem and the proposed changes. Again, the DS team and product team will work together to find an existing solution. With intimate knowledge of the design system, the DS team might uncover something the product team missed. If there is still no solution, teams proceed to step three.
3. Determine if the change is one-off or part of the design system – The product team and DS team decide whether the amendment is a one-off (snowflake) or part of the design system. One-off changes usually fall on the product team, while the DS team handles design system changes. Either way, teams must prioritize and schedule the changes.
4. Initial Prototyping – Teams prototype and test product changes.
5. Initial Review Process – The DS team and product team review the results from prototyping and testing. If both teams are satisfied, they proceed to the next step. If they determine the changes are lacking, teams return to prototyping and testing.
6. UX & Dev Testing – Once designs pass the initial review, they go to UX and development teams for further testing to ensure the changes meet user experience and technical requirements.
7. Final review – The product team and DS team meet again to review the results of UX and dev testing. If both teams are satisfied, they proceed to the next step. If not, they iterate.
8. Documentation and schedule release – Teams document the new changes, update the changelog (e.g., Github), and schedule the release.
9. Changes released – Changes are released, product version bump according to versioning guidelines, all teams notified (Slack, Asana, Trello, Github, etc.).
10. Quality assurance – Product teams review the final changes for quality assurance.

You can see how this 10-step process will mitigate all of the six common design system challenges we outlined earlier. With multiple checks and balances, a design system maintains its integrity while communicating changes to the entire organization.

While this process solves many design system challenges, checks and balances don’t eliminate human error. Teams need a tool to provide a single source of truth!

Improving Design System Governance with UXPin

UXPin Merge bridges the gap between design and code, creating a single source of truth, so designers and engineers always work with the same tools.

Popular vector-based design tools don’t solve the problem. Designers and engineers must update and sync identical systems separately—an ineffective workflow prone to error.

UXPin is a code-based design editor syncing code components via Git or Storybook to allow product teams, UX designers, and developers to work with the same components—no need to update systems separately!

Lastly, because prototypes are code-based, product updates and design system changes are significantly quicker to engineer.

Ready to switch to the only design tool that fosters good design system governance? Discover UXPin Merge to get the most of your design system and keep all the design and code components up to date.

The post Design System Governance – Scale Your Design appeared first on Studio by UXPin.

Design system tools help drive adoption while making it easier to scale and maintain. With so many options on the market, how do you know which one is right for your product?

Having worked with design tools for over a decade, we’ve put together seven of the best design system tools–including solutions for both: designers and engineers.

Bring a component library from your design system to UXPin and enjoy the interactivity of component-driven prototyping. Your own components are easier to maintain, keep in sync, and share with devs as a single source of truth for design and code. Request access to UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

UXPin

UXPin allows you to create and manage design systems directly within the platform. You can set up your design guidelines, resources, and documentation early in a project, which helps maintain consistency and ensures that everyone on the team is aligned.

The Design Systems tab in UXPin’s dashboard is the central hub where all your design systems are created and stored. This centralization simplifies access and management, making it easy for teams to work with design systems efficiently.

• Flexibility in Creation: UXPin supports creating design systems from scratch or using existing libraries. This flexibility allows teams to either start fresh or build upon a foundation of pre-existing assets, accelerating the design process.
• Drag-and-Drop Simplicity: Designers can simply drag and drop the design system’s components and assets to start building layouts, with no need for external files or plugins. With everything integrated inside UXPin, teams achieve maximum consistency and efficiency without needing to leave the tool to access design system documentation.

A well-organized design system includes various resources like colors, typography, assets, and UI patterns. UXPin excels at managing these resources by providing specific sections for each:

• Colors and Typography: UXPin allows designers to easily add colors by typing HEX codes, importing from a website URL, or linking directly to CSS files. Similarly, text styles can be managed directly from the editor, making it easy to maintain consistent typography across all projects.
• Assets and UI Patterns: Designers can upload images, icons, and other assets in various formats, including SVG. UXPin’s UI patterns feature allows designers to create reusable components and add them to the design system anytime, ensuring that all design elements are consistent and reusable.
• Link to documentation: UXPin also makes it easy to link to external documentation for engineers, like a component library hosted in Storybook. This documentation is accessible through UXPin’s Spec mode, where developers can easily access properties such as colors, typography, CSS code, and the component’s origin.

As your design system matures, upgrade to UXPin Merge–a technology that lets you sync a design system from a repository to UXPin’s editor so designers can build layouts using fully functional code components.

With Merge, designers and engineers use the same components, thus creating a single source of truth for your design system. Any updates to the repository automatically sync to UXPin’s editor, notifying designers of the new version.

Teams can use UXPin’s Version Control to switch between different versions of the design system. They also have the freedom to use different versions for each project or prototype.

Zeroheight

Zeroheight is a hub for hosting your design system documentation to share across the organization. Unlike UXPin, where designers can draw components directly from the library, Zeroheight lets you host design files that team members must download and install.

The platform does, however, allow you to embed your design system’s components from Storybook with code snippets.

Zeroheight offers a standard dashboard layout for your design system, similar to Lightning, Polaris, Stacks, and others, with main navigation on the left and a table of contents to the right. This familiar layout helps with onboarding, allowing teams to navigate the design system to find what they need.

You can store all of your design system’s assets in Zeroheight, and the DS team can embed YouTube, Vimeo, Loom, or Google Drive videos for tutorials and explainers.

Supernova

Supernova is an excellent alternative to Zeroheight with a similar layout and features but slightly more functionality.

One of Supernova’s best features is the ability to automatically “convert design data into code or assets for any tech stack.” You can also include starter templates for developers in your product’s formats, like iOS, Android, React, Angular, Flutter, and others, ensuring engineers always have the correct code and assets at the beginning of every project.

Supernova’s VSCode extension syncs your design system to the popular IDE, so developers have everything they need in one place. You can also sync Supernova to popular design tools so designers don’t have to download and import files.

Storybook

Storybook is a popular tool for engineers who want to build and store UI components in isolation. Storybook also integrates with other design and development tools.

One of those tools is UXPin. With Merge’s Storybook integration, you can sync your library to UXPin’s editor so that designers can access the same components–creating a single source of truth.

A sandbox environment inside Storybook makes it easy for engineers to focus on individual UI components, including states and interactions. The dashboard layout allows you to organize and categorize your Storybook component library, so it’s easy to find what you need.

Storybook is a collaborative tool allowing you to review new components with teams and stakeholders to get input and sign-off before publishing. The Chromatic add-on lets you automate visual testing across browsers and gather feedback from QA teams.

Storybook automatically creates basic documentation for each UI component, which you can edit to include your design system’s guidelines, usage, principles, and more.

Storybook is an open-source tool, and it’s free to use. Simply follow the comprehensive documentation to get started. Check out these best practices and Storybook examples for inspiration.

Pattern Lab

Pattern Lab is an open-source front-end environment for building, viewing, testing, and showcasing your design system’s UI components. The platform uses Brad Front’s Atomic Design principles that “stitches together UI components” to build patterns and templates.

You can build components in Handlebars or Twigs markup and use a separate JSON file to create variations. Pattern Lab automatically categorizes your elements and displays them in a dashboard-style UI. 

Users can inspect each element from the dashboard to view the markup and HTML language with CSS classes. You can also include documentation for each component to give users more information and context.

If you’re building a custom design system management tool, Pattern Lab provides an excellent starting environment for you to customize.

Adobe XD

Out of the box Adobe XD doesn’t provide features for managing a design system, but it does integrate with design system tools like Zeroheight, Frontify, Zeplin, and others.

Like UXPin, designers can share component libraries and assets from your design system–albeit without the context and instructions of documentation and style guides.

The problem with using Adobe XD for mature design systems, is you have separate components for design and development, one code-based and the other image-based for designers to use in XD. You also need additional tools and plugins to sync and manage your design system and deal with design system contribution.

Design System Manager – InVision

Until 2024, Design System Manager (DSM) from InVision was another popular design system management tool. DSM looked and functioned very similar to Supernova or Zeroheight with a clear dashboard layout and intuitive navigation.

DSM synced to InVision’s design tool, so teams could drag components from the design system to build layouts. Like UXPin Merge, it kept design systems unified.

Sadly, InVision is no longer available. It was shutdown in January 2024. If you are looking for a compelling alternative, we recommend you try UXPin Merge.

What to Look for in a Design System Management Tool?

Your design system tool must provide a good user experience for your designers and engineers. Here are some essentials to look for when choosing design system management tools.

Version Control

Versioning is a crucial feature every design system must have. Version control creates a new file for every design system release so that teams can switch between versions. Some of the benefits of design system version control include:

• Allows teams to update to the latest design system release when they’re ready–preventing interruptions to workflows
• Allows teams to work on the same file simultaneously
• Track changes over time
• Informs teams of what’s in each release
• The ability to switch between versions
• Helps with fault finding

Read more about versioning: Version Control for Design – Is it Worth it?

Style Guide

Most design systems start as style guides (usually PDF) that designers use to design components and UIs. A style guide provides context and instructions for a design system’s patterns and components–for example, color HEX codes, typography scales, usage, dos and don’ts, etc.

Component Storage

Component examples are most helpful for developers because they’re interactive and include code snippets. This is important because it allows engineers to see exactly how the component is supposed to work.

Asset Storage

It’s important to keep all of your design system assets (logos, images, etc.) with your component library and documentation so everything is in one place.

Documentation & Guidelines

Documentation is the core of every design system. This documentation provides users with principles and guidelines to design products, including:

• Brand guidelines
• Design principles
• Copy guidelines
• Design system governance
• Design and code best practices
• Design system accessibility
• Resources
• Tools

Feedback

Every design system must be open to feedback and suggestions. This communication is also crucial for flagging bugs or errors. Including a contact page or comment form in your design system allows teams to submit feedback.

Which Design System Management Tool Will You Choose?

It’s your turn now. Pick a design system tool that fits your needs. Test every tool that we compared here and see which one you like best. To speed up interactive prototyping, scale design operations, and boost collaboration, try Merge. Read more about UXPin Merge.

The post 7 Great Design System Management Tools  appeared first on Studio by UXPin.

If the product requirements document is the heart of your product, then the functional specs make up your product’s brain — it explains how everything works together in greater detail.

Since all companies follow different processes (Lean, Agile, Kanban, etc.), we’ll look at just the most relevant parts of a functional requirements document.

Maintaining accurate and up-to-date functional documentation can be a daunting task for design and development teams. Often, documentation falls behind due to rapid iterations, leaving teams to rely on outdated or incomplete specs. UXPin Merge is a design tool that helps you design with real functional components, thus making the maintenance of documentation and artifacts easier. Check it out. Request access to UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What is a Functional Specifications Document?

In the world of software development, a functional specifications document is a set of guidelines that detail how a particular component of a software should function. It is different from a product requirements document (PRD) in that a PRD lists the features of a software.

For example, a product requirements document might list “user registration” as a feature of a social app. The functional requirements document will give a high-level detail of the user registration process, such as the necessary form fields and any age restrictions. It will also list any error messages or success messages the end-user should see, depending on different use cases.

A functional specifications document is meant for all the stakeholders involved in product development. This includes designers, developers, testers, and the client. A well-written FSD is useful for formalising expected user experience from a software product. This, in turn, allows better understanding between the development team and the client, which can make the entire design process a lot faster.

What Should be Included in a Functional Specifications Document

In an Agile environment, the FSD is kept as concise as possible due to the fast pace of sprints. Regardless of length, the FSD should convey detail regarding any externally visible behavior of the product such as:

• Text of error messages
• Supported web browsers, operating systems, screen sizes
• Pixel sizes of buttons and color shades
• Size and allowable contents of data input fields

In Agile companies, a brief FSD can also be accompanied by using JIRA (or any other development/bug tracking program) to manage development against the specs of the FSD. As you can see below, dashboards included in most development tracking software makes it easy to see who is doing what technical task.

Source: Atlassian JIRA

Unlike the product requirements document, which is completed by the product manager, the functional specifications document can also be completed by business analysts or technical leads. Regardless of who completes the document, it’s still important to understand its implications. As discussed in the free Guide to UX Design Process & Documentation, the functional specifications document picks up where the PRD left off by architecting the systems and specifications to achieve the features.

As you’ll see below, the FSD is all about exploring the feasibility of a product. UX designers are mostly concerned with desirability, while product managers look to maximize viability. All three elements are required for a well-design product.

Source: Desirability Feasibility Viability Venn Diagram

For simplicity’s sake, design philosophies should be kept out of the functional specification document so that the document stays true to its technical audience. While smaller companies may combine the FSD and PRD into one document, the two should be treated separately.

Former head of product development for the Coldfusion project at Adobe, Jason Delmore provides a fleshed-out functional specification document template including information on what does and doesn’t belong in an FSD. You can also check out former Microsoft Excel product manager Joel Spolsky’s complete FSD for his startup Fog Creek Software.

Since a technical lead will usually take ownership of the functional specs, we’ll only look at what’s relevant from a product management point of view. In a nutshell, the FSD is what’s given to developers so they know what to build, what’s given to testers so they know what to test, and what’s given to stakeholders so they know exactly what’s being created.

While your PRD might say something like “The app should include a product listing”, the FSD would say “The system will register a product using the following fields: Name (30 characters), Details (200 characters), Price (currency), Category (pick list).”

The technical direction of an FSD can also be embodied in a project Wiki.

Functional Specification Document Examples

Project Fedora, an open-source operating system created by Linux maker Redhat,provides an excellent example of collaboration on functionality requirements. Although a Wiki is ideal for editing and version control (no need to tell people to delete outdated specifications documents), it can just as easily turn into a mess of tangled links. Either the technical lead or the product manager should help moderate the Wiki.

Source: Core vs. External Functionality in Fedora

Once you’ve chosen a method to outline the technical requirements, you can use any variety of spreadsheet program (MS Project is great if you’re getting detailed) to outline timing.

Unlike the PRD which included rough timing, you now have a much better idea of sprint lengths and delivery dates since the technical work is clearer. The ranking of features done in the PRD can also be included to keep scope in check.

Source: Creating an Agile Project Schedule in MS Project

Whether you choose lightweight or page-heavy methods, documenting your product development improves transparency and can help prevent last-minute stakeholder changes.

An FSD Doesn’t Have to Be Boring

While it sounds fairly dry, the functional specifications document doesn’t need to be on paper. We’ve already looked at project Wikis as a way of introducing more collaboration, but there’s a few other alternatives that might work better (especially if you’re going Lean or Agile)

• Use cases, scenarios, and technical specs described in a spreadsheet combined with an accompanying prototype
• Job stories (popularized by Intercom) and acceptance criteria written down on Post-Its and tacked on a wall
• A graphical format using a tool like Keynote or UXPin (we’ll start wireframing or prototyping and include use cases and any technical specs in a separate page within the project)

To get more practical tips on product and UX design process and documentation, check out the free e-book. Expert advice is featured from Aarron Walter, Laura Klein, Ian McAllister, and dozens others. Visual examples are also shown from companies like Vurb, MailChimp, Apple, Google, and many more.

Functional documentation often serves as a communication bridge between designers, developers, and other stakeholders. UXPin Merge enhances this communication by providing a common language and platform where design decisions are transparent and directly tied to the actual components being used in the product. This clarity helps teams collaborate more effectively, reducing back-and-forth discussions and ensuring everyone is on the same page. Request access to UXPin Merge.

The post A Practical Approach to Functional Specifications Documents appeared first on Studio by UXPin.

In the high-tech digital UX design world, pen and paper can still be the preferred choices for fast low-fidelity prototyping. Contrary to assumptions, UX teams spend a lot of time away from the computer, writing on sticky notes, whiteboards, notepads, and adding annotations to paper prototypes.

The more planning and preparation designers can do before sitting down at the computer, the quicker they can design wireframes, mockups, and prototypes. Paper prototyping is a crucial part of the early UX design thinking process because it fosters collaboration, allowing designers to explore lots of ideas at a minimal cost.

With UXPin, design and development teams can jump straight from paper prototypes to high-fidelity prototyping, significantly accelerating the design process. Build consistent, high-quality digital experiences. Sign up for a free trial and explore UXPin’s prototyping features today!

Build advanced prototypes

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

Try UXPin

What is Paper Prototyping?

Paper prototyping is the process of developing ideas and designing user flows using hand-sketched “screens” that represent a digital product. Paper prototypes test on a high-level user experience rather than interaction design.

Paper prototypes are low-fidelity because they don’t have any functionality. For this reason, paper prototypes designers rarely share paper prototypes outside of the department.

The primary goal of paper prototyping is to map our information architecture and visualize user flows.

Design teams often lay paper screens on a desk or flow and imagine how real users would navigate to reach an end goal. The designs are rudimentary and usually sketched in black and white. Content is limited, with only headlines and call to action links displaying any legible text.

Sometimes, teams will build a mock iPhone or Android device using a piece of cardboard to simulate swipes, scrolls, and other basic functionality. These mock devices also allow designers to see how their designs might look within the confines of a mobile phone—especially useful if you’re designing a mobile app.

While the main benefit of paper prototyping is speed, some designers use tools like UI Stencils to design accurate, aesthetically pleasing screen layouts—vital if you plan to present paper prototypes to stakeholders or testing participants.

UXPin’s journey started with a similar paper prototyping product called Web Kit. A paper pad paired with a design tool that automatically turns paper prototypes into wireframes. UXPin has evolved into an end-to-end prototyping solution, allowing you to create prototypes that are production-ready from the start. Try UXPin for free.

Paper Prototyping Digitally

With tools like reMarkable and Apple Pencil, teams can collaborate remotely while enjoying the speed and versatility of the physical paper experience.

Using digital sketch tools can accelerate the paper prototyping process. Designers can make changes faster (without needing to redraw a screen), attach detailed notes, and upload finished prototypes instantly to design tools like UXPin to build high-fidelity prototypes or go with wireframing.

Paper prototyping digitally also reduces paper and plastic waste, which is better for the environment :)

Advantages and Disadvantages of Paper Prototyping

Aside from speed and flexibility, there are several advantages and disadvantages to paper prototyping. 

Here are some of the pros and cons of paper prototyping from our free eBook: The Ultimate Guide to Prototyping.

Advantages:

• Rapid iteration — It’s easier to discard a paper design that took 5 minutes vs. a digital mockup that you spent more than an hour perfecting. 
• Low cost — Paper is cheap, and even additional tools and kits won’t break the bank. 
• Increased creativity — The freedom of pencil and paper fosters experimentation and new ideas. Design tools have their place in the design process but can stifle creativity in the early design stages.
• Team-building — Paper prototyping is a rare opportunity where teams get together in a creative environment. Working with pen and paper brings out child-like energy, which can help form bonds and strengthen coworker relationships. 
• Minimal learning curve — Everyone can sketch ideas, making paper prototyping a great way to involve other departments like marketing, development, and stakeholders.
• Documentation — Paper prototypes serve as excellent documentation. Designers can make notes and outline ideas to reference throughout the project. They’re excellent UX artifacts.

Disadvantages:

• No user reactions — With no user feedback, it’s difficult to know whether or not your ideas will work. Even if you test your paper prototypes with participants, the feedback will be limited.
• Inaccurate feedback — Outside of UX teams, paper prototypes might be challenging to interpret, limiting any accurate or meaningful feedback. 
• Potentially unnecessary — With rapid prototyping tools like UXPin, paper prototyping might add additional, unnecessary steps to the design process. UXPin comes with pre-made design systems, so designers can quickly drag-and-drop high-fidelity elements to design and edit working prototypes quickly.

Sign up for a 14-day trial and see how quickly you can turn paper design concepts into high-fidelity prototypes that function like the final product using UXPin. 

When to Paper Prototype

Jake Knapp of Google says that “paper prototyping is a waste of time“—but admits that paper prototyping is useful for early-stage conceptualizing.

Once you move from paper to digital, there’s no reason to return. Some designers might return to paper prototyping for new features or a product redesign. But even then, returning to paper prototyping might be unnecessary.

That said, paper prototyping is perfect for early-stage conceptualizing. Its speed, ease, and simplicity make it accessible to all teams (including non-designers) while fostering experimentation and creativity—something you can’t achieve with a digital canvas.

Paper prototypes are ideal for:

• Brainstorming meetings and sessions
• Basic internal user testing early on

How to Paper Prototype

Paper prototyping is the fun part of product design. It’s an opportunity for team members to brainstorm and sketch ideas. 

Don’t worry about how beautiful your sketches look. Even the best UX designers aren’t brilliant sketch artists! The goal is to visualize your ideas and get the creative juices flowing.

Creating a paper prototype involves three main steps:

1. Prepare Materials

Gather materials like paper, pens, markers, sticky notes, and scissors. You may also use a whiteboard or large sheets of paper to sketch user interfaces.

2. Sketch Interfaces

Draw basic screens, user interfaces, and key components of the design on separate pieces of paper. Represent user flows by arranging these sketches in sequence.

3. Simulate Interaction

Lay out the sketches in the order of user interaction. Simulate the user experience by manually switching between sketches based on user actions, gathering feedback to refine the design.

For a detailed guide, check out UXPin’s article on prototyping.

6 Tips to Building Paper Prototypes

1. Use printer paper and cheap pencils/pens. Ruled or line pads often stifle creativity as designers get side-tracked drawing between the lines rather than developing lots of ideas.
2. Start with a warm-up! Sometimes it takes a few sketches to loosen up and get into the flow. Crazy eights is a fantastic paper prototyping method to design many versions of the same screen fast. After a couple of crazy eights rounds, you’ll have many ideas to expand on.
3. Prototype mobile-first or progressive enhancement. Start with the smallest screen and adjust the layout as you scale the viewport (this applies to mobile and web design. Scaling up is much easier than scaling down because you prioritize content and avoid elaborate desktop layouts that don’t translate to mobile. Side note: UXPin’s Auto Layout lets you automatically resize, fit, and fill your designs. A handy feature for mobile-first design. 
4. Stick to one sketch per screen (a piece of paper). Paper prototyping requires you to create user flows by placing pieces of paper in sequences. You’ll also switch these around or add new screens. If you have more than one screen on a piece of paper, you lose this speed and flexibility.
5. Iterate as the ideas come to mind. The goal is quantity, not quality. When you create lots of paper prototype ideas, you often end up taking bits from each to get the final result—like a Lego set, but with paper.
6. Planning is crucial for a successful paper prototyping session! Ensure you have enough pens (black fine-tipped markers work best), paper, scissors, glue, post-it notes, index cards, tape, cardboard, and anything else you think your specific project might need. A whiteboard and marker are also great for outlining user flows collaboratively. Pro tip—assign the job of preparing your paper prototyping to an arts & crafts enthusiast! Every team has at least one, and they always make sure you have more than enough of everything you need!

Testing & Presenting Paper Prototypes

Testing & presenting paper prototypes outside of the UX department is always tricky. The stakeholders or usability participants have to “imagine” what will happen, which can confuse or divert focus from what you’re trying to present. Nevertheless, a study by Jakob Nielsen found that 75% of usability issues can be identified with simple, low-fidelity prototypes like paper ones.

Here are some tips for presenting and testing paper prototypes:

• Designate one person other than the presenter as play the “human computer” or product simulator – The person playing the human-computer will simulate scrolling, swiping, navigating to different screens, and other functionality.
• Rehearse – Rehearsing is essential so that the presenter and simulator are in sync. The presenter can work out a good cadence for the simulator to keep up with the presentation.
• Follow standard usability test best practices – Standards like using a minimum of 5 users and recording the tests still apply. You can download our free Guide to Usability Testing for more understanding of usability standards and practices.
• If you’re giving users a paper prototype to inspect, ensure you provide guidance and annotations, so they know where to focus and what they’re supposed to test.

Prototyping in UXPin

Whether you’re building a mobile application or a new website, UXPin provides designers with tools to build advanced prototypes; most leading design tools simply can’t!

Don’t take our word for it! Sign up for a free 14-day trial and test UXPin’s powerful prototyping features for your next project. 

The post Paper Prototyping: The 10-Minute Practical Guide appeared first on Studio by UXPin.

In today’s fast-paced tech industry, it’s challenging to maintain perfect design consistency, especially when you have multiple teams working on the same digital product!

Periodic UX design audits allow designers to evaluate a product to identify continuity, consistency, accessibility, and usability issues.

Reduce errors while increasing fidelity, functionality, and collaboration with UXPin’s code-based design tool. Sign up for a free trial.

Build advanced prototypes

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

Try UXPin

What is a UX Audit?

A UX audit is a a systematic evaluation of a website, application, or digital product to assess and improve its overall user experience. The goal of a UX audit is to identify usability issues, design flaws, and areas for improvement in order to enhance the user satisfaction and effectiveness of the product.

This process is typically carried out by UX professionals, designers, or usability experts and it may be referred to as UX review or quality assurance of design.

A design audit allows UX designers to identify user pain points and business value opportunities using valuable real-world data. Testing during the design process is limited in revealing how a product will perform in the real world –especially if you have thousands or millions of daily users. 

An auditor will measure, test, and analyze the following during a UX audit:

• Usability Evaluation – assessing the ease with which users can interact with the product. This involves evaluating navigation, clarity of information, and the overall flow of the user journey.
• Visual Design – examining the aesthetics and visual elements of the interface to ensure they align with best practices, brand guidelines, and contribute to a positive user experience.
• Content Evaluation – reviewing the quality, relevance, and clarity of the content presented to users. This includes text, images, and multimedia elements.
• Interaction Design – analyzing the responsiveness and effectiveness of interactive elements, such as buttons, forms, and other user interface components.
• Accessibility – ensuring that the product is accessible to users with disabilities by checking compliance with accessibility standards and guidelines.
• Performance Assessment – evaluating the speed and responsiveness of the product, including page load times and the efficiency of interactive features.
• Mobile Responsiveness – verifying that the product is optimized for various devices and screen sizes, with a focus on mobile responsiveness.
• Broken Links – identifying and fixing any broken or dysfunctional links within the product to ensure a seamless user experience.
• Design System Inconsistencies – checking for inconsistencies in design elements such as fonts, colors, patterns, and ensuring adherence to a cohesive design system.
• Layout and Hierarchy Inconsistencies – reviewing the overall layout and hierarchy of information to maintain consistency and improve user understanding.
• Outdated Content – identifying and updating any outdated or irrelevant content to ensure users receive accurate and timely information.
• Customer Journey Bottlenecks and Roadblocks – analyzing the user journey to identify any bottlenecks or obstacles that may hinder a smooth progression through the product.
• Usability Heuristics – applying established usability heuristics (such as Nielsen’s 10 heuristics) to evaluate and address potential usability issues.
• Branding and Messaging – ensuring consistency in branding elements and messaging to maintain a coherent and recognizable brand identity.
• Review Product Design Against Business and User Experience Goals – evaluating the alignment of the product design with both business objectives and user experience goals.
• Traffic, Engagement, Conversion Rates, Retention, and Sales Analytics – analyzing relevant analytics data to gain insights into user behavior, engagement, and the product’s overall performance.
• Legal Compliance (GDPR, CCPA, etc.) – checking the product’s compliance with applicable legal standards, such as data protection regulations (GDPR, CCPA, etc.)

At the end of a design audit, auditors generate a UX audit report with actionable recommendations to fix any issues or optimize the product.

When to Conduct a UX Design Audit?

Teams typically conduct a UX audit as part of the QA process whenever they release a significant product update or product redesign. Organizations may also schedule periodic UX audits to ensure a product meets business and user experience objectives.

Additionally, a UX design audit is recommended:

• When experiencing a noticeable drop in user engagement or satisfaction metrics.
• Before launching a new feature or major update to assess potential impact on the user experience.
• After receiving significant user feedback or complaints about usability issues.
• When considering a rebranding or significant change in the product’s visual identity.
• Before embarking on a large-scale marketing campaign or expansion effort to ensure the product can effectively support increased traffic or usage.
• Following changes in industry standards, regulations, or technological advancements that may affect the user experience.
• As part of a competitive analysis to benchmark the product against industry peers and identify areas for improvement.
• When seeking investment or partnerships, as a thorough UX audit can demonstrate a commitment to delivering a high-quality user experience. Overall, the timing of a UX design audit depends on the specific needs and circumstances of the organization and the product, but it’s essential to prioritize regular evaluations to maintain and enhance the user experience.

Who Conducts a UX Audit?

Who conducts a UX audit will depend on the size of the company and available resources. Many small companies and startups will likely use in-house design teams to perform UX audits.

To get an objective, non-bias UX audit, some organizations use external auditors to evaluate their products and deliver a report. Large companies might use a UX design agency, which can be expensive but produce thorough audits with meaningful feedback and insights. Smaller businesses and startups might consider hiring a freelancer to get similar results.

Recommended reading: How to Set Up Internal Consultancy?

How to Prepare for a UX Audit

A UX audit requires several benchmarks to evaluate a digital product. Without these benchmarks, auditors have no way to determine whether the product is meeting its KPIs, goals, and objectives.

If your company doesn’t have a UX strategy, you probably want to start by defining this before you conduct a UX audit. You can download our Free UX Process & Documentation Templates and read this article to outline your company’s UX strategy before your first design audit.

To prepare for a UX audit, you will need:

• User personas
• Clearly defined business goals
• Product data and analytics
• Previous UX audit results & changes
• Audit constraints, deliverables, deadline, and stakeholders

User Personas

Identifying your customers and their personas before you conduct a UX audit will help determine if your current users (from analytics data) match your target users (from previous user and market research).

Suppose the UX audit reveals a change in user demographics. In that case, UX designers might need to apply the design thinking process to determine if the product adequately caters to this new group.

Clearly Defined Business Goals

Understanding the company’s business goals is another essential factor auditors must know in preparation for a UX audit. Auditors will need to assess whether the product meets the company’s business expectations and the design’s impact, whether negative or positive.

Product Data and Analytics

Auditors must gather relevant product analytics and information like heatmaps, click tracking, and other interaction data. Companies might acquire this data through Google Analytics, Kissmetrics, Hotjar, and CrazyEgg, to name a few.

This data is crucial to understanding how users navigate a digital product and whether designers need to consider changes to match this behavior.

Analytics can also provide auditors with conversion and revenue data to measure the product’s success metrics and KPIs.

Recommended reading: A List of Design Feedback Tools

Previous UX Audit Results & Changes

Auditors can use reports from previous UX audits to check if any of the same problems still exist. If there were any design changes after the last UX audit, auditors can determine whether the changes solved the problem and impacted user experience.

Audit Constraints, Deliverables, Deadline, and Stakeholders

Lastly, auditors must understand the audit’s budget/resource constraints, deliverables, deadline, and stakeholders for reporting. This information is as important as the audit itself because it will determine how auditors conduct the review to meet constraints and expectations.

Conducting a UX Design Audit

Once you have completed your preparation, it’s time to conduct a UX design audit. Auditors will examine four key elements of a digital product, including:

• Usability heuristics
• User experience
• Design system evaluation
• Accessibility

Usability Heuristics

Jakob Nielsen’s 10 general principles for interaction design form the basis for many UX design audits. Developed in the early 90s, Nielsen’s list of ten heuristics outlines a broad “rule of thumb” rather than specific usability guidelines auditors must follow.

1. Visibility of system status—ensure users know the current system status to understand the impact of their interactions and next steps.
2. Match between system and the real world—designs must speak users’ language with familiar words, phrases, and concepts. Products must feel logical and intuitive so users can achieve tasks and goals effortlessly.
3. User control and freedom—designs should give users complete control to change their minds, exit, or redo tasks and flows. For example, providing a “back” button during user flows or a way to update/delete shopping cart items.
4. Consistency and standards—design inconsistency can increase users’ cognitive load resulting in a poor product experience. Minimize what users must learn to use your product by following industry standards and maintaining design consistency.
5. Error prevention—designers must do everything they can to prevent or eliminate error-prone conditions. 
6. Recognition rather than recall—users should not have to remember what buttons, actions, and elements do. User interfaces must promote recognition (explicit labels & instructions) to reduce users’ cognitive load.
7. Flexibility and efficiency of use—a digital product should provide users with the flexibility to customize their preferred workflow. For example, allowing users to create easily retrievable “favorite” links to their most-used features.
8. Aesthetic and minimalist design—avoid redundant content and UI elements that don’t serve users. A minimalist screen layout will help users find what they need with minimal effort.
9. Help users recognize, diagnose, and recover from errors—error messages should guide users with straightforward steps to solve the problem. Avoid meaningless error codes and instead provide links to product documentation or customer support.
10. Help and documentation—product documentation must help users understand the product’s features and complete desired tasks.

Auditors might need to evaluate a mix of user testing and product analytics to audit these ten usability heuristics.

User Experience

As UX design follows a human-centered approach, auditing your product’s user experience is probably the most critical part of a design audit.

Auditors will examine analytics and interaction data to determine the design’s impact on user flows, navigation, and the overall user experience. If something stands out in analytics data, auditors may conduct or recommend usability testing to fully understand the problem.

Design System Evaluation

A company’s design system is vital for maintaining continuity and consistency. Auditors must examine the product’s design system to ensure UI components and design patterns meet user experience goals and branding guidelines.

Accessibility

Accessibility is a vital factor in ensuring a product is inclusive for all users. Auditors need to consider whether the color palette, fonts, and components serve users with visual impairments. They may also look at whether the product allows users to switch between light/dark modes to accommodate users with sensitive eyesight.

UXPin’s built-in accessibility features help designers follow best practices, so products pass WCAG standards before the design handoff. Sign up for a 14-day free trial to discover more of UXPin’s built-in features to help optimize your UX workflow.

UX Audit Checklist

A UX audit checklist must take auditors through the necessary preparation through to the final audit report. 

UXPin’s 23-Point UX Checklist will help you avoid common design issues before reaching your final product to improve the overall user experience. You can also use this 23-point checklist as a guideline for creating your audit checklist.

5 Tips to Perform a Successful UX Audit

1. Record everything: take notes, screenshots, and provide links to every flagged issue. These records will ensure you don’t forget anything and provide thorough, actionable feedback to stakeholders.
2. Stay organized: depending on the scale of the product, you’re likely to collect a lot of data, including notes, images, metrics, etc. Use a spreadsheet to organize and analyze analytics data, and use cloud storage to save corresponding assets, like screenshots.
3. Actionable recommendations: provide stakeholders with actions they can take to fix the problems you identify. These actions must align with real insights rather than guesses or assumptions.
4. Be exact: when reporting, tell stakeholders the specific problem, where to find it, and recommendations to fix.
5. Prioritize findings: let stakeholders know the importance of issues you identify—for example, low, medium, and high. You would typically prioritize these based on the severity of the problem and how it impacts the user experience.

Summary

Regular design audits are vital to determine how products align with user experience and business goals. If you are conducting your first UX audit, you must have a clear UX strategy, so auditors have benchmarks, objectives, and KPIs to measure against.

Jakob Nielsen’s ten usability heuristics provide a fantastic foundation for auditors to test a product’s components and features. Auditors should use these usability heuristics to look at a product objectively and ask questions from a user’s perspective.

Improve Your UX Audit UXPin

Here are three ways to improve your UX audits with UXPin:

1. Code-based prototypes: UXPin’s code-based design editor allows teams to create high-fidelity prototypes that look and feel like the final product. Auditors can use these prototypes for usability studies to test assumptions based on data and analytics.
2. Comments: UXPin’s Comments feature lets auditors describe problems and assign tasks directly on user interfaces.
3. Built-in accessibility: auditors can use UXPin’s built-in accessibility features like our contrast checker and blindness simulator to quickly evaluate the product’s accessibility.

Ready to get started with the world’s best user experience design tool? Sign up for a 14-day free trial and discover how UXPin’s code-based design tool can improve UX workflows and produce better user experiences for your customers.

The post UX Audit – All You Need to Know, Benefits, and Checklist appeared first on Studio by UXPin.

According to IDEO, a truly innovative product must have desirability, viability, and feasibility for sustainable long-term growth and success.

The design thinking process involves research, or a design review, to determine what product and features will serve your customers the best. A successful design review identifies a problem your competitors aren’t solving that will benefit both your end-users and the business.

But, where do you start? How do you find this competitive edge? And how do you know if it’s a viable business model that serves users and the organization?

This article explores research during the conceptualization phase of design thinking and how to identify an idea that meets three key criteria:

• Desirability – is a need that the user have to use a product.
• Viability – is a commercial value of releasing a product.
• Feasibility – is practical and technical constraints of creating a product.

Does your design tool provide you with features to take a product from concept to design handoff? UXPin is an advanced end-to-end design tool that makes it easy to create prototypes with live React, Storybook or npm components. Check why this approach to prototyping can help you. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What are Desirability, Viability, and Feasibility in Design?

Desirability, viability, and feasibility is a design thinking methodology to test ideas, concepts, and hypotheses to determine if you have a unique value proposition (aka unique selling point) and whether it’s worth pursuing.

Without checking all three boxes, you increase the risks, costs, and potential for failure. You could say desirability, viability, and feasibility are a risk analysis methodology for ideas – a toolkit to find that innovation sweet spot.

By applying this methodology, you can pinpoint the weak points in your design concepts, do further research or scrap the idea and move on.

Where Does this Methodology Originate?

IDEO, a global design company, conceptualized the desirability, viability, and feasibility design thinking methodology in the early 2000s as a way to test ideas.

IDEO recognized that the best ideas succeed when they fulfill this trifecta. Conversely, “great ideas” often fail when they miss one or more of these three criteria.

Let’s look through these three lenses to understand how this trifecta fits together.

Desirability

The first box designers must check is desirability. If your product idea has no market value and people don’t want or need it, it won’t sell. 

Researching desirability will also tell you whether your product is a want or a need. For example:

• You need to get to work which you can do by walking, taking public transport, driving, carpooling, etc.
• You want a car to get to work because it offers convenience, and maybe more luxury than public transport.

A need is something your customers cannot live without, while a want is often a more desirable option to fulfilling that need. Both check the box for desirability, but a product that fulfills someone’s need is far more valuable than something someone wants or is “nice to have.”

To find a desirable product, you must research your customers and identify pain points (wants and needs) that you can fulfill. 

• Does your product solve someone’s problem?
• Do your competitors offer a solution? 
• Do you have a better idea? 
• What makes your idea unique, and why would someone choose yours over the competition?
• How will your product make end-users feel?
• Is your product so desirable that people will tell their friends?
• Will your product be something that once people try it, they won’t want to live without it?

When researching desirability, the intention is to stress-test your idea to find the gaps that need fixing. The more gaps you fill, the stronger your product and the better it will stand up against rigorous stakeholder questioning and customer satisfaction.

Viability

Viability tells you whether or not your product makes business sense. Even if you have the most desirable product in the world, if it’s too expensive or isn’t profitable, then it’s not a good business model.

A truly viable product idea makes business sense in the short-term and into the future. The quicker and longer it can deliver a positive return on investment, the higher the viability of your design idea.

A fantastic example of viability is how Coca-Cola designed a beverage formula in 1886 that’s still one of the most consumed drinks in the world today! That initial investment created massive wealth for its inventors and still delivers incredible returns for shareholders more than 135 years later.

Viability is also about societal and environmental impact—the ethical aspect of your design. Will your digital product provide a positive gain for society? In 2021, Facebook whistleblower Frances Haugen released documents showing that the social media giant’s internal research showed that Instagram creates anxiety, depression, and suicidal thoughts among teenage girls.

Instagram might deliver high financial returns in the short term, but is this harm to teenagers sustainable long-term? And what will governments do to regulate Facebook and Instagram?

Facebook is a massive company with the resources to overcome societal controversy, fines, and lawsuits. But, a smaller company or startup will mostly like fold when confronted with similar pressures. 

So, when we look at viability, it must provide value for the business, customers, and society. Some questions you might want to consider include:

• What has to be true for this design to work?
• What will it cost to turn your design into a functioning product?
• Do you have the capital investment to build the new product or feature?
• What is the pricing model? And, can the business make a profit?
• How long will it take to see a positive return on investment?
• Is the product sustainable?
• How does the product impact society?

Like desirability, viability requires you to research, analyze, and stress-test ideas to ensure they’re viable and sustainable.

Feasibility

Feasibility looks at your current resources to determine if you’re capable of developing the product in the foreseeable future. Designers must consider how the product will impact the business.

Some feasibility factors include:

• Technical constraints
• Financial constraints
• Product’s impact on branding, marketing, customer support, and other areas of the business
• Estimated time-to-market
• Operational capabilities

Ideally, you want to design a new product or feature within the company’s current capabilities using available resources. When you have to build infrastructure to support a new product, you increase the risks and costs.

Here are some feasibility questions you might want to consider when designing a new product or feature:

• Does the current design system have the components to develop the new product?
• How long will it take to design and develop the product?
• Do you have enough product designers, UX designers, and engineers to build and scale the new product?
• Can our technical constraints support the new design?
• Will the organization need to hire new talent?
• If you have to extend the organization’s capabilities, how can this benefit future products?
• What impact will the product have on the brand?
• Will the product’s release impact other areas of the organization, like marketing, sales, and customer support? And do these departments have the capacity for more work?

Using Desirability, Viability, and Feasibility in a Design Review

Organizations conduct a design review during the early stages of a product design to evaluate the design against specific criteria. The goal is to identify any problems with the design or prototype before developing it–which carries the costs of infrastructure, marketing, sales, customer support, and more.

Essentially, the organization wants to know the product design’s desirability, viability, and feasibility.

A UX Design Review Template

Applying the desirability, viability, and feasibility design thinking methodology will give you the insights and data to present a comprehensive and objective design review to stakeholders. 

Below is a structure or template you can use to present your design review so that it’s easy for stakeholders to read and digest.

The problem: State the problem succinctly. The design and business teams will build a shared understanding from this foundation.

The system (current state): Show how the current system works (if it’s an existing product) to help put the problem in context. Later, you can show how the system could work with your proposed experience.

The Jobs To Be Done (JBTD): A shared understanding of what motivates your customers is crucial for a design review. As Tony Ulwick defines JBTD: “a lens through which you can observe markets, customers, user needs, competitors, and customer segments differently, and by doing so, make innovation far more predictable and profitable.” This lens helps stakeholders understand how customers decide whether to “hire” or “fire” your solution.

The business objective: State the business value and ROI for solving this customer problem.

The metrics that matter: You can’t improve what you don’t measure. These metrics should enable you to quantify the business and customer value you’ll create through your new product design.

The proposed experience: Summarize the proposal in a sentence. Make it clear and understandable. The people in the room need to understand how this proposal relates to the problem you’ve previously articulated.

The implications of your proposal: How will your proposal impact other parts of the business? Maybe you don’t know. Understanding this early in the product design process is critical to achieving balance in desirability, viability, and feasibility.

Basic experience design: Present your wireframes, mockups, prototypes, or minimum viable product (MVP) so that stakeholders can visualize how a customer might find the product desirable.

Insights informing the design: What led you to choose this design? What were the insights, hypotheses, etc.? Show your depth of thought in a few bullet points.

Hypotheses about the new design: 

• What are your hypotheses about the new design? 
• How did you arrive at this hypothesis? 
• How can you align these hypotheses to the metrics you believe matter?

These should be clear and testable. By conducting tests with clear pass/fail metrics, these hypotheses should also give you a strong foundation for measuring the incremental progress you’re making.

The team’s collaborative focus: Why are you all in the room? What input do you need from stakeholders? This section of the design review template helps set a clear context and focus for the stakeholders responsible for the product’s success.

With UXPin Merge, you can use built-in component libraries to quickly assemble high-fidelity prototypes and MVPs and present these to stakeholders during the design review. This will definitely speed up your time to market, and make you release quality products faster. Discover UXPin Merge.

The post What is Desirability, Viability, and Feasibility? [+ Design Review Template] appeared first on Studio by UXPin.

As an industry, product design has become more interactive than ever before. Whether you’re creating apps, websites, or software, there’s an endless stream of new tools and workflows to help make your design decisions as comprehensive as possible. However, when there are design team members, project managers, and stakeholders who all want to be involved in the project at the same time, things can get messy pretty quickly.

Managing effective feedback process at all stages of the design workflow has become a bit of pain, to say the least.

Fortunately, there are a ton of design feedback tools that can help you gather, organize, and utilize constructive feedback and help keep everyone on the same page. That’s why we’ve compiled a collection of the best design feedback tools to help you find the right one for your specific needs.

Build interactive prototypes that can be easily shared with your team in UXPin. Keep your teammates in the loop and test your designs with users. Sign up for a free trial.

Build advanced prototypes

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

Try UXPin

How to Pick the Best Design Feedback Tool? 

First off, how do you even know whether a design feedback tool is right for you?

Of course, you need an application that makes collaboration easy and doesn’t do more harm than good. The software and feedback features need to actually benefit your creative efforts, so bear these considerations in mind. This also means that – when choosing the right design collaboration tool – you should check whether it lets you comment on the design when making iterations, or leave feedback on actual, published apps and websites.

Here are a few criteria to search for:

1. interactivity
2. satisfying feature set
3. real-time user
4. collaborative

Your tool is interactive

Professional design feedback tools must be as interactive as possible. 

In the past, feedback would have been as simple as drawing lines and writing comments on a screenshot, or supplying a designer with a list of things to change, but this just isn’t good enough today.

It wastes so much time having to shift through messy lists of feedback, find what feature a client is referring to, or identify what the bug in question is. 

An interactive tool removes these issues and instead displays actionable feedback in the right places in an organized manner. Everything is clean, easy to follow, and intuitive.

There’s no point in getting a feedback tool that ends up causing more problems than improving productivity.

Offers increased functionality

Despite being a feedback tool, your chosen solution should always be far more capable than this baseline feature. 

The best tools grant access to other functions, such as being able to generate specs and documentation or even manage the entire design process.

For example, connecting with the prototyping process is essential yet often overlooked. 

If colleagues, project leaders, or UX testers provide great design feedback on a certain aspect of the project, you can incorporate it into your prototype, test again, gather more feedback, and then repeat the cycle.

This is a far more effective way to work and will speed up your design process as a whole. Productive design review should be an iterative process that helps to improve the quality of your designs, rather than something that just bogs you down.

Functions in real time

Nowadays, especially with the rise of remote and hybrid ways of working, your collaboration tools need to operate in real-time. This includes displaying design previews, adding comments and annotations, and even video and audio notes for highly-detailed responses.

Allows effortless communication

Communication is everything at all stages of the design process, including when it comes to organizing feedback.

Your design review tool should enable users to add all kinds of comments in any format (text, video, image, GIFs, etc) as well as @mention-specific team members. In order to avoid any confusion, it’s also important that everyone’s on the same page in terms of which tool you’re using and that everyone understands how to use it.

6 tools for collecting design feedback

Let’s now take a look at the design feedback tools that will make the design review more effective and interactive. 

1. Proofhub

Proofhub markets itself as a project management application orientated to the needs of designers. Clients or project managers can check in and provide feedback throughout the entire design workflow, annotating the project within the app using a clean overlay approach.

This means designers can eliminate previous issues, like having to search and find feedback in a massive email or Slack threads, access the feedback at any time, and work on a project in real-time.

While fast, effective, and easy to get set up and running, the interface can feel a little clunky and lacks customizability. However, if you can overlook this, it does get the job done.

Features

• Review all files in any kind of design project with a click
• Collaborate with all team members, clients, and managers in real-time
• All past file versions remain accessible simultaneously

2. Atarim

Atarim is used by over 5,000+ agencies worldwide, including companies like GoDaddy, Elementor, and WPEngine. If you’re looking for a design feedback tool specifically for website building, then it’s worth considering it.

It’s essentially a WordPress plugin that digital development and design teams can use to track changes across the websites they’re building. Atarim lets you add internal comments, collect feedback from clients, and then use the findings to improve the UX and UI. 

This design review app supports screenshots and comments, and can turn any text into a task that can be assigned to a relevant team member.

Atarim can be integrated into other collaboration tools like Trello and Asana, as well as other Kanban boards. While clearly feature-rich, this software can be a little confusing to newcomers, and the learning curve may take some time to climb.

Features

• Supports internal messages that keep conversations away from clients
• Give feedback on non-WordPress sites with a few clicks
• Turn comments on screenshots into assignable tasks

3. UXPin

UXPin allows you to catch positive and negative feedback before it becomes costly, that is during the prototyping phase. Non-designers as well as fellow designers can give approvals or leave their not-so-positive feedback before the prototype gets passed on to engineers.

It’s costly for any business to create entire apps, websites, and features, only to have them redesigned from the ground up once clients, stakeholders or product managers want changes made.

Instead, you can use UXPin to generate robust prototypes of individual design elements, acquire feedback, and then implement the changes until your design is given the green light. Next, prototypes can be shared with developers who will polish it off into the final app, making it effortless to bring the best of collaboration and teamwork to your design projects.

Features

• Create, run, and tweak prototypes in real-time
• Import Sketch or Figma designs in just a few clicks
• Create and share preview links to ensure your prototypes are accessible to everyone who needs access
• Animate between states to create one of the most advanced user testing experiences possible
• Use ground-breaking variable data storage to create the most life-like prototyping experience
• Hand over your designs to the engineering team with autogenerated specs and ready-made code.

4. BugHerd

Whatever you’re designing, you’re going to come across bugs and problems that need addressing. Keeping track of everything and being organized can be a challenge, to say the least. BugHerd addresses this pain point with its visual-heavy feedback tool.

The app is simple. Using a visual interface to display code, screenshots, websites, or whatever visuals you want, clients, stakeholders, and team members can place sticky-note-like comments to provide any kind of feedback, highlight issues, and more.

Features

• The entire service is hosted in the cloud
• All comments and feedback are easily accessible and searchable
• Mark annotations on images provide concise feedback

5. Nimbus Capture

Sometimes, you’re not going to want a high-end service but rather something simple, quick, and easy, and that’s where Nimbus Capture comes in. It’s a great tool for startups that provides a range of collaboration tools designed for improving feedback and collaboration efforts, the most notable of which is Nimbus Note.

While quick and easy, it’s important to realize that this design review tool can feel a little restrictive when compared to other tools that offer a more integrated service. The UI is a little dated (especially when using the free Chrome extension), and you don’t actually integrate your work into the app.

This means designers are going to be constantly switching back and forth between windows to make changes and review feedback, rather than just working with everything within a self-contained and accessible place.

Features

• A free Chrome browser extension
• Users can annotate screenshots using a variety of methods
• Automatically organize notes using a table of contents

6. Userback

Reviewing feedback takes time, and it’s time wasted if not handled properly. Userback aims to make things easy with its visual feedback tool. Used by companies like Couchbase, Udacity, and more, Userback works within any kind of project, be it web design, app design, and more, and it allows users, clients, and designers to annotate on the fly.

You can specifically mark areas of the screen with interactive comments, mention specific engineers, highlight bugs and potential issues in the code, and even provide client support in real-time.

The app can fully integrate into an extensive range of major services, including Slack, Trello, Asana, WordPress, ZenDesk, GitHub, and so on, and even supports video feedback.

While this is surely a feature-rich solution, Userback is designed for users to provide their feedback once the product has already been launched. It’s not the best choice if you want to do a design critique of wireframes or prototypes. This means that bugs and glitches are possibly already influencing the usability of your product, and the damage could have already been done to the overall user experience.

Features

• You can draw directly on the design
• Use video feedback to gather feedback from customers faster
• A feature request dashboard lets you look at all of the comments and track their status

Use UXPin to Collect Feedback on Prototypes

Great design feedback is an important part of the design process, no matter if it’s a positive feedback or negative, and there are a variety of tools available to help make it as smooth as possible. While some software is more comprehensive than other, each has its own unique set of features that can be tailored to fit your specific needs.

That being said, don’t forget that there’s no stage of feedback more important than prototyping. For this reason, make sure you’re using a tool that allows you to collect feedback early and often, so you can make revisions and create a better design, just like UXPin does. 

It can help make a more quality designs for apps and websites. At the end of the day, your apps will make or break depending on your UX design, and designers have the most important role in creating an experience that users will love.

UXPin is designed at its core with this goal in mind. Try it for free, and you’ll see that design work will never be the same again.

The post Best Design Feedback Tools – A List of 6 Tools appeared first on Studio by UXPin.

A design brief is crucial in guiding the design process toward a successful outcome where designers meet client/stakeholder expectations. A good design brief can avoid costly scope creep, missed deadlines, poor communication, and inferior results.

Enhance your design projects with the world’s most advanced collaborative design tool. Create high-fidelity prototypes that look and feel like the end product for meaningful feedback from stakeholders and user testing. Sign up for a free trial to explore UXPin’s features and build your first fully interactive prototype.

Build advanced prototypes

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

Try UXPin

What is a Design Brief?

A design brief describes a project’s scope, expectations, responsibilities, deadlines, and deliverables specific to designers. It tells designers what to design, who it’s for, and when to deliver it.

Projects that don’t have a comprehensive design brief risk wasting resources, for example:

• Unnecessary back-and-forth communication between designers and stakeholders
• Exceeding budgets
• Misunderstood deliverables and expectations
• Missed deadlines
• Scope creep
• No accountability

What is the purpose of the design brief?

A design brief serves multiple purposes:

• Most importantly, it informs designers of the problem they must solve–i.e., what they must design.
• Defines the design project’s goals and features.
• Tells designers about the target audience, including pain points and needs
• It defines expectations so designers know how to approach a project and what they must deliver.
• Ensures UX design teams allocate and prioritize resources to meet time and budget constraints.
• Defines timelines and deadlines.
• Informs designers of key stakeholders, i.e., project manager, client, product owner, technical lead, etc.

What is the difference between a design brief and a design specification?

A design brief outlines what designers must create, while the specifications define specific details, including visual design elements, user flows, assets, file formats, accessibility requirements, brand guidelines, technical limitations, etc. Many design briefs include design specs to provide context and guidance for design teams.

How to Create a Design Brief Template

Creating a design brief template can save time while prompting the right questions before writing one at the start of a project.

Project summary

The project summary provides a high-level overview of the project, whether it’s an existing product or something designers are building from scratch. If the brief is for a design agency, the summary might include client details and contact information.

The project overview might also include high-level details like:

• Industry/market segment
• Competitors
• Current challenges
• Relevant product and user metrics

Summaries are essential for stakeholders who typically don’t need too much detail but want to understand the purpose of the design project.

Project overview

The project overview defines the scope and deliverables. Most importantly, it’ll outline the problem designers must solve or the purpose of the design project.

Some points to include in the overview include:

• Define the problem
• What must the team design?
• Is this a new product or a redesign?
• Who are the key stakeholders, and what is their involvement?
• Potential challenges
• What is not within the project’s scope?

UX research & artifacts

If there is any existing research, the brief will list these UX artifacts with links to a shared project folder. Some examples include:

• User personas
• Product analytics
• Mood boards, empathy maps, user journeys, etc.
• Interviews
• Competitor and market research
• Videos or screenshots showing the problem(s)
• Existing design files (wireframes, mockups, prototypes, etc.)
• Brand assets (logos, colors, fonts, etc.)

Project goals

The project’s goals describe what the design must achieve. These are typically business or marketing-related metrics like increasing conversions or reducing a website’s bounce rate.

Most importantly, project goals must be measurable using a baseline and KPIs and have a deadline. For example, “we want to increase the current conversion rate from 1.4% to the industry average of 3% by April 10, 2022.” Designers can analyze the current design, research competitors, conduct tests, see why users might be hesitant to convert, and design an appropriate solution.

Target audience

Most redesigns have an existing target audience and user groups with personas and other user research data. The person compiling the design brief will include a high-level overview of this information, with links to any research.

If there is little or no user data, the UX team will have to research the market and competitors to identify the product’s target audience and create personas, empathy maps, user journeys, etc., for the design project. Conducting this research from scratch will take considerable time, which stakeholders must consider when setting deadlines.

Design requirements

The design requirements (design specifications) describe the visual assets, formats, guidelines, and tools designers must use.

Some examples include:

• Brand assets (logos, fonts, etc.)
• Brand guidelines (usually an external link or supporting documentation)
• Color palette
• Technical information (front-end framework, CMS, APIs, etc.)
• Existing design files
• The project’s design system or UI kit

The design requirements will also include the project’s deliverables, but you can have this as a separate section. Some examples include:

• What format(s) must designers deliver the project for development–i.e., wireframes, mockups, prototypes, etc.?
• How and where to save assets
• Naming conventions

Timelines and budget

The project’s timeline and budget are essential for any design brief. This section lets designers plan, prioritize, and allocate the appropriate resources.

Some considerations for the project’s timeline include:

• Project roadmap and key milestones
• Stakeholder feedback sessions
• Prototyping and testing schedule
• User interview dates
• Design handoff date
• Task dependencies
• Final release
• Quality assurance

It’s essential to allocate the project budget to specific tasks or disciplines within the project so that team members can take ownership and manage resources accordingly. For example, defining budgets for the following areas:

• Research
• Ideation
• Design
• Copywriting
• Testing
• Tools
• Human resources

Additional notes and information

You can create an extra session for additional notes and information. Some examples of what to include here:

• A link to the project in your project management tool (Trello, Notion, Asana, etc.)
• Information about the project’s tools
• Where designers have creative freedom

Design Brief Example Templates

Here are some design brief templates from popular project management tools. 

• Free Google Docs and Word design brief templates
• Notion creative brief template
• Milanote website design brief template
• Milanote app design brief template
• Miro UX brief template
• Free PDF design brief template from Elementor
• ClickUp design brief template
• Free Google Doc design brief template from Superside

5 Tips for Writing a Design Brief

Interviewing clients and stakeholders

Most of a design brief’s details will come from a client or stakeholders. A project manager or design lead’s job is to interview these people and gather the information required to compile the design brief.

Encourage creativity

Designers are experts at finding creative and innovative solutions. A good design brief must guide rather than dictate the creative process. While it’s important to outline your design requirements, it’s just as important to inform designers where they have creative freedom.

Define tasks and decision-makers

An effective design brief delegates tasks and identifies key stakeholders and decision-makers. Assigning these roles at the beginning of a design project creates accountability while eliminating the “too many cooks in the kitchen” scenario. Designers must know who has the final say to avoid adding features or taking instructions from the wrong people.

A succinct way to include these key people in your design brief is by using the RACI project management model:

• Responsible: who must do the work
• Accountable: the team leader who ensures the work gets done
• Consulted: stakeholders who provide input and feedback
• Informed: stakeholders designers must keep in the loop with high-level progress updates–they do not have any decision-making authority

Effective timelines and deadlines

Many design briefs only include a final deadline, but there are many milestones for a design project. Setting deadlines for each milestone ensures designers prioritize their time effectively and don’t spend too much time in one discipline.

Some critical time milestones include:

• Project start date
• Key milestones and timelines–i.e., research, design, prototyping, testing, etc.
• Stakeholder feedback sessions
• Design handoff
• Release date
• Quality assurance

Plan beyond the scope

Thinking about the future is crucial. There might be a marketing campaign to promote the release or a possible future redesign. Make sure you include these requirements in the design brief.

For example, a marketing campaign will require social media assets. The design brief can instruct designers to provide images and videos in the necessary formats for Instagram, LinkedIn, Facebook, Pinterest, etc.

Getting all the design files, prototypes, and research for future design projects is also crucial because they could save valuable time and resources. Create a shared folder where designers can dump these assets for future reference.

Clear brand expectations

Clear guidelines save time with back-and-forth communication or redesigns because designers used the wrong elements. Create a shared folder or zip file that designers can download and use for the project.

Some key brand assets include:

• Fonts
• Logos (dark and light versions in vector format)
• Brand guidelines
• Color palette
• Brand graphics and video
• Copy

Improve Product Design Projects With UXPin

User testing and client/stakeholder feedback are crucial for delivering design projects. Designers use this feedback to iterate and improve design ideas to deliver great user experiences.

The biggest challenge for designers and stakeholders is poor prototype quality. These inferior prototypes are difficult to interpret, making it difficult to get client/stakeholder buy-in.

With UXPin, designers can build fully interactive prototypes indistinguishable from the final product. They can even connect APIs and use live data to demonstrate the end result accurately. These high-fidelity prototypes get meaningful, actionable feedback from testing and stakeholders, so designers can iterate faster with higher quality outcomes.

Enhance your projects with a sophisticated design tool built for modern UX demands. Sign up for a free trial to explore UXPin’s advanced design and prototyping features.

The post How to Write a Good Design Brief? [+ Templates] appeared first on Studio by UXPin.

A well-defined UX strategy is as important as your organization’s mission statement. A user experience strategy helps guide UX teams when conceptualizing and designing innovative digital products.

This article is a summary of our free eBook, The Field Guide to UX Strategy, written by acclaimed designer and author Robert Hoekman Jr.

Looking for ways to improve your user experience strategy? Why not try UXPin, the world’s most advanced code-based design and prototyping tool. Sign up for a 14-day free trial and create better user experiences with UXPin.

Build advanced prototypes

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

Try UXPin

What is a UX Strategy?

A user experience strategy is a plan that aligns UX goals with the product and organization. It defines how the organization wants its customers to experience brand and product interactions, so UX designers always consider the business strategy and its users when making decisions.

A company should consider the following when formulating a UX strategy:

• How the organization defines its user experience in relation to the brand
• How UX design aligns with product strategy
• How user experience aligns with business objectives
• Detailed user personas from qualitative and quantitative data, including behaviors, expectations, user needs
• Market trends influence the user experience
• Competitive research
• Current product performance against future goals
• Defining, prioritizing, and executing product goals, objectives, and KPIs
• User research procedures
• Reporting findings to stakeholders

The Importance of a UX Strategy

A design thinking process focuses primarily on the user, and rightfully so. But, without a UX design strategy, designers forget about the brand and its goals. A UX strategy brings the organization and end-user into a designer’s focus to align product and brand experiences.

A UX strategy ensures the organization and its stakeholders also have a say during research, design process, and usability testing.

Here are five reasons why it’s essential to have a UX strategy.

1. Keeps stakeholders updated on user experience and the benefits of UX design
2. Outlines UX research and design processes
3. Defines how to measure UX successes
4. Gives the entire organization an understanding and importance of user experience design
5. Aligns the brand’s promise with the user experience

Where to Start With a UX Strategy

Developing a UX strategy starts with a discovery process of researching data and interviewing the relevant people, including:

• Primary stakeholders
• Secondary stakeholders
• Current users
• Beta testers
• Subject matter experts
• Users of competing digital products
• Industry Data

Primary Stakeholders

Your primary stakeholders are the people in charge of the product. Primary stakeholders will be the CEO and CTO in most startups, while more established businesses may have several C-suite members you must engage.

Primary stakeholders generally want to know how the user experience will impact growth, cash flow, business value, and profits.

Examples of questions to ask primary stakeholders:

• Why have we chosen this revenue model?
• What do you see as the biggest concerns concerning the user’s experience, and why?
• What do you think is working well?
• How do you believe this product compares to its competitors?
• What metrics would you like to see improved?

Pro tip:  Do your research about what each primary stakeholder is most focused on and ask questions relevant to their role in the business. This understanding will give you meaningful feedback during the discovery phase.

Secondary Stakeholders

Secondary stakeholders are the people responsible for managing departments and executing the organization’s objectives. These stakeholders are important because they understand the company’s constraints and challenges—which ultimately impact the user experience.

Secondary stakeholders include product managers, marketing leads, lead researchers, executives, and other department heads that influence or rely on a product’s user experience.

When interviewing secondary stakeholders, first outline the C-suite’s expectations and concerns. That way, you can explore ways to improve the user experience that align with high-level directives. You should also focus on each secondary stakeholder’s role and responsibilities and how that affects users.

Make sure you keep your questions in line with the stakeholder’s area of interest. Anything outside of that carries a high risk of misleading information and perspective.

Current Users

If your product already exists, you can interview current users to get a customer’s perspective of real-world use.

Try to avoid offering compensation for these interviews; this might influence the feedback and opinions they share. Try to keep your interactions to a minimum—preferably one call/meeting under 20 minutes.

When contacting users, explain your role and that you’re researching ways to improve the product.

Tips for interviewing current users:

• Set up meetings with at least three users. After five or so, you’ll start to hear all the same things the first four said.
• Invite other team members. For example, another designer or researcher can help take notes while you focus on follow-up questions. Marketers and developers can also benefit from a firsthand understanding of the user’s background and behaviors.
• Build rapport by asking how they found the product and what features they use most.
• Instead of asking only about feelings and preferences, ask about behaviors. For example, “What do you do when…” instead of “How do you feel when…”. Open-ended questions provide more meaningful feedback compared to binary yes/no questions.
• Prepare a list of questions to use as a guideline, but don’t stick to a rigid script like you would during user research or usability testing. Leave room to deviate and explore feedback you might not have considered.
• Ask lots of follow-up questions when you start discussing the product. No answer is cut and dry. If a complaint starts but then goes nowhere, chase it. Find out what’s causing the grief. Do this for anything that piques your curiosity.

Beta Testers

Interviewing beta testers is often the most challenging part of a UX strategy discovery because these people are less invested in a new product than users of more established products.

A beta tester might be frustrated with bugs or the new product’s lacking features. So, you’ll have to get past those issues to find the actual struggles and problems your product is trying to solve.

Be empathetic. Ask the user about their usage so far, their problems, disappointments, and product wishes. Stress that your purpose is to improve the product experience, and you can’t do it without them.

Subject Matter Experts

Subject matter experts can help provide context to complicated market, product, or user data. Examples of subject matter experts include:

• Experienced visual designers
• Programming/technical specialists
• Behavioral psychologists
• User researchers
• Data scientists
• Project managers
• Successful startup founders
• Business consultants

Make sure you prepare well for expert interviews and only ask questions relevant to your product, users, and organization’s goals. Make sure you understand what they are explaining explicitly, and don’t cherry-pick the information that best supports any narrative or bias you or your company holds.

Users of Competing Products

It’s important to understand your competitive advantage and how that impacts your UX strategy. You can do this by researching what users want and how they feel about your competitors’ products.

A quick and easy way to find user pain points is by reading your competitor’s reviews. There are three valuable resources for finding competitor reviews:

• Apple App Store
• Google Play Store
• Trustpilot

If your product has a browser extension, also check the browser stores, like the Google Chrome Web Store.

Look for parallels with your product and make notes of common complaints. Also, check out the positive feedback to see what delights customers. 

Industry Data

Comparing analytics data with user feedback can give you context into patterns and behavior. 

For example, if you have a lot of drop-offs during signup, and users say they battle to navigate the signup flow, then there’s a clear correlation between feedback and data.

Event-tracking tools like KISSMetrics and predictive behavior tools like MadKudu can help determine what user feedback is most meaningful.

At UXPin, we use MadKudu to map user behavior for our purchase flow to find ways to optimize the process and remove any roadblocks.

6 Tips for Creating a UX Strategy

Not sure where to start with your UX strategy? We’ve created a set of free UX Process & Documentation Templates, including a UX strategy template.

Here are six tips to consider when creating a UX strategy.

Maintain a User-Centered Approach

Always stay user-focused when setting goals for your UX strategy. The point of a UX strategy is to align the company’s goals with UX design, not find ways to enrich the business at the user’s expense.

Prioritize Users Over Profits

The user experience should always be transparent. While the business must make money, ensure your UX strategy doesn’t put profits over users. For example, don’t hide or make it difficult for a user to cancel or opt-out of a service.

Define the Company’s User Experience Roadmap

Use stakeholder interviews and user interviews to define the company’s long-term roadmap for UI design and user experience.

Create Specific & Realistic Goals

Use your UX design strategy discovery to identify your product’s design aspirations based on:

• Stakeholder feedback
• User research
• Competitor analysis

Be explicit about your UX strategy’s goals and avoid broad or vague aspirations. Instead of “increase user signups,” define a specific objective, “increase user signups by 15% annually.” Make sure these goals are realistic and based on actual data rather than intuition.

Define Circumstances of Use

Define the circumstances and environments where customers use your products (Who, What, When, Where, Why). Don’t hesitate to detail as much about your end-user and their environment as possible—this will help designers empathize with users when thinking about the user experience.

Remember to consider that the customer experience extends beyond the product to other touchpoints, including ads, messaging, policies, user agreements, and customer support interactions.

Review & Update Your Strategy

The ancient Greek philosopher Heraclitus once said, “The only thing that is constant is change.” This statement couldn’t be more true for the fast-paced tech and UX industry.

Great UX strategists consider adapting to new technologies, market shifts, new legislation, and other forces that disrupt their plans.

Review your UX strategy annually to see where you are and whether you’re on course to meet your long-term goals. Based on the previous year’s performance, you may update these goals or set new ones.

Don’t forget to get your free copy of The Field Guide to UX Strategy, which will help you define, document, execute, and test your UX strategy with methods proven through practice.

How UXPin can Enhance Your UX Strategy

“UXPin’s mission is to enable the best user experiences by merging design and engineering into one world of better, faster product development.”

UXPin’s high-fidelity prototypes feature states, code-based interactions, conditional formatting, variables, data capture and validation, functions, and more to create an accurate replica of the final product—features you cannot get with a vector-based design tool!

These high-fidelity prototypes improve usability testing because participants get the same user experience as the final product. You also get fewer errors which means a faster time to market.

UXPin’s high-fidelity prototypes also significantly improve design handoffs. Thanks to automated design specs, CSS, style guides, and the ability to create documentation inside UXPin, engineers know what each prototype should do—minimizing the back and forth communication we often see between product teams, design teams, and developers during design handover.

Ready to experience how code-based design can improve your company’s UX strategy and reach your user experience and business goals faster? Try UXPin for 14-days to see what code-based design can do for you!

The post UX Strategy — How to Create One Effectively appeared first on Studio by UXPin.

Is design handoff stresses you out? It won’t anymore. Let’s see the exact tasks you need to do to make design handoff better. Let’s explore!

Design handoff doesn’t need to be point of friction between designers and engineers. Use UXPin Merge and bridge the gap between those teams by using a single source of truth. UXPin Merge allows you to bring reusable UI components from devs’ component library to the design editor and make them accessible to designers. Learn more about UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

47-Point Design Handoff Checklist

We’ve created this simple 47-point checklist as a guide for your next design handoff. If you want to learn more about the process itself, head on to our previous article: Create a Better Design Handoff.

During Design

Discovery:

• Invite developers to attend user interviews when possible. 
• Circulate bulleted summary of user interview insights with developers.  
• Conduct a 30-minute to 1-hour stakeholder interview with at least one developer. Use Kim Goodwin’s excellent questions.  
• Create and quickly review lean personas with developers.  
• Get developer input and alignment on technical restraints for the design brief.

Planning:

• Ensure developers (or at least the development lead) attends the kickoff.
• Conduct user story mapping with developers to plan epics and sprints. 
• Estimate build time for user stories with developers using tactics like planning poker. 
• Plan 1-2 design sprints ahead of the development process. 
• Check which framework the designs must use (Bootstrap, Foundation, custom, etc.). Adapt grids and elements accordingly.  
• Verify browser support with developers.  
• After each standup meeting, quickly review the backlog with developers.

Prototyping:

• Walkthrough user flows and lo-fi prototypes for developer feedback on feasibility.  
• Start designing extreme viewports (smallest and largest) to accurately “bracket” your content. Consider how your design will respond to screen sizes slightly smaller or larger than your assumptions. 
• Incorporate rough content (not Lorem Ipsum) into the prototype within the first two iterations. 
• Invite developers to attend at least one user testing session.  
• Prototypes account for all interaction states, error states, and transitions between states.  
• Prototypes account for data extremes (e.g., short and long last names, phone number formats, non-US postcodes). 
• Circulate all user test recordings with a bulleted summary of insights to developers.  
• Collect feedback and approval from developers at each iteration of the prototype.

UI Design:

• With each iteration, rename your design file (v.1, v.2, etc.). Do not rename “Latest” or “Newest.” Upload every new version into a shared repository.    
• Create as many reusable patterns as possible (menus, links, buttons, panels, etc.) so developers have a component-based system.  
• Make UI decisions that create consistency for the user experience and codebase.  
• Get developer buy-in on image formats and sizes.  
• Create designs in all significant breakpoints on a grid system with guides/overlays. 
• To preserve typographic integrity, use whole font values and leading values (e.g., 15 instead of 15.75).
• Use web-safe fonts when possible. Don’t use more than one custom font.  
• Check that you own the rights for all photography and typography.  
• Hold a 30-minute to an hour review of final approved mockups alongside the prototype: walkthrough project goals, user stories, interactions, states, and failure states.

During Handoff

Visual Hygiene:

• Delete all unused layers. Don’t just hide them since that may confuse developers.  
• Delete all unused guides.  
• Group and name layers appropriately based on UI modules (navigation, footer, etc.)  
• Follow a common naming convention with developers (e.g., a “widget” is not the same as a “module”). Consider using BEM notation.  
• Instead of naming artboards with “FINAL” or “LATEST,” follow a standard versioning protocol (v.1, v.2, etc.). 
• For easier navigation, collapse all layers before sending off designs.

Assets:

• Create subfolders within your main project containing all relevant icons, fonts, images.  
• Include SVGs wherever possible. For raster files, include versions at 2x.

Documentation:

• Annotate prototypes with use cases, failure states, and interaction nuances. 
• Annotate the full code snippet (or classes in frameworks) next to every element.  
• Use an inspection tool to auto-generate visual specs (color codes, dimensions, font sizes, margins, padding, etc.). Avoid redlining as much as possible. 
• Ensure all documentation stays updated to reflect the final system as it evolves. Developers will refer to the documentation to understand the depth and breadth of the system, using the final prototype as a reference for acceptable behaviors.

After Design Handoff

Accuracy of Build:

• Designers perform an “implementation audit” of each build during the QA process against the final prototype. 
• Designers attend sprint demos along with PMs.  
• Acceptance testing includes UX criteria based on the final prototype.

Design System:

• Describe accessibility requirements and any implications on the development process. For example, Salesforce Lightning: “Our forms offer proper use of <fieldset> and <legend> tags as well as appropriate labeling for input controls.”  
• Include code snippets for all UI components (menus, buttons, etc.) along with specific descriptions of use cases.  
• Include links to downloadable UI kits, color swatches, and code repositories (e.g., Github).

Achieve Better Design Handoff with UXPin Merge

What if you could use a tool that makes it impossible for design drift to occur? Bring interactive, fully-functional UI components to UXPin and improve your design handoff instantly. That’s exactly what our Merge technology offers.

Make your designers and developers share a single source of truth between design and code, so they can be on the same page and avoid all the errors of poorly executed design handoff. Bring UI components stored in a Git repository or Storybook. Streamline design handoff with Merge. See how UXPin Merge works. 

The post Design Handoff Checklist – 47 Points that Will Guide You Through the Process appeared first on Studio by UXPin.

We partnered with UXPin users dotSource to demonstrate how an agency working on multiple products, each with its own design system, leverages Merge technology to create a single source of truth between design and development.

Create a single source of truth for your product’s design system with UXPin Merge. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

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

Discover UXPin Merge

Who is dotSource?

dotSource is a German-based digital product consulting and development agency that is “transforming companies into digital champions.” It has developed and implemented scalable digital products for marketing, sales, and services since 2006.

dotSource has established itself as one of Europe’s leading digital agencies with brands like ESPRIT, hessnatur, Ottobock, TEAG, KWS, BayWa, Axel Springer, C.H.Beck, Würth, and Netto Digital, trusting in the company’s vision and expertise.

dotSource Design Team and Process

dotSource uses a human-centered design process for its projects regarding UX design, consulting, audit, and conversion optimization. Designers focus on future users for concept creation and design solutions.

The company’s iterative design process ensures designers balance user needs with business goals while ensuring every project meets usability requirements and technical constraints.

What we love most about dotSource is their passion for sharing UX knowledge. Check out the company’s free eBook, User Experience Design Best Practices.

We now hand over to dotSource to explain how they use UXPin Merge to create a single source of truth for their product development projects while eliminating redundant work, enhancing cross-functional collaboration, and improving user experience.

Fighting Chaos with a Single Source of Truth

Promoting new patterns and components to a design system is chaotic, with many redundant processes. Most design system releases require updating in at least three places:

1. The design system’s codebase (component library)
2. The design team’s UI kit (design tool)
3. The design system’s documentation

Instead of a “single source of truth” that gives “three single sources of truth” for every UI component–this seems counterintuitive and increases errors. If the design system’s update process and technologies don’t align, the team ends up with redundant work because a single change requires three updates.

Such an update process introduces a high risk of UX debt. UI kits and documentation become outdated if the design system team doesn’t respond to changes fast enough. As UX debt piles up, so does the effort to find and work through it.

The best way to circumvent these issues is to sync design, code, and documentation through a real single source of truth where:

• There are no inconsistencies
• One change automatically syncs design and code
• Documentation is always up to date
• Seamless collaboration between design and development

Single Source of Truth Should be Code-Based

Once a design system component is converted to your preferred design tool’s format, it’s subject to the limitations of image-based prototyping–resulting in a disconnect between design and development. The image-based component no longer has the fidelity, functionality, and interactivity afforded by HTML, CSS, and Javascript.

Switching to a code-based design workflow is the only way around these image-based limitations. A code-based prototyping tool like UXPin with Merge technology enables this workflow by rendering code (instead of vector graphics), just like a browser.

In UXPin, UI components look and behave exactly as they do for developers, effectively bridging the gap between design and development–a real single source of truth.

We use UXPin’s Storybook integration, which allows designers to use our design system’s Storybook components in UXPin’s design editor. The result: a perfect synchronization of code, design, and documentation, making it possible for:

• Designers to participate in QA and help developers identify bugs
• Close collaboration between designers and engineers
• Better testing and faster iterations with high-fidelity interactive components (component-driven prototyping)

With this UXPin Merge workflow, we have overcome redundant processes and eliminated UX debt from design system updates. UX consistency is no longer an issue, and we have no design drift.

UXPin Merge–a single source of truth at work

dotSource’s design and delivery teams have relied on UXPin for several years. UXPin’s Merge technology allows us to integrate React libraries through their Git Integration or Storybook for other frameworks, including Vue, Angular, Ember, etc.

The design system team can use React props or Storybook Args to define component properties and set constraints. For example, using a color property for a component’s primary, secondary, and disabled states. These three options appear as a dropdown in UXPin’s Properties Panel.

Setting these constraints eliminates inconsistencies and increases efficiency because designers never have to think about properties or basic interactivity–everything is “baked into” the components.

How to Create a Single Source of Truth

Software and technology provider Iress describes a single source of truth as a fully integrated system with:

• One centrally maintained component library used by designers and engineers
• No designing or coding from scratch (during the product development process)
• No design drift
• Flawless consistency
• Seamless designer/developer collaboration with almost no handoff process

These reusable components include styles, code, and rules defined by the design system, enabling UI consistency across every touchpoint. The design system must be flexible, easy to maintain, and scalable to achieve this successfully.

Another crucial prerequisite, according to dotSource: all stakeholders must be onboard! They must see the benefit of using a design system and its efficiencies. They’ll be quick to point out that your “single source of truth” requires managing three vital components, increasing the possibility for drift and debt.

The only way to create a single source of truth is through a code-based design workflow and tools like UXPin Merge and Storybook to sync design and development while simultaneously updating documentation–one change automating three updates.

Thank You, dotSource!

We want to thank dotSource for sharing their experience as an agency using UXPin Merge to improve designer/developer collaboration and create a single source of truth for its product development projects, and continuing to spread knowledge about UX design on their blog.

dotSource uses UXPin Merge’s Storybook Integration. Here are some resources to learn more about how these technologies can benefit your product development workflows:

• What is a Storybook and why you need it in your product team
• How to Import Your Components into Storybook and Use Them in UXPin
• Storybook Best Practices That Will Improve Your Product Development Process
• Storybook Frameworks You Can Use to Build Component Libraries
• Storybook Design System: It’s Time to Reap Its Many Benefits

Getting Started With UXPin Merge

UXPin Merge has a solution for product development teams at every level of maturity. Our npm integration is excellent for leveraging open source component libraries to build minimum viable products, add new components to an existing design system, or create a design system from scratch.

Organizations have three options when syncing a design system:

• Git integration: direct connection to React repositories
• Storybook integration: connecting a Storybook library for React, Vue, Ember, Angular, and other frameworks
• npm integration: bringing UI components via npm packages

After the initial setup, every repository update automatically syncs to UXPin, notifying design teams of the new version. UXPin’s Version Control allows designers to choose when to change to the latest release and switch to earlier versions if needed.

Better Prototyping and Testing

One of UXPin Merge’s most significant benefits is the ability to build fully functioning prototypes that look and feel like the final product–prototypes that previously required front-end developer involvement.

These fully functioning prototypes allow designers to test every aspect of the user experience, increasing a design project’s usability scope and effectiveness.

Designers can present accurate replicas of the final product to stakeholders who are able to interact with prototypes and deliver meaningful feedback.

“There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity–giving us higher quality feedback from stakeholders.” – Erica Rider UX Lead EPX @ PayPal

Join the code-based design revolution with a component-driven solution from UXPin Merge. Enhance design project workflows, increase cross-functional collaboration, and create seamless design handoffs to reduce time to market while delivering outstanding user experiences. 

Visit our Merge page for more details and how to request access to this revolutionary technology.

The post Using a Single Source of Truth with UXPin Merge – dotSource’s Case Study appeared first on Studio by UXPin.

Whether an early-stage startup or a multi-national organization, a product roadmap is essential for aligning teams toward achieving the company’s goals and objectives.

This article includes valuable tips from product experts about creating and maintaining a successful product roadmap. We’ve also included a list of tools to simplify the process of building one.

Streamline product development workflows, enhance cross-functional collaboration, and achieve your goals faster with UXPin Merge–the world’s most advanced component-driven prototyping tool. Request access via our Merge page to get started today!

What is a Product Roadmap?

A product roadmap is a high-level guide for your product’s goals and milestones, allowing teams to plan and strategize accordingly. It tells team members and stakeholders what you are building and why to align everyone towards the same goals and objectives.

What Should you Include in a Product Roadmap?

There are several key product roadmap elements:

• Product vision: the ultimate goal that drives your product
• Timeline: a visual representation of the entire roadmap
• Goals or milestones: time-bound objectives toward your vision
• Features: what you must build
• Releases: deliveries for one or more product features
• Epics: large initiatives or projects encompassing multiple features
• KPIs: progress tracking metrics

What Are the Benefits of a Product Roadmap?

A product roadmap is essential because it defines a vision and how to get there. It tells team members and stakeholders where you are and what comes next.

Product roadmaps keep teams focused on a common goal and ensure managers prioritize tasks, projects, and new features accordingly. It’s also vital to communicate product progress and timelines to the entire organization–especially for stakeholder buy-in and resource allocation planning.

Who is Responsible for a Product Roadmap?

Product managers are typically responsible for compiling and managing a product roadmap. They must collaborate with team leaders and stakeholders to ensure the product roadmap is relevant and realistic while aligning with the company’s business goals.

Product Roadmap vs. Product Strategy

A product strategy defines how the organization will achieve its vision and objectives. In contrast, the product roadmap outlines the steps and timeline toward achieving those goals.

• Product strategy: how we do things
• Product roadmap: what we must do

Both are essential for achieving the product’s vision.

What Makes a Successful Product Roadmap?

There are three vital components for a successful product roadmap.

1. Product vision
2. Timeline
3. Features (releases)

While several other elements go into a product roadmap (as outlined above in “what to include”), it won’t be effective if one of these is missing.

1. Product Vision

A good roadmap must have a vision or north star that guides team members and creates a purpose for their work. Mural has an excellent article about creating a product vision and vision statement, which must be:

• Purposeful
• Aspirational
• Achievable
• Customer-focused
• Concise
• Well-documented

2. Timelines

Every product roadmap must have timelines for features, projects, goals, milestones, etc. These can be timeframes (monthly, quarterly, annually, etc.) rather than specific start and end dates. What’s most important is that your team commits to delivering on time!

3. Product Features

Features tell team members what they must build to reach goals and milestones according to the timeline. Features are usually high-level goals rather than individual tasks.

8 Tips to Improve Your Product Roadmap

These tips will help you avoid common pitfalls and optimize your product roadmap for success.

1. Keep Your Product Roadmap Simple

A product roadmap must be easy to read and digest. The aim is to provide high-level goals and objectives without granular details. Each feature should include:

• A brief description
• Status
• Prioritization
• Timeframe/deadline
• Team/department responsible
• Lead

Pro tip: Whether working with a spreadsheet or productivity tool, keeping your roadmap within a desktop screen’s width will make it easier to scan and navigate. Similar to this example from Asana.

2. Set Realistic Goals

While it’s important to set high expectations to motivate employees, your product roadmap must be realistic and align with your human resource capacity.

3. Collaborate With a GO Roadmap

A successful product roadmap requires collaboration from multiple teams, departments, and key stakeholders. Product management instructor, writer, and consultant Roman Pichler recommends gathering these people for a workshop to create a Goal-Orientated (GO) roadmap.

GO roadmaps are outcomes-based, which helps PMs identify and prioritize goals accordingly. As shown in Pichler’s free template, GO roadmaps illustrate:

• Date – When will the product ship? 
• Name – What are we calling it? 
• Goal – What problem are we trying to solve? 
• Features – What core functionality is required? 
• Metrics – How will we know we accomplished our goal?

4. Rate Features to Prioritize Them

Entrepreneur and head UX designer Clémence Debaig uses a rating system to prioritize features:

1. Pain — Painful, Confusing, Opportunity
2. Effort — Small (1), Medium (2), Big (3)
3. Business Value — $, $$, $$$

Clémence charts the features using scalable circles, so it’s easy to visualize the hierarchy of importance and prioritize and assign resources accordingly.

5. Learn to say “No”

Product roadmaps must also define where you don’t want to go. Brian de Haaff, CEO of the product road mapping software Aha!, warns if you don’t say “no,” to features and ideas that don’t align with your product strategy, your roadmap will become diluted and unrealistic.

PMs must support roadmap decisions with user research, including quantitative data (in-app data, site metrics, etc.) and qualitative data (user interviews).

Brian also recommends separating primary personas from secondary ones to prioritize features for your main audience before trying to accommodate everyone else.

6. Know Your Audience

The challenge with product roadmaps is that multiple teams, departments, customers, and stakeholders (internal & external) need to read them. Think of these groups as all speaking different languages–you must translate your roadmap into a language they understand.

Having a single roadmap won’t accommodate everyone. You can create a master roadmap for your product development team and produce different versions that speak to your various audiences. For example, you might want to talk about exciting feature releases to customers while the business team is more interested in projected growth and revenue.

7. Simplify Roadmapping With Product Roadmap Tools

Creating and managing a product roadmap is time-consuming. Tools can help automate tasks and eliminate the hassle of building and maintaining a product roadmap from scratch–ultimately saving you valuable time!

Here are some popular project management tools we recommend for building and managing your product roadmap:

• Asana
• Monday.com
• Jira
• Aha!
• Craft.io
• ClickUp
• Notion

These tools include successful product roadmap templates to get you started. Many also integrate with other apps like Slack, Teams, G-Suite, Google Drive, etc., to streamline productivity and collaboration.

8. Encourage Input

Product management must set up channels for internal teams, stakeholders, and customers to submit ideas. A tool like Feature Upvote allows PMs to collect feature ideas and have teams and customers upvote those they value most.

These tools can help product teams align the product strategy with customer demand to prioritize features that deliver the highest ROI while satisfying customer needs.

Improving Product Delivery With UXPin Merge

Creating a product roadmap is one thing. Delivering successful projects on time requires a talented team and the right toolset. UXPin Merge syncs design and development to enhance collaboration while eliminating drift and inconsistencies. The result? Faster time-to-market with fewer errors and smoother design handoffs.

A Single Source of Truth

Merge allows you to sync a component library from a repository to UXPin’s editor, so designers and engineers use the same UI elements. You can connect a React library using our Git Integration or Storybook for other front-end frameworks like Vue, Ember, Angular, etc.

Any changes to the repository automatically sync to UXPin’s editor, notifying design teams of the update. Designers can use UXPin’s Version Control to switch between design system versions, giving complete control and flexibility.

Prototyping and Testing

Design teams can drag and drop ready-made, interactive components to build user interfaces. Interactivity, states, colors, typography, and other component properties dictated by the design system are built-in, so designers can focus on prototyping rather than designing from scratch.

Prototyping with Merge makes the design process more accessible to non-designers, like product teams and engineers, allowing organizations to scale design with fewer resources.

After switching to UXPin Merge, PayPal’s product teams (with limited UX or design tool skills) build UIs 8X faster than experienced designers were able to do previously with image-based design tools. 

TeamPassword’s small engineering team (who don’t have any designers) uses UXPin Merge to prototype and test their password manager tool to improve usability and user experience.

Both companies have experienced significant workflow efficiency and reduced time-to-market, making them more competitive using UXPin Merge. Component-driven prototyping helps PayPal and TeamPassword meet project deadlines to achieve product roadmap goals and objectives.

Meaningful Feedback

UXPin Merge enables designers to replicate the final product accurately with immersive, dynamic, personalized user experiences. Better prototypes mean better feedback from user testing and stakeholders.

These high-fidelity prototypes mean designers can identify more usability issues and opportunities for improvement during the design process, resulting in higher quality releases with fewer errors.

Smooth Handoffs

Handoffs are notoriously challenging and often a source of friction between designers and engineers. With UXPin Merge, handoffs are seamless, almost non-existent, because designers and engineers work with the same components and constraints.

Engineers simply copy components from the repository and any changes from UXPin to begin the development process. Designers can also include annotations with prototypes to provide context and documentation.

Discover how component-driven prototyping with UXPin Merge can help achieve your product roadmap goals faster while enhancing your product’s user experience. Visit our Merge page for more details and how to request access.

The post Improve Your Team’s Roadmap and Build Better Products appeared first on Studio by UXPin.

Capturing UX requirements is an essential process before teams can begin working on a project. These requirements are vital in guiding a project on its path to success.

There are three components to capturing UX requirements: business, user, and technical. Understanding each and how to capture the relevant data is crucial for designers to comprehend the project’s scope and objectives correctly.

Enhance your product development process with the world’s most advanced code-based design tool. Design, prototype, and test faster with higher fidelity and functionality. Sign up for a free trial to discover how code-based design can enhance your organization’s design projects.

What are UX Design Requirements?

Gathering UX design requirements (also called UX requirements) is a discovery process including conducting interviews, discussions, and document gathering for designers to understand what they need for a project and why.

These UX requirements form part of the project’s requirements which the entire team (product, UX, engineering, business, etc.) uses to guide the product development process.

What is the Purpose of UX Gathering?

This gathering process occurs before designers begin working on a project to guide early research and set goals and expectations. They must understand user needs, business goals, technical specifications/limitations before starting the project.

For example, how do UX researchers begin researching users if they don’t know who they are? The UX gathering process tells designers where to start and what metrics determine a successful project completion.

These are some reasons for Gathering UX requirements:

• Most importantly, to understand users and their needs. This user research is not as thorough as the empathize or research stage of the design thinking process. It’s simply a foundational understanding of the product’s user experience, so UX designers know where to begin.
• To set project goals and objectives
• Understand business goals from a stakeholder’s point of view and align these goals with users
• Learn about technical constraints and how they impact the project
• Eliminate ambiguity and misunderstanding

Types of UX Design Requirements

UX gathering falls into three primary categories:

• Business
• User
• Technical

Business Requirements

UX designers must answer the question, “What does the business want to achieve from this project?” An example of a business requirement might be, “Increase new user sales conversion by 20% without affecting retention.”

Team members use stakeholder interviews and other documentation to gather and understand these business requirements.

Business requirements include:

• Project timeline
• Project scope
• Branding rules
• Various departmental goals–business, marketing, sales, customer services, etc.
• Competitors
• Stakeholder expectations

User Requirements

Who are the users, and what do they need from this project? Are there any specific usability or accessibility issues designers must solve? UX designers use several methods to gather these user requirements:

• User interviews
• Surveys
• Dairy studies

Technical Requirements

Technical requirements fall into two categories:

• Functional: Outlines the product’s specifications, technical capabilities, and limitations
• Non-functional: Describes the product’s performance, such as usability, performance, data integrity, and maintenance

The requirements will answer key technical questions for design teams:

• What is the product’s operating system (iOS, Android, Windows, etc.)?
• What devices will the product operate on (mobile, tablet, web, smart devices, etc.)?
• What front-end framework does the product use (React, Vue, Angular, etc.)?
• What are the product’s technical limitations?

Who is Responsible for Gathering These Requirements?

A representative from each department within the project is responsible for gathering the relevant requirements. For example:

• Business: Business analyst or consultant
• User: UX Lead, researcher, or designer
• Technical: Tech Lead, data analyst

The above is an example of a typical project. These responsibilities will vary depending on the company, project, etc.

How to Capture UX Design Requirements

There is no standardized step-by-step process for gathering UX requirements. The process, steps, methods, and responsibilities will differ depending on the organization and project.

There are several methods for capturing UX design requirements. The aim is to gather data relevant to your project and compile them into a single document for everyone on the project. 

In some cases, the document might link out to other documentation, like the branding guidelines of a design system. For example, Stack Overflow’s design system Stacks has a comprehensive brand principles section for teams to reference.

The first step is gathering the relevant business, user, and technical requirements. There might be some overlap in the activities team members perform to get this data. For example, surveys and interviews are relevant to business and user requirements.

Business Requirements

• 1:1 Interviews – meeting with individual stakeholders and experts allows you to discuss specific topics in detail
• Workshops – an opportunity to discuss issues with multiple stakeholders and team members
• Documentation – reviewing various business guidelines, manuals, and other documentation relevant to the project
• Competitor research
• Surveys
• Storyboards
• Moodboards

User Requirements

• User interviews
• Usability testing existing products
• Existing user experience research–user personas, journeys
• Surveys
• Diary studies
• Focus groups
• Storyboards

Technical Requirements

• Technical stakeholder interviews
• Systems reviews
• Technical documentation and specifications
• Data analysis

Create a Low-Fidelity Prototype

Design teams often create a basic paper prototype for stakeholder and expert interviews. These low-fidelity prototypes help reference product features or provide context for explanations.

Design teams can also use these prototypes as part of the UX requirements documentation to demonstrate basic functionality, constraints, add context, etc.

With UXPin’s built-in design libraries, UX designers can build high-fidelity mockups and prototypes in minutes. These UXPin prototypes provide better clarity, and designers can share them with stakeholders via URL–perfect for today’s modern remote work environments. Sign up for a free trial to experience faster prototyping at higher fidelity with UXPin.

Document UX Requirements

Documenting the relevant business, user, and technical requirements is crucial. This documentation will provide UX designers with a starting point and reference for the project.

We recommend keeping your UX requirements document concise so that it’s easy for team members to digest. 

Categorizing your UX requirements document will help team members find the information they need. Here are some recommendations for UX requirement categories:

• User stories & personas: Generated from user requirement gathering.
• Task flows: Generated from the user and business data detailing possible user decisions and outcomes.
• Style guides: Various guides for visual design elements like color palettes, typography, components, media content, etc. (Read our guide to creating a style guide).
• Specifications: Definitions for technical and functional aspects like states, modes, interactions, product parameters, frameworks, operating systems, security requirements, etc. (Read our guide to writing a product specifications document).
• Manuals: Any standard operating procedures, policies, guides, principles, or manuals relating to the product or organization.
• Competitor research: Generated from business requirements.

Best Practices for Gathering UX Requirements

Learning From Stakeholders & Experts

Stakeholder interviews are crucial for understanding business needs and high-level strategies. These are some considerations for getting the most out of these interviews:

• Set goals relating to what you want to know from each stakeholder
• Research your stakeholders beforehand to understand their role and what they want to achieve
• Avoid assumptions and bias by pretending you know nothing–ask questions even if you think you know their answer
• Practice active listening, giving stakeholders and experts time to answer thoughtfully, leaving gaps to allow for elaboration
• Document the interview with notes and video/audio recordings (with their permission, of course)

For further reading, Adam Fard offers excellent interview advice in his article, The ultimate guide to stakeholder interviews: understand your clients.

Getting the Best Results From Surveys

Surveys are excellent, inexpensive research tools for acquiring quick feedback and sentiment. These recommendations apply to user and stakeholder interviews:

• Short surveys reduce dropoffs and increase the likelihood of completion
• Five questions are optimal, eight maximum
• Prioritize questions with the most important first
• Keep questions brief, preferably one sentence
• Closed questions (yes/no, multiple choice) are easy for participants to answer and researchers to analyze

Conduct Meaningful User Interviews

During the UX requirements gathering process, user interviews can help validate existing research or learn about changes. These guidelines will help you get meaningful feedback from users:

• Ask open-ended questions so as not to bias answers.
• Always leave an appropriate amount of silence at the end of an answer in case the interviewee wants to add or elaborate.
• Record interviews (with the participant’s signed consent) for future reference and analysis.
• Humans tend to withhold information or misinterpret facts. Don’t rely on interviews as a single source of truth. Compare with data and analytics to get an accurate picture.

Faster Prototyping With UXPin

Time is one of the biggest barriers to building high-fidelity prototypes. UX designers rely on paper or wireframes because they’re quick to create and iterate.

With UXPin’s built-in design libraries, UX designers can drag and drop components to build high-fidelity mockups and prototypes to present to stakeholders, users, and experts during the UX requirements gathering process.

The ability to create high-fidelity prototypes at any stage of the UX design process or even when gathering UX requirements means designers get meaningful, actionable feedback from users and stakeholders.

Revolutionize your product development process with the world’s most advanced prototyping and testing tool. Sign up for a free trial to discover how UXPin’s code-based design solution can enhance your end-to-end design process and deliver better product experiences for your customers.

The post The Beginner’s Guide to Capturing UX Requirements appeared first on Studio by UXPin.

A user analysis provides the foundational research for a project. Design teams use this research to guide design decisions, identify opportunities, get stakeholder buy-in, practice empathy, and prioritize the project roadmap.

Understanding the components of user analysis and how to combine the results to create actionable insights is crucial for designing a successful product that aligns user needs with business goals.

Get accurate, actionable usability testing results with the world’s most advanced end-to-end design and prototyping tool. Sign up for a free trial to discover how code-based design can revolutionize your product development to deliver better experiences for your users.

Build advanced prototypes

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

Try UXPin

What is a User Analysis?

A user analysis studies the human behavioral impact on product design. UX designers use quantitative and qualitative data to understand user behavior and guide design decisions.

Research teams create personas and use cases based on user flows to understand how users will use a digital product. For example, UX designers want to know customers’ demographics, circumstances, environment, process, and devices they use to order a beverage when designing a coffee ordering app. 

This analysis will help designers design the appropriate features for customers to order coffee through an application.

Who is Responsible for Conducting a User Analysis?

The person or team responsible for conducting a user analysis will depend on the organization and the product’s maturity. UX designers/researchers are usually responsible for early-stage user analysis or product redesigns.

Product managers/designers/owners often take over user research for established products, bringing UX designers in to collaborate or solve complex usability issues.

Further reading: Check out this article for more details about product designers vs. UX designers and how their roles differ.

When Should You Conduct a User Analysis?

There are three primary situations where teams conduct a user analysis:

• Designing a new product
• Redesigning an existing product
• Designing a new feature for an existing product

No matter the circumstance, a user analysis most often occurs early in the UX design process. Design teams use the results to set project goals, guide ideation, and design decisions.

Why is User Analysis Important?

User analysis answers questions about end users’ tasks and goals to guide design and development decisions. 

Through this analysis, teams can identify roles and characteristics that aren’t always possible through market research, such as state of mind, use cases, environment, frequency of use, and how users engage with competing products.

Reason #1: User Analysis Eliminates Assumptions and Bias

A comprehensive user analysis gives customers a seat at the table. Instead of determinations based on stakeholder direction, bias, assumptions, internal politics, and other factors, teams let user research guide the decision-making process.

Reason #2: User Analysis Identifies Opportunities

User analysis helps teams align customer needs with business goals. Researchers also use a user analysis to look for improvements, competitive edges, market gaps, and other opportunities.

User Analysis Methods

User analysis methods fall into two categories:

• Quantitative data: Measurable, but it doesn’t show the cause of action
• Qualitative data: Subjective, but you get a chance to uncover the “why”

In UX design, no data set is more valuable than the other. Using one data set only tells part of the story. UX researchers combine quantitative and qualitative data to understand users, competitors, and the market. 

Quantitative Data

Quantitative research produces numbers, time, ratios, and other measurable data. This quantifiable data is relatively easy to analyze because analysts can identify a baseline and measure whether something goes up or down. 

Quantitative data also tells designers and researchers about user demographics, which they combine with qualitative data to create personas–a vital UX research tool.

Qualitative Data

User experience design places a high value on qualitative data. While measurable data is important, it often can’t explain “the why.” UX researchers use qualitative data to understand the root of issues and opportunities.

For example, quantitive data from Google Analytics will show a high drop-off rate for an eCommerce checkout flow. When UX designers conduct interviews, users express feeling frustrated and overwhelmed completing the checkout’s lengthy form.

Without this qualitative data, the team might assume the problem lay in pricing, payment methods, or shipping charges rather than simply fixing the checkout form.

5 User Analysis Artifacts

There are several UX artifacts researchers and analysts use to conduct a user analysis, including:

• User personas
• User stories
• User journey maps
• User content matrix
• User task matrix
• Task analysis

1. User Personas

User personas are the foundation of UX research and analysis. This UX artifact aggregates user demographics, goals, behaviors, and beliefs into a one-page document with a fictional name and profile image to represent a user group.

Design and product teams use personas to help create a human connection, making it easier to empathize. Personas also create a foundation for developing other UX artifacts like empathy maps, user journeys, storyboards, flows, etc.

2. User Stories

Personas provide designers with a clear idea of who the product is for, and a user story outlines how they might use it. These stories help designers understand the environment, motivation, circumstance, and mindset of a user as they complete various tasks.

Agile Coach and Senior Consultant at Industrial Logic, Bill Wake, created a simple guideline to follow when developing user stories. Bill’s user-story methodology provides value to the business and users in a single iteration using the acronym “INVEST.”

• Independent: The user story should be self-contained, so it doesn’t depend on other stories
• Negotiable: Avoid too much detail, so user stories are flexible and adaptable
• Valuable: User stories must deliver value to the end-user
• Estimable: You should be able to estimate the resources needed for a user story
• Scalable: Keep the user stories lightweight so they can be tasked and prioritized with a certain level of certainty
• Testable: Explain the acceptance criteria, so the team knows when a story is complete

Another user story methodology is Intercom’s job stories–a framework designed to remove user persona ambiguity by focusing on causality instead. According to Intercom, job stories are more actionable because they focus on motivation rather than implementation.

3. User Journey Maps

Also referred to as user experience maps or customer journey maps.

Where the user story provides motivation and context, the user journey map creates a step-by-step visualization of a persona completing a task. Journey mapping uncovers the critical customer moments that designers can optimize to create a more valuable user experience.

Here are four tips for creating valuable, actionable user journey maps:

• Uncover the truth: Scour your user research for quantitative and qualitative data on the experiences you’re mapping. Consider various sources like web analytics, call center logs, and customer surveys and interviews. Triangulate user data to fill knowledge gaps.
• Chart the course: Experience maps should contain the lens (persona through which teams view the journey), the journey model (touchpoints across all channels), and takeaways (design principles and insights from the mapping process).
•  Tell the story: Map a beginning, middle, and end for user needs. Identify what insights are essential to the narrative and what are “nice to have.” Your map must have a user needs hierarchy (what stands out immediately versus what sinks in later).
• Circulate the map: Present it in meetings, post it on the wall, and print it, so team members and stakeholders see it. The aim is for everyone to use your map as a lens to see the world as customers do.

4. Task Analysis

Designers, engineers, product managers, and stakeholders often build products they don’t necessarily use or industries they’re unfamiliar with. A task analysis seeks to solve that issue by providing insights and context.

A task analysis looks at how users complete tasks, including details like:

• Mindset
• Users’ environment
• Actions (in physical and digital environments)
• Duration or time-on-task
• Frequency of use
• Task difficulty

Unlike user stories and journeys that focus on users, a task analysis dissects the activities users must complete. 

5. User Task Matrix

When analyzing multiple personas, researchers can use a user task matrix to compare various tasks and metrics. This matrix can help rank tasks in order of importance so designers can identify key audiences, validate value propositions, and prioritize the product roadmap accordingly.

The example from Paper Protos below displays seven tasks and three personas for booking an airline ticket.

By comparing these personas, it’s clear that “searching travel routes” is the most important task all for users, while “refer travel guide (luggage restrictions) before booking the ticket” only matters to one group.

Stephanie Troeth, UX Consultant at MailChimp, takes a more connective approach to user task matrices. Stephanie’s matrix technique below provides a broader snapshot of personas and the experience map by looking through the lens of contexts for behaviors and motivations.

Stephanie’s user matrix is more visual, making it easier for teams to identify patterns and prioritize accordingly.

6. User Content Matrix

A content matrix helps teams visualize existing content, how it satisfies user needs, identify improvements, and prioritize content updates. Analyzing your product’s content matrix helps eliminate redundant, outdated, or trivial content.

Here are four primary benefits of a content matrix:

• Acute awareness of priorities: Knowing what content is present in your product (and why) helps shape questions about its relevance and value to users and the product.
• Addressing operational constraints: As you fill out the matrix, you may discover new constraints to solutions. For example, users may need a frequently updated home screen on your app, but you might find that you don’t have the technical resources to do so. A content matrix prompts evaluations to help you discover “second-best” options, so you don’t move forward under false assumptions.
• Developing a uniform language: A content matrix helps maintain consistency in tone and terminology while avoiding jargon, slang, and other confusing terms.
• An accurate sense of scale: The better you understand the scale of content for your product, the better your design decisions. A matrix lets you visualize your product’s matrix and prioritize resources accordingly–i.e., evaluating 100 vs. 1,000 screens of content.

How to Prioritize your Findings?

Once you have completed your user research and analysis, you will have a comprehensive picture of your users, the problems your team must solve, and their priority level.

A prioritization matrix allows the team to visualize design features to separate “nice-to-haves” from “must-haves.” Often teams end up with overwhelmingly long feature lists that are difficult to narrow down.

Here are some tips for prioritizing your design objectives:

• Top Task Analysis: Give qualified users a randomized list of easy-to-accomplish tasks and ask them to pick their top five so you can identify what’s most important to them.
• Gap Analysis: Ask customers to rate prioritized features in order of importance and satisfaction. Next, use the formula: Importance + (Importance – Satisfaction) to determine feature priorities.
• Kano Modeling: Ask users to rate which features they would miss most when removed from a product. This satisfaction gap shows “must-have” versus “nice-to-have” features.
• Quality Function Deployment: Start with a prioritized list of tasks or features (from top-tasks analysis) and combine this with a list of functions (from the company). A QFD ranks the features that best meet user needs.
• Pareto Analysis (the 80/20 rule): This method can quickly differentiate “must-have” features from “nice-to-haves.” Sort your features from highest to lowest (e.g., most votes in a top task, most revenue, etc.), add up the total, then compute the percentage for each item. The features that score highest are your most important.
• Cause & Effect Diagrams: Since UX issues can be complex, this analysis can expose multiple causes for each problem, letting you troubleshoot effectively. Create a set of cause-and-effect diagrams by asking “why?” to uncover the root causes rather than the symptoms.
• Failure Mode Effect Analysis: This helps you understand the adverse effects of specific actions. It can highlight cases where you can improve the product by fixing what’s broken rather than adding features. An FMEA generates a Risk Priority Number based on commonality, severity, and difficulty of problems.

Recommended reading: The Guide to UX Design Process & Documentation.

Get Meaningful Analysis Results from UXPin Prototypes

UXPin’s code-based design tools enable design teams to build fully functioning prototypes that look and feel like the final product. Create code-like user interfaces and interactions for actionable usability testing results and meaningful feedback from stakeholders.

Sign up for a free trial to enhance your end-to-end design process and deliver high-quality user experiences for your customers with UXPin.

The post User Analysis – Best Methods to Get Quality Insights appeared first on Studio by UXPin.

Designers produce many UX artifacts throughout the product development process. These records help design teams iterate on previous work and provide valuable documentation for stakeholders, design handoffs, R&D, and future projects.

This article explores common UX deliverables and how each artifact guides the next. We’ll also discuss which UX artifacts matter most to different teams and stakeholders.

Keep your UX artifacts like design files, documentation, components, prototypes, wireframes, and mockups in one centralized design tool. Sign up for a free trial.

Build advanced prototypes

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

Try UXPin

What is a UX Artifact?

UX artifacts (or UX deliverables) are the research records, sketches, design files, prototypes, reports, and other documentation that design teams produce during a project.

Key Benefits of UX Artifacts

1. Outlines project scope and define business, user, and technical requirements (UX design requirements document).
2. Documenting the design process, so design teams can iterate on previous work and avoid duplication.
3. Synthesizes research to guide the design thinking process and further decision-making.
4. Simplifies communication and collaboration between teams and stakeholders.
5. Enables design teams to research and understand user needs and pain points.
6. UX artifacts provide valuable documentation for onboarding new team members.

3 Types of UX Artifacts

To simplify matters, we’ve created five categories for UX artifacts to cover in this article, including:

• Research
• Design
• Testing

Research Artifacts

Research artifacts include everything associated with research throughout the design process. Here are some common research artifacts:

• UX design requirements document
• Research plan
• User research
• Competitor research
• Market research

Let’s look at a few of these in greater detail.

User Research

User research artifacts are essential for the early design process. These documents help designers understand users to make human-centered design decisions. User research artifacts include:

• Personas: A fictional person representing a user group. Personas provide UX designers with a human representation to focus their empathy and understanding.
• Empathy maps: A practice to empathize with users to visualize what they think, say, do, and feel when encountering a problem or situation.
• User journey maps: A step-by-step visualization of a user’s journey as they complete a task.
• Storyboards: Similar to journey maps but focus more on illustrations and storytelling to visualize an idea or concept.
• User flows: A start to finish visualization of a user’s journey through a digital product–like an eCommerce checkout process.

Competitor Research

UX designers use competitor and market research to gain a broader understanding of a product’s demand and gaps for opportunities. A typical competitor research artifact is a competitive analysis report–a document summarizing competitor research completed at the start of a design project.

Learn how to do Competitive Analysis for UX.

Design Artifacts

Design artifacts will likely make up the bulk of artifacts designers create during the design process, including:

• Sketches & paper prototypes
• Wireframes
• Sitemap/information architecture diagrams
• Mockups
• Prototypes
• Style guide

Sketches and Paper Prototypes

Designers create sketches and paper prototypes to iterate on ideas before committing to the digital process. They also use these paper artifacts as a template reference when designing digital wireframes and mockups.

Wireframes

Wireframes are usually the first artifacts designers create when transitioning from paper to digital. Designers use wireframes to determine each user interface’s structure and layout while providing a foundation for low-fidelity prototyping.

Sitemap and Information Architecture Diagrams

A sitemap (also referred to as information architecture) visualizes each product or website’s pages and how they’re linked. This information architecture is an essential UX artifact as it guides several key design and development decisions:

• Total number of screens required for the project and how to design them
• How to structure each user flow
• Which UI elements to use when connecting screens (i.e., a button or link)
• How to prioritize content and navigation
• Where to place navigational links (i.e., header vs. footer)

Mockups

Mockups are accurate visual representations of the final product’s look, including UI design elements. These designs are static but provide a foundation for high-fidelity prototypes.

Prototypes

Designers build low-fidelity and high-fidelity prototypes as they iterate on ideas throughout the design process. Low-fidelity prototypes allow designers to test user flows and information architecture, while high-fidelity prototypes are valuable artifacts for user testing and stakeholder feedback.

High-fidelity prototypes also provide engineers with a reference during the development process. They use these artifacts to understand each screen’s layout and how the product must function.

One of the challenges with image-based prototypes is they lack fidelity and functionality, making them difficult to understand, creating friction between designers and engineers.

UXPin is a code-based design tool–meaning designers and engineers can speak the same language. Designers can use UXPin’s advanced features like States, Interactions, Variables, and Expressions to build prototypes with code-like fidelity and functionality. Sign up for a free trial to discover how UXPin can enhance your end-to-end design process.

Style guide

A product’s style guide tells designers important information like colors, typography, logos, branding guidelines, and other visual and interaction design instructions. Style guides are crucial UX artifacts because they help designers maintain consistency and reduce design drift.

Linked to a product’s style guide is a pattern library–a group of components that solve usability issues, like cards, navigational menus, CTAs, etc.

Testing Artifacts

Testing provides valuable data for designers to identify problems and opportunities to improve a digital product. These artifacts usually include important UX metrics for product roadmaps, project KPIs, and the overall UX strategy.

UX researchers also generate data and documentation during usability testing, which is crucial for identifying issues and opportunities or validating design ideas.

Some testing artifacts include:

• Survey reports
• Usability reports
• Analytics reports
• UX audits

Survey Reports

Surveys usually produce a one-page report displaying the results. Designers use this data to make decisions or for presentations to stakeholders.

Usability Reports

Usability testing is a crucial part of the user experience design process. Every usability test produces a report describing specific issues and recommendations for fixing. 

Analytics Reports

Analytics gives design teams insights into user behavior and how they navigate a digital product. Analysts can generate various analytics reports, depending on what designers want to learn and analyze. 

Designers use analytics reports to identify issues and opportunities as well as validate research and test results.

UX Audit Reports

“A UX audit is a quality assurance (QA) process that reviews an existing digital product to ensure it meets business, user experience, and accessibility requirements.”

A UX audit report summarizes the process, including actionable next steps, like fixing a broken link or replacing outdated content.

Who Uses UX Deliverables?

Research from the NN Group identified three key entities that use UX artifacts outside of the design department:

• Internal stakeholders
• External stakeholders/clients
• Engineering teams

Internal Stakeholders

• Wireframes
• High-fidelity interactive prototypes
• Competitive analysis report
• User journey maps
• Testing reports

External Stakeholders

• Competitive analysis report
• User journey maps
• Testing reports
• High-fidelity mockups and prototypes

Engineering Teams

• Sitemap
• User flows
• Style guide & pattern library
• High fidelity prototypes and mockups
• Wireframes
• Design handoff documentation

Creating, Sharing, and Managing UX Artifacts in UXPin

UXPin provides designers with an end-to-end design solution, including creating, sharing, and managing UX artifacts. Let’s look at a few of these in detail.

Wireframes, Mockups, Prototypes

Designing wireframes, mockups, and prototypes are crucial for developing and testing ideas. Designers can use UXPin to design these artifacts and share them with team members for collaboration or stakeholders for feedback.

UXPin’s Comments feature allows team members and stakeholders to provide feedback on designs and assign comments to designers who can make them as resolved once actioned. 

Keeping these artifacts and feedback in one place makes it quicker for designers to test and iterate, streamlining the design process.

Design Systems

UXPin’s intuitive Design Systems feature allows teams to build, share, and manage a project’s visual design elements, including:

• Components
• Colors
• Typography
• Assets

A dedicated designer or DS team can manage the project’s design system by adding descriptions/documentation and setting permissions to prevent team members from making unauthorized changes.

UXPin’s Design Systems is an integrated feature, so you don’t need extra plugins or applications for it to function–keeping everything in one centralized design tool.

Documentation

Design handoffs are notoriously stressful for designers and engineers. Designers often create multiple artifacts across several formats to explain designs and prototypes.

UXPin is optimized for design handoffs, allowing design teams to create documentation on prototypes–no more external PDFs or explainer videos showing designers what something is “supposed to do.”

UXPin also creates additional documentation automatically in Spec Mode, allowing engineers to:

• Inspect properties
• Measure distances
• Read the style guide, which includes starter CSS

Engineers can also communicate with designers via UXPin’s comments to ask questions about specific UI elements.

Preview and Share

Many design tools don’t offer the ability to prototype and test, while others provide limited functionality not suitable for accurate testing. 

UXPin’s Preview and Test feature allows designers to launch prototypes with the click of a button. Preview and Share allows researchers to conduct tests with users and even make quick changes to iterate during testing–again, no external plugins or applications are required!

Use UXPin for Product Design

Design better experiences for your users and keep your most valuable UX deliverables in one place with UXPin. Discover how code-based design can revolutionize your product design process. Sign up for a free trial.

The post Most Important UX Artifacts That You Should Create appeared first on Studio by UXPin.

Designing UI mockups is a critical part of the design process. They’re a visual representation or screenshot of how the final website or product will look. It’s the first time designers get to see their ideas brought to life with color, typography, and content.

By the end of this article, you’ll understand what a UI mockup is, its anatomy, and best practices for designing UI mockups. We also identify three ways designers create mockups, as well as the pros and cons of each.

Whether you’re using a UI kit, design system, or starting from scratch, UXPin’s code-based design tool allows you to design and edit mockups fast. Sign up for a free trial and see how UXPin can optimize your design workflow.

Build advanced prototypes

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

Try UXPin

What is a UI Mockup?

A UI mockup is a visual representation of a final digital product or website, including layout/hierarchy, color, typography, icons, and other UI elements. While mockups are high-fidelity designs, they are static and have no functionality-like a screenshot.

What are Mockups for?

Mockups are a crucial part of the design thinking process because they answer important visual questions (like layout, color, and hierarchy) and allow designers to start high-fidelity prototyping. 

Mockups also provide engineers with a visual reference to start the development phase. With UXPin, devs can use Spec Mode to analyze each mockup’s sizing, spacing, grid/layout, colors, and typography.

Mockups also provide:

• Meaningful stakeholder feedback: Thanks to the higher fidelity, mockups require less context than low-fidelity wireframes and sketches, giving stakeholders an accurate representation of the final product.
• Realistic perspective: Mockups reveal problems that might not have been obvious during low-fidelity wireframing–like accessibility considerations, poor color choices, or layout issues.
• Flexibility: It’s easier to make changes to a UI mockup using a design tool than editing code. If designers work with a design system or UI component library, making changes is as easy as swapping components or rearranging the layout.

When to use UI Mockups

Mockups usually follow wireframes and paper prototyping (the low-fidelity phase) in the design process; however, this is not always the case. Designers using established design systems or UI kits often follow handwritten notes to build mockups, skipping the lo-fi phase entirely.

Skipping the low-fidelity phase and going straight to mockups is an advanced technique and requires extensive experience and familiarity with the product, so we always recommend following the traditional methodology of paper>wireframes>mockups>interactive prototypes.

Completing paper prototyping and wireframing first lets you figure out critical aspects like the number of screens, layouts, CTAs, flows, navigation, and information architecture.

With all these pieces in place, generating mockups and moving onto high-fidelity prototyping is much easier and faster.

Anatomy of a Mockup

Content Layout

A mockup replaces a wireframe’s boxes and lines with actual content, like images, UI components, and text. This content often dictates the layout (like F-pattern or Z-pattern), as designers decide how to prioritize and fit everything within the screen’s constraints.

It’s common for designers to use dummy images and text for a mockup’s first iteration, which they replace once they start prototyping and testing.

Color & Contrast

Color plays a crucial role in branding, content grouping, hierarchy, and accessibility, while contrast is vital for legibility, usability, and accessibility.

With UXPin’s built-in accessibility features, designers never have to use external tools for color blindness simulation or evaluating contrast against WCAG standards. 

Color and contrast can also impact business value. For example, if a CTA doesn’t stand out or is the wrong color, it could adversely affect conversions.

Typography

Designers must never overlook the importance of typography. Mockups are the first opportunity for designers to visualize font choices in context with the rest of the user interface.

Mockups let you explore your typography size, font, style, and spacing–not to mention structural usage for consistency, like how to stylize captions.

Spacing

Spacing and white space are powerful design characteristics. Space improves legibility and helps define visual hierarchy. Designers often use white space to draw attention to important UI elements, like a CTA or product image.

3 Types of Mockups

There are three primary tools for generating mockups–graphic design software, mockup apps, and coded mockups. Each mockup type has its advantages and disadvantages.

Graphic Design Software

Some designers still prefer to build mockups using graphic design software, like Photoshop. The problem with graphic design software is that you can’t add animations or interactions, so you have to recreate the mockups in another application to start prototyping.

Mockup Tools

Specialized user experience design tools like UXPin provide designers with the features to build mockups quickly, especially if they have a component library or design system. 

With UXPin, you drag and drop components from your design system or one of our built-in design libraries to build mockups. Designers can also create layouts for different screen sizes like mobile (iOS/Android), tablet, or desktop. 

Code

Some technically proficient designers build mockups using HTML, CSS, and Javascript. The benefit of code mockups is there are no surprises at the design handoff. If designers can’t recreate an idea or visual element in code, they can try something else before handing it over to developers.

The downside to code is that it’s time-consuming to build, fix errors, and make changes. 

With UXPin’s MUI integration, you don’t have to learn code to design in code. Designers can drag and drop MUI’s React components to build mockups and fully functioning prototypes. Sign up for a free trial and start designing with code using UXPin and MUI’s component library.

Best Practices to Create Mockups

Here are a few best practices for UI design and creating mockups. These principles apply to web design, product design, mobile apps, and other digital user interfaces.

Mobile-First Approach

Mobile-first design prioritizes content while reducing unnecessary features and components. Scaling down from desktop down often leads to inconsistencies or designers making compromises to conform to smaller screen sizes.

Avoid Switching Tools

With comprehensive end-to-end design tools like UXPin, there’s no need to switch apps from wireframing to mockups and prototyping. Switching applications can introduce errors and inconsistencies.

Use a Component Library or UI Kit

Using a UI kit or component library can help designers build, test, and iterate mockups much faster than designing from scratch. Once you have a layout that works, you can customize the components to meet your branding and product requirements.

Don’t Reinvent the Wheel

Industry-standard UI patterns and UX design patterns enhance the user experience by reducing the learning curve of your product or website. For example, most eCommerce websites follow similar UI patterns and layouts to reduce cognitive load and get customers to checkout faster.

Adopt a Minimalist Approach

Cluttered UIs look unattractive and adversely affect the user experience. Designers should always look for ways to reduce UI elements and text to make the most important content stand out.

In The Guide to Interactive Wireframing (these principles also apply to mockups), design professor Tom Green outlines a user-focused procedure for deciding what stays and what goes:

• Build a content inventory of all prospective elements on a page
• Prioritize these elements and remove the ones that aren’t necessary
• Fit the remaining elements into a visual hierarchy based on importance
• Create content blocks based on element categories
• Add and subtract blocks into layouts according to priority
• “Sculpt” designs at each iteration until they start resembling interface objects

Leverage Design Tools

Design tools have tons of features to make designing and prototyping quick and easy. Always read the documentation to learn shortcuts and leverage features to build better mockups.

For example, UXPin’s Components feature allows you to save and reuse elements consistently throughout your UI, while Auto-Layout lets you automatically resize, fit, and fill your designs.

Name Files and Layers Properly

It’s easy to get lost in design files with multiple pages, components, assets, and layers. Adopting an organization-standard naming convention helps keep mockups (and the entire project) organized, making handovers, onboarding, and design handoffs much easier.

Designers should also use a standardized method for file storage and documentation, so that team members always know where to look. UXPin allows teams to store your design system, documentation, assets, and design files inside one tool, giving the entire organization access to the project at all times.

3 Tips for Collaborating with Developers on Mockups

UI mockups are essential documents for developers because they determine how to recreate the designs in code. Here are some tips to help smooth the collaboration and handoff process:

1. Use Brad Frost’s Atomic Design methodology to explain UI elements from their smallest form to more complex components, templates, and page layouts. Simplifying designs this way allows developers to visualize component structures, making them easier to replicate.
2. Highlight interactions and animation and even link to your prototype to give developers clear instructions. Interactivity isn’t evident with static mockups, so context is vital for engineers to develop the digital product correctly.
3. Learning development basics can help designers collaborate with engineers better while reducing friction. You don’t have to learn complex programming languages, but basic HTML, CSS, and Javascript will improve collaboration and your design skills.

Ready to get started creating beautiful mockups? Use one of UXPin’s built-in design libraries or start your UI mockup from scratch. Sign up for a free UXPin trial to experience the world’s most advanced code-based design tool.

The post What Is a Mockup — The Final Layer of UI Design appeared first on Studio by UXPin.

Like any digital product, launching a design system is just the first step. The next step is about supporting, evolving, and scaling your design system as it matures with your product(s) and technology.

The design system team must also gather user feedback for system improvements, bug fixes, and new components. There are no right or wrong ways to go about scaling and maturing a design system, but there are some guidelines your team can adopt to improve its success.

Manage your design system with UXPin’s code-to-design solution. Share your design system easily, document on the fly, and create advanced prototypes with interactive components. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Be Open to User Feedback

One of the keys to evolving and scaling a design system is user feedback. The design system team must create channels to engage with the design system’s users.

Here are some examples:

• Form submissions: Most design systems offer a contact page with a form for users to submit feedback. This makes it easy for teams to contact the DS team if they spot an issue. Stack Overflow’s Stacks design system includes a form at the footer of every page where users can upvote, downvote, send a message, or file an issue on GitHub.
• Workshops: Design system workshops are great for educating teams about usage and best practices, but it’s also a fantastic opportunity to listen to users and get feedback.
• Message channels: Creating dedicated channels on platforms like Slack or Jira is a great way to make the DS team accessible and encourage feedback from users. Consider setting up several channels for different purposes, for example, #design, #development, #bugs, #documentation, #releases, etc.
• Videocall Q&A sessions: Video Q&A sessions are crucial for face-to-face engagement with remote teams. The DS team can use these sessions to answer questions and share their screen to explain complex issues or solve problems together.

Execute Design System Governance

Opening these channels of communication is vital for design system governance and evolution. “Design system governance is the process and protocols for maintaining and updating a product’s design system.”

To maintain the design system’s integrity, teams must follow procedures and protocols to make updates and changes. A standard method of governance starts with a decision tree that takes users through a series of questions until they arrive at a suitable instruction–for example, “propose an amendment to an existing pattern.”

Common amendments and procedures include:

• Introducing new elements: The workflow and procedure for adding new elements.
• Promoting patterns: Procedures for implementing one-off or best new practice.
• Reviewing and adapting patterns: A review process ensures that new elements meet design principles and standards.
• Releasing design system updates: A release schedule keeps updates consistent and ensures team members follow correct QA procedures.

Each new UI element or component must undergo rigorous design, prototyping, and testing as the original design system. The DS team must also include procedures to update the design system’s style guide and documentation to align with releases.

Be Flexible to Scale

While governance is essential to ensure integrity and consistency, the DS team must include the flexibility for teams to scale the design system and its products.

Salesforce Lightning achieves flexibility through Variations and States, which gives users multiple versions of a component. This proactive approach gives Salesforce’s teams the tools to innovate and scale without time-consuming governance procedures for basic component changes.

Share Roadmap and Releases

The DS team must set up channels to communicate design system changes to users and stakeholders.

Design system roadmap

A roadmap outlines the design system’s timeline, tasks, milestones, and deliverables, providing transparency and managing user and stakeholder expectations. 

A typical design system roadmap includes:

• Recent releases
• What teams are currently working on
• What teams will work on next
• Future releases (6-12 months in advance)

Release Notes or Changelog

Your design system should include a “What’s New” section informing users of your latest releases, including notes and links to updated documentation.

Version Control

Linked to releases is versioning which gives users control over how and when they upgrade to the latest design system version. UXPin Merge’s Version Control allows teams to manage design system versioning for each project. Designers can also switch between versions, which is helpful for fault finding or updating old UIs.

Promote a Design System

For many people, the benefits of a design system are obvious, while others need more convincing. The DS team and advocates must find creative ways to promote the design system and increase its usage across the organization.

Create a Design System Sandbox

Creating a sandbox environment is a fantastic way for users to interact with your design system. You could include a couple of test projects or ask people to copy a UI from one of your products so they can get real-world experience.

Make your sandbox a little more exciting by offering monthly prizes for who can build a prototype the fastest using your sandbox environment.

Demonstrate a Side-by-Side Comparison

When PayPal switched to UXPin Merge, they did a side-by-side using Merge vs. an image-based design tool. PayPal’s designer created a one-page prototype eight times faster using UXPin Merge.

Demonstrations like this help prove your design system’s ability to streamline workflows. You can record these sessions and use them during presentations to stakeholders for further investment in your design system.

Design System Meetups

Communication is one of the essential factors of scaling and maturing a design system. The DS team must be open to receiving feedback, as well as actively engaging with users to increase adoption.

Hosting face-to-face meetups is crucial to achieving organization-wide implementation and adoption. Isha Kasliwal, who spent 8+ years on Salesforce Lightning’s DS team, reiterated this point at a Clarity Conference 2017 speech:

“For the Lightning Design System, we focus heavily on adoption and implementation across the entire organization. We reach out to people through office hours twice a week where anyone can ask us about the Design System. We hold brown bag lunch meetings. When I say these out loud, I feel like they’re no-brainers, but there are a ton of people who don’t realize how frequently you have to do this in-person outreach to be there as sounding boards for them.”

Use KPIs to Measure Value

Acquiring future resources requires the DS team to demonstrate the design system’s return on investment. It’s crucial to measure KPIs before implementing your design system to have a baseline to measure performance.

There are three essential KPIs to track a design system’s performance over time:

1. Team efficiencies – estimate how long it takes teams to build a new product using the organization’s design system
2. Speed to market – measure how long it takes teams to build and test prototypes
3. Effect on code – measure how much code developers change with each release

Other areas where you might experience improvements after implementing a design system include:

• Increase sales/conversions
• Reduced tech support calls
• Brand satisfaction
• Reduced rework or errors
• Employee retention
• Labor cost savings

Pave the Way to Design System Maturity

Your long-term goal is to achieve a design system maturity level where designers and engineers have everything they need to develop new products. Achieving this level of maturity takes a considerable amount of time and resources.

Global Software developer Iress identified four stages of design system maturity. The final stage is a fully integrated single source of truth between design and development–a process that started in 2015 and Iress only achieved in 2022!

Scaling and Maturing a Design System with UXPin

UXPin gives you the features to go from concept to a fully integrated design system using a single design tool. We also provide space for your design system’s style guides and documentation, so designers never have to leave UXPin.

UXPin Merge allows you to take your design system to the next level, where designers and developers use the same components to create a single source of truth across the organization.

Merge lets you sync a design system hosted in a repository to UXPin’s design editor, so designers use fully functioning code components to build mockups and prototypes. You can choose between our Git integration for React components or Storybook for other technologies, including Angular, Vue, Web Components, Ember, and many others.

The DS team can use component props (for React) or Args (for Storybook) to give designers the flexibility to make changes according to the design system–for example, adding states, interactions, sizes, and color options to a button component.

Merge design handoffs are much smoother because engineers are already familiar with components. Any component changes render JSX, so engineers can copy/paste to begin development. Discover UXPin Merge.

The post Checklist What to Do After Launching a Design System appeared first on Studio by UXPin.

On the surface, building a design system is a matter of designing a collection of elements, components, text styles, and colors. But the truth is it’s a more complex procedure. Building, managing, and scaling a design system requires principles and direction.

This article was inspired by the webinar about Design System with Carola Cassaro, which outlined the process of building a design system, including the principles that guide teams and decision-making. We have another webinar coming up in May! We will talk about building and scaling enterprise design systems with Amber Jabeen. Join the webinar for free.

In Defending Your Design System, we feature our revolutionary code-based design technology, UXPin Merge. Merge allows you to create a single source of truth between design and development by syncing code components from a repository to UXPin’s editor. Sign up for a free trial and see Merge in action with our MUI integration. 

What are Design System Principles?

Principles define the why and purpose of building your organization’s design system. These principles guide decision-making and explain how the design system’s creators want team members to use the system. 

A design system’s principles also streamline onboarding by helping new team members understand the company’s vision and priorities. 

“Design principles are the guiding light for any software application. They define and communicate the key characteristics of the product to a wide variety of stakeholders including clients, colleagues, and team members. Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole.” – Luke Wroblewski, Product Director at Google

Carola Cassaro, Director of Product Management at Work & Co, and part of the team responsible for building and launching IKEA’s design system Skapa, broadly outlines design system principles as:

• Single source of truth: Centralized resource that’s easy to access and relevant to its users
• Inclusive & collaborative: Speaks to a wide audience, uses shared terminology, and fosters the exchange of ideas
• Modular & reusable: Solves the majority (80%) of UX problems so that teams have more time to innovate
• Living & breathing: Evaluated and evolved over time

Why Do You Need Design System Principles?

Building a design system is like building any other product. Without a set of principles guiding your decisions, you end up with the same problems your design system is supposed to solve, like design drift, conflicting opinions, and team friction.

With clearly defined principles, team members work together to solve design problems with shared purpose and consistency.

A Guide to Establishing Principles for a Design System

Back in 2015, UXPin used a five-step process to define its design system’s principles. The process is still relevant today.

Step 1 – Find product analogies

To avoid copying direct competitors, look for inspiration from successful products and brands outside your product category. The goal is to identify core values and qualities you want your product to have. What do you want people to experience when using your product?

For example, a red Ferrari might represent wealth, speed, exclusivity, status, and innovation. List these analogies and your reasons for choosing each one.

Step 2 – Find design principles in analogous products

Go through your list of product analogies and identify the qualities that make these products successful. Also, why do you want your product to have these qualities?

For example, a red Ferrari represents status. How does it do that for people? A simplistic answer would be its cost. But there’s so much more that gives a Ferrari status, like craftsmanship, quality parts, attention to detail, rarity, personalization, Formula 1, and the brand’s legacy.

Step 3 – Make the list real with existing user research

Connect the reasons for your choices with your product’s user research. Do user pain points contradict what you want your product to be?

For example, you want your product to be as simple and intuitive as an iPad, but users complain that they battle to use features or complete tasks.

Step 4 – Build value statements

Sort your analogies and reasons, prioritizing those most frequently mentioned by users to make value statements. 

We want our product to be like [complete with your product analogy] because it [complete with the reason] and it’s important to [our users/me/us].

Using one of Marcin’s examples: “We want our product to be like a white Porsche 911 from the 80s because it brings the feeling of timeless quality and it’s important to us.”

Step 5 – Abstract your principles

Now remove the product references from your value statements to make them applicable to your design system.

For example, “we want our product to bring a feeling of timeless quality.”

From this five-step process, UXPin’s team developed seven design principles:

1. No distractions. Every redundant piece of the interface (lines, buttons, shadows, animations) is a source of distraction. As such, it should be eliminated to empower users’ creativity with a well-architected and inspiring design tool.

2. Design-centric. Users’ designs should lie at the center of UXPin. Our interface should be unobtrusive to the point of transparency.

3. Adaptive interface. UXPin’s interface should act according to the context of use. All the ‘inactive’ features should remain completely hidden until the user can use them (no inactive buttons and links!)

4. Space. UXPin’s interface should create a peaceful atmosphere, triggering users’ creativity. This ambiance can be shaped by leaving a lot of space around every piece of interface. The cluttered interface is the source of stress that produces cortisol and adrenaline; both block our creative powers.

5. Inspiration. UXPin design should inspire and, as such, can’t be a derivative of design of other SaaS apps. We should strive for an original aesthetic inspired by the best products ever created (some of the sources of our inspiration: Fountain Pen Pilot Vanishing Point Matte Black, speakers Harman Kardon Sound Stick, record player Pro-ject, speakers DALI Zensor).

6. Interactive Consistency. Interface components, icons, and fonts should be consistent to create a predictable experience.

7. Predictable Architecture. UXPin’s architecture must be predictable and natural. Features should be placed in the right context for new users to discover easily. Example of predictable architecture: canvas settings should be placed next to the canvas.

Over the years, UXPin has found these principles prevent:

• Endless subjective discussion
• Unclear design requirements
• Inconsistency at the most fundamental level

Finding Inspiration and Examples From Adele

Adele is a UXPin initiative that features an A-Z Design Systems Repository. Inspired by the 70’s design system pioneer Adele Goldberg, Adele by UXPin aims to encourage people to develop principle-driven design systems using inspiration from the world’s leading organizations.

The directory breaks each design system down into 31 categories, including components, framework, brand guidelines/principles, color palette, typography, grid, accessibility, documentation, and more.

Adele also provides links to each of these categories (where applicable), so you can quickly find references and inspiration. For the purposes of this article, we’ll outline the principles from four established design systems.

Estonia – Brand Estonia

As a country that’s marketing itself as “the world’s most digitally advanced society” and strategies to attract startups and remote workers like e-Residency and its Digital Nomad Visa, it’s no surprise that Estonia has one of the world’s best governmental design systems.

Brand Estonia comprises of three core messages or principles that designers must use to introduce Estonia:

• Digital society: Estonia is the first country to function as a digital service. Our citizens and e-residents can get things done fast and efficiently.
• Independent minds: Estonia’s biggest asset is our people.
• Clean environment: Estonia has a lot of untouched nature and a low population density. This is very rare in today’s world. We know how to care for our environment and we are proud of it.

Estonia also has 11 primary industries or products, each with its principles that align with the country’s three core messages.

Coupled with messaging are Brand Estonia’s copy and design guidelines which define the country’s character in three words: Nordic, Surprising, and Smart. The visual language must always be:

• Clean: as in uncluttered with unnecessary information and confusing typography
• Simple: because we like to leave enough space around text and images – making them more legible and emphasizing only the essential

Brand Estonia is a wonderful example of how designers can use the nation’s values (or company culture) to define its design system’s principles succinctly.

Atlassian Design System

Atlassian’s design language resource provides teams with guidelines “to create simple, intuitive and beautiful experiences.”

The design system team has separated the guidelines into six categories:

• Brand: reflects who we are and how we want our users to feel when they use our products
• Foundations: the visual elements needed to create engaging layouts and end-to-end user experiences
• Content: covers our voice and tone, and the mechanics of our grammar, and style
• Components: each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences
• Patterns: best-practice solutions help users achieve their goals and help ensure consistency across experiences
• Resources: a collection of tools, kits, plugins, and guides to help simplify the creation process for our users

Within each category are several subcategories where Atlassian uses a sentence or two to reinforce the company’s principles. For example, under Brand, they have Mission: Our mission is to unleash the potential in every team.

Atlassian demonstrates that with clear design system principles, you can develop a complex suite of products with remarkable consistency and seamless integration.

Salesforce – Lightning Design System

Design system professionals often point to Lightning as an example of simplistic cohesion and consistency. Lightning’s guidelines are as comprehensive as the design system itself, with documentation for every component and layout.

Salesforce outlines four code principles behind its design system:

• Clarity: Eliminate ambiguity. Enable people to see, understand, and act with confidence
• Efficiency: Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster
• Consistency: Create familiarity and strengthen intuition by applying the same solution to the same problem
• Beauty: Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship

Salesforce’s goal for Lightning is to create a design system that allows team members to focus on their core tasks and responsibilities:

“The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.”

If you’re having trouble defining your design system’s principles, start by identifying a high-level goal and working your way down from there.

Stack Overflow – Stacks

Stack Overflow divides Stacks’ guidelines into four categories: Product, Email, Content, and Brand. Under Brand is where the company outlines its design system’s principles.

Stacks emphasizes four brand principles that “represent the approach and opinion all things Stack Overflow should have.”

• Focused: Designs should focus the person on what’s important at hand. Designs should focus on the central goal, pushing distractions and interruptions to the side until the stated goal is completed.
• Welcoming: Our designs shouldn’t feel “members only,” but inviting and approachable. Designs should be intentional and intuitive, not be some secret codex for users to decipher. While the subjects developers talk about may seem impersonal, our design approach shouldn’t be.
• Purposeful: Everything in its right place. Our designs might be packed with information, but everything should be purposeful. Don’t add extraneous data or ornamentation, as it might distract people from the central goal at hand.
• Five percent fun: We’re quirky, not corny. We enjoy the long joke. Our humor is dry and pops up in unexpected, but appropriate, places. We’re “business in front, party in the back.”

Stack Overflow also provides its teams with guidelines for copywriting and visuals. The design system team does a fantastic job of using simple language to describe the company’s principles, including images and graphics to clarify messaging.

UXPin Merge – The Ultimate Design System Tool

Building a design system is one thing. Managing and scaling it takes governance and proper tools. UXPin Merge lets you sync your design system from a repository to the design editor so designers can build fully functioning prototypes using code components.

This single source of truth means all teams, including product, design, and development, use exactly the same design system components to build products. When engineers update the repository, UXPin automatically syncs the changes and notifies all teams.

Build, manage, and scale your design system with the world’s most advanced design system technology. Sign up for a free trial to experience UXPin and Merge with React components from MUI. 

The post Design System – Principles of Success appeared first on Studio by UXPin.

Adopting and scaling a design system is challenging. You must get buy-in from the entire organization, which means evangelizing your design system to persuade stakeholders, product managers, development teams, and designers of its value.

Building a design system is just the first step; scaling and reaching optimal design system maturity costs a lot of time and money. Evangelizing a design system means you have to prove it will help teams be more efficient, productive, and free to tackle complex challenges.

When ExxonMobile created its design system, Unity, the company built more than 50 web apps in 10 months. Your goal is to demonstrate how your design system will create business value and deliver a return on investment (ROI).

This article explores how to get organizational buy-in, including practical resources to help pitch your design system to stakeholders and investors.

Whether you’re starting from scratch or have an existing design system, UXPin offers solutions to build, scale, and mature your design system using a single platform without plugins and extensions. Sign up for a free trial and see how UXPin’s code-based design tool can enhance your UX workflow to build better product experiences for your customers.

Why Do You Need to Evangelize a Design System?

Many stakeholders see building and managing a design system as a costly distraction from designing and optimizing revenue-generating products. They can’t see how a design system will generate ROI.

Designers also face the challenge of convincing other design teams, product managers, and engineers to adopt a single design system. When Spotify built its design system, Encore, in 2018, they had “22 different design systems floating around.” (And by around, they’re talking about spread across multiple continents!).

So, designers must evangelize a design system for two primary reasons:

• Business value for stakeholders
• Reducing workload and increasing productivity for designers, product teams, and engineers

Who’s Responsible for Getting Design System Buy-In?

Who is responsible for getting design system buy-in depends on the organization and the structure of your design department. The call can come from a product manager, web manager, design lead, DesignOps leader, or a lonely UX designer in a startup.

Eightshapes founder Nathan Curtis identifies three common design team structures and how they are responsible for scaling a design system:

• Solitary Team Model: You typically have a lone UX designer who might work with contractors and freelancers in a startup environment. They might pitch the need for a design system to manage consistency and minimize contractor (and future employee) onboarding.
• Centralized Team Model: A typical team setup in medium to large organizations with a centralized team making design decisions. They often manage the design decisions for multiple products.
• Federated Team Model: An enterprise structure where a committee of designers from across platforms and product lines collaborate to make design decisions collectively for a set period–similar to representatives in the US Senate.

When Do You Pitch a Design System to Stakeholders?

The longer you delay building a design system, the more time and money it takes to implement one. The problem is that most organizations (including multinationals like Airbnb and Spotify) realize this too late, which ends up costing a lot of money.

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.” – Alex Schleifer is the VP of Design at Airbnb

When UXPin spoke to Dan Mall of design system specialists Superfriendly, we asked what size company benefits from a design system. Dan replied, “I don’t think that there’s any particular size that I can pinpoint, but I think it’s about how many digital properties they maintain or intend to maintain.”

Without a design system, the software development process gradually slows, and user experience suffers. You cannot hire more designers to scale design. More designers mean more “cooks in the kitchen,” resulting in a chaotic design process, inconsistencies, and design drift.

Here are some questions to ask:

• Are you satisfied with the speed of product development?
• Do our interfaces share the same design patterns, colors, typography, and other styles?
• Do we always have enough time to deliver a quality product to meet KPIs?
• How do departmental silos impact design?
• How much time and money do we spend on redundant design or code tasks?
• How much time and money do we spend cleaning up design or technical debt?

Answering these questions and highlighting design problems will help you build a case that your organization is ready for a design system.

How Do You Evangelize a Design System?

In our free toolkit, Evangelizing a Design System, we provide you with a proven template for getting buy-in from designers. You must conduct internal research to identify the problems your design system will solve and how it will deliver an ROI.

Here are 5 steps to prepare your presentation and evangelize your design system.

Step 1 – Conduct Research

The first step is to conduct research to discover your company’s design pain points. You should look at the facts objectively; perhaps your organization isn’t ready for a design system. Maybe a UI kit or style guide is a more realistic and cost-effective solution?

This approach might sound counter-intuitive, but remember that you’re likely to face resistance and scrutiny from stakeholders and other team members. Your goal is to ensure you have explored every avenue to prepare yourself for difficult questions.

Your research should also include interviews with product managers, design leads, customer support managers, engineers, and other team members to understand the problems and challenges they face.

• What is the rework rate?
• What are the issues with design handoffs?
• How many support tickets relate to usability issues? And what is the effect on users?
• How often does design and development experience drift?

The goal is to identify problems a design system can solve and deliver a positive ROI. Most importantly, how do these internal issues impact your customers?

Step 2 – Prepare a Presentation Based on Your Research

With over 40 slides in four sections, our Evangelizing a Design System template has everything you need to build a strong presentation for implementing a design system.

Our presentation template includes:

• An introduction with facts from use cases and surveys
• An outline of what a design system is and how it works
• A template to calculate and present your ROI
• A section for the next steps and how you plan to implement your design system

You’ll also need a system of governance and a design system team to maintain your design system’s consistency and integrity. Otherwise, you end up like Spotify with 22 design systems spread across the globe.

The size of your design system team will depend on your company and the number of products. Here is an example design system team that Superfriendly usually recommends for a centralized team model (see who is responsible for getting design system buy-in? above):

• Product Owner
• Design Manager
• Tech Director
• Senior Designer
• Senior Engineer
• Senior Analyst
• Content Strategist
• Associate Designer
• Associate Engineer
• QA

In smaller companies and startups, you might only fill 2-5 of these roles. 

Step 3 – Finding Allies and Educating the Team

It’s essential to educate team members before you approach stakeholders. The more team members you get behind the project, the better your chances of convincing stakeholders.

Jordan Staniscia, a Senior Product Designer at Abstract, recommends finding “allies” from other departments who share your passion and vision for a design system. These ally evangelists can teach you how different departments will use a design system and how best to appeal to these team members. Employees from SurveyMonkey, HubSpot, and WeWork have all used this strategy to educate teammates.

You may gain further insights during this process to strengthen your presentation to stakeholders.

Step 4 – Presenting to Stakeholders

During your presentation to stakeholders, it’s important to present the following:

• How design systems have helped other companies and competitors
• The problems and pain points affecting your company
• The cost of these inefficiencies
• The current effect on customers
• Feedback from team members
• How your design system can reduce or eliminate these inefficiencies and associated ROI
• The benefits specific to your company
• A basic outline of the proposed design system’s structure
• Summary of the design system’s team and governance

Our free template, Evangelizing a Design System, provides space for you to present these points succinctly to stakeholders.

Step 5 – Continuous Evangelism & Outreach

Like the design system itself, your evangelism and education are an ongoing evolution process. The design system team must continue to engage with team members.

• Identify pain points and solutions to fix them
• Encourage input, suggestions, and ownership
• Educate teams about updates, scaling, and best practices

As you scale your design system, you’ll need more funding and resources. So, it’s crucial to evangelize your design system to stakeholders continuously:

• Demonstrate how the design system has improved inefficiencies
• Feedback from team members
• Share feedback from user research related to the design system
• How the design system improves usability and accessibility
• The ROI
• Your design system roadmap and how future changes will deliver business value

Building, Scaling, and Maturing a Design System With UXPin

Start your design system with minimal investment using UXPin’s Design System’s feature. Start your design system from scratch with Colors, Assets, Typography, and Components. You can also manage your design system with documentation and set permissions for your new components to prevent unauthorized changes.

UXPin also offers solutions for scaling and mature design systems with UXPin Merge. Merge allows you to sync a design system to UXPin’s design editor from a repository. Designers can simply drag and drop fully functioning code components to build new products and user interfaces. 

With Merge, UX designers, product teams, and engineers all use exactly the same code components, thus creating a single source of truth across the organization.

Sign up for a free trial to start building a design system from scratch with UXPin, or for mature design systems, visit our Merge page for more information.

The post How to Evangelize a Design System? appeared first on Studio by UXPin.