The concepts of desirability, feasibility, and viability are foundational to the design process, especially in the context of human-centered design and innovation. They help ensure that designs are not only user-centered but also practical and sustainable.

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.

Example of desirability

Here’s an example of desirability in design:

Imagine you’re designing a fitness app aimed at helping people track their workouts and achieve fitness goals. To focus on desirability, you’d start by understanding users’ motivations, needs, and emotional triggers. Through user research and interviews, you might discover that your target users (let’s say busy professionals) want more than just tracking workouts—they want an app that encourages them to stay motivated and makes fitness feel rewarding.

Desirability in Action:

To address this, you design a feature that gamifies the fitness experience, such as:

• Earning badges for milestones (e.g., completing a 30-day workout streak).
• A personalized progress tracker that visually shows how close they are to their fitness goals.
• Social sharing options where users can share achievements with friends or workout communities for added motivation.
• Push notifications that are encouraging, like “You’re halfway to your weekly goal, keep it up!” rather than guilt-inducing or annoying.

These features make the app desirable because they align with users’ deeper needs—such as staying motivated, feeling accomplished, and sharing success with others. They’re not just functional, but also emotionally engaging, making users more likely to use the app regularly and enjoy the experience.

By focusing on desirability, you’re ensuring that the app does more than just meet basic needs; it makes the experience delightful and motivating, ultimately increasing user retention and 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.

Example of viability

Let’s take the same fitness app example and focus on viability—how the design supports the business and remains financially sustainable.

Viability in Action

You’ve already created a desirable app with features that engage users, but now you need to ensure that the app generates revenue and aligns with long-term business goals. To address viability, you decide to implement a freemium model with monetization strategies that balance user satisfaction with business needs.

Here’s how you might approach it:

1. Free Basic Tier: The app provides essential workout tracking features for free, attracting a wide user base. This tier gives users just enough to get value from the app and start using it regularly.
2. Premium Subscription: To drive revenue, you introduce a premium subscription that unlocks additional features. These might include:
   • Advanced fitness analytics and personalized workout plans.
   • Exclusive content like video tutorials from expert trainers.
   • Early access to new features or challenges.
   • An ad-free experience.
3. In-App Purchases: Another viable revenue stream could be selling customized workout plans or nutrition guides as one-time purchases. This allows users to buy specific content without committing to a subscription, catering to different user preferences.
4. Brand Partnerships and Sponsored Content: To further support business viability, you establish partnerships with fitness brands. These brands could sponsor certain challenges within the app, or provide users with exclusive discounts on fitness gear or supplements. This brings in additional revenue without compromising the user experience.
5. Cost-Efficient Scaling: On the backend, you work with your team to ensure that the app’s infrastructure is scalable, meaning it can grow with the user base without incurring massive costs. You may use cloud services with cost-efficient pricing models or optimize the app to use fewer resources.

Why This Supports Viability:

• The premium tier generates recurring revenue, which is crucial for long-term sustainability.
• In-app purchases provide a flexible option for users, tapping into a secondary revenue stream.
• Sponsored content and partnerships offer additional income, while also aligning with the fitness interests of users (so it feels less intrusive).
• The freemium model ensures a large user base, which helps with growth and retention, making the app attractive to potential investors or partners.

By considering these factors, you’re ensuring that the app can not only survive but thrive in the market, making it viable from a business perspective while still delivering value to users.

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?

Example of feasibility

Continuing with the fitness app example, let’s explore feasibility—ensuring that the app can actually be built and maintained with the available resources, technology, and team capacity.

Feasibility in Action

You’ve designed a desirable and potentially viable app with a freemium model, premium features, and possible in-app purchases. However, before moving forward, you need to ensure it’s technically feasible to implement these features with the resources you have.

1. Assess the Development Team’s Skills: You review your team’s capabilities. Your developers are skilled in building mobile apps, but the gamification features (like badges and achievements) you’ve designed require more sophisticated backend systems for tracking user progress in real-time. To make it feasible, you might decide to:
   • Start with basic badges that are awarded based on simple rules (e.g., completing 10 workouts) and phase in more advanced features over time.
   • Use an existing third-party service that provides gamification tools, rather than building it from scratch, saving time and resources.
2. Use Readily Available Technology: Instead of developing a custom AI-based workout recommendation engine (which would be desirable but complex), you decide to use a machine learning API from a trusted provider (like AWS or Google Cloud). This allows you to implement basic personalized recommendations with much less development effort, making the feature feasible within your current tech stack.
3. Optimize for Platform Limitations: Your team needs to ensure the app works smoothly on both iOS and Android. Since developing two separate apps would be resource-intensive, you opt for a cross-platform framework like React Native. This makes it feasible to launch on both platforms using a single codebase, saving time and reducing maintenance costs.
4. Infrastructure and Scaling: The premium subscription model will involve tracking individual user accounts, payments, and access to premium content. To ensure this is feasible at launch, you might integrate with a trusted subscription management service (like Stripe or Paddle) instead of building a custom payment system from scratch. Additionally, you consider using cloud services (e.g., AWS or Google Cloud) for scalable storage and server needs, allowing you to handle user growth without needing to manage your own servers.
5. MVP (Minimum Viable Product) Approach: You realize that building all the features—badges, custom workout plans, social sharing, etc.—at once is not feasible within your current timeline and budget. So, you plan to release an MVP version of the app that includes the core workout tracking and a few simple badges. Other features, like advanced analytics or social sharing, will be introduced in later versions once the app gains traction and resources allow for further development.

Why This Supports Feasibility

• By leveraging third-party tools and APIs, you reduce the development time and complexity, making the project more manageable.
• Using React Native allows you to build for both iOS and Android with a single development team, saving significant time and cost.
• Subscription management services like Stripe make payments and user account management straightforward without the need to build complex systems in-house.
• Focusing on an MVP approach ensures you can release the app in stages, allowing the team to validate the core idea and refine the product without being overwhelmed by too many features at once.

By considering the team’s skills, available technology, and development time, this approach ensures that the fitness app can be built within the given constraints, making it feasible.

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.

A well-structured design system checklist guides your team through each essential step of creating a design system, ensuring that nothing gets overlooked—from auditing current design patterns to standardizing elements like typography, color palettes, and spacing. It serves as a roadmap that helps you prioritize what’s most important, streamline collaboration between designers and developers, and ensure that the design system evolves as your product grows.

By following a checklist, you can avoid common pitfalls, maintain consistency across your UI, and create a system that is scalable and adaptable to new challenges. A design system checklist is not just a to-do list—it’s a strategic tool that helps you build a robust, sustainable design system that empowers your team to work more efficiently and deliver high-quality user experiences every time.

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

Checklist for Building an Effective Design System

Here’s a structured 14-step checklist that ensures you build an efficient, consistent, and scalable design system.

1. Create the Patterns Inventory

A patterns inventory in a design system is essentially a collection of all the design patterns or UI elements used across a product or set of products. It’s like a catalog or checklist that helps teams identify, organize, and evaluate the consistency of the various components within the interface. These patterns can include things like buttons, form fields, navigation elements, typography, colors, icons, and more.

The goal of this process is to create a foundation for building or refining the design system, ensuring that every component is accounted for, standardized, and reusable. It also serves as a reference point for designers and developers to maintain consistency across the product as it evolves.

Here’s a design system checklist for running patterns inventory:

• Collect Design Patterns: Take screenshots of design patterns or collect them directly from design project files.
• Organize Patterns: Categorize patterns based on your frontend architecture, if available. Common categories include elements, modules, and components.
• Consult Developers: Check if the frontend architecture is modular, and use it to organize patterns into categories.
• Categorize Without Modular Architecture: If there’s no modular architecture, manually categorize patterns (e.g., buttons, form fields, etc.) to identify inconsistencies.

2. Create the Colors Inventory

A color inventory in a design system is a comprehensive audit of all the colors used across a product or set of products. It involves identifying and cataloging every color used in the user interface, including variations in shades, tints, tones, and any color variables defined in the code (like in CSS or design tokens).

Here’s a design system checklist for color inventory:

• List All Colors: Traverse code files and list all the color variables or colors used in CSS.
• Organize by Common Denominators: Group colors by hue, shades, tones, or similarity (e.g., grays, reds, greens).
• Identify Anomalies: Take note of anomalies, like too many shades of gray, and streamline the palette.

3. Create the Typography Inventory

A typography inventory is an essential step in ensuring that your design system maintains a consistent, scalable approach to text styles across your product or projects.

Here’s a design system checklist for typography inventory:

• Review Text Styles: Walk through the UI, checking all text styles through the browser console.
• Form a Typographic Scale: Organize text styles by their importance (e.g., from H1 to small text). Create multiple scales if necessary.
• Match Code with Styles: If CSS preprocessors (e.g., Sass) are used, note mixins and variables used to generate text styles.

4. Create the Icons Inventory

An icons inventory in a design system is a comprehensive audit and cataloging of all the icons used across a product. It is designed to assess the consistency, quality, and relevance of the icons in the UI and to ensure that the icons adhere to the brand’s visual guidelines.

Here’s a design system checklist for icons inventory:

• Inventory Icons: Identify all icon libraries used across the product.
• Mark Inconsistencies: Look for mismatches (e.g., different icons for the same action or mismatched icon families).
• Review Implementation Methods: Understand how icons are implemented (e.g., inline SVG, icon fonts) and note inconsistencies.

5. Create the Space Inventory

A space inventory helps standardize and streamline how space is used in the UI, making designs more consistent, scalable, and easier to maintain. It creates a solid foundation for your design system’s layout, ensuring that spacing remains predictable and intentional throughout the product.

Here’s a design system checklist for space inventory:

• Document Grid Systems: List and document grid systems used across the product portfolio.
• Check Padding and Spacing: Analyze container padding to spot inconsistencies.

6. Get the Support of the Organization

• Team Presentation: Explain the inventory process, highlight key inconsistencies, and present the design system as the solution.
• Stakeholder Presentation: Focus on how inconsistencies affect costs and development speed. Highlight measurable data (e.g., 62 shades of gray) to demonstrate the need for a design system.

7. Build a Multidisciplinary Systems Team

• List Skills Needed: Identify the necessary skills for fixing inconsistencies and managing the design system long-term.
• Allocate Time Realistically: Ensure that team members can allocate time to work on the design system, even if part-time.
• Clarify Roles and Sprints: Define roles, decision-making processes, and the length of sprints (e.g., one or two weeks).

8. Make Key Decisions and Establish Rules

• Decide on System Foundation: Choose whether to build the system from scratch or use an existing product as the foundation.
• Technology Stack: Decide whether to use the existing tech stack or introduce new technology.
• Define KPIs: Set measurable goals for the design system, such as improving consistency or speed of implementation.
• Formulate Design Principles: Define shared values for the design system, such as consistency, craftsmanship, or accessibility.

9. Build the Color Palette

• Unify Colors: Use the color inventory to create a consistent color palette, ensuring no redundant or unused colors.
• Naming Conventions: Choose between abstract, actual, or functional names for colors (e.g., pigeon-gray, silver-base).
• Test the Palette: Ensure the palette works well across the UI and follows accessibility standards (WCAG).
• Implement and Present: Implement the palette in CSS, test the changes, and present it to designers for feedback.

10. Build the Typographic Scale

• Create a Consistent Typescale: Build a typographic scale that includes font size, weight, line-height, etc.
• Test and Implement: Test the new scale across the UI, then implement it in CSS. Involve designers in the feedback process.
• Finalize and Document: Finalize the scale, document it, and make it available in design tools (e.g., UXPin, Sketch).

11. Implement the Icons Library

• Finalize the Icons: Decide which icons to include and how they’ll be implemented.
• Test and Review: Thoroughly test icons on a test server and ensure consistency across the product.
• Document and Deliver: Add icons to design system documentation and make them accessible in design tools.

12. Standardize Other Style Properties

• Standardize Grid, Space, and Styles: Apply the same standardization process used for color, typography, and icons to grid systems, spacing, and other style properties.
• Test and Implement: Ensure everything is tested and reviewed before finalizing and communicating to the company.

13. Build the First Design System Pattern

• Decide on Pattern Architecture: Choose an architecture for your patterns (e.g., Atomic Design, modular components).
• Build and Test: Implement one pattern (e.g., buttons), test it with developers and designers, and iterate based on feedback.
• Finalize and Document: Add the pattern to the design system documentation and make it available in design tools.

14. Run a Sprint Retrospective

In the context of a design system, the retrospective focuses on assessing how the team handled the specific tasks related to the system’s development, such as creating new components, documenting guidelines, testing implementations, or aligning design with code.

• Review the Sprint: Summarize the outcomes and KPIs from the sprint and reflect on improvements for future sprints.

What if You Need a Design System Fast?

If you need to create a design system fast and can’t afford to create a design system team, here’s what you can do.

Take advantage of the pre-built component libraries in UXPin, like the MUI kit, Ant Design kit, or Tailwind kit. These libraries are integrated directly into UXPin and offer a great way to get started. They’re fully coded, so you can share them with your devs. They are well-documented, so you don’t need a design system documentation right away. And they’re fully customizable, so you can match them with your style guide.

Your team will be able to share the same components and they will be able to use components right away, and you can focus on making sure everything fits your brand’s style, like colors and typography. UXPin also allows you to apply themes to these components (with the use of AI), which means your designs can start looking like they belong to your product without a lot of heavy lifting.

If time’s a factor, you don’t have to redo everything at once. You can instruct developers to use existing components with specific properties, and since UXPin keeps everything dynamic, any changes you make later will automatically update across the system. This saves a ton of time down the line.

I’d also recommend focusing your energy on the style guide—getting your colors, typography, and visual feel in order. These are the foundations that will tie your system together. Plus, understanding how these libraries work will help you ensure everything fits nicely with how your product is built.

In the end, design systems can be tricky, but using UXPin’s pre-built libraries makes the whole process a lot more manageable. It’ll give you more room to focus on the fun part—actually designing great products.

Empower Your Team with a Robust Design System

Creating a design system might seem like a daunting task, but with the right approach, it becomes a strategic investment that will enhance collaboration, ensure consistency, and improve scalability across your product. By following the checklist outlined above—from building a patterns inventory to standardizing spacing, typography, and iconography—you can ensure that your design system is well-organized, effective, and aligned with both design and development needs.

One of the key elements to making this process smoother is using a powerful tool like UXPin Merge. With UXPin’s built-in code libraries (MUI, Ant Design, React-Bootstrap or Tailwind kits), seamless integration with design and development workflows, and dynamic components, your team can create a design system that’s not only cohesive but also adaptable to future growth.

By taking incremental steps, focusing on key priorities like style guides and component libraries, and leveraging UXPin to align your design and development teams, you can build a system that ensures long-term success. So, don’t wait—start building your design system with UXPin today, and empower your team to create scalable, efficient, and beautifully cohesive products! Request access to UXPin Merge.

The post Design System Checklist for 2024 appeared first on Studio by UXPin.

Getting stakeholder and organizational support is crucial for ongoing investment and the future success of your design system. The DS team must prove that employees use the design system and that it delivers a positive return on investment.

In our January 2022 webinar, Defending Your Design System, Carola Cassaro talked about the challenges DS teams face, “We’re all dedicated to designing products that change people’s lives, but we don’t always have the right framework and vocabulary to communicate that impact, especially in the design system space.”

Many designers have a tough time explaining why they need resources to evolve and scale a design system. Tracking the design system’s impact and identifying successes and opportunities can help DS teams get stakeholders’ buy-in to improve and scale.

Design systems are usually a design team initiative. yet, they can help the whole organization. They also help developers in making sure that the front-end is consistent. Tools like UXPin Merge make it easy to use the interactive UI components from your team’s design system across design and development.

You can import Git, Storybook or NPM components to UXPin and create interactive prototypes that you can quickly hand off to developers. 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

Why do You Need Support from Non-Designers?

Design systems require time and resources to maintain and scale. The DS team must prove the design system’s value to acquire those resources. 

Demonstrating the design system’s value means team members must adopt it. So, the DS also needs to engage with teams across the organization to encourage usage and gather feedback for improvements.

Getting people to contribute to the design system gives them ownership, resulting in wider use, thus building your case for more resources and support.

How to Encourage Adoption of Your Design System

Many organizations use internal workshops and training sessions to demonstrate the design system, why it was created, how to use it, best practices, and other relevant information.

Invite representatives from all departments so you can generate organization-wide excitement and buy-in. These workshops are also a fantastic opportunity to invite teams outside of design and development to share feedback and ideas. Remember, contribution = ownership = adoption.

Don’t only use workshops to encourage feedback. Set up communication channels (Slack, Asana, Jira, etc.) for teams to submit feedback and ideas. 

Once teams start adopting and evangelizing your design system, it’s time to start measuring its impact across the organization.

Getting Support for Design Systems: Three Areas of Focus

The design system team must look at three areas to determine its impact on the product and organization:

• Teams: How does the design system improve workflows?
• Products: What is the design system’s impact on products and business value?
• End-users: How does the design system impact usability?

Let’s look at these three areas in more detail.

Teams

There are three primary metrics you can use to evaluate a design system’s impact on teams:

• Design system adoption
• Saved resources
• Time to market

You can evaluate a design system’s adoption by checking for elements present in repositories and determining the active use percentage–a strategy used by UK Gov Design outlined at GOVDESIGN 2020.

By regularly collecting and plotting this data, you can demonstrate the design system’s adoption over time. You can also plot uptake post workshops to determine their success.

It’s important to measure time on task and other performance metrics before implementing a design system to get a baseline. And then use this baseline to measure the design system’s impact. 

PayPal conducted similar tests when switching from image-based design tools to UXPin Merge. Building a single-page prototype using an image-based tool took over an hour vs. eight minutes with Merge–demonstrating an 8X increase in speed resulting in cost and time savings.

Time-to-market is critical for products to compete and stay within budgets. Reducing time-to-market demonstrates to stakeholders that investing and optimizing your design system can provide a competitive edge with fewer resources.

Products

Next, you want to identify design system wins in product performance. Again, we’ll look at three key metrics:

• Component coverage
• Stability
• Brand value alignment

DS teams can test which components are used in products and which are not. These metrics determine the design system’s coverage and relevance across products.

Product stability impacts the entire organization, including the brand itself. DS teams can measure the number and severity of product defects before and after design system implementation to demonstrate how it reduces errors.

Measuring brand affinity is challenging, but in Defending Your Design System, Carola talks about how eBay tested brand alignment by asking customers to rate several brand attributes for page designs pre and post design system. eBay found that design system pages scored higher for overall brand affinity.

End-Users

Lastly, and most importantly, how does your design system impact customers and user experience? Here are three examples of end-user metrics relating to your design system:

• Performance
• Usability
• Customer satisfaction

Load time is an excellent way to measure a product’s performance, a vital metric for customer satisfaction and user experience. Design system components are optimized for performance and reduce bloat, so you should notice faster load times after implementation.

DS teams can use time-on-task, conversion rates, and other task-related activities to test the design system’s impact on usability and accessibility. IBM tested user task completion rates before and after design system adoption and discovered a three-fold increase.

DS teams can use surveys, product reviews, interviews, and other customer feedback to create a trend for before vs. after the design system’s adoption. They can also use these metrics to measure the success of usability and accessibility releases to demonstrate how a design system fixes usability issues and increases customer satisfaction over time.

Pitching a Design System to Stakeholders

In our free download, Evangelizing a Design System, we share a proven template for getting executive and stakeholder buy-in. Here is a three-step process to evangelize your design system:

1. Collect data to validate the design system’s impact
2. Identify wins and create a compelling story
3. Project what the company stands to gain

Step 1 – Collect Data

Collect data as outlined in the Three Areas of Focus above. If you’re unsure where to start, find resources and use cases from successful design systems relevant to your product and company.

Also, check out these resources from our blog for guidance and direction:

• Evangelizing a Design System
• On Design Systems: An Interview with Dan Mall of Superfriendly

Collecting and analyzing data can be lengthy and time-consuming, but it’s a crucial part of building your design system success narrative.

Step 2 – Identify Wins and Create a Compelling Story

In our free download, Evangelizing a Design System, we share a 40+ slide template that’s ready for you to present to stakeholders and executives. 

We include actual data from successes at Dropbox, IBM, LinkedIn, Atlassian, and others to strengthen your case and demonstrate what the future holds for your organization.

Highlight your wins in the presentation and use storytelling to explain how you used objective testing to arrive at your final results.

Step 3 – Project What the Company Stands to Gain

To acquire investment, you must demonstrate what the company will gain from allocating resources to scale the design system, that is finding the return on investment (ROI). Combine future projections with case studies from other successful design systems to show the possible return on investment.

Investing in the Right Design System Tools

Investing in the right tools can improve many of the metrics outlined in the Three Areas of Focus above. UXPin Merge is a code-based design tool that allows you to sync a design system hosted in a repository to UXPin’s editor so designers can build prototypes using fully functional code components.

This single source of truth increases adoption and collaboration between departments, even among non-designers, as was the case with PayPal. PayPal also noticed a significant reduction in time-to-market and higher quality feedback from stakeholders who were able to interact with Merge prototypes better than previous image-based design tools.

With a single source of truth, companies also achieve higher rates of consistency and cohesion between design and development. Design handoffs are much smoother because designers use production-ready components to build prototypes, making it easy for engineers to copy/paste and begin development.

When the DS team changes the design system or introduces new patterns and components to the repository, UXPin automatically updates the editor and notifies team members of the latest release.

Discover Merge and take your design system and workflows to the next level with code-based design from UXPin Merge. Request access to UXPin Merge.

The post How to Get Non-Designers to Use and Support the Design System? appeared first on Studio by UXPin.

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.

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.

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.