The post Design System Documentation in 9 Easy Steps appeared first on Studio by UXPin.
]]>Design systems provide you with a complete set of standards to enhance and manage your design efforts – from beginning to end. But in order to build and maintain a functional design system, first, you’ll have to commit time and effort before enjoying the benefits of a well-oiled design machine.
Looking for a design system management tool? UXPin Merge is a technology for bringing design library’s components to UXPin and using them in prototyping. Read more about UXPin Merge.
Design system documentation is a comprehensive guide on using a design system. It contains UI elements, components, and design language together with an explanation of how to use them. It helps share, consume, and execute these rules. This ultimately helps designers and developers to model their efforts around delivering a more predictable UI.
Design system documentation plays a crucial role in facilitating the adoption and implementation of a design system. It helps ensure consistency, efficiency, and predictability in UI design and development efforts, ultimately leading to a better user experience across products and platforms.
A typical design system comprises a component library encompassing UI design elements and other components along with workflows. Design systems thus work to unify pattern libraries and style guides into a single cohesive experience.
According to Heidi Adkisson, Principal UX Designer & Partner at Blink UX, while there are many different design documentation variants, some of the more task-specific types include:
Other design documentation types related to docs from a structural perspective and often include:
Design documentation is today an essential component of any design system. From providing context to describing team coordination efforts and maintaining a clear record of the system’s component library, component documentation is fundamental to successful design.
Design system documentation was once considered “non-critical” and was often overlooked. Without ever being exposed to the potential of design system documentation, stakeholders had no idea of the value that documentation could bring.
Following the emergence of Google’s Material Design, it quickly became clear that design documentation was critical. Most design documentation consisted of disorganized notes and bullet points, leaving most of the vital information out of the system. Material Design changed all that, adding the necessary structure and warranting the need to document.
Documenting a design system comes with a raft of benefits as well:
Without effective design documentation, successfully designing and delivering a product to market is near-impossible. Design system documentation has become essential by providing the rationale behind specific design decisions and helping users understand and interact with the model.
The very first step in design system documentation is to kick things off by looking at the market you’re doing all this work for – your users. Without understanding what they want, you’ll likely get your design goals and results very wrong.
Think about categorizing your documentation as a product and your team as the consumers of that product. Focus on who will be using this documentation, what you’ll need to include to give them the context they’re looking for and how to structure it in a way that it’ll be easy to consume.
Next, you’ll need to establish an outline covering the needs of each component and should include design guidelines on:
Component documentation should consider the needs of your organization first and foremost before considering the outline in the context of other design elements.
Style guides help to establish the basis for the visual presentations of the documentation and offer a guideline for the visual and content elements of a design system. Style guides begin by looking at the other design documentation elements and describe the colors, logo prominence, and overall language tone. Ultimately, they serve as the template for others to use.
Then, you’ll need to draft a template your team can reuse over and over while sharing it with one another. Having a recyclable documentation template saves your team time, keeps things consistent and ensures that everyone understands what they’re looking at.
Establishing, articulating, and documenting a single source of truth is probably one of the most important product design components. This universally approved agreement centers on everything your design team will be working on. From icons and color schemes to type scales and buttons – if everyone knows and understands what things need to look like, things will flow far more smoothly.
Start either with basic design components, found in your component library – created with tools like UXPin – or commence with the development phase, with React components defining the origins. UXPin, for example, allows you to ensure consistency throughout the company with UXPin Merge’s design system versioning.
Keep creating a single source of truth for your team to design from when working on projects. UXPin Merge offers a design system versioning, allowing you to optimize your single source of truth design approach and to manage code-driven prototyping with it. With tools like UXPin, you can make use of baked-in open-source libraries or import your own design system via Git, Storybook or NPM integration.
Design kits are a sometimes-overlooked component of good design system documentation. However, these necessary resources represent the “starting point” elements that are so essential for good user experience. Starter kits are the perfect onboarding tools and are flexible enough to range from step-by-step guidelines to advanced user manuals.
Feedback lets you know when a design system is working well, and when it isn’t. Some organizations, for example, limit their feedback collection mechanisms to GitHub issues, creating challenges for designers and less-technical role players in giving their thoughts.
Alternative feedback collection methods like website feedback boxes on documentation sites allow users to describe and submit the issue. A streamlined feedback channel without the need to open a GitHub issue allows anyone looking to provide any feedback the ability to do so quickly and via the documentation platform.
Documenting can be a labor-intensive task for which people aren’t always willing to volunteer. But sharing its importance with the team helps them to understand the value of taking care of it. Instead of burdening one person with this challenge, consider sharing the responsibility of doing so across the team. This way, you’ll get a variety of insights as well as make the task easier to accomplish.
Design systems need to be maintained, kept clean, and relevant. Continually keep an eye on identifying potential problem areas, reducing discrepancies, and streamlining the number of active systems.
A good example here would be to establish a single source of truth for your React story code examples for your documentation site and design system components, updated regularly to ensure they align with each other.
UXPin also boasts a regular update feature. Whenever making changes to a master component from a design system, UXPin allows you to update it in the system immediately, ensuring everything stays completely aligned.
A sound design system needs to be supported by clear, unambiguous component documentation that enriches your component library and revolves around a single source of truth.
As a general good practice rule – documentation is everything. It keeps track of progress, milestones, wins, and losses, lets you go back, review and learn, and – most importantly – allows people to understand and follow the design system itself.
Do you need to ensure that your design system is being implemented? UXPin with Merge technology allows you to use UI components from your design system in prototyping. Simply import them to UXPin, drag and drop them in design editor and create consistent prototypes that look like a finished product. Read more about UXPin Merge.
The post Design System Documentation in 9 Easy Steps appeared first on Studio by UXPin.
]]>The post UX Design Frameworks – What Are The Most Useful Ones? appeared first on Studio by UXPin.
]]>UX design framework is a valuable tool that helps us create user-centered, consistent, and efficient digital experiences. It’s not a one-size-fits-all solution but rather a flexible guideline that can be adapted to different projects.
Many organizations and startups adopt one or more UX design frameworks to deliver successful projects. Design teams use these frameworks to guide decision-making and solve problems.
Key takeaways:
Solve design challenges throughout the product development process with UXPin–the world’s most advanced code-based design and prototyping tool. Sign up for a free trial to explore all of UXPin’s features.
A design framework is a set of tools, workflows, protocols, and processes for design projects. Design frameworks provide teams with a systematic approach to solving problems and delivering projects.
Design frameworks help with onboarding new hires or handing over responsibilities. By following a familiar, structured process, new team members know where they are in the design process and how to carry the project to completion.
In large organizations, with multiple cross-functional teams working on the same product, a design framework ensures teams communicate and collaborate to maintain the highest quality and consistency in workflow and delivery.
Design frameworks guide teams rather than force everyone into a specific way of thinking and working. Instead of telling team members what to do, the framework provides a systematic path to finding a solution.
Some of the core benefits of using a design framework include:
UX design frameworks provide structure to the design process and product development. There are several frameworks design teams use, depending on the outcome they want to achieve.
User-Centered Design (UCD for short) is a UX desig frameworksn that places the needs, preferences, and behaviors of the end-users at the forefront of the design process. The central premise of UCD is to create products, services, or systems that are intuitive, efficient, and enjoyable for the people who will use them.
Some key principles and aspects of User-Centered Design include:
In essence, User-Centered Design is a holistic approach that aims to create products that not only meet business goals but, more importantly, meet the needs and expectations of the people who use them, resulting in a better user experience.
The design thinking process is the basis for most UX frameworks and workflows. It’s the framework every UX designer learns when studying UX design worldwide.
The design thinking process is an iterative user-centered framework with five stages:
Read more about those five stages of the design thinking process.
The double diamond is an outcomes-based design framework favored for design innovation. The framework encourages collaboration and creative thinking where team members develop and iterate on ideas.
There are two stages (diamonds) and four steps to the double diamond framework:
Stage One – Preparation:
Stage Two – Prototyping & Testing:
Nir Eyal developed the Hook Model as a UX design framework to “build habit-forming products.” The framework encourages designers to approach these projects ethically while delivering value to customers.
The Hook Model is a four-stage process, including:
Further reading:
Lean UX is a collaborative UX design framework that prioritizes outcomes over deliverables. Designers must use data rather than assumptions to drive decisions. This methodology delivers leaner, problem-solving products because it eliminates features where there is no need.
There are three stages to the Lean UX framework:
Further reading:
Agile UX is a design framework created to align with agile software development. Like agile software development, agile UX has 12 guiding principles.
Further reading:
BASIC UX is “a framework for usable products.” The relatively new design framework provides interaction design guidelines for modern product development.
The BASIC acronym follows five principles:
Within each principle are a series of questions designers must ask themselves to achieve a successful outcome.
Beauty:
Accessibility:
Simplicity:
Intuitiveness:
Consistency:
Organizations can adapt these questions or add their own to ensure they’re relevant to the product and its users.
Further reading: BASIC UX – A Framework for Usable Products.
Peter Morville’s UX Honeycomb is a holistic UX design framework listing seven principles. These seven principles guide each design decision to deliver high-quality products and user experiences.
The UX Honeycomb’s seven principles include:
The Fogg Behavior Model, developed by B J Fogg from Standford University, suggests behavior or action is the result of three elements converging:
Like the Hooked Model, the Fogg Behavior Model helps designers build products that increase usage and engagement over time. Fogg emphasizes that “baby steps” are the best way to develop long-term behaviors.
A fantastic example many of us have experienced is any digital game. The first level is easy, giving players a sense of accomplishment, thus triggering further engagement. The game gets incrementally more challenging as players spend more time engaging with the product.
Further reading:
UXPin is an end-to-end design solution with the tools and features to deliver high-quality products. UX designers can leverage UXPin’s code-based design tool to create high-fidelity prototypes that look and function like the final product.
Prototyping and testing are crucial components of any design framework. UXPin’s built-in design libraries enable design teams to build high-fidelity prototypes to test ideas throughout the design process.
Code-based prototypes look and function like the final product, producing meaningful, actionable results from usability testing and stakeholders. UX designers can make quick changes and iterate on ideas to find a solution that meets both user needs and business goals.
With higher fidelity and functionality, UXPin’s code-based prototypes play a crucial role in streamlining the design handoff process so that engineers can deliver the final product with greater accuracy and efficiency.
Enhance your end-to-end design process with UXPin’s code-based design tool. Sign up for a free trial to explore all of UXPin’s advanced features and start creating better user experiences for your customers.
The post UX Design Frameworks – What Are The Most Useful Ones? appeared first on Studio by UXPin.
]]>The post Design Strategy — Definition, Scope, and Value appeared first on Studio by UXPin.
]]>A design strategy’s importance lies in bridging the gap between business aspirations and user needs. Creating alignment across all design decision-making enables more effective and efficient product development. Its strategic approach ensures organizations don’t just design for design’s sake; instead, design teams generate value for both the business and its users.
Key takeaways:
Execute your design strategy with a single tool to align cross-functional product development teams. Visit our Merge page to learn more and request access.
A design strategy is a comprehensive plan outlining how UX design can help accomplish business needs and user goals. It actively integrates business objectives with creative solutions to solve user problems, fostering better products, services, and experiences.
A design or DesignOps leader typically delivers the design strategy as a written document, either as a PDF or via the organization’s intranet, project management software, or knowledge-sharing repository.
A comprehensive design strategy encapsulates several elements to guide design efforts toward achieving business objectives and meeting user needs. It often includes:
While distinct, business and design strategies work harmoniously to propel an organization forward. The business strategy centers on market analysis, competitive advantage, and financial planning. It lays the groundwork for an organization’s overarching goals, including market expansion, revenue growth, and customer retention.
Conversely, design strategy concentrates on applying design to achieve these business goals. It merges creative problem-solving with business objectives, focusing on customer experiences and interface aesthetics. It shapes how products, services, and user experiences align with customer needs and business aspirations.
Despite their differences, true innovation occurs at the intersection of business and design strategies. Organizations can deliver superior products and services that fulfill user needs and drive business success by syncing business vision with user-centric design.
The scope of a design strategy extends far beyond aesthetics into various aspects of an organization, guiding the creation and development of products, services, and brand identity to ensure alignment with both business and user goals.
Design strategy plays a vital role in UX and UI development. It’s the blueprint UX/UI designers follow to create engaging, intuitive, and user-friendly interfaces. By putting the user at the center of the design process, a well-defined design strategy ensures that the end product or service meets the user’s needs and aligns with the business’s strategic goals.
A design strategy offers value to both the organization and its designers. It serves as a framework guiding product development, branding, and service design, keeping user needs and business goals in harmony. For designers, it provides clear direction and aligns their creative efforts with strategic objectives, increasing the efficacy and relevance of their work.
Netflix is one of the most famous examples of employing design thinking and an effective design strategy to drive business growth. Using a design strategy centered on user behavior and preferences, Netflix successfully developed features such as personalized recommendations and an intuitive interface.
This user-centered approach not only retains existing users by providing an engaging experience but also attracts new users through positive word-of-mouth. This design strategy aligns with their business goal of growing and retaining a healthy user base, ultimately leading to increased ROI and market share.
Tracking these UX metrics and key performance indicators (KPIs) can provide quantitative evidence of a design strategy’s value, aligning it with business goals and user satisfaction.
A design strategy must also assess internal operational value, including workflows, tools, time-to-market, efficiency, etc., to get a holistic view of design investments and ROI.
For example, a new design may not necessarily impact the end user, but the new process or tool introduced to deliver it reduces the project cost, ultimately increasing profitability.
DesignOps practitioners can also track efficacy and efficiency metrics within design teams to quantify the value of workflow investments relating to the strategy.
Efficacy is about behavior – doing the right things. It produces qualitative results that are often subjective. Some efficacy example metrics include:
Efficiency is measurable and quantifiable using numbers, percentages, and ratios. It’s about the processes and doing things correctly. You can set a baseline or status quo marker and measure DesignOps’ impact against that metric.
Some examples of measuring efficiency include:
Creating a design strategy requires thorough preparation before delving into actual strategy development. It involves understanding the organization’s business model, the target audience, and the market environment. It’s crucial to clearly understand business goals, user needs, and the organization’s expectations for design’s ROI.
Start by understanding the business goals and user needs. Business requirements might include expanding market share, enhancing customer retention, or driving revenue growth.
Conversely, user needs focus on the functionality, accessibility, and usability of the product or service. The aim is to create a design that aligns with these parameters, creating a symbiosis between business goals and user satisfaction.
Here are four common ways to understand business goals and user needs:
DesignOps is instrumental in implementing and managing design strategy. It’s their responsibility to operationalize the strategy, bridging the gap between the design team and other business functions.
DesignOps ensures the alignment of design work with strategic goals, optimizes processes, and fosters collaboration for the seamless execution of the design strategy.
Does your current design tool stack support seamless cross-functional product development?
UXPin’s Merge technology bridges the gap between design and development, allowing DesignOps to focus on strategic design initiatives that create value for the organization.
Optimize design workflows while enhancing designer/developer collaboration to deliver higher-quality products more efficiently. Discover UXPin Merge.
The post Design Strategy — Definition, Scope, and Value appeared first on Studio by UXPin.
]]>The post What is Desirability, Viability, and Feasibility? [+ Design Review Template] appeared first on Studio by UXPin.
]]>According to IDEO, a truly innovative product must have desirability, viability, and feasibility for sustainable long-term growth and success.
The design thinking process involves research, or a design review, to determine what product and features will serve your customers the best. A successful design review identifies a problem your competitors aren’t solving that will benefit both your end-users and the business.
But, where do you start? How do you find this competitive edge? And how do you know if it’s a viable business model that serves users and the organization?
This article explores research during the conceptualization phase of design thinking and how to identify an idea that meets three key criteria:
Does your design tool provide you with features to take a product from concept to design handoff? UXPin is an advanced end-to-end design tool that makes it easy to create prototypes with live React, Storybook or npm components. Check why this approach to prototyping can help you. Discover UXPin Merge.
Desirability, viability, and feasibility is a design thinking methodology to test ideas, concepts, and hypotheses to determine if you have a unique value proposition (aka unique selling point) and whether it’s worth pursuing.
Without checking all three boxes, you increase the risks, costs, and potential for failure. You could say desirability, viability, and feasibility are a risk analysis methodology for ideas – a toolkit to find that innovation sweet spot.
By applying this methodology, you can pinpoint the weak points in your design concepts, do further research or scrap the idea and move on.
IDEO, a global design company, conceptualized the desirability, viability, and feasibility design thinking methodology in the early 2000s as a way to test ideas.
IDEO recognized that the best ideas succeed when they fulfill this trifecta. Conversely, “great ideas” often fail when they miss one or more of these three criteria.
Let’s look through these three lenses to understand how this trifecta fits together.
The first box designers must check is desirability. If your product idea has no market value and people don’t want or need it, it won’t sell.
Researching desirability will also tell you whether your product is a want or a need. For example:
A need is something your customers cannot live without, while a want is often a more desirable option to fulfilling that need. Both check the box for desirability, but a product that fulfills someone’s need is far more valuable than something someone wants or is “nice to have.”
To find a desirable product, you must research your customers and identify pain points (wants and needs) that you can fulfill.
When researching desirability, the intention is to stress-test your idea to find the gaps that need fixing. The more gaps you fill, the stronger your product and the better it will stand up against rigorous stakeholder questioning and customer satisfaction.
Viability tells you whether or not your product makes business sense. Even if you have the most desirable product in the world, if it’s too expensive or isn’t profitable, then it’s not a good business model.
A truly viable product idea makes business sense in the short-term and into the future. The quicker and longer it can deliver a positive return on investment, the higher the viability of your design idea.
A fantastic example of viability is how Coca-Cola designed a beverage formula in 1886 that’s still one of the most consumed drinks in the world today! That initial investment created massive wealth for its inventors and still delivers incredible returns for shareholders more than 135 years later.
Viability is also about societal and environmental impact—the ethical aspect of your design. Will your digital product provide a positive gain for society? In 2021, Facebook whistleblower Frances Haugen released documents showing that the social media giant’s internal research showed that Instagram creates anxiety, depression, and suicidal thoughts among teenage girls.
Instagram might deliver high financial returns in the short term, but is this harm to teenagers sustainable long-term? And what will governments do to regulate Facebook and Instagram?
Facebook is a massive company with the resources to overcome societal controversy, fines, and lawsuits. But, a smaller company or startup will mostly like fold when confronted with similar pressures.
So, when we look at viability, it must provide value for the business, customers, and society. Some questions you might want to consider include:
Like desirability, viability requires you to research, analyze, and stress-test ideas to ensure they’re viable and sustainable.
Feasibility looks at your current resources to determine if you’re capable of developing the product in the foreseeable future. Designers must consider how the product will impact the business.
Some feasibility factors include:
Ideally, you want to design a new product or feature within the company’s current capabilities using available resources. When you have to build infrastructure to support a new product, you increase the risks and costs.
Here are some feasibility questions you might want to consider when designing a new product or feature:
Organizations conduct a design review during the early stages of a product design to evaluate the design against specific criteria. The goal is to identify any problems with the design or prototype before developing it–which carries the costs of infrastructure, marketing, sales, customer support, and more.
Essentially, the organization wants to know the product design’s desirability, viability, and feasibility.
Applying the desirability, viability, and feasibility design thinking methodology will give you the insights and data to present a comprehensive and objective design review to stakeholders.
Below is a structure or template you can use to present your design review so that it’s easy for stakeholders to read and digest.
The problem: State the problem succinctly. The design and business teams will build a shared understanding from this foundation.
The system (current state): Show how the current system works (if it’s an existing product) to help put the problem in context. Later, you can show how the system could work with your proposed experience.
The Jobs To Be Done (JBTD): A shared understanding of what motivates your customers is crucial for a design review. As Tony Ulwick defines JBTD: “a lens through which you can observe markets, customers, user needs, competitors, and customer segments differently, and by doing so, make innovation far more predictable and profitable.” This lens helps stakeholders understand how customers decide whether to “hire” or “fire” your solution.
The business objective: State the business value and ROI for solving this customer problem.
The metrics that matter: You can’t improve what you don’t measure. These metrics should enable you to quantify the business and customer value you’ll create through your new product design.
The proposed experience: Summarize the proposal in a sentence. Make it clear and understandable. The people in the room need to understand how this proposal relates to the problem you’ve previously articulated.
The implications of your proposal: How will your proposal impact other parts of the business? Maybe you don’t know. Understanding this early in the product design process is critical to achieving balance in desirability, viability, and feasibility.
Basic experience design: Present your wireframes, mockups, prototypes, or minimum viable product (MVP) so that stakeholders can visualize how a customer might find the product desirable.
Insights informing the design: What led you to choose this design? What were the insights, hypotheses, etc.? Show your depth of thought in a few bullet points.
Hypotheses about the new design:
These should be clear and testable. By conducting tests with clear pass/fail metrics, these hypotheses should also give you a strong foundation for measuring the incremental progress you’re making.
The team’s collaborative focus: Why are you all in the room? What input do you need from stakeholders? This section of the design review template helps set a clear context and focus for the stakeholders responsible for the product’s success.
With UXPin Merge, you can use built-in component libraries to quickly assemble high-fidelity prototypes and MVPs and present these to stakeholders during the design review. This will definitely speed up your time to market, and make you release quality products faster. Discover UXPin Merge.
The post What is Desirability, Viability, and Feasibility? [+ Design Review Template] appeared first on Studio by UXPin.
]]>The post Design Planning 101 – A Step-by-Step Guide appeared first on Studio by UXPin.
]]>Design planning promotes consistency, scalability, and efficiency throughout the design process, resulting in a higher-quality end product and a more satisfying user experience.
Increase your end product’s quality and deliver better user experiences with interactive prototypes from UXPin. Visit our Merge page for more details and how to request access.
Design planning is a strategic project planning process of outlining and organizing the design approach for a digital product. It sets the foundation for effective collaboration, efficient execution, and successful outcomes in the product development journey.
Design planning involves, but is not limited to:
Design planning is crucial in digital product development as it provides a roadmap for the design team. It ensures that design decisions align with user needs, business goals, and brand identity.
Effective design planning helps streamline the product design process by conducting thorough research, defining clear goals, and establishing guidelines to reduce ambiguity and minimize rework. It enables effective communication among team members, facilitates stakeholder alignment, and increases the chances of creating a user-centered, visually appealing, and functional digital product.
Someone from the design team is typically responsible for creating the design plan. The individual varies depending on the organization and org structure. Some common examples include:
While the design team is responsible for creating and executing the design plan, it’s a collaborative effort involving multiple teams and stakeholders to align user needs with business goals and objectives.
In a recent webinar hosted by UXPin titled Strategies for Building a Resilient DesignOps Practice, experts Salomé Mortazavi, Meredith Black, and Adam Fry-Pierce discussed the importance of aligning design efforts with business strategies. The panelists shared insights on the challenges design teams face and how DesignOps can address these challenges.
Salomé Mortazavi, Senior Director of DesignOps and Design Systems at SiriusXM, highlighted that a common root cause of challenges faced by design teams is the lack of alignment and understanding of Design’s role within the overall business strategy. Salomé emphasizes the importance of creating a shared vision and aligning the design and business charter.
Meredith Black, a DesignOps consultant, added that design teams often face bottlenecks and inefficiencies due to fragmented processes, communication gaps, and resource constraints.
Meredith stresses that DesignOps can streamline workflows, create design systems, and foster collaboration across teams, which helps in moving forward with deliverables.
The panelists also discussed the significance of planning and vision-setting in aligning design efforts. Salomé shared that her go-to tool for planning is aligning roadmaps around a maturity model she calls the Design Maturity Index. This strategy involves continuous planning throughout the year to ensure design efforts align with business objectives.
The following high-level design planning framework provides a step-by-step process to create a comprehensive plan for digital product development.
The first step is understanding the problem and target audience. Design frameworks like design thinking, double diamond, Agile UX, and others help designers research and plan projects with a user-centered mindset. To understand the problem, design teams will:
Design systems are valuable in design planning as they provide a comprehensive framework for establishing design principles and guidelines. A design system will simplify or mitigate having to set principles and guidelines for every project.
Design principles serve as guiding statements that inform the overall approach to design. They outline the fundamental values and goals teams must include in the product’s design. Defining design principles helps maintain consistency, coherence, and a user-centric focus throughout the design process.
Usability guidelines establish standards and best practices that ensure the product is easy to use and provides a positive user experience. These guidelines cover navigation, layout, content organization, and interaction design. Setting usability guidelines helps create a consistent and intuitive user interface that meets user expectations and needs.
Brand guidelines and visual identity elements define the visual representation of the product and ensure consistency with the organization’s brand, including typography, color palette, logo usage, and imagery style. Incorporating brand guidelines and visual identity elements into the design planning process helps maintain a cohesive and recognizable brand presence across the product.
Designers can establish a solid information architecture that ensures a logical and intuitive user experience, making it easier for users to find and navigate through the content and features of the digital product.
Begin by reviewing and analyzing the existing content within the app or website by identifying all the relevant information, assessing its relevance and quality, and determining what to keep, revise, and remove.
Organize the information into a clear and logical structure by grouping related content, creating categories and hierarchies, and establishing a coherent flow of information for users to navigate.
Mapping user flows allows you to identify the most intuitive and efficient ways for users to achieve their goals. Navigation maps, on the other hand, visually represent the structure of the website or application, showing how different pages or sections are connected.
Wireframes serve as a blueprint for the final design and focus on the arrangement of content, functionality, and user interactions. Low-fidelity prototypes allow for user testing and feedback before investing significant resources into high-fidelity prototypes.
A product’s interaction design must facilitate smooth and engaging user experiences, enabling users to navigate and interact with the digital product seamlessly.
Map the product’s interactions and actions to understand user goals, define user journeys, and identify touchpoints where users engage with the interface.
Create intuitive, user-friendly interfaces by designing clear navigation, logically organizing content, and ensuring the UI elements are consistent and visually appealing.
Interaction design includes designing buttons, menus, forms, and other interactive components that respond to user input. Microinteractions, such as hover effects or animated transitions, can add subtle but meaningful feedback to user actions.
The design plan must guide designers in creating visually appealing and cohesive designs that align with the product’s brand and effectively communicate its purpose and message to the users.
As we discovered from our DesignOps experts above, collaboration and incorporating stakeholder feedback are crucial for design planning. Establishing effective communication channels, collaborating with stakeholders and cross-functional teams, and conducting design reviews and feedback sessions, facilitates knowledge sharing to align the design plan with business goals.
Collaboration and communication considerations for the design plan include:
Effective project and timeline management are essential for keeping design initiatives on track, optimizing resource utilization, and ensuring timely delivery of design outputs.
UXPin Merge bridges the gap between design and development to simplify design planning and product development. With design and engineering teams in sync, DesignOps can spend more time on strategic initiatives rather than wasting resources on redundant processes–like updating multiple design libraries and documentation.
With a real single source of truth, the design system team syncs updates to every team with one release–no more separate design libraries for designers, developers, prototyping, etc. Teams can access UI components and documentation from one centralized repository, resulting in absolute consistency, zero design drift, and minimal technical debt.
Streamline your design process with a single source of truth from Merge. Visit our Merge page for more details and how to request access.
The post Design Planning 101 – A Step-by-Step Guide appeared first on Studio by UXPin.
]]>The post 10 Fun Design Team Activities to Try Out in 2023 appeared first on Studio by UXPin.
]]>Successful designs are the result of a cohesive and creative design team. But how do leaders build teams that are rich in these skills? There may not be a universal formula for creating the perfect team, but fun design team activities offer room for collaboration and exploration.
Team building starts with engagement, and when done well, it results in a strong design culture. This article explores the ways in which you can support active involvement and encourage collaboration in your design team.
Boost your team happiness with a design technology that reduces duplicated work to zero. Try UXPin Merge and design prototypes with components that are interactive by default and reusable across the whole product development process, from design to development. Discover UXPin Merge.
Recent studies suggest that as much as 18% of employees are disengaged in their work. With the remote workplaces and fractured team structures that followed in the wake of COVID-19, encouraging engagement is no simple task.
Before pursuing any of the following activities, customize these concepts to best suit your team’s needs and your design operation goals. Some workplaces may allot time for activities, while others may require voluntary attendance outside of company hours.
To maximize involvement, be sure to accommodate the needs of everyone in your group. The design team may even benefit from the involvement of other teams within your company, so keep an open mind as you refine these activities to support your team vision statement.
Comparing exercises help refine an individual’s perspective of what makes a good design. When coupled with the opportunity to choose self-identified examples of good and bad design, this can also highlight diverse perspectives.
Start by having each employee name three examples of design that they qualify as “good”. These choices can then be discussed amongst the team in a way that allows each member to explain the aspects that they are drawn to in designs. These personal interpretations inspire self-reflection in individuals and the adoption of various perspectives for the group, as patterns in preferences are noticed.
This method can also be used in reverse. Instead of identifying three examples of good design, team members can identify and discuss examples of bad design. To keep this exercise constructive, especially in the face of conflicting views or in large groups, it is helpful to have a moderator.
Reading has been found to evoke engagement, especially when you apply deep reading practices. This form of literary interpretation is the result of readers drawing connections between other materials or real-world applications. And what better way to encourage these connections than to create a design team book club?
Much like a regular book club, one member would choose a book for the group to read, set a designated time frame to read the book, and then facilitate a conversation about it. Books focused on design and technology might be the most directly related to improving your team’s skills.
Still, classic titles concerning other topics can also support growth. You may be surprised to find that a variety of books can be related to your team’s work.
Most people align workouts with sports, but a workout can be any form of training intended to improve a set of skills. Innate skill and strength may help some teams succeed, but the most successful teams work out diligently to refine their skills as a group. In this sense, a design team is no different from a sports team!
Design-centered workouts can range from individual prompt-based design sketches to group challenges focused on communication. When generating workouts for a team, consider the factors that will impact team participation, like time and location.
Context is key, and a special set of tarot cards can make that clear. With a set of tech tarot cards teams can view concepts and designs in relation to the many contexts they might end up in, such as environmental or relationship impacts.
This activity puts a focus on product impact. Also, much like standard tarot cards, each of the tech cards is intended to invoke ideas of both positive and negative outcomes. Teams can pass around a few cards from the deck and share their interpretation of how designs would fair in the face of each context.
Not only will this exercise highlight diverse views with a team, but it may also reveal areas of improvement on projects. Best of all, these cards can be downloaded from The Artefact Group for physical or virtual use.
Is a team really a team if its members don’t know each other? Whether your design team is new or old, there is a good chance it can benefit from some team building. Question mingling is an activity that encourages employees to ask each other questions in an effort to build relationships, trust, and learn each others’ strengths.
The setup is simple. Each employee gets to jot down three questions. Then, members pair up, ask each other their questions, and trade questions before meeting with another member. Time limits and a moderator are important to keep this activity flowing smoothly, especially when it comes to big groups and tight timelines.
There are few things as engaging as friendly competition, and that is exactly what this activity promotes. The “This VS That” game requires your team to be split into two groups that will host a spirited debate to decide which one of their topics wins.
The moderator picks the two combating topics and they can be as silly or serious as you see fit. One team can formulate an argument for waffles while the other stands for pancakes, or you can use this activity to encourage the assessment of two designs.
The goal is to get each team communicating and thinking creatively, so whether there is a true winner is completely up to you.
A global study from 2021 found that about 1 in every 5 workers felt as if their organization did not care about them as a person. So how can you help team members feel like valued individuals in a team, rather than a corporate number?
Making time for conversation that goes beyond current projects can help your team members see their colleagues as individuals and also feel seen. Getting to know teammates on a more personal level allows for deeper team bonding and it can be a fun activity.
The key to keeping these 15-minute calls fun is ensuring they are voluntary. This way colleagues who like to chat will be engaged in this activity and more introverted individuals will not be pushed out of their comfort zone.
It can be easy to get caught up in the current moment, so engaging in activities that encourage forward-thinking can keep your team on their toes. A facilitated discussion regarding future design trends can spark some interesting and possibly profitable concepts from your team.
Every future-focused question you can come up with is an opportunity to explore future design trends as a team.
Problem-solving is an important skill in the world of design, and it is even more useful when possessed by a team. Instead of waiting for your team to encounter problems in projects and hoping they will learn to problem-solve as a team in a timely fashion, you can prime them for problem-solving.
Escape rooms are the perfect playground for teams to explore each other’s strengths, compensate for weaknesses, and collaborate. In a way, escape rooms mirror the deadlines and creative collaboration needed to complete projects at work, but without any repercussions.
You might be surprised to see how many people are familiar with and excited about escape rooms when you offer this activity. Individuals from other teams might also want to get involved in some company-wide collaboration.
When team-building activities are opened up to the entire product team, the options for engaging individuals expand. When designers are paired with software developers or other product-centric team members, interesting side projects are created.
Some companies may come up with competitions like hackathons to encourage collaboration between team members. A software company, Netguru, held an interdisciplinary competition to develop an NGO app, resulting in a functional app for Poland’s largest charity within 4 weeks!
Activities targeted at the entire product team can be a force for good that benefits worthy causes, company collaboration as a whole, and individual development.
At UXPin, the value of collaboration on this level is a driving factor behind our function. With a centralized design process and the option to use UI coded components in prototypes, employees from all parts of a product team can collaborate with ease. Check how to connect designers and devs fast. Discover UXPin Merge.
The post 10 Fun Design Team Activities to Try Out in 2023 appeared first on Studio by UXPin.
]]>The post Design Team Vision Statement – Definition and Steps appeared first on Studio by UXPin.
]]>A strong vision statement drives a design team’s actions while contributing to the product and organization’s success. This article explores how to create an effective design team vision statement, understand its purpose, and analyze real-world examples from leading organizations. We also provide a step-by-step framework for developing and implementing your design team’s vision statement.
Align teams with a shared vision and scale design operations with UXPin Merge. For more details and how to request access, visit our Merge page.
A design vision statement outlines the long-term goals and desired future state for a product or organization’s design department. It provides designers with a clear direction or “north star” and is a source of inspiration and motivation.
A vision statement and a mission statement combine to provide a comprehensive understanding of an organization’s purpose and direction.
The vision statement outlines the desired future state and long-term aspirations, while the mission statement defines the organization’s core purpose and strategies to achieve the vision. These statements create a cohesive framework that guides decision-making, fosters alignment, and unifies teams toward a common goal.
Creating a team vision statement helps establish a foundation for Design’s direction and decision-making processes. An inspiring vision statement encourages teamwork, inspires creativity, and drives innovation by fostering a shared understanding of the design team’s goals and aspirations.
This vision statement anchors the team, enabling designers to navigate challenges and focus on delivering high-quality, user-centric solutions that align with the department’s long-term objectives. When properly implemented, a design vision statement is a powerful tool that fuels the department’s growth and success in line with the company’s mission.
A company’s UX strategy shapes the design vision statement by outlining the desired user experience and guiding design principles. Ideally, a company should establish its UX strategy first, as it serves as a blueprint for the design vision statement, ensuring that the design team’s goals align with the company’s vision statement and broader objectives.
The Design or DesignOps Leader plays a pivotal role in shaping the vision by facilitating collaboration, fostering a culture of innovation, and guiding the team towards shared objectives. They are responsible for translating the company’s UX strategy into actionable goals, ensuring that the design department’s vision aligns with the company’s values and mission.
A team vision statement aligns the design department’s goals and values, ensuring that each team member works cohesively and prioritizes the organization’s overarching objectives while staying true to its core values.
A good vision statement fosters a shared sense of direction by providing a clear roadmap for the team, outlining the desired future state, and inspiring team members to work collectively toward achieving common aspirations.
The team vision statement guides decision-making processes within the design department by setting a framework that influences choices and actions, ensuring consistency and alignment with the team’s long-term objectives.
A focused and clear vision statement ensures the concise and effective communication of the design department’s objectives, facilitating a unified effort toward shared goals.
Example of applying clarity and focus: “Empowering our design team to create seamless, user-centric experiences that elevate our brand and inspire customer loyalty.”
A compelling vision statement is inspirational and aspirational. It must motivate team members to strive for excellence and establish what the design department seeks to achieve.
Example of applying inspirational and aspirational: “Pioneering innovative design solutions that revolutionize the way users interact with technology, setting new industry standards.”
A vision statement should embody the team’s core values, aligning the design department’s actions and decisions with the principles that define its identity and purpose.
Example of embodying the team’s core values: “Championing empathy, collaboration, and continuous learning as we craft user experiences that are both intuitive and impactful.”
A successful vision statement is future-oriented and adaptable. It enables the design department to navigate evolving market conditions and shifting priorities while maintaining a clear sense of direction and staying true to its foundational principles.
Example of incorporating future-oriented and adaptable: “We are committed to anticipating user needs and staying at the forefront of design trends and technology advancements.”
The first step is to gather input from team members and key stakeholders. This collaborative approach fosters buy-in and ensures your vision statement considers diverse perspectives. For example, conduct brainstorming sessions or use anonymous surveys to gather insights on team goals, values, and aspirations.
Analyze the feedback to identify recurring themes and shared values that resonate with the team. Look for patterns in the input and highlight aspects that consistently emerge. For example, if team members frequently mention empathy, collaboration, and innovation, these values should inform your vision statement.
Use the themes and patterns from step two to define the design department’s purpose and aspirations. This step involves clearly stating the team’s reason for existing and the desired outcomes they want to achieve through their work. For example, your design department’s purpose may be to create engaging, accessible user experiences that drive customer satisfaction and loyalty.
Craft a concise and memorable vision statement using the insights gathered that encompass the team’s purpose, values, and aspirations. This statement should be clear, actionable, and easy to remember. For example, “Designing user experiences that delight, empower, and inspire, driven by empathy, collaboration, and innovation.”
Share the draft vision statement with team members and stakeholders for feedback. This iterative process ensures your vision statement resonates with the team and organization.
After finalizing your design team vision statement, share it with the entire team and integrate it into your daily operations. This step involves incorporating the vision into team meetings, goal-setting processes, and decision-making frameworks. For example, display the vision statement in the team’s workspace, reference it during project kick-offs, and use it as a guiding principle for performance evaluations.
Here are some tips for embedding your vision into your organization’s design culture:
“We believe a better future is for all of us to design.”
Design teams can learn from IDEO’s vision statement by embracing the idea that creating a better future is a collective responsibility. This statement empowers designers to take an active role in shaping the world around them and emphasizes the importance of inclusive design practices.
“IBMers believe in progress—that by applying intelligence, reason, and science we can improve business, society, and the human condition. Given our scale and scope, good design is not just a requirement, it’s a deeper responsibility to the people we serve and the relationships we build.”
IBM’s vision statement reinforces the importance of leveraging intelligence, reason, and science in their work and understanding that good design is a fundamental responsibility. The statement also highlights the impact of design on both business and society, emphasizing the role of designers in driving positive change.
MUI’s vision statement focuses on the team’s pursuit of excellence in its tools and processes. This statement highlights the importance of continuously improving and optimizing UI design solutions to serve developers and designers better, ultimately enhancing collaboration and efficiency.
Did you know you can bring MUI components into the design process to create prototypes that look and feel like the final product?
Import any open-source UI library or your company’s design system into UXPin using Merge technology to create a single source of truth across design and development. Learn more by visiting our Merge page.
The post Design Team Vision Statement – Definition and Steps appeared first on Studio by UXPin.
]]>The post 8 Signs That You Need a Design System appeared first on Studio by UXPin.
]]>Design systems have become indispensable for product teams in today’s rapidly evolving digital landscape. A well-implemented design system improves visual consistency and coherence and fosters better teamwork and communication among design teams, developers, and stakeholders. It accelerates the design and development process, enhancing scalability and maintainability and improving user experiences and product quality.
This article explores eight common product development challenges and how a design system can solve them. By recognizing these signs and implementing an effective design system, your team will be better equipped to navigate the complexities of modern product development and deliver exceptional digital experiences to your users.
Deliver high-quality products faster and eliminate costly errors with UXPin Merge. Visit our Merge page for more details.
The problem: Inconsistent user interfaces and user experiences can lead to confusion and frustration for users, negatively impacting their perception of your products.
This inconsistency may stem from design fragmentation, miscommunications, or a lack of standardization among designers and developers working on different parts of a product or multiple products.
How a design system can help: A design system provides a single source of truth with everyone using the same reusable UI components, patterns, layouts, fonts, colors, and guidelines. This shared system ensures consistent visual language and functionality throughout your products.
By establishing clear standards and best practices, a design system reduces the risk of inconsistency and promotes a cohesive, intuitive user experience that strengthens your brand identity and user satisfaction.
The problem: Design and technical UI debt are the consequences of shortcuts and poor decisions in the design and development process. Over time, these compromises can lead to inconsistencies, usability issues, and a fragmented user experience, resulting in a significant effort to address these problems later.
How a design system can help: Implementing a design system helps prevent design and technical debt by establishing a unified set of UX design principles, components, and a pattern library. This unified approach ensures that designers and developers work with a shared understanding, reducing the likelihood of miscommunications and inconsistencies.
By adhering to the design system’s guidelines, your team can create a cohesive and consistent user experience, mitigating the accumulation of design and technical UI debt in the long run.
Further reading: how Talabat’s product team used front-end debt to create a business case for their design system Marshmallow.
The problem: Maintaining and scaling its user interface becomes increasingly complex as your product evolves. Design debt accumulates, and the lack of consistent design patterns can make updates and expansions challenging, time-consuming, and resource-intensive.
How a design system can help: A design system lays the foundation for scalable design by providing reusable components, standardized patterns, and clear guidelines that make maintenance and growth more manageable. With a design system in place, you can efficiently introduce new features and make design updates while maintaining consistency and quality. This streamlined approach saves time and resources, enabling your team to focus on innovation and delivering a superior user experience.
The problem: Communication gaps between designers and developers can lead to misunderstandings, inconsistencies, and delays in product development. Misaligned expectations, differing interpretations of design mockups, or unclear documentation can result in a confusing and inefficient process, impacting the final product’s quality and user experience.
How a design system can help: A design system acts as a single source of truth for both designers and developers, bridging the communication gap by providing clear guidelines, reusable components, and standardized design patterns.
By adhering to the design system, both teams can work more efficiently, with a shared understanding of the design language and implementation methods. This enhanced collaboration reduces the likelihood of misinterpretations and ensures a cohesive, consistent final product that meets the desired user experience and design goals.
The problem: When new team members join a product team, they may face challenges understanding the design language, UI components, and coding practices. This learning curve can result in delays and inefficiencies, as new members may require additional time and resources to get up to speed with the existing design and development workflows.
How a design system can help: By providing clear guidelines, best practices, and reusable components, a design system allows newcomers to quickly grasp the product’s design principles, UI patterns, and coding conventions.
The design system accelerates the onboarding process, allowing new team members to contribute more effectively and efficiently to the product’s development, ultimately enhancing overall productivity and cohesion.
The problem: A slow time to market can result from inefficiencies in the design and development process and complications in coordinating efforts between team members.
Slow product development leads to missed deadlines, increased costs, and reduced competitiveness, as your product takes longer to reach the market or introduce new features and improvements.
How a design system can help: A design system addresses the slow time-to-market problem by streamlining the entire design and development process.
With a shared UI library and clear guidelines, designers and developers can work more efficiently and collaboratively, reducing the time spent creating, refining, and implementing design elements.
This improved workflow allows the product team to deliver new features and updates more quickly, increasing the product’s competitiveness and enabling a faster response to market demands and user needs.
The problem: Without a centralized design system, teams often duplicate work when creating or updating UI elements–for example, building multiple versions of an app bar.
This inefficiency can lead to wasted time, effort, and resources, as designers and developers work independently or in silos, unknowingly replicating each other’s efforts or creating inconsistent assets.
How a design system can help: By implementing a design system, teams can significantly reduce duplicated work. A design system provides:
This single source of truth streamlines the design and development process, ensuring everyone works from the same set of resources and follows the same standards, ultimately eliminating redundant efforts and fostering a more efficient, collaborative, and cohesive workflow.
The problem: Design handoffs can be challenging, time-consuming, and fraught with friction between designers and developers. Designers often struggle to provide developers with all the necessary assets, specifications, and documentation, leading to misunderstandings, delays, and potential rework.
How a design system can help: A design system simplifies design handoffs by providing a clear and standardized framework for communication between designers and developers. With a shared language, a unified component library, styles, and guidelines, both parties can easily reference and understand each other’s work.
This streamlined approach reduces the chances of misinterpretation and ensures that designs are translated into code accurately and efficiently. By fostering better collaboration and alignment, a design system ultimately helps teams deliver consistent and high-quality products with a faster time to market.
Even the best design systems still struggle to solve the single source of truth dilemma because designers and engineers use different design systems:
It can take many years to achieve ultimate maturity, where designers and developers use the same UI library–a real single source of truth. Or, you can bridge the gap from the start using UXPin Merge and circumvent years of work and resources.
Merge enables you to sync a component library from a repository, so designers use the same design system during the design process as engineers use to develop the final product. Designers work with visual elements while engineers see the code behind them, creating a single source of truth across the organization.
This code-to-design workflow solves many challenges organizations face with traditional design systems and product development models. The design system team only has to update and maintain one version of the UI library hosted in a single repository, maximizing efficiency while eliminating potential errors from maintaining separate design systems for designers and engineers.
Merge offers three solutions for syncing your design system:
Save time and resources building, scaling, and maintaining your design system with a single source of truth from UXPin Merge. Visit our Merge page for more details and how to request access to this revolutionary design system technology.
The post 8 Signs That You Need a Design System appeared first on Studio by UXPin.
]]>The post Design Mission Statement – Examples and Tips appeared first on Studio by UXPin.
]]>Designing a meaningful and impactful future begins with a clear and concise mission statement. This article explores the essential elements of an effective design mission statement, including a step-by-step guide to crafting one that reflects your team’s unique values, principles, and aspirations.
Whether you’re a UX designer, DesignOps leader, or product owner, understanding the importance of a good mission statement is crucial for aligning your team, driving innovation, and inspiring growth.
Create real design process improvements and make an impact on the speed and efficiency of prototyping with component-driven design with UXPin Merge. Sync your dev’s UI components with UXPin and design up to 10x faster. Visit our Merge page for more details.
A design mission statement guides designers by outlining and defining company values, principles, and aspirations in design. This concise declaration helps define the UX team’s unique approach to product design and serves as a foundation for creative and user experience decision-making.
By establishing a clear sense of direction, a mission statement enables designers to focus on their goals and consistently deliver value to users, stakeholders, and collaborators.
A design mission statement incorporates the overall UX strategy by guiding and aligning design decisions with organizational goals. It fosters consistent, purposeful design choices, enhancing the user experience across products and platforms.
A design vision statement outlines the long-term aspirations and desired future state for a product or organization’s design department. It provides designers with a clear direction or “north star” and is a source of inspiration and motivation.
The foundation of a strong design mission statement lies in articulating your team’s aspirations and core beliefs. Clearly define your organization’s purpose and what it stands for, guiding the team toward meaningful outcomes. For example, a company focused on sustainability might emphasize eco-friendly design practices in its mission statement.
Outline the design approach that underpins your team’s work. You can include aspects like user-centered design, simplicity, or innovation. By expressing these principles, you establish a framework that drives consistent decision-making. For example, if accessibility is a priority, your mission statement could mention a commitment to inclusive design for all users.
A successful design mission statement places your target audience at the center, highlighting a dedication to understanding and addressing their needs. Your statement must emphasize the importance of empathy, research, and user testing. For example, you might mention a commitment to providing intuitive, enjoyable, and seamless experiences that solve users’ problems.
Effective design implementation often requires teamwork and clear communication with stakeholders. In your mission statement, highlight the value of collaboration and transparent dialogue, fostering a culture of openness and constructive feedback. For example, a mission statement could mention fostering cross-functional collaboration to ensure well-rounded and high-quality design solutions that incorporate diverse input and ideas.
The design and technology landscape is ever-evolving. A strong mission statement should reflect a dedication to improvement and adaptation. Encourage a growth mindset within your team, emphasizing the importance of learning from mistakes, staying updated on industry trends, and refining skills. For instance, your mission statement might underline a commitment to ongoing professional development and experimentation with new design methodologies.
Before diving into creating your design mission statement, setting the stage for a successful and collaborative session is essential. Involving the right people, preparing the appropriate materials, and choosing the ideal setting will help ensure that your mission statement truly reflects the values and aspirations of your team.
Consider your company’s broader values and how they align with your UX team’s objectives. Determine the core values that will guide your design decisions.
Action: List your organization’s values and identify those most relevant to your design team. Reflect on how these values influence your design process and outcomes.
Establish your team’s fundamental design principles, such as simplicity, user-centricity, innovation, accessibility, etc.
Action: Brainstorm and list the design philosophies that resonate with your team. Consider how these principles shape your team’s design initiatives and problem-solving approach.
Think about the desired outcomes of your design work and how they contribute to the success of users, the organization, and your team.
Action: List the key impacts you want to achieve through your design work. Reflect on the benefits for users, the company, and your team members.
While it’s essential to have aspirational goals, your mission statement should also be grounded in reality. Strive for a balance between lofty ideals and practical, achievable objectives.
Action: Review your mission statement draft and evaluate if the goals are attainable while still being ambitious. Adjust the statement as needed to ensure a balance between idealism and pragmatism.
Gather input from team members and non-designers to ensure the mission statement represents your organization and design team’s values and aspirations.
Action: Organize a workshop or brainstorming session with your team to discuss and refine the mission statement. Incorporate feedback and suggestions to create a statement that truly represents your team.
A powerful mission statement is brief, clear, and easy to remember. Aim to communicate your message in a way that resonates with your team and stakeholders.
Action: Edit and refine your mission statement to ensure it’s succinct and straightforward. Remove unnecessary words or phrases, focusing on the most critical elements of your team’s mission.
We’ve done our best to find mission statements relevant to design. Since these are generally internal documents, they can be challenging to find. Here are three mission statement examples and the lessons you can take from them.
“To organize the world’s information and make it universally accessible and useful.” – Source: Google’s about page.
While not explicitly a design mission statement, Google’s mission statement encompasses its design philosophy, as they aim to create user experiences that are intuitive and accessible to everyone.
“Our mission is to elevate patient safety, create beautiful therapeutic spaces for healing, and establish viable long-term programs. Through our design and consulting work, we advocate for all stakeholders in behavioral health, including patients, hospital administration and staff, and healthcare architects. Simply put, we want to make a difference in the world. When we combine our beliefs with our years of experience, we believe we can.” Source: Human Experience–Who We Are.
Human Experience’s mission statement showcases its commitment to enhancing patient safety and creating therapeutic spaces for healing. They emphasize the importance of considering all stakeholders and advocating for their cause in the healthcare industry. This mission statement demonstrates the power of clearly outlining the purpose and goals of a design team, inspiring change in their field.
“Our mission is to unlock the potential of human creativity—by giving a million creative artists the opportunity to live off their art and billions of fans the opportunity to enjoy and be inspired by it.” Source: Spotify Design.
Again, not a design-specific mission statement, but a fantastic example of placing users front and center. Spotify’s mission statement emphasizes the power of human creativity, focusing on the dual goals of supporting artists and inspiring fans.
This statement showcases their dedication to fostering a vibrant creative expression and enjoyment ecosystem. By putting both creators and listeners at the heart of its mission, Spotify highlights the importance of prioritizing the needs and aspirations of its diverse user base.
Updating and evolving a design mission statement is crucial to maintaining relevance as the design landscape and user needs change. Periodically revisiting the statement ensures it aligns with the organization’s current goals and priorities.
Design teams should consider updating their mission statement when:
Design products that align with your company’s vision using the world’s most advanced code-based design tool. UXPin Merge bridges the gap between design and development to create a reliable single source of truth across the organization, aligning teams toward a common goal. Visit our Merge page for more details and how to request access.
The post Design Mission Statement – Examples and Tips appeared first on Studio by UXPin.
]]>The post The Persona of a Great Design Leader appeared first on Studio by UXPin.
]]>Design leaders champion the design team, user experience, and, most importantly, an organization’s users. They create the company’s design vision and clear a roadmap for designers to achieve its goals and milestones.
This article explores the design leader’s role, including advice from two highly experienced industry experts who have worked in leadership positions at UXPin, Microsoft, Google, Yammer, O’Reilly Media, and GitHub.
Lead confidently, knowing your designers work with the world’s most advanced digital product design tool. Sign up for a free trial to explore UXPin’s features and start building better user experiences for your customers.
Design leaders (Head of Design) guide the design team’s vision and strategy within an organization. They establish and uphold the organization’s design principles and standards while ensuring the design team delivers high-quality work.
A design leader’s responsibilities vary depending on the organization, product, and design team’s needs, but generally, they are strong design advocates who work closely with a company’s leadership team and executives.
Here are some examples of a design leader’s responsibilities:
Becoming a design leader typically involves several years of design experience and a track record of delivering successful design projects and initiatives.
Here are a few key steps organizations typically want when hiring a design leader:
In 2017, UXPin’s founder Marcin Treder (now a Senior UX Design Manager at Google), penned his thoughts on what makes a great design leader.
Marcin wrote the following in 2017…
An African proverb says: “If you want to go fast, go alone. If you want to go far, go together”. Maintaining unity without disrupting efficiency is the pinnacle of work for a design leader.
The end game for a great leader is a successful team. A team that then consistently delivers valuable user experiences to the market.
Design leadership greatness comes in many flavors, but at the core lies a common set of experiences and skills.
Great design leaders help teams and users meet their goals.
We might work in completely different organizations and with entirely different products, but some aspects of being a design leader remain the same:
I imagine a great design leader who is not a designer at all–someone who can lead with a love for design and their team. A person with a clear understanding of the design process and the determination to create a vision to help users.
Leading designers without experience is an enormous challenge in building trust and respect, making part of the job challenging–namely, giving tactical feedback or helping designers upskill.
While I’m sure there are great non-practitioner design leaders–I’ve yet to meet one. Typically, great design leaders are experienced practitioners who discover that they do their job better by scaling through a team.
Instead of directly designing user experiences, design leaders do it indirectly by shaping amazing teams. Growing their design skills becomes secondary to the help they can offer to their teams. They gradually give up the design craft to develop the organization’s design efficiency.
Design leaders design indirectly – through the work of their teams.
Having said that – most design leaders, including yours truly, continue to tinker with small weekend side projects. Why? Because we absolutely love it.
A design leader’s primary function is firing themselves from a design job–they need to get out of the way so others can do great work. The best design leader must become the worst designer on the team.
Growing the team’s abilities is the shortest way to scaling design in an organization. Unfortunately, it’s not an easy task. It requires time and a saintly amount of empathy. You have to be there for your team and help them become much better than you are.
In my experience, designers are typically more preachers than listeners. Even when we listen, we listen for our turn to comment. And when we comment, we want to be right.
Being a successful design leader requires much more.
In a way, we have to apply the practice of user research to our teams so we can truly understand the problem. We have to listen. And our preaching becomes something completely different.
To make the voice of design heard loud and clear in an organization, we have to be outspoken. But it’s not our voice that the organization needs to hear. It’s the voice of our team.
Great design leaders listen to preach and preach to listen.
Design leaders should serve as loudspeakers for the team to amplify their message. At the same time, design leaders should coach the team to listen to others and be empathetic.
Great design leaders are fighters tirelessly fighting for the team and users. Both groups need strong advocates in an organization. Both groups want a superb experience. It’s a design leader’s job to remove all obstacles.
When I realized there’s so much that design leaders have in common, I decided to use a very familiar concept to illustrate it. I created a design leader persona.
Feel free to use this persona to shape your design leadership program, promote and hire design leaders, or use it as a conversation starter about design leadership.
We chatted with Design Leadership expert Cindy Alvarez who shared six best practices from her experience in leadership roles at Yammer, GitHub, Microsoft, and O’Reilly Media.
Here is Cindy’s advice in her own words:
Your job as a designer is to solve problems–not to make things look pretty. To do your job, you need to understand the who, why, when, what, where, and how.
People will try to hand you a spec or a list of requirements and say, “I’ve already thought about this a lot; just design it.” Don’t accept that. Insist, politely but firmly, that they tell you what the main goals of this project are.
For any project, one can say, “if it doesn’t achieve X and Y, then we’ve failed.” Are you trying to sell or educate? Reassure or challenge? Are you encouraging exploration or optimizing for speed? Is this a one-time signup or an everyday task? Is the audience skeptical or already enthusiastic?
People will suggest that you just use a lightbox, the same styling we used for feature Q, or just copy what Company Z is doing. These might be the best solution, but you won’t know unless you push back to the defined objectives.
“OK, I like how Facebook uses that design element to solve X problem. Are we solving X problem, or is our situation different?” or “Yes, using that green button style would be consistent with what we’re doing on screen Y. But on screen Y, the user is completing a one-time configuration; in our case, we’re trying to make a common task as fast as possible. Does it make sense to force consistency for different behavior types?”
I also call this “don’t be magic.”
If you’re a skilled designer and an intuitive listener, you can combine what people are saying and not saying, deduce what they’re hoping to end up with and make it magically appear on your screen. Voila! People will love you for this. It’s a critical skill for early-stage startups and design emergencies.
It’s also terribly non-scalable. It allows people to believe that they are communicating clearly when they’re not. It will enable people to think that design is “just drawing” and that the thousands of implicit decisions you make about visual priority, color, scale, and ordering are arbitrary.
You need to translate out loud: “So it sounds like you’re asking for X and Y, and you like how Company Z solves this problem because they have these similarities to us. And you’re looking to solve problem Q. Is that right?”
You need to explain your design decisions: “I’m using this style because it emphasizes element A, which is the most important action a user must take. I’m deliberately not copying what we do for feature B because the target user is completely different.”
In past jobs, I’ve worked with designers who were at opposite ends of this continuum:
“Tell me what to design, and I’ll crank it out” < — — — — — > “change 1 pixel, and you’ll destroy my masterpiece.”
Neither is productive. And it’s incredibly hard to learn where on that spectrum is the most effective for you, your personality, and your organization. But you’ve got to try.
If you believe adding that fourth link will clutter the UI, speak up and explain why. Feel free to express your doubts and the risks. And then, if your stakeholders disagree, pick your battles. Sometimes it’s worth it to fight to the death. Usually, it’s not.
These are the questions that people will have but usually don’t ask:
You’re better off listing what you’ll deliver in writing, with the above questions answered and a date. It will feel like overkill. It will prevent a lot of misunderstandings. Use it as a checklist.
If something comes up (and it will) and you cannot deliver what you promised, immediately reach out and offer a plan for getting back on track.
Ask to make sure that’s the most convenient/effective plan for the people on your project.
Do not let a deadline slip without a word. Do not go off without a word; work in silence, and re-emerge three days later with all the work done. Speak up immediately, so no one has to wonder or go looking for you.
Our process is not there to constrain you; it’s there to help the team work more effectively. If it’s not working, chafing at it and making yourself miserable will not help. Trying to sneak around the rules won’t help, either. Complain constructively so we can fix it.
If you find yourself doing the same task repeatedly, stop and ask if there is a way to automate or simplify it. If you feel like your work is wasted, stop and ask why.
Or, if you did something extraordinary, stop and teach your peers what you did. Share successes. Rehash good meetings and projects, not just bad ones. Analyze why things went well, and try to reproduce.
Thank you to Cindy for sharing these tips from her professional career. You can learn more about Cindy via her website or connect with her on LinkedIn.
UXPin is the world’s most advanced end-to-end design tool, enabling design teams to create prototypes that look and feel like the final product.
Here are four key features that set UXPin apart from traditional image-based design tools:
Take your design team to the next level with advanced, interactive prototypes that look and function like the final product. Sign up for a free trial to explore UXPin’s features.
The post The Persona of a Great Design Leader appeared first on Studio by UXPin.
]]>The post 6 Design Culture Examples and How to Create Your Own 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.
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:
Creating a good design culture requires commitment from leadership and collaboration between different departments within an organization.
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.
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.
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 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 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.
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.
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.
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.
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:
Next, Rexlabs’ designers created systems and processes to support these values and behaviors, which included:
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.
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:
“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.
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.
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:
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.
]]>The post Design Teams Goals and How to Set Them [With Examples] appeared first on Studio by UXPin.
]]>Any design team needs to know exactly what they’re working towards. Without this, it can be easy to lose focus on the critical aims and goals of their work and projects.
Design team goals are a great way to ensure your team is on track to completing the right tasks and to help productivity and focus throughout the whole team. It can sometimes be hard to know how to correctly set goals, however.
At UXPin, we believe that any design team should be able to work to their full potential. That’s why in this article, we’re going to go over the ins and outs of design team goals, and how to set them. Give your team transparency, ease of work, and understanding by trying out component-driven prototyping. Get access to UXPin Merge and break silos between design and development teams right away. Discover Merge.
Design team goals are set milestones that your designers are expected to achieve in a given time.
Instead of being specific, a ‘design team goal’ can be fairly broad. The term is frequently used for both larger objectives and smaller tasks, which can lead to confusion. Instead, the consensus is that OKRs (objectives and key results) are the way to go about goal-setting and hitting milestones.
OKRs are used by many top tech brands and other organizations like Nielsen Norman Group to create goals, evaluate and track progress, and reward achievements within their organization.
The OKR structure is clear and simple and is designed to be straightforward for ease of communication and understanding.
OKRs are popular due to how great they are at unifying a team towards a goal and help stakeholders understand what the team wants to achieve.
With this structure, product teams are more likely to work more efficiently and productively towards a target. If they have a tangible target that they can see to attain, they can move towards it and ensure they’re on the right track.
Design team goals are set to enhance collaboration, refine your processes, and help unify your team. OKRs are the best approach for achieving your aims and getting solid results.
Here, we will use this methodology to show you how design team goals can be set to support collaboration, optimize the design process, and foster belonging throughout your team.
The following example is inspired by Nielsen Norman’s Anna Kaley’s example OKR of working towards improving the experience of customers and prospective buyers. You can measure this through different indicators — this example uses metrics, such as repeat purchases, conversion rates, and journey path abandonment rates.
Objective: Improve the user journey to save people time and effort
This example’s objective was set for three months and was based on collaboration and workflow. The Key Results are based on making collaboration more efficient and simple to save time.
Objective: Improve the workflow between design and development to save more time
The next example comes from Lattice. Their design team expanded from six to 39 designers over two years, which led to the company deciding to reevaluate the ways they set goals.
Lattice’s Staff Product Designer ran an annual retrospective, which helped them set three key objectives for the upcoming year. Each objective was established and their respective teams worked to make four key results, one for each quarter of the year. The following example is one of these objectives:
Objective: Evolve processes to keep pace with team growth
GTMHub shared the following example based on turning ‘output into outcomes’, this one specifically being centered around improving landing page performance. With this set goal, you can have a certain percentage or number to reach, which can help your team track their performance and can push them when necessary.
Here, a specific team or subset of the design department has been assigned OKRs to help them prosper at this specific task. Their OKR examples include:
Objective: Boost performance through landing page UX/UI
Here, Delivery Hero-Talabat’s Amber Jabeen talks about Delivery Hero’s team struggling with their design language. As it was incredibly confusing and inconsistent, their team found it hard to keep productive and efficient with its mess. So, their team took the challenge to improve it.
The video below covers this process in-depth. It shows the benefits of taking time to improve their design language consistency so everything and everyone is on the same page.
In this example, Amazon/Alexa Senior UX Designer Omkar Chandgadkar talks about his aim to take more control over his impact on company operations, from what was a more passive approach to design projects’ intake beforehand. By using goals to change his approach, he managed to make a shift and stay focused on his goals and achievement.
His process here was to move his approach from tactical to strategic, which is a great goal for teams to take more initiative regarding their design work. Certainly, it will affect their design skills as well and contribute to their personal development.
He goes over the full process in this great video.
As well as setting clear goals and objectives, a great way to support your team is by taking the initiative to reach out and assist them. This includes allowing and ensuring they have access to the right tools. Especially, those that can help enable their productivity while supporting team-wide collaboration and accelerating their work.
UXPin Merge unlocks your design team’s potential, allowing them to work more collaboratively and efficiently to result in maximum goal achievement. With Merge, designers can bring interactive components into UXPin and work faster and smarter without duplicating work.
Collaboration is important to any team, and Merge is great for working with your team clearly and quickly. By being able to keep consistency, you can ensure that everything is well-oiled and there’s no confusion as to how systems and components are applied and implemented.
Merge is a great way to strengthen your team — as giving them more transparency, visibility, and understanding will create better design culture and better product design-development team collaboration.
Design team goals help establish focus and motivation within your team. OKRs make it easier to refine your design and boost the effectiveness of your end product. By creating clear goals, you can ensure that your team is working towards positive outcomes and can overcome crucial DesignOps challenges.
However, OKRs can’t effectively be achieved without tight communication and team collaboration – especially when there’s a disconnect between your UI and UX design and product development teams.
That’s where UXPin can help. Our prototyping tool allows you to design with the same components that devs use. This helps break down limiting team silos. With UXPin Merge, you can create hi-fi prototypes of products on the fly and understand the actual user experience of the product you’re creating.
Discover UXPin Merge and see how you can supercharge your team collaboration.
The post Design Teams Goals and How to Set Them [With Examples] appeared first on Studio by UXPin.
]]>The post Building a Component Library – A Step-by-Step Guide appeared first on Studio by UXPin.
]]>Whether you’re creating a design system from scratch or want better front-end development cohesion and consistency, building a component library is an excellent way to improve your product’s user experience.
A component library will save you significant time in the long run, but it will require a lot of resources and attention to detail to build from scratch. Engineers must consider the product’s current priorities and future possibilities to ensure the component library is scalable.
With UXPin Merge, you can create fully functional prototypes with the UI elements that come from your component library that preserves its functionality when imported into the design editor. Share a single source of truth across design and development. Visit our Merge page for more details and request access.
Component libraries help unify code for improved front-end cohesion and consistency. It also minimizes how much code developers must write to release new products and features.
Most engineers decide to build a component library because they recognize one of several common problems:
A component library aims to solve or reduce these issues while providing engineering teams with a scalable front-end framework.
An interface inventory or UI audit is a crucial first step. Audits often uncover many UI and programming inconsistencies engineers must address before building a component library. Sometimes these inconsistencies are subtle, like two slightly different HEX codes, while others are more obvious, like multiple button variants (various sizes, shapes, colors, CTAs, etc.)
Design systems expert Brad Frost recommends screenshotting every user interface and cutting out each component. It’s a tedious, time-consuming but essential task to take stock. It’s important to do this inside the actual product rather than relying on project files because it’ll tell you exactly what customers see and expose any errors/inconsistencies.
Sort your components into categories to see what you’re working with. These categories will also form the foundation for your component library.
If you need help sorting your component types, consider copying Google’s Material Design or Apple’s Human Interface Guidelines. Alternatively, you can use Atomic Design to organize UI elements.
An interface inventory is also an excellent resource for advocating your component library to stakeholders. Showing these inconsistencies is often the best way to demonstrate the scale of the problem and the necessity to allocate resources for a component library.
Once you know what to build, you must decide how to build it. If you’re using a Javascript framework (React, Angular, Vue, etc.), we recommend using Storybook to develop and manage individual components.
Storybook allows engineers to build and test components in isolation. You can also create documentation, set up development workflows, and collaborate with engineers and stakeholders.
The added benefit of Storybook is that it syncs with UXPin Merge–technology for component-driven prototyping. So, once your component library is complete, you can connect it to UXPin so design teams can build fully functioning prototypes.
Merge isn’t only for UX designers. TeamPassword doesn’t have a design team, so the engineering team (of two) must prototype and test user interfaces. TeamPassword used to do this by writing code but wanted a faster method for prototyping and testing.
TeamPassword syncs its custom MUI component library to UXPin using Merge technology, where they build and test prototypes.
“The process of taking the finished design and developing it into a product got way faster, too. It is so rapid to export the prototype with all the specification and production-ready code. The time that the team normally had to spend on writing front-end code is saved.”
With your list of components and corresponding categories from the interface audit, it’s time to develop your component library–but where do you start?
Here are some techniques for building a component library from scratch. We’ve also included some technical resources for developing your library in Storybook.
We recommend following Brad Frost’s Atomic Design methodology to develop components from the ground up. This method will create a modular system to build new patterns and scale your component library.
Atoms are components you cannot break down further. They’re also the building blocks or dependencies for the rest of your component library. Atoms include:
Multiple atoms combine to construct molecules–the individual UI components users interact with, including forms, tabs, accordions, etc. For example, a search component = label + text field + button.
Organisms are UI patterns that combine two or more molecules. A navigation bar is a common organism example:
Templates feature multiple organisms and molecules to make a complete user interface. These templates help eliminate redundant workflows to deliver products faster. Some examples include:
Design tokens are vital for building scalable cross-platform component libraries. These tokens contain UI data, including colors, spacing, typography, assets, animations, etc., to style UI components.
A single token contains properties formatted for each platform. For example, Android, iOS, and web browsers use different measurement units:
Engineers can program a token to accommodate each unit of measurement to ensure consistency across every operating system.
Design tokens also make updates much more straightforward. Instead of modifying multiple files, engineers update the token to make cross-platform changes.
Creating design tokens from the start reduces redundant work while building your component library while future-proofing your code.
The most common recommendation from people who have built component libraries from scratch is documentation! Your component library’s docs make collaboration easier by informing other engineers how to develop and maintain components.
You should document every component as you complete it while it’s fresh in your memory. Additionally, you should document every change.
Mikael Sukoinen from Vaadin recommends documenting each component as follows:
Your documentation must also include:
Here are some technical guides for building a component library:
Open-source component libraries provide a foundation to build a component library fast. Engineers also benefit from a scalable syntax–a process requiring many hours of friction and debate among developers.
Customization is the most important thing to consider when choosing an open-source component library. Make sure the library is themeable, preferably through design tokens. You also want something that’s regularly maintained with comprehensive documentation.
While open-source component libraries are themeable, there are limits to how much customization you can do to get a unique aesthetic. You’re also constrained by the library’s syntax and design language, so do your research before making a final decision.
Storybook is an excellent tool for building your components in isolation and testing them internally–but what about user testing? Unfortunately, Storybook has limitations regarding usability testing in browsers or mobile devices.
Yes, you can build a prototype with code, but making changes and iterating is time-consuming.
Merge allows you to import your component library from a repository to UXPin’s design editor so you can build prototypes to test your new component library. Merge creates a drag-and-drop prototyping environment, eliminating the steep learning curve required for traditional design tools.
This prototyping workflow has worked for tech giant PayPal and a startup of five, TeamPassword. Interestingly, both organizations switched to Merge due to UX scalability challenges. PayPal and TeamPassword have teams with little or no design experience completing UX tasks like prototyping and testing using Merge.
PayPal had five UX designers to over 1,000 engineers servicing more than 60 products. After switching to UXPin Merge, PayPal’s product teams (who had no previous design tool experience) complete 90% of design projects 8X faster than experienced UX designers could using image-based tools.
As a cash-strapped startup, TeamPassword doesn’t have the resources for a UX team but understands the importance of user experience to be competitive. Merge gives TeamPassword’s two-person engineering team a platform to prototype and test user interfaces with end-users–filling the UX designer void. Like PayPal, TeamPassword delivers products and features faster with Merge.
Building a component library requires significant resources. Often engineers don’t have access to a UX team or the knowledge to create and test components using a design tool. UXPin Merge bridges the gap between design and development, so designers and engineers speak the same language.
UXPin Merge empowers designers to build superior prototypes and solve more problems during design projects, but it also empowers engineers to prototype and test in situations where they don’t have UX resources.
Build your component library with Storybook and UXPin Merge. Visit Merge page for more details and how to request access.
The post Building a Component Library – A Step-by-Step Guide appeared first on Studio by UXPin.
]]>The post 5 Mistakes that Kill Collaboration Between Designers and Developers appeared first on Studio by UXPin.
]]>We’ve looked at how to make it easier for designers and developers to work together. But what roadblocks and workflows work against this collaboration?
We’ve researched common mistakes design teams and product managers make when working with software engineers and how they can collaborate better. Reducing friction and roadblocks creates a smoother product development process while increasing Design’s value.
Enhance collaboration and bridge the gap between design and development with UXPin Merge. With this tech, you can bring your component library’s elements to UXPin and create functional prototypes that we’ll be developed exactly as you designed them. Check more about it. Visit our Merge page.
Whether you’re an early-stage startup or part of an enterprise software development team, design handoffs are often a time of friction between designers and engineers. One of the biggest causes for this tension is prototype fidelity.
Image-based design tools produce poor prototypes that lack fidelity and functionality, making them hard to interpret and understand–for engineers, stakeholders, and usability participants.
Design teams have two options:
The latter is a better solution because it removes reliance on engineering teams, significantly enhances prototyping capabilities, improves testing, and facilitates better designer/developer collaboration for smoother design handoffs.
UXPin’s code-based design tool enables designers to build prototypes that accurately replicate the final product experience.
Engineers and stakeholders never have to “imagine” doing something because UXPin’s fully interactive prototypes provide an experience comparable to code.
Here are four UXPin features that enhance prototyping:
Sign up for a free trial to discover these and other advanced UXPin features.
One of the biggest mistakes designers can make is not clarifying the why behind design decisions. How can engineers understand or empathize when they don’t know what user problems you’re trying to solve?
The key to clarifying design decisions is to be proactive. Get developers involved throughout the design process and avoid design handoff surprises.
Designer and business leader Antonia Horvath offers excellent advice for improving collaboration and including engineers in design decisions:
Contrary to popular belief, UX teams are not solely responsible for a product’s user experience–it’s the entire organization’s responsibility. However, without effective design advocacy driven by UX designers, no one willingly learns about user experience.
As Erica Rider, UX Lead EPX at PayPal, pointed out at Design Value Conference 2022, “companies have a significant control/accountability imbalance.”
The UX team’s role is to educate engineers about user experience and for both departments to share the responsibility.
Erica has developed systems to ensure “the UX team works with engineers to deliver a good user experience at PayPal, but the engineers are accountable for the final product.”
One of the biggest hurdles is a shift in thinking. Everyone outside of UX thinks the designer’s role is aesthetics and UI design.
Erica’s education methodology was to shift engineers thinking of user experience away from aesthetically-pleasing user interfaces to problems that cause bottlenecks and roadblocks over which engineers have absolute control. Some examples include:
Developing an organization-wide user experience mindset (starting with engineers) will increase empathy for users while sharing the responsibility.
In a UX Tools article, Taylor Palmer shares insights from interviews with engineers about “how user research helps them create better experiences.”
Engineers care about user research because it helps them understand design decisions and, as one developer puts it, “make sure we’re building the right thing.”
Developers don’t need access to the design team’s entire user research archives, nor do they have time to sit in user interviews. They prefer summaries, notes, and recorded interviews.
Taylor Palmer put together a list of ideas for sharing UX research with engineers:
One of the most significant challenges for product development teams is overcoming the disconnect between designers and engineers.
Designers and engineers speak different languages without a single source of truth from a fully integrated design system. The results?
Poor collaboration, design drift, friction, and other negative consequences adversely impact user experience and product quality.
Creating a design system doesn’t guarantee you’ll have a single source of truth. Traditional methods for building design systems mean designers and engineers use separate “truths.”
Of the four stages of design system maturity, this is stage three. Getting to stage four requires a tool to bridge the gap between design and development, where designers and engineers use the same component library.
Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress, refers to stage four as fully integrated:
Iress used UXPin Merge to sync design and development. Merge pulls Iress’ component library from a repository into UXPin so designers can build code-based prototypes that look and feel like the final product–and designers don’t need to see or write any code!
This shared single source of truth means designers and engineers speak the same language and work within the same technical constraints. Reducing friction and streamlining workflows in the process. Visit our Merge page for more details and how to request access.
You’ve heard the results, but how does UXPin Merge work? Merge allows organizations to sync their design system from a repository to UXPin’s design editor.
Organizations can connect a React design system directly to UXPin using the Git Integration or Storybook for other front-end technologies, including React, Angular, Vue, Ember, and HTML, to name a few.
The component library appears in UXPin’s left sidebar for designers to drag elements onto the canvas to begin prototyping. Each UI component includes properties defined by the design system, like colors, sizing, typography, states, etc.
Designers can switch between these using dropdowns and selectors in the Properties Panel. Any changes render as JSX, making it easy for engineers to copy and paste to begin the development process.
Get your entire product development team to speak the same language with a code-based design solution from UXPin Merge. Visit our Merge page for more details and how to request access to this revolutionary technology.
The post 5 Mistakes that Kill Collaboration Between Designers and Developers appeared first on Studio by UXPin.
]]>The post What is a Design Critique and How Can it Improve Your Designs? appeared first on Studio by UXPin.
]]>Collecting feedback is an integral part of a product designer’s work – one which allows them to make sure that the product they’re designing is both intuitive and adds value to users’ lives. However, it’s not just about asking fellow designers, stakeholders, and developers for their opinions, per se. It’s about getting the most out of design feedback – and here’s where a design critique procedure is the most effective way of doing this.
Design critiques offer a tried-and-tested approach the opportunity for their prototypes to be explored and for user experience flaws to be quickly identified and fixed.
What is a design critique? How should you structure your design feedback sessions? Why is feedback so important for making better design decisions? In this article, we’ll cover everything you’ll need to know to improve your product designs through targeted design critiques!
UXPin is a design tool that enables real-time collaboration. It’s an end-to-end solution that covers the whole design process, from working on basic user flows to building interactive prototypes that can be easily shared with stakeholders and product managers. Try it for free now.
In product design, feedback is key. It leads to good design and positive culture in which designers can flourish. Design critique simply refers to the process of analyzing a design or prototype to determine if it meets the criteria and requirements of the project.
What kind of feedback or pointers do designers seek from design critiques?
Remember, design critiques aren’t brainstorming sessions or usability tests. They’re a method for designers to get specific, actionable feedback from stakeholders about prototypes, wireframes, and other deliverables, so they can give constructive feedback and find the perfect design solution.
The primary goal of design critiques is to improve the product design – and so, the discussion should be focused on the objectives of the design project.
Design critiques usually take the form of meetings or round-table discussions where designers share their prototypes for discussion. A design critique panel is made up of a handful of designers, developers, analysts, or other key stakeholders.
There are two main types of design critiques. These are:
These days, design critiques don’t need to be held in person, or even at a set time. With real-time collaboration tools like UXPin, design critiques can be delivered asynchronously through iterative feedback.
Are design critiques worth the hassle? Do they really improve the product’s design and usability?
Absolutely. Design critiques help break down silos, where individual designers or teams are disconnected in their approach from other colleagues and the wider business objectives.
Incorporating stakeholder feedback from the early stages of a product’s design process helps focus the features and objectives of the application. Here’s how:
What roles are important to implement to ensure a successful design feedback session?
Here are a few key ideas:
How big should a design critique panel be? It’s important to get a variety of viewpoints, but larger groups are difficult to facilitate. We recommend anywhere between 3 to 7 members.
There are three key steps to a constructive design critique session. Let’s discuss them:
Before a design critique session begins, the facilitator should set out clearly what the scope and expectations of the critique are. This should be communicated through a written meeting agenda.
Here’s what it should clarify:
It’s also important for presenters to prepare the presentation and share the prototype with the rest of the panel. before the meeting to gather their thoughts!
Pro tip: We recommend letting critiquers explore the design solution before the session takes place. You can do so by sending over the designs in an interactive, collaborative tool like UXPin. Your participants will be able to easily add notes and ideas they’d like to cover during the meeting.
How can you make sure you’re getting the right feedback? NN Group’s Chief Designer Sarah Gibbons suggests using one of these two key approaches during Q&A sessions:
A key tenant of agile and iterative design is collecting follow-up feedback. Presenters should regularly keep a panel updated on how their feedback is being implemented in design iterations.
Why is it important?
With UXPin, it’s easy to share prototypes and collect feedback directly on your designs. As a result, you’re able to speed up your design iterations.
Among others, UXPin helps team work better together:
Actionable feedback guides to great product design. Many designers struggle to break out of silos and worry about sharing their unfinished work with others.
Design critiques are a brilliant way to formalize this and turn it into a regularity. With good critiques, designers can easily collect relevant and actionable feedback on product prototypes. By incorporating designer and stakeholder feedback into the UX design process, you can reinforce your business goals and design products that better meet user needs.
How should you structure design critiques? The role of the facilitator here is crucial, as defining the scope of exploration can help designers get the most useful feedback from critique sessions.
To support the collaborative approach that design critiques and agile feedback promote, it’s worth using a collaborative design tool. With UXPin, you can build interactive designs easily and invite your team and stakeholders to collaborate on your projects.
Try it out for free and see how it can help you improve your product design process.
The post What is a Design Critique and How Can it Improve Your Designs? appeared first on Studio by UXPin.
]]>The post How to Deal with FinTech Legacy Systems appeared first on Studio by UXPin.
]]>Many organizations struggle to free themselves of legacy systems and the headaches they possess. These outdated ecosystems present many challenges, including user experience and digital innovation.
The burdens of legacy technology are why challenger banks can compete with traditional banks, adopt sophisticated technology, and deliver products to customers significantly faster.
This article explores the challenges of legacy systems and their adverse impacts on business and customer experience. We also look at how FinTech companies outperform traditional financial service providers without these legacy burdens and what the latter can do to modernize.
Modernize your UX workflows and create a single source of truth between design and development with UXPin Merge to deliver products faster while reducing time to market. Visit our Merge page for more details and how to request access.
Legacy systems are hardware, software, and other outdated technology organizations still use. The company that built the legacy system is usually no longer in business, or they’ve stopped offering updates and support for the product.
Without updates and support, the organization must employ IT experts to maintain and operate the legacy system. The talent pool for these systems is small, so labor is expensive, and they often have to fabricate hardware replacements at high costs because parts aren’t readily available.
Legacy systems also require a significant amount of space. Many organizations operate on systems that are 30-50 years old. The hardware for these legacy systems is bulky, requiring significant real estate to operate and maintain efficiently. Institutions must also worry about data integrity and ensuring they don’t lose everything when a system crashes–and legacy systems do crash!
Legacy systems are still widely used in the banking sector and government institutions. Not only are legacy systems expensive to maintain, but they present significant security risks.
According to a Forbes article, most US Federal Government systems are outdated. The US Treasury is one of the oldest systems at 51 years old, closely followed by Health and Human Services at 50.
These technical issues present a challenge for UX designers trying to design a good user experience for a back-end held together with adhesive tape and bubble gum. Legacy systems offer several critical challenges for product teams:
FinTech products solve the same problems as organizations running legacy systems but can compete because they have fewer constraints.
Here are some ways FinTech outcompetes multinational financial institutions with decades of experience and expertise.
Speed to market is one of FinTech’s greatest strengths. With modern technologies, efficient workflows, and no silos or bureaucracy, FinTech product teams can innovate and deliver projects fast.
FinTech companies are also free to test and adopt new technology, like machine learning, blockchain, and artificial intelligence, which significantly enhance product quality and customer satisfaction.
This efficiency makes app-first investment products like Robinhood, and digital banking providers like Monzo, Chime, and Nubank, to name a few, successful. They offer clients a comparable financial product through sophisticated applications they continually innovate.
Traditional financial institutions battle to compete because they’re slow to market and are always two steps behind faster, agile FinTech organizations.
FinTech organizations adopt a user-centric mindset for decisions and innovation. They understand user needs better than traditional financial institutions because they’re more in tune with modern digital software development, specifically, user experience and design thinking.
This user-centric approach enables FinTech organizations to prioritize customer needs and focus on core banking products that meet expectations–creating better trust, adoption, and retention.
Data integrity and quality are significant issues for legacy system financial institutions. Legacy systems prevent holistic real-time analytics, which slows decision-making and innovation.
Conversely, modern FinTech organizations have high-quality real-time end-to-end analytics allowing them to identify issues and opportunities.
These valuable insights enable stakeholders to make educated decisions aligned with the company’s vision, roadmap, and customer expectations.
UX research and user testing are facets of user-centered design adopted by FinTech organizations. These valuable UX insights, paired with quality analytics, provide FinTech organizations with more detailed, holistic customer personas.
This deeper understanding of customer behavior enables FinTech designers to prioritize products and services that meet user needs while identifying unique business opportunities.
Many successful FinTech organizations use Agile environments and cross-functional product development teams. These modern workflows minimize silos, align teams, reduce errors (UX debt/technical debt), and facilitate faster, more accurate project delivery.
FinTech organizations are also more adept at remote work environments, allowing them to draw from a global talent pool and onboard much faster.
Traditional financial institutions suffer from silos and, due to regulatory requirements and company policies, take longer to onboard talent and build teams.
Measuring and reporting are vital components of modernizing legacy systems, including:
Using these methodologies is just the first step. Design teams must use these insights to present quantitative data to stakeholders. For example,
what is the cost of poor user experience from legacy systems, and what are the potential returns for modernization?
When Talabat’s product team battled to get investment for a design system, they built a business case around the costs of front-end debt. The team measured the time it took to develop a UI with and without a design system. The results demonstrated significant losses for Talabat’s front-end debt, convincing stakeholders to invest in the product’s design system.
Your problem and solution must include numbers to support your business case. Stakeholders want to see metrics and KPIs to assess:
Designers can use design thinking to prioritize projects and identify opportunities that maximize business value. Finding the balance between desirability, viability, and feasibility is an effective research technique for innovative products that deliver sustainable long-term growth and success.
Finding the sweet spot in this trifecta can maximize business value while solving customer needs. To be successful, the entire organization must embrace design thinking and user experience principles.
Design advocacy and design thinking workshops are crucial in getting buy-in from team members and stakeholders and steering them towards a modern, user-centered mindset.
As legacy-constrained institutions adopt these design thinking principles, it gets harder to justify “the old way of doing things” at the expense of users and the business.
Many organizations, including those on legacy systems, still operate without a design system. Even the “modern” digital payment giant PayPal only adopted a design system for its internal products in 2019!
Design systems ensure there’s an organization-wide single source of truth. Streamlining product development workflows and maximizing cohesion and consistency reduces usability issues while allowing designers to focus on solving user problems rather than building components for every project.
Although a single source of truth won’t solve your company’s legacy challenges, it’s a step towards modernizing workflows and reducing time-to-market–a significant issue for slow-moving financial institutions.
UXPin Merge is an excellent tool for modernizing legacy systems and reducing time-to-market. After adopting UXPin Merge in 2019, PayPal’s product designers were able to build UIs 8X faster than before.
Merge also revolutionized PayPal’s development process and scaled design output without employing more UX team members–a key factor for organizations struggling with budget constraints!
PayPal’s UX Lead EPX, Erica Rider, chose Microsoft’s Fluent UI design system. The DS team created custom components and templates, so designers only had to drag and drop elements to build user interfaces. As Erica calls it, “a ‘snap-together’ type design.”
PayPal used Merge to sync its Fluent UI React library to UXPin, so designers had all the same components. They used React props to set styling and interactivity constraints which designers adjust via UXPin’s Properties Panel.
Design handoffs in Merge are seamless, almost non-existent–a far cry from the chaotic mess many organizations deal with when releasing new products and features!
With designers and programmers using the same component library, most front-end development is copy/paste and adjusting props to meet designs. UXPin provides JSX code, so designers can copy that too!
Minimal designing and coding from scratch reduce errors, technical debt, and time-to-market while enhancing collaboration and user experience.
Are outdated business processes and legacy systems affecting your UX team’s ability to compete and meet customer expectations? Create a single source of truth to enhance product development workflows and deliver better user experiences to your customers with UXPin Merge. Visit our Merge page for more details and how to request access.
The post How to Deal with FinTech Legacy Systems appeared first on Studio by UXPin.
]]>The post How to Manage Design Teams (Effectively)? 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.
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.
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.
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:
Consider these questions and other potential improvement areas such as task distribution, management of workload, and consistent performance.
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:
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.
Now you’re able to start streamlining how design teams work. Encapsulating the above steps and implementing them might look as follows:
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.
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.
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.
]]>The post 5 Design Team Rituals that Will Bring The Team Together [+ How to Create Your Own] appeared first on Studio by UXPin.
]]>Design team rituals help build company culture and community. They’re also excellent tools for fixing common corporate issues like silos, big egos, poor communication, etc. In cross-functional teams, a design team ritual brings designers together to strengthen bonds and collaboration toward successful project deliveries.
This article explores five popular design team rituals, how to create one, and best practices to maximize engagement and long-term success.
Boost communication and engagement with UXPin–a collaborative design tool. Sign up for a free trial to discover how UXPin can enhance UX workflows to deliver better user experiences for your customers.
The purpose of any team ritual is to bring people together to strengthen bonds and develop a shared company culture. A ritual involves repeating conscious and deliberate action(s) on a specific day, date, or time.
For something to be a ritual, people must repeat it regularly and consistently. The ritual could be as simple as Friday morning coffee with the team, or something bigger, like an annual retreat.
Rituals tend to be light-hearted and informal; however, people are encouraged to take the process seriously and abide by any rules or conditions. The aim is to align values and behaviors towards a shared goal or purpose.
Design team rituals are specific to designers, excluding other teams and departments–which can be especially valuable when working in cross-functional teams. The aim is to encourage collaboration, growth, and culture among designers while providing a space to discuss design-related topics and challenges.
Here are five popular design team rituals, whether you work at the office, remotely, or in a hybrid environment.
Environment: In-office or Zoom
Benefits: Good for solving design problems and encouraging collaboration
Design critiques are an excellent way for designers to present ideas for group feedback. For many, combining public speaking and a critique of their work can be an anxiety-inducing experience, so you’ll want to make sure there are rules to keep things light-hearted and respectful.
It’s good to use a semi-formal setting where presenters can use a projector to show their design(s) to the entire team. Time will likely be an issue, so create 15-20 minute slots team members can book in advance.
Design leader Jared Zimmerman recommends designers prepare a single slide with three points:
This format makes these design critique rituals purposeful and encourages team members to make the most of their short time.
Jared emphasizes the importance of presenters telling the group exactly what they need in terms of help–“I’m really having trouble with X; what do you think would solve this?”
Environment: In-office or Zoom
Benefits: Good for breaking silos, team bonding, and developing the organization’s culture
Coffee rituals are a fantastic opportunity for design team members to discuss topics freely. Design lead at Atlassian, Alastair Simpson, has a simple daily morning coffee ritual format. He asks team members what they did over the weekend and what work challenges they’re experiencing.
In these informal settings, team members often think more freely and openly, resulting in solutions and ideas to solve big challenges.
Environment: In-office or Zoom
Benefits: Good for leaders to connect with individual team members
Rituals don’t only apply to group activities. Design managers and leaders can create weekly 1:1s with team members to discuss their challenges, work in progress, career path, etc.
Trello (Atlassian) Design Manager, Marc Jenkinson, has created this 1:1 agenda template. Marc says in a remote environment, managers can use these sessions to get to know employees on a more personal level–maybe get introduced to the kids/pets, learn about a hobby, etc.
Environment: In-office or Zoom
Benefits: Excellent for quickly communicating daily progress and issues
Stand-ups are an agile exercise where team members share their daily progress and any blockers/challenges. The format is simple. Each person stands up and briefly answers three questions:
There are various stand-up adaptations, like a weekly version or an additional question, “What am I planning to do tomorrow/next week?”
A morning stand-up ritual is an excellent way to align designers, develop daily communication, and keep everyone on the same page.
Atlassian’s “Stand-ups for agile teams” goes into greater detail with best practices and running virtual stand-ups for remote teams.
Environment: In-office or Zoom
Benefits: Great for keeping teams connected
Morning check-in and afternoon check-out rituals are excellent for keeping teams connected. These check-ins work especially well for remote teams where some members never see each other.
Check-in rituals are informal and can be fun. Keep things light-hearted, so team members enjoy these brief times together. Joël van Bodegraven, a Product Designer at Miro, has a four-step check-in format:
One way Joël makes his check-ins fun is by creating random themes, for example:
You get the idea.
Rituals work best when they have a purpose or fix a problem–like improving communication or boosting morale. Fearless Culture has an excellent five-step plan for creating a team ritual.
What is the cultural problem you’re trying to solve?
Does your team feel fragmented by poor communication?
Is there tension among team members?
Set up 1:1s with team members to get their perspectives. Fearless Culture recommends asking team members to list five problems, identify a top five, and get everyone to vote. Involving team members increases the likelihood of getting team buy-in.
Use the “How might we…?” format to turn the problem into a challenge. Ask your team to share what people do, say, and think when the problem arises.
For example, you might find team members don’t feel appreciated for their work. Reframing the problem, “How might we design a ritual to start celebrating small victories?”
Brainstorm ideas and rituals with your team to find a solution for your problem.
Answering these questions will help narrow down what’s possible with the time and resources available.
According to Fearless Culture, creating a narrative is the best way to design a team ritual. There are five components to this narrative:
It’s important to test and iterate on your ritual process until you find the right solution for your team and purpose.
Here are some design ritual tips and best practices. We borrowed most of these from Arki Sudito’s article, Co-founder and CEO of di Growth Center.
Make delivering high-quality user experiences your team’s daily ritual with UXPin–the world’s most advanced design, prototyping, and testing tool. Sign up for a free trial to discover how UXPin can revolutionize your UX design process.
The post 5 Design Team Rituals that Will Bring The Team Together [+ How to Create Your Own] appeared first on Studio by UXPin.
]]>The post Design & Consultancy – How Internal Consulting Can Benefit Your Team 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.
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:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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 post UX Business Case – How to Build a Strong Case for Investing in Design appeared first on Studio by UXPin.
]]>With limited resources and competition from other departments, creating a compelling business case for UI/UX design initiatives is crucial to secure buy-in. You must prove you have the best solution and can execute your initiative successfully.
This article discusses how user experience design professionals can create a convincing UX business case, including an example from the UAE-based home delivery service, Delivery Hero.
Use UXPin to create a fully functioning prototype to support your business case. Stakeholders and usability participants can engage with prototypes like they would the final digital product. Sign up for a free trial to discover how code-based design can revolutionize your UX workflows and usability testing to improve product development.
A business case outlines the benefits of a project, initiative, or strategy and why the company or department needs it. A UX business case relates specifically to design-related projects–for example, building a design system, purchasing a design tool, or investing in a big UX research project.
Through a business case, the UX team must:
The solution is often more effective when paired with a value proposition. How will this project deliver an ROI for design and the organization?
Getting buy-in from stakeholders can be challenging, particularly for UX projects. Many non-designers don’t understand user-centered design principles or design thinking and are reluctant to make design investments.
Your UX business case must show stakeholders how improving a product’s customer experience is good for the bottom line. For example, a design system is a significant investment. Stakeholders often can’t see how a library of reusable components will deliver business value, so designers must demonstrate this value through a business case.
Delivery Hero is an excellent example of using a value proposition in a business case for a design system. After several attempts at pitching their design system to stakeholders, Delivery Hero’s product design team realized they had to make a more convincing case, including a real-world case study and value proposition.
Delivery Hero’s product design team used a single screen to compare building a user interface with and without a design system. The results were staggering:
The experiment demonstrated a 57% time reduction in front-end effort and zero percent front-end debt with a reusable component.
Front-end debt had become a compounding issue for Delivery Hero, so eliminating this problem and reducing delivery time by almost 60% demonstrated a significant return on investment for stakeholders.
Delivery Hero’s stakeholders were impressed with the results and gave the go-ahead for the company’s design system, Marshmallow–read more about Delivery Hero’s story here.
Now that you understand a business case’s purpose and importance let’s explore the points to include.
It’s important to note that you won’t always use all these points, only those relevant to your business case and project. The goal is to keep your business case thorough but concise. If stakeholders want to see the research, you can present that separately.
An executive summary summarizes your business case and its sections. Essential elements to include in a business case executive summary are:
The mission statement summarizes the project’s purpose and goal. It’s usually a few sentences and can appear on the same slide as your executive summary. The mission statement guides the design process while uniting team members and stakeholders on a common idea and purpose.
Check out ProjectManager’s article, “How to Write a Mission Statement.”
If your UX business case is for an internal initiative, you can replace this section with The Users and identify who your project aims to serve. For example, a design system helps product, UX, and engineering teams, but it also positively impacts end-users. You can represent your end-users with personas so stakeholders can empathize with real people.
Your problem statement outlines a key issue, who it impacts, and its effect on the business. Laura van Doore, a Design Manager at Atlassian, says, “there are two parts to executing a good problem statement.”
Problem Selection:
“Select and emphasize problems that will appeal to your audience.”
When pitching to stakeholders, demonstrate how the problem impacts the business, rather than only focusing on the design team.
In Delivery Hero’s case, the product team showed that their current project workflow accumulated front-end debt, inconsistencies, and slow time-to-market, ultimately costing the business time and resources.
If you’re presenting a problem that directly impacts users, you may want to include UX artifacts like a customer journey, user research, and other UX insights to give stakeholders a clear understanding of the issue.
Framing the Problem:
Laura’s next step is to frame the problem around your target audience:
Describe how your solution solves the company’s problem and its value proposition. The value proposition is critical for your business case. It describes the value and return on investment (ROI).
Stakeholders are less concerned about solving workflow issues than business-related impacts. How does your solution deliver an ROI?
Amber Jabeen from Delivery Hero’s design system team says your solution must use business metrics and KPIs to describe the positive benefits for the organization. How will you reduce costs, increase revenue, improve time-to-market, or make the product more competitive?
A thorough business case also considers the risks and how you plan to tackle them. Stakeholders like to see that you’ve looked at your solution from multiple angles and prepared for potential issues.
In her article, Laura van Doore from Atlassian says, “Be realistic, rather than utopian…If you sell the dream too much and present a utopian story of success-only, your case will seem too biased and might get chucked to the bottom of the pile.”
Another critical element to your business case is a timeline or roadmap. How long will it take to deliver the project, and when can the company expect to see the value you outline in your solution. What are your KPIs so stakeholders can monitor progress?
Again, it’s important to use relevant business metrics. For example, when discussing human resources, estimate the total hours per department, i.e., design, product, engineering, etc. This breakdown allows stakeholders to see how the project affects the company’s human resources and other projects.
What resources will your project need?–human, financial, technical, design, etc. If possible, include multiple scenarios to give stakeholders options based on available resources.
Think about what resources you’ll need before, during, and after the project delivery. For example, a design system requires a design audit before you start, people to build and deliver it, and a team to manage and scale it. As a design system matures, it requires more resources.
Describe your core team behind the business case and the people you’ll need to deliver and scale the project, most notably:
We’ve borrowed some of these best practices from our May 2022 webinar, Enterprise Design System – How to Build and Scale, with Amber Jabeen, DesignOps Director at Delivery Hero MENA (talabat).
Your business case must include a pain point that adversely impacts the product, its users, and the business. Stakeholders are less likely to take action if you only show how a problem affects team members.
Suppose you can prove that problem creates rework (extra cost), usability issues (losing users and producing costly support tickets), technical debt (extra cost), and slow time-to-market (less competitive and revenue loss). In that case, you have a real pain point to grab stakeholders’ attention.
Build a value proposition around your pain point. Your solution must solve the issue and deliver a return on investment. Remember to be realistic and show stakeholders you have weighed the risks.
Finding leaders and stakeholders outside of UX to support your business case will give it more weight. They will advocate that:
Include these advocates in your business case and possibly a quote from your most influential stakeholder.
People outside of UX have trouble understanding user experience and design thinking principles. Explaining the problem isn’t enough; you must show them what’s wrong and how it impacts the business.
As we saw from Delivery Hero, Amber’s team presented an experiment showing the inefficiencies and problems costing the company time and money. They proved their solution could solve the problem and deliver value to the organization.
If you present a theory to stakeholders, they’ll send you back for proof. Take the time to conduct tests and experiments to prove you can execute your solution, and it works!
Your problem and solution must include numbers to support your business case. Stakeholders want to see metrics and KPIs to assess:
Talk to cross-functional team members, leaders, managers, and everyone impacted by the problem to get their support and buy-in for your solution before presenting a business case to stakeholders. When you have the organization behind your project, it’s more likely to get approval from decision-makers.
UXPin’s code-based design tool allows designers to build fully functioning prototypes with code-like fidelity and functionality. Instead of imagining how a feature will work, UX designers can accurately replicate the final product experience–creating a more convincing business case for stakeholders.
Sign up for a free trial to build better quality prototypes for stakeholders and user testing.
The post UX Business Case – How to Build a Strong Case for Investing in Design appeared first on Studio by UXPin.
]]>