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.

At UXPin’s Design Value Conference in March 2022, we hosted five design industry leaders to understand Design and DesignOps at some of the world’s biggest organizations.

One of those speakers was Maggie Dieringer, Senior Design Program Manager at Uber. Maggie has worked as a DPM at Uber since 2016 on the Rides and Eats products and has gained valuable experience working alongside some of the world’s best tech talent.

In her 30-minute talk at Design Value Conference 2022, Maggie shared insights about how she helped build Uber’s DesignOps from the ground up. Maggie talks about her practical approach to DesignOps, including three key “framing factors” DPMs must consider when working with design teams and stakeholders.

Enable your designers and engineers to use a single source of truth in design and code. Use UXPin’s revolutionary Merge technology to solve some of the biggest DesignOps challenges. Explore what UXPin Merge is about.

What is Design Program Manager?

Design Program Managers are professionals responsible for overseeing and coordinating the design processes within an organization.

They ensure that design projects are executed efficiently, align with business objectives, and meet quality standards. DPMs act as a bridge between design teams and other departments, facilitating communication and collaboration to achieve the desired outcomes.

What are Key Responsibilities of Design Program Managers?

Design Program Managers play a crucial role in bridging the gap between design teams and other departments, ensuring that design projects are completed on time, within budget, and to the highest quality standards. They manage resources, mitigate risks, and continuously seek ways to improve design processes and outcomes.

1. Project Management:
   • Plan, organize, and manage design projects from inception to completion.
   • Develop project timelines, milestones, and deliverables.
   • Monitor project progress and adjust plans as needed to meet deadlines.
2. Team Coordination:
   • Coordinate activities of cross-functional teams, including designers, developers, and marketing professionals.
   • Facilitate effective communication among team members to ensure alignment and collaboration.
   • Assign tasks and responsibilities to team members based on their skills and expertise.
3. Stakeholder Management:
   • Serve as the primary point of contact for stakeholders, including clients, executives, and other departments.
   • Communicate project status, risks, and issues to stakeholders.
   • Gather and incorporate stakeholder feedback into the design process.
4. Resource Allocation:
   • Allocate resources, including personnel, budget, and tools, to ensure project success.
   • Manage resource constraints and identify potential solutions to resource-related challenges.
5. Quality Assurance:
   • Ensure that design outputs meet quality standards and align with the organization’s brand and goals.
   • Conduct regular reviews and critiques of design work to maintain high standards.
   • Implement processes for continuous improvement in design quality.
6. Risk Management:
   • Identify potential risks and issues that could impact project success.
   • Develop and implement mitigation strategies to address risks.
   • Monitor and adjust risk management plans as necessary.
7. Process Development:
   • Develop and refine design processes and workflows to improve efficiency and effectiveness.
   • Implement best practices and standards in design project management.
   • Train team members on new processes and tools.
8. Budget Management:
   • Develop and manage project budgets.
   • Monitor expenditures and ensure projects stay within budget.
   • Provide financial reports and updates to stakeholders.
9. Performance Tracking:
   • Track and report on key performance indicators (KPIs) related to design projects.
   • Use data and metrics to evaluate project success and identify areas for improvement.
   • Implement performance improvement initiatives based on data insights.
10. Innovation and Trends:
    • Stay updated on industry trends, tools, and technologies in design and project management.
    • Introduce new ideas and innovations to improve design processes and outputs.
    • Foster a culture of creativity and innovation within the design team.

DPMS is short for Design Program Manager. It’s Maggie’s role at Uber.

DesignOps at Uber

When Maggie started at Uber, two people were on the DesignOps team, including herself. The team’s scope covered seven categories:

• DesignOps: tooling, facility management, org management, DPM brand, etc.
• Portfolio Planning: annual and six-month planning, scaling practices across teams, MTR, headcount comms, etc.
• Roadmap Management: prioritization, managing cutlines, stack ranking with leadership, scoping, sequencing, QA, advocates for quality, etc.
• Comms & Events: external brand, recruiting experience, office culture, team/internal/industry events, team meetings, celebration and recognition, team health, etc.
• Modeling, Tracking, Reporting: Resourcing & allocation, negotiation of work, dependency tracking, intake of work, UX allocation reporting, kickoffs, crit management, design review templatization, etc.
• Finance & Growth: budget/T&E/morale tracking, headcount allocation, growth narrative, playbooks and toolkits, etc.
• Learning & Development: training, internal/external skill shares, external design events, onboarding, talent reviews/promo management, career paths, competencies, inspiring teams, external speakers, etc.

As of March 2022, Uber’s DesignOps team has grown to 16 team members, supporting six offices (in US/CAN, EMEA, and LATAM), with an additional four team members who work cross teams at strategic DesignOps positions.

• TeamOps & ResearchOps x 6 team members
• Product DPMs x 12 team members
• Director & Strategic x 4 team members

Uber’s Approach to Framing & Scaling the DPM Role

Maggie shared her team’s strategy for increasing the DPM’s influence at various levels. She talked about three things.

1. Framing and scaling DPM (around your needs depending on your organization’s current priorities)
2. Increasing DPM impact
3. Supporting DPM trajectory

Framing and Scaling DPM

Ask yourself, “where is your time best spent?” and “how do you ensure that you’re having the most impact with that time?”

Maggie believes there is no right or wrong way to do something, but instead, we should frame our work to focus on impact. This approach aligns with one of Uber’s DesignOps principles, which reads: “Our success is based on the impact our work has on product, business, design, and customer experiences. This impact may be organizational, strategic, or executional.”

Maggie identifies the three framing factors that have the most impact in her day-to-day:

• What’s the size of the design team and the state of the organization?
• What type of resourcing and allocation environment are we operating in?
• What level is my primary design partner?

Framing Factor One: Size & State of the Design Org

The state and size of your organization have a significant impact on what level you’re managing and supporting teams.

“Regardless of the state of the organization or the team’s size, we meet the teams where they are at.” Maggie Dieringer, Senior Design Program Manager at Uber

State:

• How long has the team been around?
• What is the organization’s level of maturity?

Size:

• How big is the design team, area, sub-area, or portfolio you’re supporting?

State of the Design Org

Maggie defines the team’s state and maturity on a spectrum from nascent to established. This definition is important because a DPM’s approach is very different at opposite ends of the spectrum.

For example, a DPM will focus on implementing processes and frameworks to facilitate growth and development in a nascent organization. Conversely, for established teams, a DPM focuses on evolution, iteration, evangelizing, and improving existing processes and frameworks to accommodate growth.

Size of the Design Org

Size is another component of the first framing factor. Maggie uses a similar spectrum with 10-15 team members on the low end and 30-50 on the high end. 

The industry standard is one DPM for every 10-15 designers, but this ratio isn’t the reality for many DesignOps experts.

For a 15:1 ratio, DPMs are able to integrate with the design team to offer granular support, including tasks like:

• Meeting with IC designers daily
• Managing and running team meetings
• Attending and running design reviews
• Project management
• Optimizing collaboration on a micro level

As the ratio increases, DPMs lean more towards a high-level approach:

• Meeting with IC designers monthly
• Meeting with managers daily
• Going to crits every few months
• Attending design reviews to help connect the dots
• Collaboration at a macro level
• Vision exercises

Framing Factor Two: Design Team Resourcing

The way you set up your engagement and staffing model, as well as the allocation and organizational strategy, can have an immense impact on how DesignOps can and will lean in.

Engagement Model:

• What type of staffing engagement does the team operate in?

Allocation:

• Is the team you support well-staffed or operating lean?

Engagement Model

Maggie uses a spectrum to identify the organization’s staffing model with “flexible” on one end and “fully dedicated” on the opposite. Like size in Framing Factor One, the staffing model can help determine on what level DPMs can engage with teams.

In a flexible model, DPMs may need to go deep into one area, whereas in a fully dedicated model they may zoom out and focus more holistically across many areas.

Allocation

Another consideration for resourcing is whether the company is constrained on resourcing, in growth mode (actively hiring), or somewhere between. In a constrained staffing model, DPMs must be creative, working with all available resources.

In growth mode, DPMs have more freedom to look at high-level vision and what the organizational growth strategy could look like.

Framing Factor Three: Level of Partnership

Level:

• Are you partnering mainly with the ICs (individual contributors), Leads, Manager, or a Director?

Exposure:

• Has your partner worked with a DPM before?

Level

When working with Design Managers and middle management, Maggie has found that she focuses more on a single area and activities like load balancing, team health, education on how to work with design, and other supporting roles.

On the other end of the spectrum, at the director level, DPMs work on organizing the leadership team who reports through the director, organizational strategy, looking at cross-team dependencies, scaling programs, and broader, more team-wide activities.

Exposure

The second consideration for factor three is your partner’s exposure to DesignOps, and have they worked with a DPM before? If your partner is unfamiliar with DesignOps, it’s crucial to educate them about the DPM role and set expectations. 

Maggie says it’s important for DPMs to outline their roles and responsibilities at the beginning of a partnership, including what they don’t work on, to set clear boundaries and expectations.

Increase DPM’s Impact

Increasing your impact as a DPM depends on the desired level of engagement for you and your team. Again Maggie uses a spectrum to assess the activities.

DPMs are more hands-on when zoomed in, working with teams on day-to-day tasks. When zoomed out, DPMs focus more on advocating, strategy, and planning.

The team’s size and designer/DPM ratio have a significant influence on whether DPMs can operate at a zoomed-in or zoomed-out level of engagement.

“We use our size to help drive the desired DPM engagement.” Maggie Dieringer, Senior Design Program Manager at Uber

Support DPM Trajectory

Maggie asks these five crucial questions often when considering DPM’s long-term goals:

1. Which activities and environments bring me job fulfillment day-to-day?
2. Which activities will have the most impact and influence right NOW on the team I support?
3. How can I leverage my partner to work on the things that are important to my career?
4. How can I use my team size to influence the desired behavior and engagement?
5. Do I thrive doing tactical or strategic activities (or both)?

Maggie recommends that DPMs complete a framing exercise using the three factors above to plot where they think they can have the most impact.

Based on the activities mentioned in the three framing factors:

• Where are you today?
• Where do you want to be?
• Where does your team want to be?

Watch Maggie’s full 30-minute DesignOps Layers of Impact webinar on YouTube. If you prefer reading, head onto the blog post that recaps the full conference.

Increase DPM Impact With UXPin Merge

UXPin Merge helps you enhance design consistency and collaboration between design and development teams. It’s one of the tools that every DPM should have in their arsenal to optimize design process and create impact faster. Check out UXPin Merge and see how it can help you mature design at your org.

The post DesignOps at Uber – Who Are Design Program Managers? appeared first on Studio by UXPin.

Building a React design system from scratch requires careful planning and consideration. Input from multiple departments and stakeholders is crucial for creating a component library that serves the organization and its end users.

This article is an introduction to React design systems and how to approach component development, documentation, governance, design tools, and more. We also have a step-by-step guide to building a design system which covers 12 essential topics.

Bring UI components to UXPin and create well-designed prototypes based on your React design system. Speed up your development by building apps 10x faster. 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 a React Design System?

A React Design System is a collection of reusable UI components and guidelines built specifically for use with React, a popular JavaScript library for building user interfaces. It encompasses a set of pre-designed, customizable components such as buttons, forms, navigation bars, cards, and more, along with guidelines for their usage and implementation within React applications.

The main purpose of a React Design System is to promote consistency, efficiency, and scalability in UI development by providing a unified set of components and design patterns that can be easily reused across projects. By leveraging a React Design System, developers can streamline the development process, reduce code duplication, and ensure a cohesive and polished look and feel across their applications.

Key components of a React Design System typically include:

1. Reusable Components: A library of React components that encapsulate common UI patterns and functionalities, such as input fields, dropdown menus, modals, and tabs.
2. Design Guidelines: Clear documentation and guidelines on how to use each component, including information on props, styling options, accessibility considerations, and best practices for integration within React applications.
3. Theming and Customization: Support for theming and customization, allowing developers to easily adapt the design system to match their brand identity and design requirements.
4. Responsive Design: Components designed to be responsive and adaptable to different screen sizes and devices, ensuring a consistent user experience across desktop, tablet, and mobile platforms.
5. Accessibility: Considerations for accessibility, with components designed to meet accessibility standards and guidelines, ensuring that applications built with the design system are usable by all users, including those with disabilities.

Overall, a React Design System provides a solid foundation for building React applications, enabling developers to create consistent, high-quality user interfaces with minimal effort. It promotes collaboration, efficiency, and maintainability, making it an invaluable tool for teams working on React-based projects.

The Benefits of a React Design System

There are many benefits to using or building a React design system. React’s component-driven development approach makes it the perfect modular-style UI library for design systems. Front-end developers can strip React components down to atoms and combine these to create new UI elements, patterns, and templates.

React is one of the most widely used UI libraries, which offers many benefits for building design systems:

• A big community of developers to ask questions and solve problems
• An abundance of Javascript tools and integrations
• Many well-established design systems for inspiration

Which companies use React design systems?

Here is a short list of companies using React for their design systems:

• Instacart’s Snacks
• Shopify Polaris
• Atlassian Design System
• Salesforce Lightning
• IBM’s Carbon Design System
• Microsoft’s Fluent UI
• MUI (Material UI)–built on Google’s Material Design

We recommend checking out these design systems to learn about component syntax, documentation, guidelines, and other design system factors.

Check out Adele for more design system inspiration. It’s a repository of publicly available design systems and pattern libraries with links to GitHub repos to download and analyze.

React Design System Fundamentals

Understanding Atomic Design Principles

Atomic Design is a system created by Brad Frost where he organizes UI elements into five categories:

• Atoms: foundational UI elements you cannot break down further–e.g., HTML tags, fonts, buttons, animations, and color palettes.
• Molecules: groups of atoms create components that serve a specific function or purpose. e.g., search input, nav links, dropdown menu, etc.
• Organisms: Complex UI patterns that combine to create user interfaces. e.g., a header nav bar, footer, image carousel, etc.
• Templates: represent a complete user interface with multiple organisms working together. e.g., a dashboard, news feed, chat UI, etc.
• Pages: represent the different instances of the template and how content changes within the screen–for example, refreshing content in a newsfeed or receiving a message through chat.

Why is Atomic Design important for React design systems? 

The Atomic Design methodology enables you to leverage React’s modularity and reusability benefits. By approaching a design system as a sum of many atoms (or Lego pieces), it’s easier to develop a flexible, scalable UI library that can adapt and evolve with your product.

The design system team can build new components and patterns much quicker by combining atoms and molecules. This modular approach also makes building one-off solutions easier and more cost-effective because it’s a matter of combining what you have rather than developing from scratch.

The role of components in a React design system

React components are the building blocks that help ensure consistency, reusability, and maintainability across user interfaces and apps. These UI elements serve many vital purposes, including:

• Modularity: React components are modular by design, making it easy to combine, reuse, and manage the UI library.
• Consistency: React’s effortless reusability enables developers to build design principles, styles, and interactions into each component and recall it anywhere in the application.
• Reusability: Developers can leverage a UI library of reusable components to save time and resources when developing new products. This reusability also reduces errors and technical debt because devs don’t have to write code from scratch.
• Customizability: developers can easily customize specific components while still adhering to design guidelines or affecting the UI library, allowing for flexibility when necessary.
• Maintainability: With components stored in a centralized repository, developers can push updates and bug fixes from one place, making it easy to maintain and improve the design system and its products.
• Scalability: Engineers can extend and adapt React components to evolve with products and new technology.
• Accessibility: Developers can incorporate foundational accessibility standards at the component level, making it easier to implement product-wide.

The importance of using design tokens

Design tokens incorporate the core values of a React design system. These tokens contain properties such as colors, typography, spacing, sizing, states, interactivity, and more to maintain a consistent design language across multiple platforms, devices, and operating systems.

A design token can contain many values for multiple platforms. For example, UXPin’s homepage uses yellow for CTAs. The hex code for this yellow is #FCC821, which you can represent in several ways:

• HEX: #FCC821
• RGB (CSS): rgb(252, 200, 33)
• RGBA: rgba(252, 200, 33, 1)
• Octal (Android/Flutter): 77144041

We can encapsulate all four values under one design token:

• cta-background-primary

So, if you’re implementing this color in any platform, you use the token instead of the code. Design tokens also make cross-functional collaboration easier because everyone uses the same language rather than one team referencing the HEX, another the RGB, and another the octal–which can get confusing and lead to errors.

Design tokens also allow the design system team to implement product-wide modifications simply by changing the properties in the token file. For example, the team can change the cta-background-primary design token from yellow to blue across the product ecosystem by adjusting the four codes in one place rather than updating every instance or stylesheet individually.

Getting Started with a React Design System

On the surface, a design system appears simple. But, in reality, these UI libraries are complex organisms with many moving parts. Here are some things to consider when planning your React design system.

These factors will lay the foundation for your design system’s governance protocols and procedures. For this reason, it’s essential to document every stage of this early decision-making process.

Mono-repo vs. poly-repo repositories

Decide whether to use a single repository (mono-repo) or multiple repositories (poly-repo) for your design system’s React component library.

Mono-repos simplify dependency management and make it easier to work on multiple packages simultaneously. Poly-repos offer more modularity and isolation between packages, making it easier to maintain and use individual components independently.

Accenture shares the pros and cons of using mono vs. poly-repos.

Component organization

Organize your component library in a way that makes the most sense to your product and team. For example, you can group components by functionality, domain, or Atomic Design–MUI organizes its UI library by functionality:

• Inputs: Button, Switch, Text Field, etc.
• Navigation: Drawer, Menu, Pagination, etc.
• Layouts: Box, Container, Grid, etc.
• Data Display: Avatar, Icons, List, etc.

No matter how you categorize these components, each must have its own source code, styles, tests, and documentation.

Design token management

Centralize design token management in a dedicated folder or package controlled by the design system team. This centralized management helps facilitate better maintenance and governance while simplifying changes and updates.

Theming and customization

Design system theming and customization are vital for modern product development, typically requiring at least two themes, light and dark modes. Multi-brand design systems require greater customization and flexibility, so you must consider these factors before developing.

Check out “Theming and Theme Switching with React and styled-components” from CSS Tricks for details on how to set up themes for React libraries.

Documentation

Design system documentation is vital for successful adoption and consistent implementation. The docs must include your design language, guidelines (content, design, code, accessibility, etc.), style guide, use cases, code examples, tools, and other critical information.

A tool like Storybook can help centralize your design system’s documentation management and updates. You can sync your Storybook to UXPin using Merge and create a single source of truth across design and development.

Testing

Plan a structure for managing and organizing your component tests–another reason to consider Storybook. Storybook offers built-in component testing automation with multiple bug-prevention tests, including visual, interaction, accessibility, snapshot, and more.

Versioning and release management

Establish your React library’s versioning strategy and release management process to ensure your design system remains updated and compatible with your products.

Design tools

Designers will need access to your React design system for prototyping and testing. A common strategy is to use vector-based tools, but this means updating and maintaining two formats of your React design system:

• The component library in the repository
• UI kits for design teams

With UXPin Merge, you can import your React library into UXPin’s design editor so designers and engineers use the exact same UI components. There are a couple of options for syncing code components. Learn more about them and discover UXPin Merge.

The post React Design System – Where to Start? appeared first on Studio by UXPin.

A UX Architect is a person responsible for the structure of the product and user flow. She or he works on the verge of UX design and engineering. This role has emerged as the UX space is continually growing and evolving, with new UX roles and departments popping up from time to time.

We’ll explore what a UX architect does, and the roles and responsibilities for UX designers and UX architects differ and overlap. At the end of this article, we provide a brief overview of how UXPin can help UX teams collaborate effectively.

Key takeaways:

• UX architect is a hybrid role that sits in between design and engineering.
• UX architects build information architecture, create wireframes, and take care of technical feasibility of the project.
• They differ from UX designer in that they have engineering skills and they prioritize clear information architecture.

UXPin is a collaborative tool for UX experts that helps them design better UIs that are fully interactive, responsive, and accessible. Sign up for a UXPin trial today.

Build advanced prototypes

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

Try UXPin

Who is a UX Architect?

A user experience architect is essentially a UX specialist with a high-level view of a product or design. UX architects are concerned with the structure and flow based on in-depth user and market research.

To achieve this, UX architects will often work closely with research teams or even conduct research themselves. This research guides UX architects to make informed decisions about how a user will use the product and organize the information architecture accordingly.

What Does a UX Architect Do?

Here’s a brief outline of a UX architect’s responsibilities:

• Ensure the product fulfills the user’s needs
• Makes sure information is organized and easily accessible
• Fixes usability and accessibility problems

Organizing Content

Rather than creating content and assets, a UX architect organizes and arranges content to best serve the user. This organization falls into three categories:

• Content inventory—a list of all the product’s digital content.
• Content grouping—a logical structure for organizing the product’s content, defining the relationships between different pieces of information and how they all connect.
• Content audit—a regular review of the product’s content to determine what needs updating and if new content is required.

UX architects must organize the content on each page and determine where to add titles, subheadings, links, and navigation to help users find what they’re looking for.

Hierarchy, Sitemaps, and Navigation

Information architecture arranges a product or website’s hierarchy, sitemaps, and navigation. These crucial elements determine how easy and accessible an app or website is to use.

• Sitemap – all of the app or website pages.
• Hierarchy – how to arrange a page’s content in order of importance.
• Navigation – how a user moves through an app or website.

Internal Wireframing & Low-Fidelity Prototyping

UX architects create wireframes and low-fidelity prototypes for internal UX teams to use as an architectural reference for designing a product or website. 

UX teams will only use these mockups for design purposes and usually won’t use them for usability studies or sharing amongst stakeholders.

Who is a UX Designer?

A UX designer is a broad term encompassing design and research roles. But in the context of a UX designer vs. a UX architect, the designer is responsible for designing user interfaces. Ultimately, a UX designer makes a product usable.

A UX designer will take a UX architect’s wireframes, prototypes, and architectural instructions and turn them into a high-fidelity prototype that resembles the end-product the most out of every design deliverable. UX designers also work with UX researchers as well as content designers to determine which fonts, colors, buttons, and other design elements to use.

Persona Development

UX designers are responsible for early research and creating user personas. Larger organizations might have a dedicated UX researcher or team, but they still fulfill a UX design role.

User personas tell UX designers about the user’s demographic information, motivations, desires, potential responses, and more to design user interfaces that accommodate these user needs.

Wireframes, Mockups, and Prototypes

UX designers create wireframes and mockups for the product’s pages and flows with initial user research and the UX architect’s information architecture.

UX designers also look at the UX architect’s sitemap to link the pages and navigation to make working low-fidelity and high-fidelity prototypes.

Research teams will use these high-fidelity prototypes for usability studies to learn how users interact with the final product.

User Testing

Where companies don’t have a dedicated research team, UX designers conduct the necessary usability studies. This crucial part of UX design provides UX designers with valuable feedback on how users will interact with the final product.

With the results from usability studies, UX designers tweak their designs to improve the user experience.

The Main Differences of UX Architect and UX Designer

The most significant difference between a UX architect and a UX designer is that the UX architect looks at the bigger picture while the UX designer focuses on the details.

The UX architect focuses on navigation and user flows while the UX designer creates the user interfaces and interactions for each screen or page.

While both UX architects and UX designers review research, the UX architect considers what features and content the user needs. In contrast, the UX designer wants to know how the user will interact with these elements.

We can summarize the roles of a UX architect vs. a UX designer as follows:

• UX architect – who are the users, and what do they need?
• UX designer – who are the users, and how do we meet their needs?

How UX Architects & UX Designers Work Together

It’s important to note that a UX designer performs the UX architect’s responsibilities in many companies, especially small businesses. 

Where these roles are split, the UX designer is often referred to as a UI designer (user interface designer) because they focus on the interfaces and interactions. 

A UX architect is a UX specialist in information architecture rather than focusing on design.

UX architects and UX designers work closely on content. The UX designer focuses on the content’s details while the UX architect decides how to structure the content. To get this right, designers and architects must work closely together.

A Typical UX Architect & UX Designer Workflow

The following workflow is a broad overview to show the separation of responsibilities between a UX architect and a UX designer. 

1. A project will start with a UX architect analyzing market and user research to determine what the project needs and how to structure the content—similar to an architect designing a physical structure.
2. The UX architect puts together a blueprint (wireframes & prototypes) for the UX designer to start the build process.
3. The UX designer analyzes user research and the UX architect’s blueprints to start designing each user interface.
4. The UX designer will create wireframes, mockups, and high-fidelity prototypes for stakeholders and usability studies.
5. During usability tests – the UX architect wants to know how the user accesses content and navigates through the product. The UX designer wants to see how the user interacts with the elements and content on each screen.
6. Once a product is live – the UX architect’s job is to ensure accurate and up-to-date content. They will also look at accessibility issues and recommend updates accordingly. The UX designer will take the UX architect’s recommendations and analyze interaction data to optimize each screen to best serve the user.

Does Your Company Need a UX Architect & a UX Designer?

With each team focusing on different design aspects, separating the UX/UI designer and UX architect roles can improve the quality and efficiency of a product or website.

There might not be enough work for a dedicated UX architect for smaller projects and cash-strapped startups. It’s important to note that UX designers are capable of fulfilling a UX architect’s role.

As projects scale, information architecture becomes complex and time-consuming to manage. In situations like this, a UX architect is critical to a project’s success.

While agencies generally work in small teams, they often work on multiple apps and websites for clients. Having a UX architect can help to streamline productivity by handing UX designers all the information they need to start building immediately—effectively creating a tech production line.

Businesses should ask a series of questions to determine if they need a UX architect:

• How much time do UX designers spend on building layouts and information architecture?
• Do these tasks create production delays?
• Do users often struggle with navigation issues in usability studies?
• What is the cost of a dedicated UX architect in relation to the benefits from an increase in quality and efficiency?
• Does your product frequently struggle with usability and accessibility issues?
• Is someone monitoring your product’s content? Do you regularly find out-of-date content or unused product features?

UXPin Increases Productivity for UX Teams

UXPin is a powerful design tool for UX teams to build better products collaboratively. UX architects can use UXPin to create layouts, wireframes, and lo-fi prototypes, with comments for guidance and context.

UX designers can use this information to design beautiful screens and interfaces with mockups to present to stakeholders and use for usability studies.

Get a free UXPin trial and see how this design tool can help your UX teams collaborate effectively to build better products for your customers. Try UXPin today.

The post UX Architect vs. UX Designer – What’s the Difference? appeared first on Studio by UXPin.

One of the questions organizations ask themselves at the start of a new project is, “do we adopt a component library or start from scratch?” There are pros and cons to weigh, and it depends on the project’s scope and priorities. 

One of the most popular component libraries is MUI – a comprehensive React UI library modelled at first on Google’s Material Design UI. 

We’re going to take a look at MUI, why you’d want to use it, what makes it different from other component libraries, and how you can get started designing your next project.

Have you ever wondered what it would be like to design in code? UXPin Merge is a revolutionary technology that allows teams to create fully functioning layouts without design skills. Find out more about 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 MUI?

MUI is a massive library of UI components designers and developers can use to build React applications. The open-source project follows Google’s guidelines for creating components, giving you a customizable library of foundational and advanced UI elements.

MUI also sells a collection of React templates and tools, giving you ready-made user interfaces to tweak for your project. 

Why Would You Use a Component Library Like MUI?

Designers often use UI kits to build new products or feature add-ons for existing projects. These libraries allow designers to drag and drop the components they need to design interfaces quickly. 

Let’s explore 7 reasons why you would want to use the MUI component library.

1. Faster Time-to-Market

In today’s highly competitive tech landscape, time-to-market is a metric that organizations always seek to optimize. A component library gives designers and developers a massive headstart with thoroughly tested UI elements ready to go.

Designers can drag and drop elements to build user interfaces and customize components to meet product and branding requirements. Design teams can spend more time designing great customer experiences rather than getting bogged down building and testing UI components from scratch–a process that increases time-to-market significantly!

Usability testing is much faster because designers can prototype, test, and iterate quickly. If a user interface isn’t working during testing, they can make changes on the fly, drawing from a massive library, to get instant feedback from participants and stakeholders.

When it comes to the design handoff, engineers can install the component library and copy/paste changes from prototypes and style guides to develop the product without starting from scratch.

2. A Single Source of Truth

One of the biggest design system governance challenges is maintaining a single source of truth. It’s not uncommon for product teams, UX designers, and developers to have out-of-sync design systems–resulting in errors, rework, and massive headaches and challenges for DesignOps.

Using MUI’s component library can significantly reduce these challenges while creating a single source of truth between design and development. Designers and engineers will still have separate design systems (image-based for designers and code for engineers), but MUI gives them the same starting blocks.

When using Merge with UXPin’s code-based editor, designers and engineers use the same design system components synced via a single repository. Any updates to the repo sync back to UXPin, notifying designers of the changes. You can connect Merge using Git for React component libraries or Storybook for other popular technologies.

3. Design Consistency

Consistency is vital for user experience, building trust, and brand loyalty. Using the same UI components allows designers to increase consistency while minimizing errors and rework.

4. Scalability

Scalability is another vital product design factor. If you’re building a design system from scratch, designers must design, prototype, and test new components before scaling the product.

With MUI’s comprehensive UI library, designers can search for the components they need to prototype and scale right away. Engineers can copy/paste the identical React components from MUI and customize them to the designer’s specifications.

MUI X includes a library of advanced React components teams can use to scale complex products even faster, including data grids, date pickers, charts, pagination, filtering, and more.

5. Easy Maintenance

A component library like MUI comes with detailed documentation for installing, using, updating, and customizing components. Designers and engineers can use this framework to maintain the organization’s design system, making it easier to establish governance systems and protocols.

MUI also provides how-to guides for migrating from one version to the next. So, organizations can take advantage of the latest UI styles, technologies, and trends whenever MUI releases an update.

6. Accessibility

Those experienced with setting up a design system will know the time and money it takes to ensure every component passes accessibility standards. MUI’s designers have taken great care in designing components to meet WCAD 2.0 accessibility guidelines – reducing the work for researchers and designers.

It’s important to note that even when you design interfaces using accessible components, you must still test navigation and user flows to ensure the product as a whole meets accessibility standards.

7. Skills Empowerment

MUI’s open-source component UI library empowers startups and young entrepreneurs to build new products–especially in developing nations where they don’t have the same access to education, mentoring, and skills transfer.

The library is also incredibly beneficial for charities, non-profits, NGOs, and similar organizations who want to develop products and tools but don’t have the budget to invest in a design system. 

Anyone can leverage the skills of MUI’s talented designers and developers using the same component library used by Fortune 500 companies to develop sophisticated digital products and compete in a global market.

What Makes MUI Stand Apart From Other Component Libraries?

Google’s Material Design UI is arguably one of the best and most comprehensive design libraries in the world. By building on top of Material Design, MUI delivers a React component library to match.

The ability to easily customize MUI using its Theming feature and the libraries’ excellent documentation make it accessible to build products for multinational corporations or a single developer with a product idea.

Because MUI is so widely used, there is a massive global community of designers, researchers, and developers to reach out to for guidance and support. Added to the fact that React is one of the most popular front-end frameworks, makes MUI an attractive component library.

MUI – Interesting Facts and Figures

Here are some interesting MUI facts and figures:

Note: MUI’s stats continue to climb. These facts were accurate as of Jan 2022.

• MUI started in 2014 as Material UI but decided to change its name to differentiate itself from Google. Many people assumed Material UI was a Google product.
• MUI has over 2,200 open-source contributors.
• There are over 2,3 million NPM downloads of MUI per week.
• Over 73,700 stars on GitHub.
• Of the 1,488 respondents to MUI’s 2020 survey, 35% of developers worked in an organization with less than five people.
• In the survey, 27% of developers use MUI for enterprise applications, while 20% use the library for admin dashboards.

UXPin’s MUI 5 Kit

Using UXPin Merge’s MUI integration, you can leverage the power of prototyping with UI React components.

MUI helps you create designs with fully functioning code components. With a single source of truth, designers, developers, product teams, and others can collaborate more effectively with fewer errors and friction.

Higher fidelity means better usability testing with meaningful feedback from participants and stakeholders. The result? A better overall user experience and increased business value.

Find out more about UXPin’s MUI kit and how you can sign up to request access to this revolutionary code-based design technology: MUI library in UXPin: Design Faster.

Syncing a Component Library With UXPin Merge

With UXPin Merge, you can build fully functioning high-fidelity prototypes with an open-source component library. With complex UI components like menus, forms, tabs, data tables, date pickers, accordions, and more, you can build beautiful and functional layouts in minutes. Check out Merge.

The post What Is MUI and What Do You Need to Know About It? appeared first on Studio by UXPin.

Ant Design is a popular design system for developing enterprise products. The comprehensive component library has everything product teams need to solve most modern B2B design problems.

Key takeaways:

• Ant Design is a collection of high-quality UI components that cover a wide range of use cases, including buttons, forms, navigation menus, data tables, modals, and more.
• Ant Design is known for its adherence to design principles and guidelines that promote consistency and usability.
• It follows the principles of the “Ant Design Language,” which emphasizes clarity, efficiency, and simplicity in design.
• Ant Design has a strong and active community of designers and developers, which contributes to its ongoing development and support.

With UXPin Merge, design teams can import Ant Design UI components to build fully functioning prototypes. This article outlines the benefits of working with Ant Design, its vast component library, and how to build Ant Design prototypes that look and feel like the final product.

Create a single source of truth between design and development with UXPin Merge. Visit our Merge page for more details and how to gain access to this advanced prototyping technology.

Reach a new level of prototyping

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

Discover UXPin Merge

What is Ant Design (AntD)?

Ant Design is an open-source design system developed by the Ant Group–parent company of Alibaba, Alipay, Huabei, and MYbank, to name a few. The component library supports React, Vue, and Angular front-end frameworks.

Ant Design includes layouts, iconography, typography, navigation, data entry/forms, data visualizations, and more. Design tokens allow organizations to customize the component library to meet your product requirements.

Key Ant Design Benefits

One of the primary reasons product developers choose Ant Design is its comprehensive component library and features. You can find just about every type of UI pattern, including data visualizations, making it an excellent choice for enterprise products.

Here are some Ant Design benefits we’ve learned from software developers:

• Well maintained: Ant Design’s team continually works to improve the design system with frequent updates. Engineers also report finding little or no bugs.
• Comprehensive library: Ant Design has a component, pattern, or icon to solve every design problem. Additionally, each element has multiple versions to accommodate any scenario.
• Native library: Ant Design Mobile offers an extensive library for building native cross-platform applications.
• Animation library: Ant Motion provides animations for common patterns and microinteractions to complement its native and web component libraries. 
• Third-party libraries: Ant Design’s third-party React libraries include data visualizations, infinite scroll, maps, media queries, and others that increase the design system’s capabilities.
• Internationalization-ready: Ant Design’s internationalization feature supports languages from around the world with the option for developers to add more.
• Forms: an extensive form library with excellent form handling.
• Scaffolds: 100+ template projects for dashboards, reports, tables, admin UIs, chat, logins, and more.
• Typescript compatible

Material Design vs. Ant Design

Material Design and Ant Design present more similarities than differences. Both offer comprehensive design systems for building cross-platform applications with excellent documentation and large global communities.

Theming

Material Design and Ant Design use design tokens for theming, making it easy for developers to customize UI components and patterns.

Accessibility

Accessibility is one of the most significant differences between the two design systems. Material Design has accessibility “baked-in” to every component with principles and best practices, whereas Ant Design leaves this to developers.

Tech stack compatibility

Material Design is the best option for developing cross-platform Flutter applications. Developers can call components with a few lines of code and build user interfaces effortlessly. Material Design is also available for React apps through MUI.

Ant Design accommodates React, Vue, and Angular frameworks, making the design system accessible to more software developers.

Ant Design vs. Bootstrap

Bootstrap is one of the oldest front-end CSS frameworks for building responsive websites and web applications. Many engineers use Bootstrap for prototyping because they can leverage the framework’s CSS and Javascript libraries to develop websites and web applications with little effort.

Like Ant Design, Bootstrap supports React, Vue, and Angular. The biggest difference between these two is that Bootstrap is a framework, whereas Ant Design is a design system. 

Bootstrap is a better option for prototyping and building websites, whereas Ant Design offers more features for building web and native cross-platform applications.

What Can You Build With Ant Design?

Ant Design’s vast library of components, patterns, templates, and icons makes it possible to develop B2B and B2C digital products. The design system’s form and data visualization patterns make it a popular choice for enterprise applications.

Here are some enterprise companies that use Ant Design:

• Yuque: knowledge management platform
• Alibaba: the world’s largest online marketplace
• Baidu: the Chinese Google equivalent and one of the world’s largest AI and Internet companies with multiple products running Ant Design
• Fielda: a mobile data collection application for field research
• Moment: project management software
• Videsk: video-based customer service platform
• Solvvy: chatbot software from Zoom
• Ant Financial: One of China’s leading FinTech organizations

Ant Design’s Design Language

1. Design Language

Ant Design’s Design Values include principles and patterns for solving many usability problems. The design system has four values:

1. Natural: products and user interfaces must be intuitive to minimize cognitive load.
2. Certain: designers must use components and patterns consistently to enhance collaboration and deliver consistent user experiences.
3. Meaningful: products must have clear goals and provide immediate feedback to each action to help users. Designers must create experiences that enable users to focus on tasks without distraction.
4. Growing: designers must consider the human-computer interaction symbiosis and design for scalability.

2. Motion Principles

Ant Design has three Motion Principles:

1. Natural: designers must base motion on the laws of nature with smooth and intuitive animations and transitions
2. Performant: animations must have low transition times and not impact a product’s performance
3. Concise: designers must create justified, meaningful interactions while avoiding excessive animations that don’t add value to the user experience

3. Global Styles

The Global Styles section of Ant Design’s docs includes color, layout, font, icons, and dark mode guidelines.

Ant Design’s Palette Generation Tool will generate a ten-shade palette based on your product’s primary color. The tool is somewhat primitive compared to the Material Theme Builder and other palette generators.

The font scale and line height provide helpful guidelines based on user reading efficiency calculated on an average distance of 50cm (20inches) and 0.3-degree angle. The base font is 14 px with a line height of 22 px.

Ant Design’s icons are available as outlined, filled, and two-tone. The are also instructions for creating custom icons that conform to the design system’s iconography principles, ensuring maximum consistency for customizations.

Ant Design Components

Here is an overview and key features of the Ant Design component library.

General

General components include buttons, icons, and typography. There are five button types:

• Primary: main CTA
• Default: secondary CTA
• Dashed
• Text button
• Link button

Additionally, there are four button properties:

• Danger: high-risk actions like delete
• Ghost: also called outlined button
• Disabled: when actions are unavailable
• Loading: adds a spinner and disables the controller to prevent multiple submits

Layout

AntD’s layout includes dividers, grids, and space (alignment, direction, size, etc.).

Navigation

Navigational patterns include affix (sticky), breadcrumb, dropdown, menu, page header, pagination, and steps.

Data Entry

Ant Design’s Data Entry components make the design system a preferred choice for enterprise application development. Product teams can build enterprise UIs fast with Ant Design’s out-of-the-box patterns, including:

• Auto Complete input fields
• Cascading dropdown menus
• Checkboxes
• Date pickers
• Forms
• Inputs (text and number only)
• Mentions (tagging users)
• Radios
• Ratings (icons and emojis)
• Select menus
• Sliders
• Switches
• Time pickers
• Transfer select boxes
• Tree selectors
• Uploads

Data display

Connected to data entry is data display–visualizing and presenting data to users.

• Avatars
• Badges
• Calendars
• Cards
• Carousels
• Collapse (accordions)
• Comments (user discussions)
• Descriptions (tables for orders, transactions, records, etc.)
• Empty (placeholders for empty components)
• Images
• Lists
• Popovers
• Segmented
• Statistics (numerical components for dashboards)
• Tables
• Tabs
• Tags
• Timelines
• Tooltips
• Trees

Feedback

Designers use Ant Design’s feedback components to communicate with users.

• Alerts
• Drawers
• Messages (display system feedback at the top of the screen)
• Modals
• Notifications
• Popconfirm
• Progress
• Result (success, fail, error, etc.)
• Skeletons (lazy loading placeholders)
• Spin (spinners)

Other

The final category includes anchor (table of contents) and back top (back to top), essentially navigational components. There’s also a config provider which enables developers to group components.

Importing Ant Design React Components into UXPin

One of the challenges with any design system is that although there’s “a single source of truth,” designers and engineers still use different UI elements–designers use an image-based UI kit. Engineers use a code-based component library (React, Vue, Angular, etc.).

UXPin Merge creates a real single source of truth. Software developers can bring their product’s design system or open-source component library (like Ant Design) into UXPin, so designers use the same UI elements for prototyping that engineers use to develop the final product.

Merge components are powered by code, giving designers complete interactivity and properties defined by the design system. For example, this Ant Design button includes hover and click interactions by default without changing anything in UXPin!

Designers can access the component’s properties defined by the design system (color, size, type, content, etc.) via the Properties Panel to make changes. 

UXPin renders these as JSX so that engineers can copy/paste from Spec Mode to begin development–no drift, 100% consistency every time!

Ant Design npm integration

UXPin’s npm integration allows designers to import UI elements from open-source component libraries hosted in the npm registry, including Ant Design (antd).

Using the Merge Component Manager, designers simply add Ant Design’s npm details:

• Package name: antd
• Assets location: antd/dist/antd.css

And UXPin connects to Ant Design’s GitHub repo via npm. Designers can use Ant Design’s documentation to choose the components and properties they need for prototyping. 

Follow this step-by-step guide for importing Ant Design components into UXPin.

You can also watch CoderOne’s YouTube tutorial, which takes you through the setup and building a basic prototype.

Build fully functioning Ant Design prototypes that produce meaningful results during user testing. Increase your design team’s value by solving more problems during the design process while identifying more opportunities. Visit our Merge page to find out more and how to request access.

The post Ant Design 101 – Introduction to a Design System for Enterprises appeared first on Studio by UXPin.

Breaking down silos makes it easier for everyone involved in a project to work together towards a common goal. Unfortunately, traditional working environments make cross-team collaboration different.

Newer tools with a code approach can give you an easier way to eliminate organizational silos. Explore one of them – UXPin Merge. UXPin powered with Merge technology help to break the silos between design, development, and product teams at your organization. It allows you to build prototypes with a single source of truth – coded components. Discover 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 to Break the Silo Mentality?

Silos create inefficiencies that can adversely affect your teams. You might not even know that silos exist within your organization. Once you learn to notice their effects, though, you will likely spot departmental silos everywhere and see how they interfere with your company achieving a common goal.

Here are 5 common problems created by silos:

• A narrow focus on individual tasks that do not contribute to the bigger picture.
• Continued functionality issues that no one within the design team knows how to solve.
• Longer product development, testing, and release timelines.
• Lack of insight into how the company could improve its product development process.
• Inefficiencies that add to project expenses and disappoint stakeholders.

6 Practical Tips to Break Down Silos

With these issues in mind, consider how the following steps could break down silos and build a better company culture.

Tip #1: Form a leadership team that includes a representative from every department

You can build trust and improve communication by creating a leadership team that includes at least one representative from every department. The leadership team can keep the big picture in mind while steering the project toward its final goal.

Tip #2: Establish a unified vision before breaking the common goal into individual tasks

Communication doesn’t always trickle down to every member of a team. You can eliminate this problem by creating a unified vision and breaking the common goal into individual tasks. The tasks can get assigned to teams.

If you start with small tasks and hope that they come together in the end, you will likely find disappointment.

Tip #3: Invite team members from different departments to meetings

The pandemic forced companies to adopt remote working environments. Luckily, videoconferencing apps stepped up to help colleagues and freelancers from all over the world engage with each other in virtual environments.

Since you might need to invite marketers, developers, designers, and other colleagues, you should choose a videoconferencing service that can accommodate several people. You can even get marketing teams engaged to learn from their insights and help them plan for how they will sell the finished product.

Some of the top options include:

• Zoom, 
• BlueJeans,
• Google Meet

If you expect fewer or more participants, you can usually choose plans that match your unique needs. Choosing the right plan helps ensure that you get input from different teams without spending more money than necessary.

Many teleconferencing apps will also let you track metrics and record your meetings so you can focus on interacting with colleagues instead of taking notes. You should notice improved employee engagement when people can talk to each other without writing down their thoughts. You have to put a premium on engagement when working with remote teams.

Tip #4: Choose collaboration tools that appeal to all departments

Until recently, designers and developers often found themselves at odds when creating digital products. Even when they share long-term goals, their specializations encourage them to think about creating products in different ways.

That’s why there’s drift when it comes to the handoff process. It’s best to use a tool that will allow both devs and designers to collaborate without getting in each other’s ways. A solution with code-powered technology can help with that. 

When designers use already-coded components that can be easily reused, there’s no room for a disconnect between what is designed and what can be coded. Not to mention the time efficiency that tools like that offer – both with designing and coding the final product based on the prototype. 

Create a design system that contains all approved assets

Every team working on a product should have access to a design system that contains all approved assets and components. A design system ensures that diverse teams work toward a shared aesthetic and function even when they do not spend much time talking to each other.

When you go for a code-to-design approach in design on top of that, you don’t have to worry about syncing the changes in the code with the design components as that can be done automatically. Thanks to that you have all the approved assets up to date. 

Share information between teams as you make progress

Regular updates can incentivize developers, designers, and team members of other departments to stay focused on their projects.

Working in a vacuum often feels like a thankless—or even pointless—task. Someone designing icons might lose inspiration because they do not see what role the icons will play in the product. Similarly, a developer tweaking interactive forms might not see the point of their work until they witness it in action.

When you reach a milestone, celebrate by showing how everyone’s cumulative efforts have taken you closer to your ultimate goal. If possible, you might enjoy lunch or a drink together. If you work remotely, you can still enjoy a fun meeting that focuses more on building excitement and trust than working on the project.

Eliminate organizational silos with UXPin Merge

UXPin has always been a code-based tool for digital design. UXPin Merge takes the technology a step further by letting designers design with production-ready components That means developers get the opportunity to review designs from the perspective of fully functional code and quickly implement it

UXPin Merge also works in conjunction with several systems, including Material UI, CA Technologies Mineral UI, and IBM Carbon. This approach makes it even easier for engineers to participate in prototype development and making sure designers use components that have already been coded.

Discover more effective, collaborative ways to solve DesignOps challenges. UXPin Merge can help break down silos, reduce design inefficiency, and improve customer experience to meet your company’s goals better than ever.

The post Breaking Down Silos to Improve Digital Product Development appeared first on Studio by UXPin.

I decided to share my impressions on UXPin Merge Storybook integration and write about how it influenced the designer-developer collaboration in our team. 

Merge is a part of UXPin – that’s technology providing two main integrations with developers’ tools (Git and Storybook). It allows you to quickly prototype using ready UI code components that are React-based for Git integration, or any framework-based for Storybook integration. I tested the Merge integration with Storybook. 

The review was written by Roy S. Kim, the CEO, and Jacobo Moreno Quiroga – Front end engineer & Digital Content Designer from Fixel Inc., the Japanese UX/UI design consulting company specializing in Design Systems.

Design with interactive Storybook components in UXPin. Build products 10x faster and bridge the gap between designers and developers. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

UXPin Merge and Storybook integration 

I have both an engineering and design background, and I work on a daily basis on finding solutions to processes inside an application and then writing them in code. The designer part comes in handy when I need to consider and improve the user’s perspective.

This involves more than defining visual aesthetics, it requires considering how the application interface can be subtle enough for someone to not notice it so that they can focus on what they are trying to achieve in the app. 

I usually struggle with the back and forths between iterations of coding that aim to improve user experience. 

Those kinds of improvements are not the same as fixing the product because something doesn’t work. It’s more of intuitive work when a user reports that something feels off. Even if you apply all the design and UX good practices, the user could still complain, and they would be 100% right. This is where a coded Design System or an organized UI component library can help. If you have tested and polished the components approved for your Design System, then you can treat them as ready building blocks for new applications without spending too much time thinking or adjusting them. 

UXPin with Merge technology allows you to import all your Design System components stored in Git or Storybook to the design editor so that you can prototype with them right away. Thanks to this designers can use actual coded elements to speed up the prototyping. UXPin Merge’s motto is “The single source of truth” because what you see in the prototype is combining design with actual working code that developers use as well. 

UXPin – designing to coding 

Let’s start with just UXPin. Essentially, UXPin is a UI/UX design tool similar to Sketch, AdobeXD, or Figma. It’s similar to other competitors so you can get used to it very quickly. You can start with wireframing and end with advanced prototyping in this single tool. 

In most of the similar tools, there is a big difference between what the designer creates in the design tool and what happens in the dev environment, where the real working product is coded. Features like the inspect tab in Figma enable you to see roughly what the CSS behind a certain object would look like. However, this is not always an accurate depiction between what is designed and what is coded. 

Designers and developers essentially come from two different worlds when it comes to the tools used in their daily work. Trying to find a common language between them can lead to way too many meetings and back-and-forths. This might be the very issue that UXPin Merge aims to solve, by having “The single source of truth” which the whole team can treat as the ultimate place of the right components and documentation. 

The UXPin Merge approach 

Merge is UXPin’s technology. Essentially, what Merge does is that it brings coded Design Systems stored in Git repositories or Storybooks to UXPin. Hence, a designer can use real components in their mock-ups and prototypes.

These components are already coded in the repository, and the designer can access its different versions inside UXPin as needed. This way, the integrity of each component is never compromised. It minimizes possibilities for a designer to make mistakes and use elements that aren’t in line with the company’s standards. 

Once you have a Design System and repositories ready to go, you won’t be really modifying them often as their purpose is to store and unify all the versions of the possible elements to speed up the product development process and create governance.

Using UXPin Merge and the imported components, controls the design process as elements are predefined. The changes can be made without a problem but it must be done by developers, so that the chances for casual mistakes are pretty low. 

These limitations actually simplify the work of a designer. They can use fully interactive and prepared elements to focus on the most crucial part – user experience. Sure; color, padding, fonts, and other visual elements are important parts of the experience, but choosing every single little detail can slow down the process.

If all of that is already sorted out in the Design System and repositories, building prototypes with real code components gets easier and faster. Also, it helps keep the consistency even if the components get updated in code as the imported UI is in sync with the components stored in devs’ libraries. No need to worry that elements will be outdated and designers will have to redesign the projects. 

Connecting Storybook 

One of the UXPin Merge integrations I got to see was Storybook. Storybook serves as a sort of developers’ Design Systems to store all the coded UI. It is used by many companies, and it’s very flexible framework-wise as it provides support for around 15 of them.

Now, for teams that are not supported by developers,  setting up a Storybook project and placing all the components there may be a struggle. However, once it’s ready, it neatly holds and displays all the components that are in the Design System. 

UXPin Merge aims to bring what is stored and defined in Storybook to UXPin so that components made in whichever framework can be used for prototyping. The integration part is very simple; grab the URL of a published Storybook project to import the components to the UXPin library for designing. I tested it and it seemed to work perfectly with React components – all the elements behaved in the design editor just as they should. 

Thoughts for the future 

The design process including UXPin Merge in it can be visualized like this: 

UXPin Merge plays a big part in Step B since it provides production-ready UI-coded components that you can use to iterate faster when creating prototypes. With a defined Design System or a component repository, you really shouldn’t worry about Step A because you most probably already have the organized components. Still, there is a possibility that you need to adjust something within the coded components, especially if you are in the middle of creating your own Design System. 

With Step C, which is the build-up step of the application, the developers look at the Merge prototype to see how code components are put together, as well as what code corresponds to which part of the design. However, they won’t just copy and paste the whole code to build the product instantly – they will still need to adjust it so that the prototype becomes a product.  

UXPin Merge seems to be a great solution for rapid prototyping and keeping the consistency thanks to making the most of Design Systems. However, it appears that certain steps are still to be covered. 

To some extent, the work of designers is limited as they mostly can use pre-prepared components, however, it saves time and prototyping with code components brings the world of design and development together. 

Want to try out the integration? Sign up for a 14-day trial!

The post Storybook-UXPin: Review of Merge Integration appeared first on Studio by UXPin.

Together with Whitespace, we hosted a webinar for hundreds of tech professionals titled: How to Overcome Challenges of Scaling a Design System? DesignOps and Product Design Leadership expert Dave Malouf moderated the event with speakers from two enterprise multinationals:

• Ryan Kane: Head of UX Design at Weir Group
• Julien Vanière: Senior Design System Director at Sage

This webinar provided interesting insights into how two enterprise giants approach design systems, including maintenance, scaling, and governance.

Achieve design system maturity and a single source of truth 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

Benefits of a Design System

Before we get into the webinar, we wanted to highlight the high-level benefits of a design system:

• Improved consistency and coherence: Design systems establish a unified visual design language and functionality, ensuring a cohesive user experience across products and platforms.
• Enhanced collaboration and communication: By serving as a single source of truth, design systems facilitate better teamwork among designers, developers, and stakeholders, streamlining handoffs and reducing miscommunications.
• Faster design and development process: Reusable components and guidelines within a design system enable teams to accelerate their workflows, reducing the time spent on designing and coding individual elements.
• Scalability and maintainability: Design systems are built for adaptability, allowing product teams to easily update, expand, and maintain their products while preserving consistency and usability.
• Better user experience and product quality: By providing a structured approach to design, design systems help deliver a refined, high-quality user experience that meets user needs and expectations.

Do you recognize any challenges in your organization related to the benefits above? The next step is to build a business case. Here’s how teams at Sage and Weir Group secure funding and resources for their design systems.

Acquiring and Maintaining Funding and Resources for Design Systems

Building a case for large federated design teams at Weir Group

Ryan Kane, who works for the Weir Group–a large corporation with numerous federated design teams–argues that the efficiency savings realized from design systems can make a compelling case for funding. 

The company can save significant resources by avoiding the redundancy of rebuilding and redesigning components across different projects. 

Ryan explains this saving through the lens of coded and design components and considers the broader scope of design language systems that cater to teams relying on low-code or no-code solutions. 

This broad approach ensures that all teams benefit from time-saving, consistency, trust, and a coherent product experience regardless of their development approach.

A fascinating part of the Weir Group’s strategy includes creating lighter versions of their React and React Native components to suit configuration needs. It also extends the design system’s benefits to teams not directly engaged in development but that use bought and configured solutions.

An additional layer of complexity in larger organizations is the various tech stacks, which may include systems like Salesforce and SAP, further reinforcing the need for an adaptable design system.

A creative approach from Dave Malouf

Dave Malouf described how his team at Northwestern Mutual used accessibility as a foundational argument for acquiring design system funding. Dave’s team partnered with legal to demonstrate the organization could build accessibility into the design system and avoid regulatory challenges–which could lead to potential fines and lawsuits in some jurisdictions.

Dave’s example shows how teams must assess the product and industry landscape holistically to build a case for a design system and other UX initiatives.

Learning from experience at Sage

Julian Vaniere’s experience at Sage differs slightly. His team started their design system proactively, based on knowledge from a manager who had previously created a design system at Intuit. They didn’t need to justify each step but instead focused on adoption and eventual constraints. 

Vaniere’s team focuses on patterns more than components, which they see as making a significant difference. Sage’s global and diverse products drive this focus, including HR software, ERPs, accounting software, and more. Sage is working towards a seamless experience across these products and needs rather than perfect consistency.

The key to securing and maintaining funding and resources for a design system depends on an organization’s unique circumstances. 

Demonstrating cost and efficiency savings, scalability, and the ability to deliver a seamless user experience across diverse products and regions can make a compelling case. It’s crucial to think beyond patterns and consider larger design language for a more inclusive and comprehensive design system.

Making the Development Process More Efficient

Julian Vaniere provides insight into how Sage structures its design system efforts and highlights the importance of focusing on accessibility. His team comprises various roles, with five UX/UI designers and an Accessibility Designer.

Julian drives the accessibility initiative in his organization, which adds another dimension to their design system. He indicates that having an Accessibility Designer on the team is crucial as it ensures that products are accessible to all users. This accessibility is essential to creating a seamless user experience, regardless of geographical location or user needs.

Developers want to build rather than make design decisions

According to Julian, developers at Sage are most interested in building features; they typically prefer not to spend time fixing accessibility or making design decisions. This tendency among developers can justify the cost of a design system team who can efficiently handle these aspects. This separation of responsibility allows developers to focus on what they do best – building features.

Vaniere’s team implemented the concept of “accessibility champions” within each team. These individuals can leverage their knowledge and expertise to guide the rest of the organization, clarifying precisely what everyone must do for accessibility.

How design systems enable devs to focus on development

A design system can facilitate the dev team’s desire to focus on building features rather than design decisions or accessibility by providing guidelines and components. This unified design language streamlines the development process and ensures consistency across different projects and products.

With roles like Sage’s Accessibility Champions, the knowledge and expertise about design considerations, including accessibility, can be efficiently distributed among design teams, creating a more focused and efficient development process while reinforcing the cost-effectiveness of a dedicated design team.

Maintaining Great Work When Things Get Tight

The Weir Group has a federated structure consisting of individual businesses with a corporate function on top. Each business uses the same design language but has autonomy regarding strategies and budgets.

The corporate level manages the design language, but Ryan emphasizes that no one truly “owns” the design language–it’s a living, breathing entity for which the entire community is responsible. 

The challenge many design organizations face

The rationale for the so-called ownership at the corporate level is to have a dedicated resource that isn’t juggling too many responsibilities. In many companies, design teams often bear the dual burden of delivering design on products and projects while also maintaining and growing the design language. Inevitably, when resources become tight, maintaining the design language is deprioritized.

Join our next webinar: Strategies for Building a Resilient DesignOps Practice.

Distributed, shared responsibility

To compensate for this deprioritization, Ryan’s team segregates the design work and the maintenance of the design system. The federated businesses handle the hands-on design work, while the centralized design system team manages the maintenance and growth of the design system.

This delegation of responsibilities ensures the organization’s design teams focus on products and design projects while the corporate team manages design system maturity and maintenance.

Design systems are never complete

The Weir Group runs a “contribution model” for its governance. They acknowledge the design system is an evolving entity and should never be considered complete. 

The design teams in the federated businesses are empowered to design and develop new components based on emerging use cases that the library doesn’t cater to. Teams then contribute these components back to the central library via UXPin Merge, similar to GitHub releases.

This approach has multiple benefits:

• Eliminates duplication of effort by allowing teams to contribute to one central library. 
• Fosters efficiency, with empowered teams across the business contributing to a shared resource, guided by a corporate function overseeing it all.
• Ensures the maintenance and growth of the design system even when resources are limited.

Build, Scale, Mature, and Distribute Your Design System With UXPin Merge

The Weir Group uses UXPin Merge as a single source of truth for its federated design teams. Ryan Kane’s team utilizes UXPin Merge’s Version Control to sync and distribute changes to the entire organization. A complex task for traditional DesignOps teams is fully automated with UXPin Merge.

“With UXPin Merge, we’ve removed duplication and created efficiency where we’ve got empowered teams contributing to one central library–the design system’s repository–with a corporate function managing and maintaining it.” Ryan Kane, Head of UX Design at The Weir Group.

Are you still using multiple design tools for designing, prototyping, and testing your design projects? With DesignOps working tirelessly to sync and update design system changes?

Create a single source of truth and automate redundant, time-consuming tasks with UXPin Merge. Visit our Merge page for more details and request access.

The post 8 Design System Best Practices that Top Enterprise Companies Follow appeared first on Studio by UXPin.

Between December 2021 and January 2022, UXPin and Whitespace interviewed Design Systems Managers from nearly twenty enterprise-level organizations. We compiled this research in a free ten thousand-word report titled Design Systems and DesignOps in the Enterprise.

Download the report for free. Head onto Design Systems and DesignOps in the Enterprise.

This outline provides an introduction to the report and what you can expect to learn from our research. We learned that in an ideal world, organizations want a common set of tools, documentation, and governance–but currently fail to achieve these results effectively.

The Purpose of This Report

Our team at UXPin wanted to understand how organizations use design systems and what role DesignOps plays in facilitating and streamlining this usage.

Through this report, we wanted to understand organizational challenges with design systems and identify tools and solutions to solve these issues. 

Research sources

UXPin partnered with Whitespace to interview 19 enterprise organizations from seven countries, including the United States, Switzerland, Germany, France, the United Kingdom, Indonesia, and Australia.

These companies serve several industries, including technology, health care, transportation, retail, and government.

Topics covered

We covered six key topics when interviewing each organization:

1. Design system journey to date
2. Design system maturity
3. Governance and processes
4. Designer/developer cooperation and challenges
5. Roadmap and milestones
6. Comparisons to the existing market research

Quick view

Here’s where most companies stand regarding design systems:

• A “single source of truth“ is the primary goal, but silos and poor documentation stifle progress toward this ideal outcome.
• Design system governance lacks support, and team members waste resources trying to demonstrate ROI for their work.
• Design system adoption is a challenge for many organizations.
• Design system maturity varies widely across organizations and industries, often hinging on support from leadership and stakeholders.

Download the report for free at Design Systems and DesignOps in the Enterprise.

A Brief Overview of Each Chapter

Design Team

The Design Team Chapter discusses the organizational structure, cross-functional collaboration, and its influence on design system adoption.

Even in cases with leadership support, design system adoption is slow and challenging due to silos and poor communication channels. The report outlines several solutions, including:

• Transparent communication between teams
• Establishing a single source of truth
• Setting measurable goals with KPIs to track progress
• Assigning accountability across teams toward a common goal

Design Process

The Design Process Chapter looks at working standards, the handoff process, and team aspirations. We learned that designers like to create new things, while developers prefer to reuse as much as possible.

Many design system workflows and components are outdated. Updating component libraries, adding elements, and making changes overall are some of the companies’ biggest areas of concern.

Another challenge is the design handoff. Most organizations voiced concerns about their current design process but didn’t have a clear path to making it more effective. Even with a solid design system, the transition from design to development is challenging. Teams adopt tools to simplify this handoff process, often introducing fragmented communication and inefficiencies.

Tooling

We explore how the tools used during design and development impact a design system’s adoption and success. 

Many organizations recognize they need intuitive tools that provide a single source of truth–but switching tools is a heavy lift requiring time and resources to change people’s mindsets.

Design System Documentation

One of the most daunting tasks of managing a design system is keeping every part of it up to date. Documentation is a valuable resource helping designers and developers model their efforts to deliver consistent user interfaces.

Organizations have learned that successfully designing and delivering products is nearly impossible without adequate documentation. But, the bandwidth required to maintain design system documentation is challenging, particularly for small teams with fewer resources.

The right tools can help facilitate design system maturity while providing structure for documentation. Learn more about the tools from the report: Design Systems and DesignOps in the Enterprise.

Design System Adoption

Design system adoption requires continuous evangelism and outreach to ensure that stakeholders understand its value and how it can improve efficiency.

Effective adoption requires top-down support combined with change management from HR and DesignOps teams. An adoption strategy must be measurable so organizations can monitor progress and identify successful initiatives.

A Vision of the Ideal Model

We put together a vision for the ideal design system model using insights from our research. While the ideal design system framework differed between organizations, one distinct commonality was “to create more effective workflows for better product development.”

Organizations implement design systems to achieve several goals:

• Create design and development work at scale with greater efficiency and the ability to replicate elements and components
• Reduce strain on design resources
• Create a unified design language
• Create visual consistency across products, channels, and departments
• Serve as an onboarding tool with clear standards, processes, and documentation

How to Use This Report

This research demonstrates that organizations share similar struggles with product development and design systems. Through sharing our findings, we hope companies can model solutions based on how others have solved (or plan to solve) similar challenges. We also hope it will feed the discourse around design system maturity and the future of product design.

Download the report for free. Head onto Design Systems and DesignOps in the Enterprise.

The post Free Report on Design Systems and DesignOps in the Enterprise appeared first on Studio by UXPin.

The design culture examples in this article demonstrate how design-driven companies create positive customer experiences and enhance overall business success.

Creating a good design culture starts with understanding user needs, encouraging collaboration between departments, experimenting with new ideas, investing in the right tools, and developing design team rituals.

Examples from J&J, PayPal, Rexlabs, Google, Revolut, and Dave Malouf demonstrate how these strategies can lead to better decision-making, improved efficiency, and increased innovation.

Build fully functioning prototypes that look and feel like the final product for meaningful feedback from user testing and stakeholders. Create a design culture focused on solving more user problems during the design process with accurate prototyping from UXPin Merge. Visit our Merge page for more details.

Reach a new level of prototyping

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

Discover UXPin Merge

What is Good Design Culture?

Good design culture is the practice of proactively incorporating design principles into the product development process. Incorporating these principles takes a lot of work and collaboration. Design avocates must actively work to integrate design culture and user experience values into the company’s culture and daily operations.

These five key factors characterize good design culture:

• Focus on user experience
• Commitment to researching and understanding customer needs
• Advocating for UX and user needs
• Willingness to take creative risks through experimentation
• Encourage collaboration between disciplines

Creating a good design culture requires commitment from leadership and collaboration between different departments within an organization.

The importance of design culture

Good design culture can significantly impact the success of an organization’s products and services. It allows organizations to create products that are more attractive, easier to use, and better suited for customer needs.

How do you Create a Healthy Design Culture?

Here are five things you can do to build the foundation for a strong design culture.

Focus on collaboration: Design is a collaborative process. Creating a thriving design culture starts with fostering an environment that encourages collaboration between all stakeholders.

Celebrate successes: Acknowledge and celebrate big and small achievements for design initiatives. This acknowledgment helps foster a culture of creativity and innovation.

Foster open dialogue: Encourage an open dialogue between designers, developers, and other stakeholders throughout the design process. An open forum for ideas ensures everyone is in sync with the project’s vision.

Encourage experimentation: Give designers the freedom to try new things and experiment. Like successes, teams must celebrate experimentation–succeed or fail. This autonomy encourages creative thinking while celebrating the attempt and what the organization learned rather than the result.

Invest in tools: Investing in the right tools is essential for successful design projects. Designers must have the hardware, software, and resources to create great work and push creative boundaries.

Implement DesignOps: DesignOps can reduce operational burdens and break down silos that adversely impact morale and culture. The DesignOps mindset, which we discuss in DesignOps 101, takes the same strategies and thinking for design projects and applies it to your company structure and work mentality. 

Activities to Enhance Design Culture

Design team rituals

Design culture must flourish within the design department before spreading organization-wide. Design team rituals are an effective way to instill UX principles, foster connections, and create design advocates within the department.

Some design rituals include:

• Design critiques: designers present ideas and designs for feedback.
• Coffee rituals: scheduled informal meetups to keep designers connected.
• Weekly 1:1s: Design leader one-on-ones with team members to discuss their challenges, work in progress, career path, etc.
• Daily stand-ups: an agile exercise where team members share their daily progress and any blockers/challenges.
• Check-in/Check-out: morning check-in and afternoon check-out rituals foster communication and allow designers to ask for help if needed.

Design sprints

Design sprints foster a culture of experimentation, collaboration, and rapid prototyping. These intensive, focused sessions encourage a diverse team to solve problems using design thinking principles.

Including participants from different departments creates more design advocates while spreading design thinking and user experience principles across the organization.

Design thinking workshops

Design thinking workshops provide an opportunity for non-designers to learn about and practice design thinking methodologies. These workshops encourage a culture of empathy and problem-solving, which are core UX values.

Participating in design thinking workshops teaches team members how to approach problem-solving and innovation with a user-centered mindset, helping to promote design culture within the organization. Design teams can leverage this organizational mindset to encourage cross-functional collaboration for developing ideas for new products and features.

Invite team members and stakeholders to user testing

User interviews and testing are fantastic opportunities to humanize users and create empathy. Usually, only designers and researchers see how users struggle with problems, leaving other departments and stakeholders to question design decisions.

Bringing these parties into user interviews and testing sessions allows them to witness problems firsthand and how design teams use design thinking to solve them.

Design Culture Examples From Six Leading Organizations

Design culture through education at J&J

J&J debuted its design system at a “Lunch & Learn” session where the design team demonstrated how they create interactive prototypes using UXPin Merge.

J&J’s team hosts regular Lunch & Learn sessions where they discuss interactive prototyping and encourage team members and stakeholders to develop their own ideas using anything from basic sketches to high-fidelity prototypes–depending on their available tools and skills.

When team members have a concept to test, they bring it to designers to prototype using the organization’s design system and UXPin Merge. This educational process encourages everyone at J&J to develop product concepts, creating a diversity of ideas and more possibilities for innovation.

DesignOps 2.0 at PayPal

In 2019, PayPal completely reinvented its internal product development process using UXPin Merge. The org’s DesignOps 2.0 creates a single source of truth with UXPin Merge while bringing design and development into a single iterative process.

DesignOps 2.0 educates product teams and engineers about user experience and user-centered principles. Now, everyone in the product development team shares accountability for user experience, including a custom tool to measure UX success in delivering products.

Through DesignOps 2.0, PayPal’s small team of designers has increased their sphere of influence and developed a UX mindset for everyone in the product development process.

Designing a Design Culture at Rexlabs

Yolanda van Kimmenade, a Senior Product Designer at Rexlabs, describes how she and her design team designed a design culture at the software development agency.

Yolanda and her team started by defining the values and behaviors they believed were important to them and the organization, including:

• Collaboration
• Inclusivity
• Continuous learning
• Open communication
• Giving and receiving feedback

Next, Rexlabs’ designers created systems and processes to support these values and behaviors, which included:

• Establishing a shared language and set of tools for communication
• Setting up regular check-ins and feedback sessions
• Creating a system for sharing knowledge and resources within the team

Yolanda emphasizes that design culture isn’t static. The design team must revisit and adjust the culture as the organization and products evolve. Rexlabs’ designers created a positive and productive work environment by continuously aligning their culture with their goals and values.

Rexlabs’ design team spread these values through a design ritual called “Scribbles.” 

“We meet every Wednesday for ‘Scribbles’ — alternating in-person and remote meetups. We discuss topics of interest, give each other feedback on designs (e.g., user research insights, user flows, or WIP designs), and have a delicious coffee…During one Scribbles session, the topic turned to our frustrations about processes that needed improvements. Anton Babkov (our head of design and CEO, who gives us business insights and support), suggested we document these challenges and decide how we’re going to tackle them.” – Yolanda van Kimmenade, Senior Product Designer at Rexlabs.

This discovery from Rexlabs’ CEO was made possible by the company’s strong design culture that welcomes giving and receiving feedback.

Building a Better Design Culture at Google

Mike Buzzard, a Design Manager at Google, argues that a strong design culture leads to increased innovation, customer satisfaction, and overall business success.

Mike suggests three key strategies for developing a healthy design culture:

• Establish clear design principles and apply them throughout the company, so team members understand the organization’s design philosophy and how to make design decisions
• Invest in ongoing design training and education for all team members to foster continuous learning and improvement
• Encourage collaboration and communication to create a sense of community, so that team members feel invested in the success of the organization’s design efforts

“I do think Google can become more design-oriented. Signals of that would be in the vocabulary engineers use when talking to designers about their work, or even just a top-down, bottom-up sort of comfort in understanding how design influences the company’s products and culture… The number of people working in UX at Google has multiplied over the last 5 years—that magnitude of growth is partly why we created a team dedicated to UX community and culture, to ensure the health and success of UX across all of Google.” – Mike Buzzard, Design Manager at Google.

Creating a strong design culture at Revolut

In a 2020 Medium article, Lucas Vallim discusses how a strong design culture can lead to better decision-making, improved efficiency, and increased innovation.

Lucas says you must first understand the role of design within the organization and how this fits into the overall business strategy. Conversely, the company must prioritize design and invest in design talent and resources. Additionally, the company should foster a collaborative and inclusive design process and encourage open communication and feedback.

Lucas argues that building a design culture on these values helps the organization better understand its customers while creating more effective and satisfying products.

Using Holistic DesignOps for enterprise design culture

In an informative UXPin webinar, long-time DesignOps advocate Dave Malouf describes how a holistic DesignOps strategy creates a design culture beyond the design team.

Dave argues that the foundation for a holistic design culture starts with communication and collaboration, which helps everyone in the organization understand design, its principles, needs, areas of influence, and potential.

Dave describes three pillars for holistic DesignOps:

• Delivery operations: how to get things delivered by optimizing efficiency, velocity, and cost reduction.
• Practice operations: The people, spaces, methods, and tools that make it possible for designers to design.
• Business operations: Streamlining organizational bureaucracy from finance, IT, procurement, compliance, legal, etc.

Revolutionize your design workflows and bridge the gap between design and development with the only design tool built to solve modern DesignOps challenges. Discover Merge.

The post 6 Design Culture Examples and How to Create Your Own appeared first on Studio by UXPin.

Design leadership isn’t about micromanaging every little step. Rather, a good design leader is able to provide impactful direction for their team. How exactly does a design leader encourage a positive and meaningful product design work environment?

Let’s start by taking a look at the key steps to take for managing a design team successfully and what to avoid when building a cohesive team.

If you’re looking for a prototyping tool that will help your team to optimize their workflow and communicate better, we have something for you. Try UXPin Merge, a powerful technology that makes your team achieve a higher level of design maturity in no time. Read more about UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

Start with a design department audit

Just like you start with auditing UX design, look back at your design team goals. Having a roadmap in place will help you more clearly see what you need to achieve in regard to design goals at your organization. This roadmap will help you get there with fewer bumps in the road.

Your next step will be to audit your design team structure as a whole. You’ll want to take inventory of who you have on your team and confirm what their strengths and weaknesses are. Taking stock of these things is helpful to see if you have enough team members with the appropriate skills needed to achieve company goals.

Team meetings are an excellent way to gain a deeper understanding of your team as a whole. Furthermore, a design team audit will go a long way in determining how well overall day-to-day operations will go. 

Auditing will help crystalize your team structure and will help to specify the role of all team members and the capacities in which they are expected to complete their roles. Clarity helps give everyone a higher sense of purpose and consistently set them to task without confusion or hold-ups.

Identify and acknowledge your wrongdoings 

As a design team leader, you’ll need to apply an honest mindset when managing your team. Inherent assumptions and old assumptions are par for the course when working in a leadership role, however, external output is extremely valuable when working in a close team atmosphere.

Don’t be afraid to ask for external input in the form of team member feedback. This could be an anonymous survey or an all-hands call to gather information from those you work with every day.

While it can be tough to hear difficult feedback, taking direct note of such input will only help strengthen your team as a whole. Poor leadership manifests in a variety of different ways. Maybe your team has expressed that you repeatedly fail to set clear goals for the team or perhaps you tend to micromanage employees.

Whatever the shortcoming may be, be willing to identify and acknowledge where you can use a little work as a design lead. No one is perfect, you and your team members included.

Write a plan on what needs to be done

Equally as important to a successful team as improving leadership style and making a plan are the factors related to project management. This goes hand-in-hand with design audits. Questions you’ll want to take stock of: Do you need to hire more people? If so, can you tell which skill gaps in your current team structure need to be filled? 

An adjacent item would be to run a skills gap assessment. Ask your team members what skills they feel good at. By requesting directly, you’ll likely find skills that weren’t readily apparent or might come in handy for future design projects.

During any one-on-one or group meetings with your team members, you can ask them about the skills they’re determined to develop. This will help you plan out how their desired career path can integrate with the competencies of your design team as a whole. Offer ways for your team members to hone and develop their skills in order to close any skill gaps. 

During the planning stage, it’s important to note if you’re successfully building the design team during the recruitment and hiring process. Take note of any areas in which you might be falling behind. Ask yourself:

• Are you seeing a high candidate drop-off rate? 
• Do your new team members continue to ask repetitive questions during the onboarding process? 

Consider these questions and other potential improvement areas such as task distribution, management of workload, and consistent performance. 

Decide how you will measure the results

Once you’ve taken stock of these items and implemented specific changes, you’ll want a solid plan as to how you’ll be evaluating said implementations. You’ll need it to measure whether or not the changes you’ve implemented have been successful. 

When assessing the overall success of your results, ask yourself:

• Did you solve the problem? – Design isn’t simply graphics and color palettes. At its core, it’s all about facilitating interactions and problem-solving through creative channels. If you identified a real problem (such as poor employee retention) and provided a better solution (more open communication and feedback) then you can count that as a success.

• Did you improve the process? – Design doesn’t always have to be about supplementation. Rather, you might identify steps that were redundant and unhelpful during your research. Good design leadership might also mean cutting down or taking away what isn’t working. If you made a process more efficient through various channels of development, then congratulations, pat yourself on the back. Another success!

• Did you open yourself for feedback? – Design success is just about the personal growth of employees and management alike. This can be shown through effective communication. A difficult skill to master, accepting feedback and open communication is one that every good leader should have. Shelve your pride and open yourself up to honest feedback. You and your team will all be better for it. 

The recommended measurement methods will depend on the specific area you’re planning to improve. For example, if you were hoping to measure your own design leadership qualities, you could run a quantitative survey like an employee Net Promoter Score which is a metric that helps gauge how employees feel about the place at which they work.

Running surveys like this allows you to see how your score has changed over the course of three or six months. This is simply one avenue you can take but it is a common way to look at employee satisfaction.

For example, perhaps you want to improve your team member retention rates and avoid employee turnover. After taking the necessary steps needed for proper employee retention, you can measure how the average tenure has changed since the implementation of certain action items.

Or maybe you’d like to measure the number of tasks your team was able to successfully complete within a 2-week timeframe, you can compare these metrics on a bi-monthly basis. Measurements can be approached through Fibonacci sequence points which provide a realistic way to approach a variety of influencing factors.

Start transformation processes 

Now you’re able to start streamlining how design teams work. Encapsulating the above steps and implementing them might look as follows:

• 1-on-1 meetings: holding one-on-one meetings are a great way for team lead and team members reports to connect individually on pressing issues and develop strong relationships. They also help ensure that employees feel like they’re valued contributors of product teams and that they are working successfully toward goals as well as improving their skill set. One-on-ones should not be used as status updates, rather, they should serve as a platform to give regular feedback and foster career growth and learning new skills.
• Daily standups: whether you call them daily stand-ups or team huddles, the idea is the same. You want your entire team to feel informed and connected. This helps measure progress, highlight necessary areas of improvement or outstanding issues, and where the team stands in terms of work completed. 
• Team building activities: a variety of activities exist to help build morale and spark teamwork. They’re helpful exercises for bringing communication to the forefront and allowing a free flow of product team collaboration and an encouraging the best work atmosphere. Team building helps product managers and employees alike learn more about each other outside of a traditional workplace setting. Your activity might be something fun and engaging like an escape room or a day at the golf course. 

Growth and collaboration are crucial to a team’s success. As outlined in the first pillar of our DesignOps eBook, the well-being of a team of designers should be at the forefront of your management plan. The above steps are simply a few suggestions that can help your team thrive and feel cared for.

Don’t miss out on the power of iterations

Growth isn’t a linear process. Remember to check in with the members of your team on a regular basis. This will help you see what seems to be working and what techniques haven’t quite landed. Allowing you to pivot from there. 

Again, ask your team members for honest feedback. This can be done either during face-to-face meetings or in a survey. Fostering an openly communicative environment is ideal for a well-running design process and product development workflows. Employees that feel noticed ultimately feel valued. Remember to focus on clear points of action, rather than generalities. Drill down to specifics and everyone will be better for it.

If you decide to go the survey route, make sure not to overdo the frequency. Firstly, the time frame in which you’ve gathered data might be too short to draw relevant conclusions. Secondly, you don’t want to ask team members to evaluate your decisions on a frequent basis, as it could come across that you’re unsure of your design leadership capabilities. Be sure of the direction you’re taking as a design lead and your team will appreciate it.

Iterate and experiment with improvements to your team collaboration and design team management methods. Remember: proper design team management is a marathon, not a sprint. Cultivating a good team takes trial and error.

Lead your team to success

The first pillar of design operations deals with the core of a good business: people. If you want to support your people, you need the right tech stack for the job.

UXPin Merge is such technology. It allows your team to bring your devs’ interactive components to the design editor and build prototypes that are easily understood by stakeholders, product managers, and above all else, developers. Bridge communication gap and strengthen the workflow in your organization. Read more about UXPin Merge.

The post How to Manage Design Teams (Effectively)? appeared first on Studio by UXPin.

Design consultants have been around for some time, with companies using external services firms and agencies to take care of their design consulting needs for many years.

But as design change management evolves, and with contemporary design thinking transforming how design teams are integrating their efforts with other departments, design industry roles like these are delivering a range of exciting possibilities and benefits. 

In this article, we shed some light on the growing role that internal design consultants are playing in the industry. We discuss how they’re positively influencing design quality and design team performances.

We explore how internal design consultants are integrating with these teams, unpack the benefits they’re bringing to design quality, and look at the steps involved in setting up an effective internal design consultancy.

How to gain the time necessary to set up and run a design consultancy? Improve your current workflow. One of the ways of doing that is trying out tech that helps you speed up prototyping and design handoff process. UXPin Merge is exactly what you need. Read more about how it helps companies fight front-end debt and develop products that are based on your design system. Explore UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

What is an internal design consultancy? 

Before diving in, let’s explore the design consultancy concept and how these consultants function as in-house organizational problem-solvers whose role is to identify and implement workable digital design solutions.

An internal design consultancy can be defined as a function within a design company which suggests ideas, makes recommendations or audits, and then advises on an existing design system.

From offering observations about the form or functionality of a digital product’s design to the aesthetics and even the marketability of something, an internal design consultancy understands how these features and elements integrate with one another. 

These consultants play several important roles within a design team and offer their expertise, adding value by:

• Helping design team members consider and make the best decisions available
• Keeping the team informed and up to date about potential solutions and alternatives
• Assisting in streamlining work processes and tasks using design frameworks

Monitoring and then improving a team’s overall performance and output by developing an effective design strategy.

A design consultant’s day-to-day actions may include:

• Arranging and hosting design workshops
• Supervising the creation of an organizational design system
• Adding experience and input to design ideation and execution

Internal versus external design consultants

Internal design consultants are almost identical to their external counterparts, though with a much better insight into the design company’s operations and team dynamics. The difference between internal design consultants and external ones lies in their relationship with the client organization.

• Internal design consultants – are hired full-time or on a contract basis by the client organization, reporting directly to them. They work continually for their employer, focusing exclusively on the organization’s in-house product design efforts and forging long-term relationships with the company’s executive and design teams.
• External design consultants – come from design consulting firms and are hired for a short period of time to complete a specified design-related project or task. They are often employed by external consulting and design services, work on projects for different organizations simultaneously, and bring ideas based on their own experience and a broader business perspective. Ideo is a famous innovation consulting firms you might have heard about. This company that’s based in Palo Alto helped many startups with design initiatives.

To sum up, internal design consultants are dedicated solely to your company and usually, participate in long-term projects. While their external counterparts are leased out from agencies and support you in shorter assignments.

What are the advantages of internal design consultants?

1. Ensuring consistency and clarity

Rather than disrupting your product design team’s workflow efforts every time you rope in an external consultant, investing in having an internal design consultancy capacity functioning within your product design efforts means consistency and clarity for everyone.

This may involve having your team follow a design thinking process built around the core pillars of empathizing, defining, ideating, prototyping, and testing. Crucially, internal design consultants are effective at governing change management in design.

Internal design consultants are the perfect candidates for supervising and managing this massively important, though time-consuming, process. By organizing and streamlining efforts to ensure consistency and clarity across the team, change management in design can permeate throughout the organization. 

2. Increasing intellectual capital & problem-solving skills

A design company boasting internal consulting groups within their product design teams can drive cost reduction, enable better design services talent acquisition, accelerate the product development, coming up with strategic design solutions or even brand strategy. This, in turn, promotes the growth and retention of intellectual capital – which can only be earned through internal consulting – allowing employees to gain a better understanding of the company itself. 

As full-time, committed employees working on the front lines, internal design consultants accumulate extensive experience and knowledge of the company’s design architecture. These in-depth insights help other employees improve their problem-solving skills as they interact with the internal design consultants or shift into different line management positions.

3. Promotes design across the organisation

Most design teams struggle to promote design thinking across an organization. An internal design consultant on your payroll means having a design advocate on your team, too. 

Internal design consultants live and breathe design thinking, ensuring that your strategic design ambitions constantly receive the visibility and attention they deserve. They also function as design ambassadors, helping other business stakeholders understand the importance of product design and usability in digital products, for example. 

4. Bridges the communication gap between design and other departments

Many design industry players note how difficult it can be to deconstruct silos within an organization. Design change management demands clear, unambiguous communication, not only between design team members but between different departments as well. 

Internal design consultants who constantly advocate for design change management and design thinking are adept at helping other departments and role players understand how the system can make their work and lives easier. They are skilled at explaining a system’s complexities by filling the gap in communicating a system’s functionality and role in branding strategies to, for example, software developers, who can then better align with design teams. 

These updated processes, however, need more than good communication. They also require the right tools to work. Tech stack like UXPin Merge allow design teams to bridge the gap between UI and UX designers and developers by aligning them with a single source of truth, leading to a more connected working environment and fewer isolated, obstructive silos. 

A great example of how such a tool can help comes from none else but influential design operations guru Dave Malouf’s. In a webinar, he discusses how much such software can help internal design consultants break down organizational silos by leveraging a single source of truth and closing the divide between design teams and departments. 

How to set up an internal design consultancy?

So, you’re looking at adding an internal design consultancy to your design operations? Great. But you’ll need a plan before getting started, and it all begins with adopting and communicating a design thinking philosophy before kicking off your internal design consultancy. 

Step 1: Communicate

Internal design consultancies are still gaining traction in the design industry, and teams are often likely to either be used to having external design consultants reviewing and updating their design systems or have learned to take care of consultancy work themselves. 

Remember, the objective of setting up an in-house design consultancy is to improve team performance, so be sure to communicate and engage with the team beforehand. Make sure they understand why you want to bring an internal consultant into the mix and how having a dedicated consultant will take the design burden off their shoulders, help to solve problems and ensure design thinking consistency. 

Step 2: Define objectives

Without goals, your consultant and team will be shooting in the dark, unsure of the deliverables they’re striving for. The next step involves clearly defining the internal design consultancy objectives early on. 

Some of these consultant objectives may include:

• Helping the marketing team to improve the customer experience via a revised email flow that would bring new business in
• Assisting the customer success team with improving user experience of the account cancellation process
• Putting design mechanisms in place which boost collaboration and communication between design teams and developers, centered around a single source of truth
• Working with the sales department to design a more efficient leads conversion process
• Engaging with employer branding team to schedule more engaging media releases about company updates or helping them revise their social media strategy to showcase good design of their product

Step 3: Start consulting

​​Next, start doing the work. Once you’ve engaged with your design team, clearly defined and communicated the internal design consultancy objectives and found your consultant, start pursuing your mandate. 

Engage with different departments. Confer, observe, and test. Brainstorm with the team, audit and update processes, secure feedback, and report on whether you reached your objectives or not. 

Step 4: Measure and learn

Once you’ve had time to put your efforts in motion, you’ll need to measure, analyze the outcomes, and tweak your efforts. Solicit feedback from your team, look at the data and identify any shortfalls in the process you can look to improve. If you spot any mistakes, use them to learn and adapt your design strategy. 

Once completed, you’ll need to take your measured results and compare them to your stated objectives established at the outset. If you’ve reached them, continue to consult and refine. If not, go back and start again. 

Create top design consultancy with our tips

As the needs of design teams evolve and become more complex, design companies and organisations are finding that the benefits and possibilities of hiring, training and developing in-house design consultants outweigh the need to bring in external ones.

Think of internal design consultants as sports team captains roped in for a new season to steady the ship and guide the team to new heights. Their job is to improve performance and to get the most out of their “players”.

Internal design consultants are already showing how important they are to design services and will soon become key drivers of design thinking in workplaces everywhere. They ensure consistency in the product design process and help close the gap between what designers are aiming for and how developers understand the need for design systems. 

Improve your productivity

Internal design consultants are the perfect design thinking advocates and, armed with design tools like UXPin, can now get the most out of their design teams and increase their productivity.

UXPin offers a technology called Merge, which helps to build prototypes with the exact building blocks of your digital product – functional UI components. In effect, the design handoff is much smoother. Devs know exactly what they need to build. They can copy the code behind the design elements and use it in their process. The outcome? A greater transparency between design and development and more clarity across the company.

The post Design & Consultancy – How Internal Consulting Can Benefit Your Team appeared first on Studio by UXPin.

The BASIC UX framework is as simple as its name suggests. Designers measure a product against a set of UX principles to identify usability issues. These principles apply to web design, mobile apps, and other digital products.

What makes BASIC UX great is it’s a checklist template design teams can adopt and adapt to meet their product requirements and user needs. It’s a holistic product development approach that accounts for usability and accessibility.

Design products your customers will love with the world’s most advanced interactive design and prototyping tool. Sign up for a free trial and start designing better user experiences for your customers with UXPin.

What is the BASIC UX Framework?

BASIC UX is an acronym describing five essential user experience design principles for building “usable products.” It’s unclear who developed the framework, but it surfaced around 2016.

There is a BASIC UX website, but there is no mention of any person or affiliations. It’s a bit like bitcoin and Satoshi Nakamoto. Still, BASIC UX works as a checklist for evaluating user experience in digital products.

“BASIC UX is a set of common principles that test something’s overall user experience. The problem that this framework is attempting to address is the need for common UX language and understanding in teams and organizations.” – BASIC UX website.

The purpose of BASIC UX is for product design teams to ask themselves a series of questions related to each principle–similar to the 5 Whys problem-solving framework. If designers can answer yes, they move on; if no, they must find a solution.

The BASIC UX Framework’s 5 UX Principles

The BASIC UX framework uses five UX principles.

1. B = Beauty
2. A = Accessible
3. S = Simplicity
4. I = Intuitiveness
5. C = Consistency

Within each principle are a series of questions. These are questions from the BASIC UX framework, but design teams can add questions or create a checklist relevant to their product.

Beauty

Beauty represents aesthetically-pleasing design. Human beings are drawn to beauty in all facets of life, including the websites and applications we use.

Visual design is not the only consideration for beauty in BASIC UX; it includes interaction design, animations, information architecture, and other elements that deliver a holistic user experience.

Questions to ask for beauty:

• Is it aesthetically pleasing?
• Does it follow the style guide?
• Does the design use high-quality media (images, graphics, video, etc.)?
• Is it properly aligned with the layout?

Accessible

Accessibility is a vital UX design component. Designs must meet Web Content Accessibility Guidelines (WCAG) to ensure a digital product or website is accessible to all users, including those with disabilities.

Products built to accommodate people with disabilities and assistive technologies are often easier to use, which ultimately benefits everyone.

BASIC UX asks four fundamental questions, but an accessibility checklist can guide design teams in evaluating a product comprehensively.

Questions to ask for accessible:

• Does it conform to (WCAG) standards?
• Is it cross-browser and cross-device compatible?
• Is it responsive?
• Does it use language everyone can understand?

Simplicity

We design products to make people’s lives easier. Simplicity is key to delivering that promise to users. Providing users with clean, minimal user interfaces with only the content needed to complete the desired task is critical for good UX.

Cluttered UI design, with multiple CTAs, poor instructions, and too much copy, increase cognitive load, making it difficult for users to make choices or complete tasks. Simplicity eliminates unnecessary design elements and only provides users with what they need.

Designers must conduct thorough UX research and user testing to identify these needs and build features and experiences accordingly.

Questions to ask for simplicity:

• Does it reduce the user’s workload?
• Is it free of clutter and repetition?
• Is it necessary?

Intuitiveness

Users expect an intuitive user experience. It’s why designers use internationally recognized design patterns for solving core usability issues and prioritize content to meet user needs.

Designers must reduce learning and ensure the user never has to relearn a product after new releases and upgrades. Documentation must help users understand a product and how to complete tasks.

Questions to ask for intuitiveness:

• Is the functionality clear?
• Is the navigation obvious?
• Can the user achieve their goal with little or no initial instructions?
• Is this the fastest way for the user to complete this task?
• Can a user predict the outcome?

Consistency

Consistency is the foundation for usability and good design. The more consistent a product, the easier it is to predict and use. In a Medium article on BASIC UX, Dan Smith writes:

“Consistency is the thread that holds BASIC UX together. A beautiful product is consistent. An accessible product is consistent. A simple product is consistent. An intuitive product is consistent.”

Designers must always try to reuse components and UI elements wherever possible. Copy, CTA labels, and other text must also use consistent language, fonts, spacing, and sizing.

Building a design system is essential for eliminating inconsistencies, reducing UX debt, improving user experience, reducing time-to-market, and other common product development issues.

Questions to ask for consistency:

• Does it use existing UI patterns?
• Does it appear in the correct place at the right time?
• Are the language, media, and branding consistent with the system?
• Does it perform tasks and functionings consistently every time?

How to use the BASIC UX Framework

BASIC UX is an excellent framework for evaluating existing rather than new products. Designers can use BASIC as a user experience checklist to check if features, UI components, interactions, etc., meet a company’s UX requirements.

BASIC UX is also beneficial as a before and after comparison for projects. Design teams can use the checklist to check they deliver a project that improves upon any issues identified in the initial BASIC evaluation.

Enhance BASIC UX Principles With UXPin

UXPin is an advanced code-based design tool enabling designers to go beyond basic prototyping and testing. With code-based design, you can build fully functioning forms, validate passwords, create personalized, dynamic user experiences, and acquire meaningful feedback from usability testing and stakeholders.

UXPin also features built-in accessibility, including a color blindness simulator and contrast checker so designers can check their user interfaces on the fly without leaving the canvas.

Maintain consistency with UXPin’s Design Systems. Save your product’s components to a centralized design system that every team member can access from the canvas. Add descriptions for documentation and set permissions to prevent unauthorized changes.

Discover how UXPin can revolutionize your UX design process to deliver products that meet BASIC UX requirements while satisfying business goals. Sign up for a free trial to explore all of UXPin’s advanced features.

The post BASIC UX Framework – Definition, Benefits, and Application appeared first on Studio by UXPin.

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

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

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

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

What Most Teams do to Win Design System Buy-In

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

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

Run a Design Audit

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

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

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

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

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

Build a UI Library With UI patterns

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

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

First Attempts at Building a Component Library

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

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

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

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

Rethinking the Approach

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

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

The product team decided to do another series of audits. They took screenshots of design handoff vs. production, which revealed many inconsistencies, including missing content and UI elements. These audits showed that Delivery Hero was collecting debt with every release.

Building a Convincing Case for Delivery Hero’s Design System

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

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

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

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

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

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

Marshmallow includes:

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

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

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

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

Start with a real pain point

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

Build the value proposition

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

Identify your biggest supporters and sponsor

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

Show before you tell

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

Talk business metrics

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

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

Don’t go alone – build your network

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

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

Code-Based Design Systems With UXPin

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

The post 11 Powerful Lessons on Building and Scaling an Enterprise Design System appeared first on Studio by UXPin.

In May 2022, UXPin hosted Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat), for a webinar titled: Enterprise Design System – How to Build and Scale. This article covers the second half of Amber’s talk, which focuses on Delivery Hero’s design system adoption strategy. You can find a summary on our blog.

“The success of a design system hinges on its adoption. Until you have users using your product, it’s not successful.” – Amber Jabeen.

Achieve greater design system adoption, consistency, and cohesion with UXPin Merge. Sync your design system’s component library to UXPin’s design editor to create a single source of truth across the organization. Request access and experience Merge technology today.

Delivery Hero’s Three-Component Adoption Strategy

After trying many initiatives, Amber and her team developed a three-component design system adoption strategy for Delivery Hero:

• Gamify
• Socialize
• Celebrate

A “Consistently Delightful” Vision

Amber’s team recognized that they had to treat their design system like any other product to increase adoption. The first step was defining a vision–a Northstar to guide their strategies.

Using input from stakeholders and team members, the team came up with: “Deliver a consistently delightful user experience across all platforms.” 

The design system team emphasized consistently delightful to highlight the vision’s motto and principles.

Consistently (motto):

“Always…without exceptions. Don’t make me think.” The idea is that design consistency creates a more intuitive user experience where users don’t need to learn the UI or its features.

Delightful (principles):

• talabat cares: Product experiences must show we care about our users–both design system users and the product’s end-users
• Made for me: A personalized experience
• Fast: As a delivery company, they want to deliver fast
• Simple: Intuitive user interfaces
• Fun: An enjoyable user experience

With a clear vision, Delivery Hero’s design system team developed its three-component adoption strategy.

Component One – Gamify

One of the team’s successful strategies was gamification. They realized to adopt the new design system; many team members would have to abandon their existing templates and start from scratch. So, Delivery Hero’s gamification strategy made switching to the design system fun and competitive.

Adoption Tiers

The design system team designed gamified adoption tiers aligned with the system’s vision. The aim was to get team members to start small and scale their usage. Once they completed a “level,” the DS team encouraged users to pursue the next target–as you would in a video game.

• Bronze: Foundations (design tokens)
• Silver: Consistent and cohesive (components)
• Gold: Delightful experience (voice & tone, microinteractions, haptics, transitions)
• Platinum: Premium experience (motion, dark theme, voice UI)

The team created a poster of the design system’s tiers and associated UI patterns and posted them around workspaces to remind people of the “game” and its “levels.”

Design System Dashboard

It was important for team members to visualize their progress to know what they had to do to progress. The DS team created a Discovery Squad dashboard to visualize the user’s adoption and progress towards the next tier.

Component Two – Socialize

The second component of the design system’s strategy was “socializing the design system with community-driven initiatives to keep people invested and interested.”

You’ll notice a consistent theme of fun and inclusion with Delivery Hero’s socialize initiatives, which aligns with the design system’s vision.

Design system naming competition

Amber’s team invited everyone to take part in naming Delivery Hero’s design system. They sent out a company-wide mailer asking team members to submit names.

They narrowed the options down to two and voted for the “Marshmallow Design System.” Delivery Hero employees feel a sense of ownership for Marshmallow because they were part of the naming process.

The strategy was a success for the design system team because they immediately had team members invested and engaged.

Marshmallow’s avatar, hashtag, and emoji

To solidify Marshmallow’s identity and raise further awareness, the DS team created an avatar, hashtag, and emoji, which they use across internal communications.

Open design system showcase event

The team hosted events to engage with users and asked questions to encourage live feedback and discussions:

• How are we [design system team] doing?
• How do you find working with the design system?

The aim was to gather new insights and ideas from users to improve the design system. When people feel they’re being heard and see their contributions added to the design system, they take ownership and become advocates, ultimately leading to further adoption.

They even served marshmallows to team members to keep events lighthearted and fun.

Feedback surveys

The DS team used surveys to engage further and gather feedback about different parts of the design system.

Design system guild

The Marshmallow Design System Guild included team members across Delivery Hero’s brands to discuss challenges and share ideas. The aim is to learn from each other and grow the Marshmallow community.

Newsletter

A Marshmallow email newsletter helped the design system team share updates and information with users while keeping stakeholders informed and part of the conversation.

Component Three – Celebrate

In her talk, Amber says celebrating process is the most important adoption strategy component. The Marshmallow team acknowledges and celebrates every small win as a symbol of progress towards 100% adoption.

“We celebrated our small wins, which led us to really big wins.” – Amber Jabeen.

The team was “very good at celebrating,” as Amber puts it. When they reached an important milestone, like completing 70% of Marshmallow’s design language, they celebrated. They gave acknowledgments for various achievements across company channels. They used photos and videos to share celebratory moments across the organization.

Amber notes in her presentation:

• We celebrated adoption tiers for each of our squads in monthly newsletters, All Hands, Slack channels, etc.
• Celebrating adoption tiers motivated teams to keep making progress towards bigger goals and encouraged contribution.
• The next step is to start rewarding contributions to the design system. For example, making it part of the organization’s performance reviews would encourage adoption and contributions.

“You can build a design system, but you can’t scale it without a healthy dose of organic contributions. A great way to do that is by rewarding people who contribute to the system.” – Amber Jabeen.

Showing Impact

Marshmallow’s team measured growth and used graphs to present the results to team members and stakeholders. Some of the DS team’s key wins include:

• Marshmallow reduced design debt by approx. 20% month over month. The DS team was able to measure this impact from their initial experiments. Read about getting buy-in for Delivery Hero’s design system here.
• By designing 80% of the product’s component library, the DS team left room for creativity and new components. Marshmallow’s component library reduced front-end effort by approx. 40% in new features.
• Component adoption = consistent and coherent experience. Developers reach out to the Marshmallow team when they notice a component not in the library, asking for advice, which drives conversations around scaling the design system.

Marshmallow’s Successful Strategies

• It takes a tribe to build and run a design system. Build cross-functional partnerships. Even with a dedicated design system team, you can only achieve success with help and advocacy from stakeholders, leaders, and team members.
• A sustainable adoption strategy is community-driven. When you want to scale a design system, find ways to include the organization by designing strategies that rally everyone around its growth and success. Always be available. Reach out to team members. Deliver five-star service to your design system users.
• Give recognition and celebrate small wins. As we outline in “Component Three,” celebrating small wins leads to bigger wins and wider adoption. People like to be recognized, so celebrate and encourage progress.
• Quantify success and communicate 360. Base success on your value proposition and what you set out to achieve. Use metrics to showcase progress towards achieving your design system’s goals. Communicate this progress 360 degrees to everyone in the organization, including stakeholders, partners, sponsors, team members, etc.
• Rinse and repeat! Amber says it’s crucial to find what works and repeat this strategy to scale adoption across the organization.

Watch Amber Jabeen’s talk, “Enterprise Design System – How to Build and Scale,” for the complete story about Delivery Hero’s journey to creating the Marshmallow Design System.

Scaling a Design System With UXPin Merge

As we’ve learned from Delivery Hero’s story, scaling a design system and achieving organization-wide adoption is a challenge.

The DS team must encourage designers to use a UI kit and engineers to use a component library. No matter how good your design system is, designers and engineers still speak different languages.

With UXPin Merge, designers and engineers use the exact same component library. Merge syncs components from a repository to UXPin’s editor, giving design teams the same interactive code components to build prototypes as engineers use for the final product. 

The design system team can program each component’s props (or Args for our Storybook integration), including interactions, so designers only have to focus on building products. An easier workflow and less work mean greater enjoyment and wider adoption.

Find out how to scale your design system while enhancing cross-functional collaboration with the world’s most advanced code-based design tool. Request access to Merge.

The post Adopting Design System with Delivery Hero (talabat) appeared first on Studio by UXPin.

FinTech is a challenging industry for any discipline, but especially so for UX designers. FinTech design requires designers to study financial regulations, which could differ between states and countries. These financial regulations are often detailed and extensive, meaning lots of reading before designers can even begin a project.

This article explores the basics of FinTech product design, including best practices to ensure your products are user-friendly, compliant, and provide maximum value to your customers.

Whether you’re a FinTech startup designing a cryptocurrency product or an established multinational looking to revolutionize its mobile banking app, UXPin provides a technology that allows you to design prototypes with interactive components that come from your design system. Find out more about it.

Reach a new level of prototyping

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

Discover UXPin Merge

What is FinTech?

FinTech (Financial Technology) describes a market sector that produces financial technology products and services. These financial products include applications, APIs, or even algorithms that seek to innovate and improve the industry.

What are examples of FinTech?

Here are some FinTech examples:

• Digital banking (also called Neobanks): Monzo (UK), Chime (US)
• Digital wallets: Payoneer, Skrill, Revolut
• Payment services: PayPal, Venmo, Cash App, Stripe
• Investment services: Robinhood, Betterment
• Crypto products: Coinbase, Ripple

Check out Insider Intelligence’s article on FinTech startups for more FinTech examples.

Fintech UX Design Challenges

1. The Challenge of Compliance

Regulatory compliance is one of the biggest FinTech design challenges. If you’re designing a product for multiple countries or a global audience, your designs might change for each market to comply with different laws.

For example, regulations like Anti-Money Laundering (AML) and Know Your Customer (KYC) have detailed protocols which impact onboarding and user flows. These regulations add extra layers of complexity relating to user identification, privacy, fraud prevention, accessibility, and even terrorism, to name a few.

To complicate things further, states and countries update these laws or introduce new ones regularly, meaning UX researchers and designers must revise designs to maintain compliance–which could disrupt the product roadmap or UX strategy.

2. Meeting Customer Expectations

Aside from regulation, user experience designers also have to overcome customer expectations from legacy banking and financial services. For example, many neobanks don’t have physical branches for customers, so the app must provide tools and features that replicate the in-person experience.

3. Embracing Product Complexity

Another challenge for FinTech design is the product complexity and how UX designers create a cohesive ecosystem. Something Forbes refers to as a “switch from fragmentation to ecosystem.”

Traditional banking and financial providers have different departments working on each product—for example, credit, cheque, savings, mortgage, loans, etc. Design teams risk designing fragmented products rather than a holistic ecosystem with a seamless customer experience without proper communication and collaboration.

4. Security Protocols

FinTech security protocols impact UX workflows and how designers conduct, share, store, and analyze research. UX teams must comply with various security protocols, like ISO-27001 and ISO-27002.

UX designers must also encourage users to adopt safe practices, like secure passwords, not sharing OTPs (One Time Pins), or being cautious with text and email links.

8 FinTech App Design Tips

1. Clean UI Design

Clean, minimal UIs are essential for any digital product, but more so for FinTech designs which must often make space for disclaimers, policy links, and other required information. 

Progressive disclosure is a popular strategy for designing complex FinTech UIs. UX designers only display critical and required content to users with additional information “hidden” behind tooltips, dropdowns, accordions, modals, and other UX patterns.

Using a progressive disclosure approach helps designers create clean UIs while providing users with content when they need it.

2. Clear and Simple Language

Financial products and services are notoriously difficult to understand, with terms and conditions too long and complicated for most people to comprehend.

Simplifying language and providing users with clear expectations are crucial for FinTech product design. It also helps build trust with users who may not understand financial jargon or the implications.

For example, a credit application could affect a user’s credit score. UX designers must explain this and other critical information within the constraints of a mobile screen, usually in a few bullet points.

3. Accessibility

Accessibility is essential for any digital product, but it’s especially crucial for FinTech designs. In countries like Norway and Australia, products must meet Web Content Accessibility Guidelines (WCAG) 2.0 level AA standard. 

This article from PowerMapper provides a list of countries and their relevant accessibility requirements.

4. Helpful Visualizations

Visualizing data helps users digest and understand information quicker. UX designers can also use colors to separate figures, like income vs. outgoings.

5. Use Appropriate Keypads

Completing forms on a mobile device requires users to switch between numbers, letters, and special characters. FinTech forms are typically longer than other digital products, with more fields for users to complete.

UX designers can streamline this process by telling mobile devices which keypad to use, including:

• Number-first keypad
• Date picker
• Email field (ensures @ and .com appear on default)

6. Use Descriptive, Helpful CTAs

There must be no misunderstanding about what will happen when a user clicks a CTA. For example, if someone is completing a loan application, the form’s CTA must “Apply” rather than the usual “Submit” or “Send.”

7. Help, Don’t Hinder

Sadly it’s still common to see digital products hiding features that allow customers to cancel or downgrade a service. UX designers must always seek to help users complete tasks, including those that would enable customers to end a subscription or opt-out.

There might be clear guidelines for opting out of paid services in some jurisdictions, so always ensure your designs meet regulations and best practices.

8. Optimize for Mobile

Many users (especially under 30s) want to complete tasks on their mobile, either through a mobile application or browser. If your FinTech product doesn’t have a mobile application, ensure the website/web app is optimized for mobile users, providing the same experience as desktop.

If you have a mobile application, make sure users can complete the same tasks as they would using a desktop. Many products limit what users can do via a mobile app which can cause frustration or have negative implications–like not being able to downgrade a service or canceling a recurring payment.

Overcoming Common FinTech Usability Challenges

Here are some common FinTech UX scenarios and how to overcome them. We’ve taken these examples from Google’s UX Playbook for Finance.

Educating & Converting Users

One of the challenges designers face is educating users about complex financial products while getting them to convert. Here are some recommendations for a typical mobile onboarding flow:

• Use bullet points to summarize your offering and regulatory information
• Keep value proposition above the fold with CTA to reduce scrolling and increase the likelihood of conversion
• Reiterate value proposition at the top of onboarding forms
• Include social proof (TrustPilot widget) to build credibility and trust
• Use clear CTAs, i.e., “Sign up and Get Quotations.”
• Prefill form fields when an existing user applies for a new product or service
• Use progress bars to show users where they are in the process

Displaying Large Amounts of Data

FinTech products often have to display lots of data on a single screen, especially challenging on mobile devices with limited real estate. Here are some recommendations to help maximize space and reduce cognitive load:

• Ensure primary CTAs standout with descriptive labels
• Use outline/ghost buttons for secondary CTAs
• Use color and consistent spacing to separate content
• Create a clear distinction between headings and body copy
• Use an easy-to-read, legible typeface
• Hide secondary content behind carousels, accordions, and tooltips

Streamlining Long Forms

FinTech products often have to collect a lot of personal information to comply with legislation. These forms can take a long time and could appear overwhelming to users. Here are some tips to streamline long forms:

• Tell users how long you predict it will take to complete the form at the beginning to manage expectations.
• Divide your form into sections and separate these into steps (make sure users can easily navigate forward and backward at all times).
• Use progress indicators to show how much users must still complete.
• Only ask for the information required to complete the application. Avoid redundant fields like the person’s title, gender, and race that aren’t irrelevant to financial institutions.
• Don’t use dropdown menus for fewer than three options. A radio or checkbox makes for quicker selection.
• Allow users to save progress to return when they have time.
• Use numeric keypads for appropriate fields (date of birth, contact numbers, US zip codes, credit card numbers, etc.)
• Provide helpful placeholders and error messages to guide users. Error messages must have clear, actionable instructions for users to fix the problem.

Build Products 8X Faster With UXPin Merge

Merge is a design technology that allows orgs to sync a component library to UXPin’s editor, so designers can build prototypes using fully functioning coded UI elements that developers use to at the production stage.

Curious to see how UXPin Merge could revolutionize the workflows of your business? Learn more about Merge and see how you can get started with it.

The post Fintech Design – A Compilation of the Best UX Tips for Product Designers appeared first on Studio by UXPin.

Erica Rider (UX Lead EPX @ PayPal) and PayPal are no strangers to UXPin. Erica has been very vocal in her praise for UXPin Merge over the years and how the technology revolutionized PayPal’s internal product development process.

At Design Value Conference 2022, Erica talks about PayPal’s DesignOps 2.0, a new framework for scaling design at the digital payment giant.

UXPin Merge played a crucial role in helping PayPal develop its new product development workflow. Request access to UXPin Merge and explore UXPin Merge and discover how code-based design can revolutionize your end-to-end design process. Sign up for a free trial and give UXPin Merge a try by designing with code components via our integration with MUI library.

Traditional DesignOps vs. DesignOps 2.0

With only five UX designers, including herself, Erica realized that a traditional DesignOps model wouldn’t fit PayPal’s needs. DesignOps’ principles work well for large design orgs but wouldn’t suit a 5-person team.

With more than one thousand engineers, DesignOps at PayPal had to incorporate design and development in a streamlined end-to-end product development workflow.

DesignOps 2.0 had to:

• Provide users a consistent and predictable user experience across all tools
• Enable product teams to successfully deliver useful and usable products
• Scale design significantly as efficiently as possible without adding new designers

After trying several popular enterprise design solutions, Erica and her team realized they had to create a hybrid DesignOps/DevOps framework. Instead of creating DesignOps, Erica and her team operationalized design within DevOps.

Evolution of Responsibilities

Erica realized one of the keys to realizing her vision was shifting the user experience responsibility from UX to the rest of the organization. Incorporating design into DevOps meant that product and engineering teams had to deliver products with a “good user experience.”

Product Teams

Product teams had to take on some UX responsibilities, including:

• Deliver products with a good user experience
• Conduct user research in collaboration with the UX team
• Design prototypes with guidance from the UX team

UX Teams

UX designers evolved from designers to visionaries and mentors. The department’s responsibilities changed to include:

Enable “Self-Service UX” for product teams

• Design and research tools easy for PD teams to learn and use

Provide mentorship and guidance to PD teams

• Team teams design thinking, user-centered design
• Help teams understand their place in the platform

Design solutions at a platform level

• Services that can be shared or are needed by most products

Solve big UX problems

• How to establish trust between users and the platform
• Build real-time user research analytics to collect both quantitive and qualitative user data directly in the platform

Educating Engineering Teams About User Experience

Erica had to shift engineers’ thinking of user experience as aesthetically-pleasing UI to problems that cause bottlenecks and roadblocks.

She created a product development workflow to demonstrate the user experience from an engineer’s perspective:

• Failed build–don’t know why? = poor user experience for engineers
• API contract changed–didn’t know that changed; who do I talk to? = poor user experience for engineers

Erica also discussed several user experience issues with product and engineering teams, including:

• Latency: If you click a button and it takes too long to load, that’s a poor user experience.
• Availability: If a URL doesn’t load, that’s a poor user experience.
• Security: If someone hacks my account, that’s a really bad user experience!
• Error messages that are not “human-readable” or have no way for the user to resolve them: “Error Code 1578-B1273 – FAILED!” Why are you showing this message to users without telling them what it means or how to fix it? Another poor user experience.

Erica used these examples to educate engineering teams about user experience as a full-stack problem. UX cares about these engineering issues, latency, availability, security, etc., because these all impact the user experience.

Evolving PayPal’s DesignOps 2.0 Process

When Erica introduced DesignOps 2.0 in 2019, it was to scale design and make work easier for a small design team.

Now that the process is operational, Erica and her team are looking at optimizing DesignOps 2.0 for product teams to deliver better products rather than a system to reduce designer workload.

Erica is working on a system to operationalize user research. The “Getting to DesignOps 2.0” roadmap still has three critical user research components to complete:

• Developing an understanding of the user
• Measure the success of UX
• Holding PD teams accountable

Accountability is one of Erica’s biggest challenges to overcome. Most companies have a significant control/accountability imbalance:

• UX designers have zero control over UX delivered to users but 100% accountability.
• Engineers have zero accountability for UX delivered to users but 100% control.

To deliver a great product with a good user experience, Erica believes designers and engineers must have balanced control and accountability. The UX team works with engineers to deliver a good user experience at PayPal, but the engineers are accountable for the final product.

Measuring the Success of UX

Erica and her team developed a wizard tool that automatically tracks user behavior and success rates during the product development process. This tool allows the UX team to track and identify issues.

Continuous & automatic collection of user metrics:

• Developers do not need to code anything special
• Automatically feed data for every instance of the wizard component to PayPal’s dashboards

Tracking time-to-complete and drop off rates:

• Total time to complete the workflow
• Time to complete each step
• Total drop off percentage
• Step with the highest drop off rate (used to identify step-specific issues)

Real-time qualitative data with strategic interrupts:

• Trigger interrupts when users are having trouble
• Only when a user meets the criteria

Baseline and benchmark analysis built-in:

• Is your time to complete going up or down?
• Is your drop-off rate improving?

We recommend watching Erica Rider’s 30-minute Design Value Conference talk for an in-depth explanation and context of PayPal’s DesignOps 2.0.

UXPin Merge Scaled Design in Erica’s Team

UXPin Merge played a pivotal role in helping Erica achieve her vision for PayPal’s new product development system.

Merge allowed Erica to empower product teams to build fully functioning prototypes without endless documentation and training–an impossible feat for a small UX team!

PayPal syncs 63 React prototyping components from a repository to UXPin’s design editor, so product and engineering teams use exactly the same UI elements–a single source of truth across the organization.

Working with engineers, Erica used React component props to set constraints and allow design flexibility. These constraints enable PayPal’s product teams to deliver consistent quality across its 100+ internal products.

If UXPin Merge can scale design for an enterprise organization with five designers and 1,000+ engineers, imagine what it could do for you! 

Sign up for a free trial to give a UXPin Merge a try by prototyping with an MUI library’s components synced to UXPin. Request an access to see full possibilities of designing with code components.

The post DesignOps Beyond Design Team at PayPal: How to Work with Engineers? appeared first on Studio by UXPin.

At UXPin’s first annual Design Value Conference in March 2022, we hosted five design industry leaders to understand Design and DesignOps at some of the world’s biggest organizations.

This article summarizes everything we covered at the Design Value Conference 2022, with links to a synopsis of each talk and the 30-minute video.

Design Value Conference 2022 was sponsored by UXPin Merge–the world’s most advanced collaborative prototyping tool. Sign up for a free trial.

UXPin CEO Yuga Koda on Merge Component Manager

To kick off Design Value Conference 2022, UXPin CEO Yuga Koda announced UXPin’s latest offering, Merge Component Manager–a new way to sync your component library with less reliance on engineers.

Merge in its current form requires some help from engineers to prepare a component library and repo to sync with UXPin. Merge Component Manager is a code-free way to import your components.

Merge Component Manager allows you to configure your components without dev’s help. The codeless process allows designers to set up and manage component properties within UXPin, giving them the power of coded interactions when building prototypes.

Design Value Conference 2022 Talk: Maggie Dieringer, Uber Eats

Maggie Dieringer, Senior Design Program Manager (DPM) at Uber, shared some valuable insights about DesignOps at Uber. 

Having worked with various Uber products, Maggie provided examples of how she tackled DesignOps with multiple team sizes and all stages of maturity.

Here are the key takeaways from Maggie’s talk. 

Framing and Scaling

Maggie’s framing and scaling process to determine where DPMs should spend their time to have the most impact. Maggie uses three framing factors to get an accurate picture of the org and make informed decisions:

• Size & State of the Design Org
• Design Team Resourcing
• Level of Partnership

Increase DPM Impact

With a clear understanding of the org and its problems, Maggie chooses a suitable “level of engagement.” DPMs are more hands-on when zoomed in, working with teams on day-to-day tasks. When zoomed out, DPMs focus more on advocating, strategy, and planning.

Support DPM Trajectory

Lastly, Maggie creates a DesignOps roadmap with long-term goals. Using the framing exercise, Maggie wants to answer three crucial trajectory questions:

• Where are you today?
• Where do you want to be?
• Where does your team want to be?

Design Value Conference 2022 Talk: Salome Mortazavi, Sirius XM

Salomé Mortazavi, Director of DesignOps at SiriusXM, talks about using frameworks to create a DesignOps roadmap.

Salomé’s work with SiriusXM and many Fortune 500 organizations has given her valuable knowledge and experience, which she shares in her talk.

Here are the key takeaways from Salomé’s talk.

Advice for Beginners

One of the common mistakes beginner DesignOps practitioners make is being “yes” people. They take on too many day-to-day operations instead of focusing on the bigger picture.

When starting, Salomé has three recommendations to overcome this:

• Find value: Look for areas where you can add the most value
• Efficiency vs. Efficacy: Start by framing problems using the right metrics to identify a baseline
• Listen and Take Notes: Rather than jumping in and making the changes you think the org needs, interview team members to understand their challenges

DesignOps Framework: Design Maturity Index

Salomé uses the Design Maturity Index to identify themes and problems, separating them into two “buckets:”

1. DesignOps (Design Org Ops)
2. Design Leadership/Design Team/Product (Design Practice Ops)

Salomé uses a menu tool to assign and categorize these themes and problems accordingly.

Creating a DesignOps Roadmap

With her problems defined and assigned, Salomé outlines a DesignOps roadmap with three time horizons and several categories. Salomé uses the Build, Measure, Learn methodology to implement and evolve her roadmap.

Read the full recap of Salomé’s talk on our blog.

Design Value Conference 2022 Talk: Erica Rider, PayPal

Erica Rider, UX Lead EPX @ PayPal, talks about how she revised the traditional DesignOps model to scale design and transferred UX responsibilities across the organization.

Traditional DesignOps vs. DesignOps 2.0

Erica’s DesignOps strategy had to scale design practices, not the Design Department. To do this, Erica created a hybrid DesignOps/DevOps framework. Instead of creating DesignOps, Erica and her team operationalized design within DevOps.

Evolution of Responsibilities

For this hybrid system to work, Erica had to empower product teams to design, prototype, and test while educating product managers and engineers about the importance of user experience.

Evolving PayPal’s DesignOps 2.0 Process

Having worked with DesignOps 2.0 since 2019, Erica and her team are working on evolving the process for product teams to deliver better products.

Erica is working on a system to operationalize user research. They’re also creating a balance of control/accountability so that Product, Design, and Engineering share UX responsibilities in PayPal’s hybrid operational model.

PayPal’s UX team uses a user experience wizard tool to measure and evolve this next iteration of DesignOps 2.0.

Erica Rider used UXPin Merge as the foundation for PayPal’s DesignOps 2.0. Sign up for a free trial to discover how Merge can help scale your design operations.

Design Value Conference 2022 Talk: Omkar Chandgadkar, Amazon

Omkar Chandgadkar, a Senior UX Designer at Amazon Alexa Smart Home, discusses overcoming common design challenges using his two frameworks. 

Omkar developed these frameworks from experience at tech giants IBM and Amazon to move from a tactical (or what Omkar calls “designing a plane while flying it”) to a strategic approach by being proactive.

Common Design Team Challenges

Omkar outlines three common challenges design teams experience at large organizations. In short, design teams often find themselves playing catch-up rather than working on long-term strategies.

Omkar uses two frameworks to overcome this catch-up conundrum.

Framework One: Omkar’s Connecting the Dots Map

Connecting the dots is about aligning Product, Design, and Engineering activities and frameworks to improve communication and collaboration throughout the software development process. 

The aim of connecting the dots map will help you identify how your orgs make decisions and how these decisions are interdependent. DesignOps can then implement strategies to align Design with the rest of the organization for more streamlined product delivery.

Framework Two: Omkar’s Design Offerings

Omkar’s proactive Design Offerings strategy is a process of creating products that DesignOps markets Product Managers for their projects.

These products streamline project intake and provide design teams with actionable first steps. DesignOps practitioners can use the Design Offerings framework for new projects or work through a product backlog.

How to Use Omkar’s Frameworks?

Connecting the Dots Map:

• As a reference to navigate projects and create project plans
• As a mechanism to identify gaps in previously made decisions

Design Offerings:

• As a vehicle to educate partners about how they can benefit from design
• As an intake mechanism to balance tactical and strategic projects

Build Fully Interactive Components in UXPin

Use UXPin to create prototypes that are interactive by utilizing features, such as States, Variables, or Conditions. See how easy it is to use and how fast you can prototype with it.

The post Design Value Conference Recap – How Top Leaders Tackle DesignOps Challenges appeared first on Studio by UXPin.

UX engineers play a crucial role in modern software development teams. These tech generalists have the skills and language to enhance collaboration between design and development.

Key takeaways:

• A UX engineer is hybrid role that connects design with development skills. They know how to code but they also know a lot about designing user-friendly interfaces.
• UX engineers often work on cross-functional teams, providing clarity and support between designers and engineers.
• There are a few paths of becoming a UX engineer, depending on the expertise they want to have.

Build interactive and user-friendly interfaces in seconds. Bring coded components to our design editor and assemble layouts that are production-ready from the start. 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 a UX Engineer?

A UX engineer (user experience engineer), also called a UI engineer or UI or UX engineer, is a hybrid UX designer-developer position. They’re generally front-end developers who understand design thinking and design principles.

UX engineers work with design teams, engineering teams, or somewhere between, acting as a bridge between design and development. They usually specialize in front-end development building and optimizing UI elements like layouts, buttons, links, and other interactive components.

UX engineers often work with design systems–transforming static design elements into interactive code components.

UX Engineer’s Skills & Responsibilities

In UX Engineers: What We Are, UX engineer Briley Sandlin uses a graphic to represent a UX engineer’s responsibilities.

UX Designer:

• UX research
• Asset creation and management
• Wireframing

UX Engineer/UX Designer overlap:

• Ideation
• Design testing
• Redesigning

UX Engineer:

• Prototyping
• UI component development
• UI maintenance
• Styling architecture

UX Engineer/Front-End Engineer Overlap:

• Implementation
• Technical feasibility
• Backlog management

Front-End Engineer:

• Performance
• Query architecture
• Search engine optimization

UX engineers must be highly competent at front-end programming with knowledge and understanding of design processes and principles. Here is a walkthrough of how a UI/UX engineer’s skills and responsibilities fit in the software development process.

Does UX Engineer Need Code?

Yes, UX engineers must know how to code. At a bare minimum, they must be highly competent with primary front-end programming languages like HTML, CSS, and Javascript.

Front-end Development – HTML, CSS, Javascript

A UX engineer’s primary role is front-end development. Like any front-end development, they must be highly competent and experienced with HTML, CSS, and Javascript. 

Depending on the product, some companies might require experience with a specific front-end framework like React, Angular, Vue, etc.

Package Managers

Depending on the programming language, UI/UX engineers must know how to work with package managers like NPM or Yarn used with Node.js projects.

Version Control (Git)

Front-end development is ever-changing and evolving. UX engineers use version control systems like Git to manage changes and updates. Version control also allows UX engineers to work on a project simultaneously with other programmers.

Design Thinking

Understanding the design thinking process is crucial for UX engineers to collaborate with designers. They must have empathy for end-users and understand user experience design principles.

User Interface Design & Interaction Design

UI design and interaction design are crucial skills for a UX engineer. They work with designers to brainstorm ideas and turn prototypes into functioning code. While UX engineers don’t design user interfaces, they convert design files into code and must understand UI design principles.

Human Computer Interaction (HCI)

Human computer interaction (HCI) is similar to interaction design but focuses on code rather than design principles. The UX engineer’s job is to build an intuitive front-end experience based on the designer’s prototypes.

Design Systems

UX engineers often work on design systems with a cross-functional team of designers, researchers, and other engineers. The UXE is responsible for building new components from design files. 

Debugging & Testing

Debugging and testing are a crucial part of a UX engineer’s job because they’re responsible for catching and fixing front-end bugs before release. UX engineers build code prototypes which they present to designers and engineers.

Designers ensure the prototype matches the design while the UXE’s fellow developers review the code for best practices, naming conventions, etc.

By building these code prototypes, UXEs streamline the design handoff process while creating the foundation for engineers to develop the final product. 

Navigation and Information Architecture

UX engineers must understand navigation and information architecture because they’re responsible for connecting screens, modals, and pages.

Responsive Design

Responsive design is crucial for front-end development. UX engineers must use CSS media queries to set breakpoints for multiple screen sizes and devices, including mobile, tablet, and desktop.

Wireframes & Mockups

While UX engineers don’t necessarily build wireframes and mockups, they must turn these designs into code.

Aside from the essential skills we list above, UX engineers must also understand the following basic design principles to collaborate with design teams:

• Visual design
• Usability testing
• UX research
• User journey mapping

What Does a UX Engineer Do?

A UX engineer’s (UXE) responsibilities vary depending on the organization and product, but they usually work across design and engineering processes. We can define the UXE process in four stages:

1. Ideation
2. Design
3. Build
4. Test

Ideation

UXEs partner with user researchers and designers to define usability goals, brainstorm solutions and advise on the technical feasibility of early designs. 

Brainstorming and sketching ideas are crucial during the ideation phase. UXEs provide technical insights about how an idea might work and if it’s within the product’s technical constraints.

Having a UXE during the ideation phase can save organizations valuable time because they can steer designers and researchers away from solutions beyond engineering capabilities.

Design

UXEs take an active role in the design process–from wireframing and low-fidelity prototyping to mockups and high-fidelity prototyping. If the UX engineer is working with a design system, they collaborate with designers to design a library of components in tools like UXPin.

A UX engineer is responsible for assisting designers in preparing design files, documentation, and prototypes for the design handoff. They ensure that developers understand the language and instructions and facilitate communication between designers and engineers.

Build

A UXE is responsible for converting static designs into code. Their role extends to layouts and UI elements, leaving other front-end development like data integration, APIs, performance, and analytics to the engineering team.

UX engineers work with the engineering team throughout the development phase to execute designs as intended.

Test

UX engineers work closely with designers to test ideas and develop solutions during the design process. UXEs also work with engineers to identify and fix bugs in code.

How to Become a UX Engineer

If you want to get a job as a UX engineer at a major tech company, they usually require a degree in Computer Science, human computer interaction (HCI), or UX design.

You have a few paths to becoming a UX engineer:

• UX designer: Must learn programming languages like HTML, CSS, and Javascript, plus other front-end skills like Git, Chrome Developer Tools, NPM/package managers, and working with the command line.
• Front-end developer: The most common route to becoming a UX engineer is transitioning from front-end development. Front-end devs already have most skills a UXE requires but must learn UX design processes and principles.
• Product designer: The path from product designer to UX engineer is also straightforward. Product designers apply design thinking to their work, and most have basic programming skills to build prototypes.

UX engineers also work with a diverse toolkit. They must be competent with design tools, DevOps, and developer toolkits because they wear both designer and developer hats. Check out UX engineer’s tools.

Many UX engineer positions work with design systems, so design system knowledge and experience are crucial if you want to land a high-paying UX engineer role.

UX Engineer Salary

According to Glassdoor, the average salary for a UX engineer in the United States in 2022 is $116,625.

Optimizing UX Engineering Workflows With UXPin Merge

UXPin Merge allows UX engineers to collaborate with designers and developers through one tool. Sync components from a repository to UXPin’s design editor, so designers and engineers work with the same UI elements.

Instead of creating UIs in code, teams can drag and drop UI components to assemble layouts. Build designs that are production-ready 10x faster. Request access to UXPin Merge.

The post Who is a UX Engineer Specifically? appeared first on Studio by UXPin.