Author: UXPin

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

New Ways of Revolutionizing Design Process – Insights from Design Value Conference 2022

New Ways of Revolutionizing Design Process DVC 2022

During the Design Value Conference, our CEO, Yuga Koda, spoke on UXPin’s latest way of improving the design process for teams that would like to bring the single source of truth to design workflow, without developers’ help – Merge Component Manager with NPM integration.

Yuga explained the “why” behind Component Manager and showcased how it works.

Design Value Springs From Solid Foundations

“Empowering designers, developers, product managers, and really anyone and everyone involved in the product development cycle,” said Yuga “is key to any team or organization because people are the secret sauce.” 

People, “the secret sauce”, need strong foundations to produce great work. As Yuga says, “over the years, we’ve seen many improvements in the design process. These improvements (…) now have built on top of each other to form the foundations of design best practices.”

Build a Pyramid, not a Jenga Tower

When you ignore building the strong base of the foundations, “the more you try to build on top of it, the shakier the structure gets” which may “lead to inconsistencies in the UI that would bleed into the hand off process, and ultimately to the end users’ experience.” Yuga made an analogy that “it becomes a little like playing Jenga.” It will fall apart sooner or later.

“The benefits of having the solid foundations in place are twofold – first, you are able to immediately impact the inefficiencies with structure and standardization. Second, with less firefighting, you’re enabling teammates to focus on more value-add work, which will make a significant impact in the future.”

DesignOps is Key

DesignOps forms such foundations. It takes care of every piece of the puzzle, from creating a consistent design process to smoothing handoffs and eliminating the so-called tribal knowledge.

UXPin aims to support building foundations for a great design culture, which is clear when you look at the product roadmap, starting with UXPin Merge, a tool for smoother handoffs and better design-developer collaboration.

UXPin Merge Contributes to Creating Strong Foundations

We released UXPin Merge technology that helps designers and developers build products together and finally reach an understanding between what gets designed and what gets coded.

“The drift between what’s being designed and what gets coded remains to be an issue that is still being addressed today. Some aim to solve it by trying to translate the design into code. Our approach is to have code and the coded components be the single source of truth.”

logo uxpin merge

With UXPin Merge, product teams can bring their coded components into the UXPin editor. The component libraries serve as a single source of truth that the whole team can understand and use to create their chunk of work. As Yuga said, designers and developers have a “common language of interactive coded components for building the product together.”

It means that organizational silos can finally be broken down and designers can finally scale their work without sacrificing design and product quality.

“With this approach everyone, even non-designers, are able to build advanced prototypes without the need of understanding how to add intricate interactions in the design tool. Since they are all baked into the component anyone can build high fidelity prototypes.”

UXPin Merge contributes greatly to building strong design foundations. It helps DesignOps teams create efficiencies, strengthen design culture, and bring the team closer together.

Introducing Merge Component Manager & NPM integration

UXPin Merge integrates with Git repo and Storybook – you can bring coded components to the design editor to maintain the component consistency in both design and development. With both of those solutions, you may want to include your developers in the integration process.

We are introducing the third way of importing UI components to UXPin, an npm integration. It’s an easy, code-free way of bringing components from a design library to the UXPin editor. Check it out: Merge NPM integration.

Increase the Value of Design with Component Manager

With the upcoming release of Merge Component Manager, we aim to make the code-base design paradigm more accessible by making it as code-free as possible.

  • Create fully-interactive prototypes fast –  import UI components and see how designing with them simplifies interactivity and increases design velocity.
  • Simplify handoff with functional prototypes –  since you have a quick and easy way of designing with UI components, you can be sure that your product gets developed the way you designed it.
  • Test UI components before bringing them to your component library – import components to UXPin and test them before committing to using them. It’s a great way to find out whether you should expand the UI component library or not.

During the Design Value Conference, we presented how Component Manager works. It’s very easy. You just need to follow a few steps until you can use code components in UXPin. 

How Does It Work?

Component Manager allows you to bring components via NPM package (Yuga demoed bringing Ant Design library), configure its properties, and build prototypes with the code-based UI elements you’ve just set up.

Bring Components via NPM integration

Merge Component Manager enables you to manage coded UI components in your design process and obtain a single source of truth, but before you can use it you need to import the said components. You can use our newest NPM integration for that.

Discover Merge

A Guide to Responsive Design – 8 Easy Steps

responsive design

In a world filled with an extensive range of devices and different screen sizes, it’s safe to say that responsive design is design. Organizations cannot afford to build any website or application for a single device or screen size because they’ll lose out to a competing product that’s more accommodating to more users.

This step-by-step responsive website design guide walks designers through the process of designing for multiple viewport widths. Incorporating these processes into your UX workflow will ensure that design teams consider various screen widths when designing user interfaces.

Design responsive prototypes without adjusting multiple layouts for different screen sizes Try the power of UXPin’s Merge technology and bring React components to a design tool. Discover UXPin Merge.

Reach a new level of prototyping

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

What is Responsive Design?

Responsive design is the process of designing user interfaces to accommodate multiple viewports. The aim is to provide a consistent user experience no matter what device someone uses.

Traditionally, responsive web design considered three primary screens, mobile phones, tablets, and desktops. Nowadays, designers have more screens and devices, including smartwatches, TVs, vehicle dashboards, and fridges, to name a few. Some products also include voice, meaning design teams must also incorporate VUI (voice user interface).

Understand Responsive Design

Before designers start designing responsive UIs, they must understand responsive design and the techniques developers use for their products. 

For example, engineers can use CSS to serve users different-sized images based on their screen size or use an optimization tool that does this automatically. If engineers use the former, designers must supply assets for multiple screen sizes, whereas the latter only requires one.

responsive screens

So, before designers start a project, they must consult with engineers to understand the technical requirements and constraints. Some questions designers need to ask include:

  • Does the product use a responsive grid or a fluid grid?
  • What are the product’s breakpoints?
  • Does the operating system (Apple iOS, Android, Windows) impact the product’s layout?
  • How do engineers scale and serve images?
  • What formats do engineers use for videos, images, icons, and other media?
  • What grid system does the product use?
  • Does the product use Flexbox or regular CSS?

Responsive Grid vs. Fluid Grid

A responsive grid uses a standard 12-column grid system with pixels for sizing. Using pixels means engineers set the size of a component or container that only changes with CSS media queries. A fluid grid uses percentages, allowing UI elements to resize according to the available space.

Define Your Breakpoints

Listing the breakpoints allows designers to plan information architecture, layouts, and features for each device. For example, some complex features limit what you can do on mobile vs. desktop application versions.

The most common breakpoints include:

  • Desktops – max-width: 1200px
  • Laptops – max-width: 991px
  • Tablets – min-width: 768px and max-width: 990px
  • Smartphones – max-width: 500px

Designers must also consider screen orientation and how designs adjust to a landscape layout. For example, the iPhone 13 is 390 pixels × 844 pixels, more than double the width in landscape vs. portrait. 

Content Strategy Approach

Designing layouts around content enables designers to build intuitive, easy-to-navigate UIs. Defining your content hierarchy allows designers to organize layouts according to breakpoints.

Designers must consider hierarchy relating to the action they want users to take. For example, a blog feed’s purpose is to show users a list of articles and get them to click on something of interest. The blog feed’s most essential elements are the featured image and headline that entice users to click on an article.

On a desktop feed, designers have space to include more information, like the article’s excerpt, published date, author, and category tags. User research and interviews can guide responsive design according to what matters most to users. 

Mobile-First Design

Mobile-first design is a process of starting with the smallest screen size and scaling up. This design strategy offers two primary benefits:

mobile screens pencils prototyping
  1. The constraints of small screens force designers to include only the most critical features and UI components. Reducing unnecessary features reduces costs and time to market.
  2. It’s easier and faster to convert a mobile layout to larger screens than the other way around. Designing desktop-first often leads to compromises and redesigns to scale down to a mobile version.

A mobile-first approach also makes business sense for web design. Google prioritizes mobile-friendly content, which means a responsive design could benefit SEO to rank higher and generate more clicks.

Prioritize Content

Part of a mobile-first and content-first approach is prioritizing content that is always visible on smaller devices and what to hide behind navigational drawers, dropdown menus, or accordions.

For example, on a desktop layout, designers often show the questions and answers to users for an FAQ section. This layout would mean users would have to scroll over every Q&A to find what they want on mobile devices. Instead, designers can show users the question on smaller screens with the answer hidden behind an accordion, reducing scrolling for mobile users.

Responsive Images & Videos

Deciding on media formats at the start of the project could save designers rework later. For example, designers might use PNG for icons, but engineers use SVG because they adapt better to responsive layouts and deliver better performance.

Engineers might require several sizes and formats to serve different media depending on the device or viewport for complex responsive designs. Agreeing on these formats from the beginning ensures designers test prototypes correctly while preparing assets for a smoother design handoff.

Responsive Typography

Typography is a crucial design component impacting brand/identity, readability, voice, and readability. Selecting a typeface that translates across multiple devices is something designers spend hours, days, or even weeks deliberating.

text typing input 1

In A guide to responsive typography, UX designer Augustine Thomas talks about what designers must consider for responsive typography, including:

  • Choosing the right typeface
  • Selecting a typography scale
  • Alignment and spacing

Your project’s content, like images, video, graphics, etc., has a significant impact on all three of these elements. So, always test your typeface pairings with real content and avoid dummy text to get accurate results.

Responsive Design Performance Optimization

While performance is often a developer’s job, there are some things designers can do to make their job easier:

Use System Fonts

Every operating system has a font stack. iOS uses San Francisco, Android Roboto, and Windows Segoe UI, to name a few. Using these default fonts means the responsive website or application doesn’t have to make additional requests, improving performance.

If your product prioritizes performance over aesthetics, consider using system fonts instead of a custom one. Make sure you test your product with each font to get consistent results across all operating systems.

Animations

CSS and Javascript animations impact performance and could adversely affect the user experience. Conversely, designers can use animations when engineers need a few seconds to load a feature. Finding the right balance between these two takes collaboration and testing with designers and engineers.

Responsive Design with UXPin Merge

uxpin merge component responsive 1

One of the challenges with responsive design is that the static nature of image-based design tools doesn’t allow designers to test UIs and components across multiple viewports accurately. 

The only way to test a web page accurately is by using HTML, CSS, and Javascript–languages most designers don’t speak.

UXPin Merge is a code-based design tool allowing designers to prototype and test using the same components engineers use. Engineers can also program responsive properties, so UI elements function in prototypes as they do in the final product.

What is UXPin Merge?

UXPin Merge allows you to sync your product’s component library to UXPin’s design editor so designers can prototype using fully functioning code components.

You can connect a React component library direct to Merge using Git or our Storybook integration for Angular, Ember, Vue, and other front-end frameworks.

Creating Responsive Components Using Merge

Using a React component library, engineers can program an IFrame component to respond to responsive properties, media queries, and styling, providing the same responsive functionality as components in the final product.

Check out this step-by-step tutorial for building responsive components with UXPin Merge.

Enhance Testing

Instead of using multiple frames, designers can achieve the same responsive functionality as code using a single frame and component. These UI elements also have the same fidelity and functionality as the final product providing designers with meaningful feedback from usability testing and stakeholders.

With Merge, designers can prototype and test using fully functioning, responsive UI elements from a component library without writing code or relying on engineers to build it.

Streamlining the Design Handoff

These responsive Merge prototypes also streamline design handoffs, reducing time to market. Engineers no longer have to inspect multiple mockups and documentation to convert designs into responsive code; they simply copy/paste components from the repository plus any JSX changes from UXPin to start the web development process.

Top Frameworks of DesignOps – Lessons from Salome Mortazavi

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

We were honored to have Salomé Mortazavi share her insights and experience from working with multiple Fortune 500 organizations helping to “break down silos to align teams around customer outcomes rather than outputs.” 

Salomé currently works as Director of DesignOps at SiriusXM. Her Design Value Conference talk covered proving DesignOps and business impact–a crucial factor for getting buy-in for maintaining and scaling design operations within an organization.

Advice for DesignOps Beginners

Salomé begins her talk with advice for DesignOps beginners–which could also apply to experienced practitioners who find themselves playing “whack-a-mole” instead of focusing on tactical and strategic initiatives.

The first piece of advice is to refrain from being a “yes person.” In their quest to make an impact, many DesignOps practitioners make the mistake of saying yes to everything early on. This approach pulls DesignOps in several directions, adversely affecting the team’s focus and value.

Finding Value

“At the core of everything we do, regardless of your background, everything comes down to being value-driven–delivering value and business impact.” Salomé Mortazavi, Director of DesignOps at SiriusXM

According to Salomé, everything in business value manifests itself in two ways:

  • Reducing costs
  • Increasing revenue

DesignOps practitioners must use the right metric to measure DesignOps’ impact. Patrizia Bertini simplifies this DesignOps framework by defining the metric in terms of efficacy vs. efficiency.

Efficiency vs. Efficacy

  • Efficacy: Qualitative metrics based on behavior and doing work the “right” way
  • Efficiency: Measurable and quantifiable using numbers, percentages, and ratios

We recommend reading ROI of DesignOps: All You Need to Know About Quantifying DesignOps’ Impact to go deeper into Patrizia Bertini’s framework.

Even with Patrizia’s simplified framework, there is much work DesignOps practitioners must do to measure efficacy and efficiency and find focus. As Salomé points out, 70% of DesignOps departments are a team of one–making it challenging to find direction and decide where to start.

Listen and Take Notes

Instead of jumping in and taking action, Salomé recommends that DesignOps practitioners take a step back and listen to design teams, including one-on-one interviews to understand the organization’s problems and identify patterns.

Take a few weeks or months to understand the bigger picture, the space, the org’s baseline practices, and people, as this will expose the company’s organizational and systemic problems.

Understanding and articulating these issues will help DesignOps practitioners build immediate trust with leaders, team members, and stakeholders–creating a positive foundation for DesignOps to grow.

Salomé says this approach works for DesignOps beginners and experts looking for a fresh start or new direction.

DesignOps Framework: Design Maturity Index

One of Salomé’s favorite DesignOps frameworks is the Design Maturity Index, specifically the New Design Frontier model, which looks at the nine dimensions of maturity:

  1. Design Team
  2. Key Partners
  3. Executives & Employees
  4. Design Operations
  5. Design Systems
  6. Design Strategy
  7. User Research
  8. Testing & Learning
  9. UI Design

The report looks at the most important impact design can have on an organization, including:

  • Product usability
  • Customer satisfaction
  • Revenue
  • Project-specific metrics
  • Cost savings
  • Time to market
  • Conversions/funnel metrics
  • Employee productivity
  • Brand equity
  • Entry into new markets
  • Design patents/IP
  • Valuation/share price

A Design Maturity Index produces a lot of themes and problems. Some of these the DesignOps must solve, while others will fall on design leadership.

Salomé says it’s crucial to assign these problems correctly into two or more buckets depending on your organization’s structure:

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

Operational Menu Tool

One way to organize your buckets is by using an operational menu tool to assign activities into several categories and subcategories. Salomé likes to create two menus:

  • Design Org Ops: DesignOps activities
  • Design Practice Ops: Design team, leadership, and product activities

We recommend watching Salome’s Design Value Conference talk around 12:48 for an explanation of this operational menu tool and a graphic with the various buckets.

Once you have filled your buckets, it’s time to find focus by planning your DesignOps roadmap.

Creating a DesignOps Roadmap

designops efficiency person

Salomé uses an outcomes-based tool to build her DesignOps roadmap into three generalized time horizons:

  • Now
  • Next
  • Later

These time horizons allow DesignOps practitioners to avoid arbitrary deadlines. This flexibility enables DesignOps to experiment with solutions you’re piloting with different teams.

The roadmap must include five categories:

  • Goals/OKRs
  • Time horizons
  • Themes/problems to solve
  • Measure of success/KRS
  • Parking lot

The parking lot is for keeping track of the tasks and activities that aren’t on your roadmap but require action at a future date.

Build, Measure, Learn

To implement her DesignOps roadmap, Salomé uses the popular Build, Measure, Learn (BML) design thinking methodology applied to operational practices.

Salomé likes to emphasize the importance of learning in BML for DesignOps practitioners to make educated decisions as they evolve a process or solution.

You can watch Salomé’s presentation at 18:00 for an example of her DesignOps framework in action.

Salomé’s DesignOps Resources

designops increasing collaboration talk

Bonus resources

DesignOps With UXPin Merge

Finding tools to streamline design processes and workflows is crucial for implementing a successful DesignOps strategy. Design drift, collaboration, consistency, and cohesion are problems practitioners often have to overcome.

uxpin merge react sync library git

UXPin Merge enables DesignOps to solve these core problems with a single code-based design solution. Merge allows you to sync a component library from a repository to UXPin’s editor so designers can build fully functioning high-fidelity prototypes using the same UI elements as engineers.

This single source of truth means every design team works with the same component library, maximizing consistency and cohesion while eliminating design drift and reducing rework.

Design handoffs run smoother with UXPin Merge because designers and engineers speak the same language, thus reducing time-to-market and creating a positive ROI for DesignOps.

Discover Merge

What is the Difference Between UX Engineer and UX Designer?

As technology and product design workflows evolve, new tech roles open. UX engineers are one of those emerging niche positions, helping to facilitate collaboration between design and development.

We’ll explore the difference between a UX designer vs. UX engineer, their responsibilities, and how these team members work together.

UXPin is a code-based design tool bridging the gap between design and development. Sign up for a free trial to discover how UXPin can enhance your product’s user experience and improve collaboration between UX designers and UX engineers.

Who is a UX Designer?

A UX designer (user experience designer) works throughout the design process to develop solutions to user problems. In startups and small businesses, a UX designer will work on every aspect of the design process. In contrast, UX experts specialize in a specific role in large organizations and big projects.

Some examples of UX expert roles include:

  • UX Researcher: Responsible for research and user testing
  • UI Designer: Designs user interfaces and components
  • Interaction Designer: Designs microinteractions for user interfaces and components
  • DesignOps Manager/Leader: Oversees an organization’s design operations

All of these people are UX designers. They just specialize in a specific UX field.

Who is a UX Engineer?

UX engineers (user experience engineers) are front-end developers who take care of feasibility of prototypes. People in the tech industry often refer to UX engineers as “unicorns” due to their skill set in both UX and engineering.

A UX engineer’s role is to bridge the gap between designers and developers by collaborating with both teams.

UX engineers work closely with UX designers throughout the design process, collaborating on solutions and providing technical guidance for design ideas.

Do UX Engineers Code?

UX engineers are front-end engineers first, so they’re highly competent in core front-end programming languages like HTML, CSS, and Javascript. 

Depending on the company or project, a UX engineer must know at least one front-end framework, like React or Angular, as they are responsible for developing layouts and UI components.

Are UX Engineers also UX designers?

In most cases, UX engineers have a software engineer or product background. They generally study computer science or human computer interaction (HCI). They’re not necessarily UX designers, but they understand the end-to-end design process and apply design thinking and UX principles to their work.

UX engineers don’t actively participate in most UX design activities. Their primary focus is to turn a designer’s prototypes into functional code.

Why are UX Engineers in Demand?

Design handoffs are notoriously challenging in many organizations. Designers and engineers speak different languages, creating a bottleneck from design to development.

Streamlining this bottleneck can reduce time to market, saving companies money while increasing their competitiveness. That’s where UX engineers come in and why they’re in demand.

UX engineers also play an essential role in managing and scaling design systems. The last decade has seen a rise in companies developing their design systems, increasing the demand for UX engineers.

Do you need a UX Engineer and a UX Designer?

Most startups and small companies don’t need a UX engineer. In these smaller teams, designers and developers work closely, reducing the need for a dedicated UX engineer.

UX engineers are most impactful in large organizations where collaboration between designers and engineers is challenging. These engineer/designer hybrids help bridge the gap by working with designers to convert designs into code and then collaborate with engineering teams to deliver the final product while maintaining the designer’s vision.

UX engineers are also an essential part of a design system team, helping designers convert static prototypes into fully functional code components.

How do UX Engineers and UX Designers Work Together?

idea collaboration design dev 1

UX Design-Intensive Tasks

UX designers are responsible for user research, design, and usability tasks. Their work primarily focuses on:

  • UX research
  • Low-fidelity prototyping and wireframing
  • Visual design and static mockups
  • Design-based prototypes
  • Designing assets
  • Usability testing
  • Accessibility

While UX engineers don’t actively participate in these tasks, they provide technical input when required.

UX Designer/Engineer Collaboration

UX engineers and designers work closest during ideation. The UX engineer’s role is to help develop ideas through a technical lens so that designers don’t go off track during wireframing and low-fidelity prototyping.

UX engineers also work with UX designers during testing. Rather than actively participating in testing, UX engineers help designers develop solutions based on the results. 

UX Engineering-Intensive Tasks

UX engineers lead the high-fidelity prototyping phase of the design process. They build prototypes using code (HTML, CSS, Javascript) or a front-end framework like React. These code-based prototypes take a lot of time to develop, so UX designers usually reserve these for testing complex problems.

UX designers use these code-based prototypes for usability testing and presenting ideas to stakeholders. The benefit of code-based prototypes is that usability participants and stakeholders can interact with them like they would the final product, giving designers meaningful, actionable feedback.

A Typical UX Designer and UX Engineer Workflow

Here is a typical UX designer and UX engineer workflow relating to the design thinking process.

  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test

Empathize Phase

UX designers (or dedicated UX researchers) complete most work during the empathize phase. They are primarily responsible for gathering and analyzing UX research (user, market, competitor, etc.).

UX engineers don’t take part in this early research, but they may reference it at a later stage to understand users better.

Define Phase

The define phase is also a UX designer’s responsibility. They must use research to identify user problems the product must solve.

Ideate Phase

Ideation is the first phase of the design thinking process where UX engineers take an active role. UX engineers collaborate with UX designers to develop solutions to the problems.

UX engineers also participate in design sprints, workshops, and other ideation activities.

Prototype Phase

UX engineers and UX designers build prototypes. UX designers use design tools for prototyping while UX engineers write code.

Testing Phase

UX designers are responsible for usability testing of all prototypes. They share results with UX engineers to collaborate on redesigns and changes.

How UX Engineers & UX Designers Collaborate at Design Handoff

design and development collaboration process product communication 1

A UX engineer’s most important function is converting designs into code. Traditionally, developers would collaborate very little during the design process, only meeting at the handoff.

Designers would have to create a lot of documentation for engineers, and there would be much back and forth communication to convert designs into the final product. Engineers often misinterpret designs, leading to friction between teams.

Embedding UX engineers into the design process allows them to start development long before the handoff. They can also help designers produce documentation and instructions in a language that developers understand–essentially working as translators.

When UX engineers convert designs into code, they work closely with designers, iterating until the component or layout is right. Next, UX engineers present their code to their fellow developers for review.

With a UX engineer completing most of the front-end UI development, the development team only needs to connect everything to the backend and optimize front-end performance. The development team no longer has to interpret designs and prototypes because the UX engineer is working in the middle to translate everything.

How UX Engineers and UX Designers Collaborate using UXPin Merge

uxpin merge git react storybook library

UXPin Merge allows you to sync a component library from a Git repository or Storybook to UXPin’s design editor. Merge works with multiple front-end technologies, including React, Angular, Vue, Ember, Web Components, and more.

Designers can use these code components exactly like any other design asset (meaning they don’t have to learn to code), except they have much higher fidelity and functionality. Designers can drag and drop these components to build fully functioning prototypes–identical to those a UX engineer would develop.

UX designers no longer have to rely on UX engineers to build code-based prototypes, allowing them to test with higher fidelity and design’s functionality more often.

Merge is the perfect collaborative tool for UX designers and UX engineers because they can both build code-based prototypes using the same platform significantly faster than writing code.

When prototyping is complete, UX engineers can use components from the repository and copy changes from UXPin to start development. Because the engineering team has already approved the repository’s components, the review process is quicker, allowing products to ship much faster.

Collaborating With Engineering Teams Through Storybook

logo storybook

Storybook is a fantastic tool for UX engineers to collaborate with development teams. Storybook integrates with UXPin Merge, thus creating an end-to-end software development component ecosystem.

When UX engineers develop a new component, development teams can review, approve, and request edits through Storybook. Once approved, Merge automatically syncs the new component to UXPin’s design editor, notifying design teams of the latest release–creating a single source of truth across projects and the organization.

Enhancing User Testing and Stakeholder Feedback

Merge prototypes enhance user testing with higher fidelity and functionality and attract better feedback from stakeholders. UX designers and stakeholders can use UXPin’s Comments feature to include UX engineers in feedback and changes, making it easier to collaborate on redesigns.

Improve collaboration with UX designers, product teams, engineers, and stakeholders with the world’s most advanced code-based design tool. Sign up for a free trial to and give a UXPin Merge a go via our MUI library integration.

Best Practices for Remote Teams: 12 Principles to Guide Your Everyday Work

Before the pandemic, it wasn’t unusual for startups and small companies to operate with a remote workforce. Now, it’s the new normal for everyone, and many companies offer full-time employees the option to work from home or the office.

The lack of face-to-face communication and collaboration makes remote collaboration design a challenge. Team members must work hard to replicate the collaborative office environment online with Zoom, Slack, Miro, UXPin, and other tools optimized for remote design teamwork.

12 Principles for Remote Collaboration Design

UXPin is the world’s most advanced collaborative design tool for remote work. Sign up for a free trial to try UXPin with your team today!

1. Remote Collaboration With UXPin

UXPin’s Comments feature allows design teams and stakeholders to collaborate in real-time on remote projects. You can choose to make comments visible only to team members or public for anyone to see. 

You can also assign comments to a specific team member to action, which they can mark as resolved once complete. Any team member added to a project will receive notifications for any new comments, so everyone is always in the loop–perfect for remote design work environments.

Sign up for a free trial and discover how UXPin can enhance your remote design workflows.

2. Hosting Remote Design Sprints

Design sprints are a staple for many companies and projects. The collaborative environment and time constraints help UX designers solve complex issues in less than a week.

While remote design sprints are more challenging than traditional face-to-face editions, teams can still achieve the same results. The structure of a remote sprint is the same but requires more planning to ensure everything runs smoothly.

Check out this step-by-step guide to running remote design sprints with your team.

3. Replacing Office Conversations and In-Person Collaboration

In a remote work environment, teams lose natural exchanges and spontaneous conversations. These discussions often lead to new ideas and help build company culture. 

To replicate this with remote design teams, always allow team members to chat informally before starting a Zoom meeting. We also recommend weekly hour-long collaboration sessions where designers can present issues they’re battling with or discuss new ideas.

While Slack and other messaging apps have their place, nothing can replace the free flow of ideas that face-to-face discussion provides.

4. Daily Video Calls

camera video play

Another way to keep the team connected and synced is to kick off the day with a morning call. If your team is spread over multiple timezones, make sure it’s during everyone’s working hours.

These daily video chats don’t need to be longer than 10-15 minutes. It’s simply an opportunity for everyone to check in, give a brief progress report, and ask any questions.

5. Arrange Meetups

Another way to maintain company culture for remote design teams is to encourage meetups. Team members can meet for coffee, visit a gallery, attend a yoga class together or go on a hike–anything to replace the informal team-building exercises you usually have at the office.

You can also encourage work-time meetups for team members to collaborate outside of the office, like a coworking space, coffee shop, or someone’s living room.

6) Build a Design System

design system 2

One of the challenges with distributed teams is communication and design collaboration–which often leads to inconsistencies. A design system can help eliminate these challenges while increasing productivity and reducing time to market.

Design systems are also highly effective when onboarding in a remote environment where new team members can’t shadow someone in-person.

If you can’t afford to build a design system, consider customizing a component library. Many organizations, including Netflix, Spotify, NASA, and others, have customized MUI’s component library for their products.

7. Establish Clear Channels of Communication

Without clear channels and protocols, inter-department communication and collaboration can be exceptionally challenging in a remote work environment.

Design leads must establish clear procedures for file sharing, communication, documentation, and, most importantly, design handoffs–all operational processes that DesignOps can facilitate. 

8. Implementing DesignOps

designops increasing collaboration group

DesignOps is crucial for optimizing UX design processes, onboarding new designers, and creating efficiencies for remote design work. Team members have more tools and administrative procedures to worry about in a remote environment.

DesignOps can fill this gap so that UX designers can focus on design and not get bogged down in time-consuming tasks that slow time to market. DesignOps also plays an essential role in scaling design operations–which is especially challenging with remote teams.

9. Schedule Routine Feedback

Feedback is essential for teams and stakeholders. Team leads must schedule regular feedback sessions and design reviews for stakeholders.

Try to limit the number of tools required for these feedback sessions. For example, you don’t want a call on Zoom with design files in Dropbox and comments in Slack.

By using a design tool like UXPin, designers can present information architecture, wireframes, mockups, and prototypes with assets and a design system all in one place. Stakeholders can leave comments on design files or prototypes and assign them to specific team members.

10. Remote User Research

user laptop computer

Design Research and testing is another challenge for remote design teams, but luckily there are several fantastic online platforms to find and test users. These are a few of our go-to online user testing apps:

11. Managing Miscommunication

It’s easy for designers to misinterpret briefs and assignments when everything is text-based–which is usually the case for remote design work.

Always set up video calls when assigning new tasks or projects so you can provide visual context and allow design teams to ask questions. The aim is to replicate the whiteboard environment where leads explain projects and team members discuss challenges and solutions.

While we all loathe Zoom meetings, these calls can save a lot of time from misinterpretations and miscommunication.

12. Communicating Work-in-Progress (WIP)

Tracking WIP through UX documentation can feel like an administrative burden, but it’s crucial for remote teams. This working document details a project’s journey from inception to the present.

This single source of truth keeps leads and stakeholders updated while providing historical context for onboarding new team members.

How Do You Organize Remote Design Work?

idea 1

Working remotely has its challenges for employees, management, IT, and HR. But most of these challenges result from thinking and working that don’t serve us well in terms of clarity, brainstorming, focus, output, and creativity.

Remote works give smaller companies the advantage of having offices in other countries and regions without the hefty price tag. It allows team members the freedom to live where they choose while doing the work they love. 

Give your remote design teams a tool that improves collaboration, not only for designers but development teams, product teams, project managers, and stakeholders. Sign up for a free UXPin trial and discover how the world’s most advanced code-based tool can enhance your UX workflows and product’s user experience.

What These 5 Experts Tell You About DesignOps

We analyzed the strategies and processes from five industry experts. This article summarizes the knowledge these DesignOps trailblazers share through blog posts, interviews, webinars, and talks.

Table of contents

Revolutionize design at your company with UXPin Merge–a code-based design tool that optimizes UX workflows while solving many DesignOps challenges. Sign up for a free trial to experience Merge through our MUI library integration.

Dave Malouf – Director of Design Operations at Teladoc Health

Dave Malouf is a veteran DesignOps expert who’s been around since the early days of design operations–according to Superside, Dave coined the phrase DesignOps.

In his famous DesignX Community talk, Amplifying Design Value (also published on his Medium account), Dave outlines ways Ops can increase Design’s value within the organization through:

  • Form giving: How form creates value–line, layout, composition, color, type, texture, volume, negative space, juxtaposition, alignment, flow
  • Clarity: From information architecture that enables users to use a digital product
  • Behavioral fit: How design provides an intuitive user experience that streamlines or compliments a real-world activity
  • Exploration: How designers discover possibilities through sketching and trying ideas

In an interview with Superside, Dave lists the key challenges DesignOps must solve:

  • Improving the craft, methods, and process
  • Finding the best tooling
  • Hiring the best team
  • Managing the best team
  • Setting up proper communication channels
  • How to reward team members for doing great work
  • Developing collaborative processes with cross-functional stakeholders
  • Asset management workflow
  • Delivery processes
  • Designing best practices
  • Design governance and policies

Learn more about Dave’s approach to DesignOps through a 1-hour webinar he did with UXPin titled: Holistic Design Operations.

Patrizia Bertini – Associate Director of Design Operations at Babylon Health

Patrizia Bertini is Associate Director of Design Operations at Babylon Health. In December 2021, Patrizia did a webinar with UXPin where she gave a high-level strategy for Measuring DesignOps’ Impact.

Patrizia says DesignOps Leaders must measure their impact because “DesignOps is supposed to relieve design-related inefficiencies to create more productive designers.”

To measure DesignOps, you must define the problem, recognizing the difference between efficacy and efficiency.

  • Efficacy: Produces qualitative results by measuring behavior and the way people do work
  • Efficiency: Produces quantifiable data to measure performance and changes

Patrizia uses a three-step process for identifying areas for improvement:

  1. Identify your users and define the problem. Patrizia segments these users into Business, Design Leader, and Design Team. When you identify a problem, you must assess how it impacts all three user segments.
  2. Define the dimensions that matter measured in quality, cost, and time. What can you do to impact efficiencies and improve performance?
  • Lastly, you “play impact”–a process of evaluating the problem with quantifiable and qualitative data to understand the scale of the issue and determine the best course of action.

Watch Patrizia’s hour-long webinar Measuring DesignOps’ Impact or our summary article, ROI of DesignOps: All You Need to Know About Quantifying DesignOps’ Impact.

Erica Rider – Senior Manager UX – Developer Tools and Platform Experience

Erica is another veteran UX designer with extensive experience and an impressive resume from some of the world’s largest tech companies. She currently works for PayPal in a DesignOps role.

Erica is responsible for PayPal’s DesignOps 2.0, which used UXPin Merge as the foundation to scale and optimize the company’s internal product design. With five UX designers, over a thousand developers, and more than 60 products, PayPal could ship new products 8X faster using Merge without employing more team members.

With UXPin Merge, PayPal’s product teams took over designing, prototyping, testing, and delivering new products–freeing the small team of UX designers to focus on high-level user experience initiatives.

Watch Erica’s one-hour webinar, Scale design efficiently with DesignOps2.0, or read How PayPal Scaled Their Design Process with UXPin Merge for more.

Rachel Posman – Senior Director, Design Operations at Salesforce

Rachel has worked in design for almost a decade at several enterprise organizations, including Capital One, Uber, and Salesforce–in DesignOps and ResearchOps positions.

Rachel wrote chapter 2 of DesignOps 101: Guide to Design Operations, where she talks about the importance of DesignOps. 

“Design operations exists to help mitigate challenges that design teams face:

  • Increasing volume of work and demand on the time of design teams
  • Working in isolation or having siloed workflows or procedures
  • Missing design tools that could help design teams work smarter
  • Misunderstanding from not being part of the initial strategy that goes into a project
  • Push for speed and efficiency to create quickly”

In Postcards from the Future (of DesignOps), Rachel reveals her strategy for envisioning “future contexts and scenarios for current products and services.”

Rachel divides the future into four segments based on a cone from Future Today Institute:

  • Tactical: 12-24 months
  • Strategic planning: 2-5 years
  • Vision: 5-10 years
  • Systems-level disruption and evolution: 10+ years

By talking about and envisioning the future, Rachel and her team found they could develop strategies to create their future worlds.

Check out Postcards from the Future (of DesignOps) for a step-by-step guide to implementing Rachel’s planning strategy.

You can also get valuable insights from Rachel and six other DesignOps experts in our free ebook, DesignOps 101: Guide to Design Operations.

Salomé Mortazavi – Director of DesignOps at SiriusXM 

Salomé has spent many years consulting for several Fortune 500 companies helping to transform their software development practices. She currently works as Director of DesignOps at SiriusXM.

Salomé uses a practices-first DesignOps approach–the methods and frameworks used to achieve outcomes. Salomé notes that processes follow practices, so optimizing the former often creates more inefficiencies.

Salomé defines four key skills of a practices-first DesignOps leader:

  • Be comfortable with ambiguity: Don’t try to control everything; embrace problem-solving and the process of finding the best solutions.
  • Research & Service Design skills: Leverage research and Service Design tools to visualize the entire ecosystem’s challenges. 
  • Strong Design and Product practices background: A DesignOps leader must have hands-on product experience to communicate effectively with team members. This experience also helps identify and diagnose problems easier.
  • Program management skills: Knowing how to evolve and scale solutions is vital for long-term success. Building feedback loops help Ops learn and iterate to improve and optimize solutions.

Read more about Salomé’s practices-first approach in this Medium post. You could also watch Salomé at UXPin’s Design Value Conference.

Learn from Other DesignOps Experts at Upcoming Webinars!

Join our free webinar next week. Another great Design Operations leader, Amber Jabeen, will tell you how you can build the case and collaborate with other teams on building a design system for enterprise-level organizations. Check it out: Enterprise Design System – How to Build and Scale.

Design Value Conference Recap – How Top Leaders Tackle DesignOps Challenges

DVC Scaling

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

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

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

UXPin CEO Yuga Koda on Merge Component Manager

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

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

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

Design Value Conference 2022 Talk: Maggie Dieringer, Uber Eats

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

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

Here are the key takeaways from Maggie’s talk. 

Framing and Scaling

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

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

Increase DPM Impact

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

Support DPM Trajectory

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

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

Design Value Conference 2022 Talk: Salome Mortazavi, Sirius XM

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

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

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

Advice for Beginners

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

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

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

DesignOps Framework: Design Maturity Index

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

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

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

Creating a DesignOps Roadmap

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

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

Design Value Conference 2022 Talk: Erica Rider, PayPal

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

Traditional DesignOps vs. DesignOps 2.0

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

Evolution of Responsibilities

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

Evolving PayPal’s DesignOps 2.0 Process

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

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

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

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

Design Value Conference 2022 Talk: Omkar Chandgadkar, Amazon

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

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

Common Design Team Challenges

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

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

Framework One: Omkar’s Connecting the Dots Map

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

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

Framework Two: Omkar’s Design Offerings

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

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

How to Use Omkar’s Frameworks?

Connecting the Dots Map:

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

Design Offerings:

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

Build Fully Interactive Components in UXPin

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

Try UXPin for free

DesignOps Leader vs. Design Leader – What’s the Difference?

DesignOps vs Design Leader

Key Takeaways

  • DesignOps isn’t a substitute for design leadership; it’s a separate role with different skills and responsibilities.
  • Although this separation exists, DesignOps must understand the end-to-end design process. Without this understanding, DesignOps cannot identify problems or implement effective strategies.
  • Organizations must understand the importance and difference between DesignOps and design leadership to effectively scale design and its supporting infrastructure.
  • Design leaders need the support of DesignOps to focus on the product and user experience without being weighed down or distracted by operational issues. DesignOps supports design leaders by providing the stepping stones to success.

DesignOps requires a different skillset to UX design and design leaders, so understanding its role and function are essential for hiring the right people and management.

A design leader is responsible for “what” the organization is creating (the product), while DesignOps must focus on “how” the company delivers the product.

This article summarizes part of a webinar UXPin hosted with Patrizia Bertini, Associate Design Operations Director at Babylon-Measuring DesignOps Impact. Patrizia explains the difference between DesignOps and a typical design leadership position and how DesignOps functions within the organization.

DesignOps’ Role in the Organization

We published an article answering the question, “What is DesignOps?” Summarized in one sentence:

“DesignOps (short for Design Operations) refers to the optimization of design processes, people, and technologies to improve the product’s design and business value.”

DesignOps is an inward-facing operations process that reduces the administrative burdens from designers so they can focus on design and getting products to market quicker.

10 Key DesignOps Roles

  1. Operations management: Creating and managing a design roadmap that aligns with design teams’ goals while identifying skills gaps to achieve those objectives.
  2. Process design: Creating design systems and mapping the tools teams need.
  3. Project management: Design workflows, assign projects, set timelines, and remove any bottlenecks.
  4. Creating a communication strategy: Liaising between the design teams and the organization, including communication channels and file and resource storage.
  5. Onboarding new hires: Hiring, orienting, and training new staff so that they seamlessly integrate with design teams.
  6. Building design team culture: Instilling the company culture with workshops, training, and other team-building events.
  7. Budget allocation and control: Managing the costs associated with running the design team rather than direct product costs.
  8. Legal: Working with legal teams to create NDAs, participant release forms, and other legal documents.
  9. Managing the procurement process: Streamlining and managing purchasing decisions to meet budget constraints which involves connecting with financial departments.
  10. IT and security: Liaising with IT to ensure all tools and processes meet security standards.
designops increasing collaboration talk

None of these ten roles deal directly with the product or customers, but rather the necessary administrative bureaucracy to get products to market and provide the best customer experience.

DesignOps Areas of Intervention

In Measuring DesignOps Impact, Patrizia separates DesignOps into three areas of intervention; business operation, workflow, and design operation, and people operation.

designops efficiency speed optimal

Business operation is managing budgets, resources, and other business-related design functions. Examples include:

  • Budget management/spending optimization
  • Spending policy overview
  • End-to-end procurement and 3PRM (practice in performance & reward management)
  • Contract negotiations
  • Onboarding vendors and 3P (process, product, people) risk assessment
  • Spending ROI calculation
  • Tools ROI/impact assessment
  • Resource asks assessment (tools + people)
  • CW/FTE sequencing
designops efficiency person

Workflow and design operation is a holistic view of the end-to-end design process. How do designers get from concept to final product? Examples include:

  • End-to-end design process optimization
  • Tools ecosystem management
  • Tools onboarding/off-boarding
  • Cross-functional collaboration optimization
  • Design system management
  • Data governance
  • Participant sourcing process management
  • Research and design asset management
  • Design standards
designops increasing collaboration group

People operation considers the human aspect of design teams, like skills development, communication, and culture. Examples include:

  • Career path direction
  • Skills matrix/team composition assessment
  • Development programs and team training
  • Teams culture
  • Knowledge & experience training
  • Streamline ubiquitous cross-functional collaboration
  • Onboarding/off-boarding
  • Internal communication
  • Change management
  • Engagement models
  • Hiring/job specification/tasks review

DesignOps Leader Skillset

If you have ambitions to become a DesignOps leader, change management is the most important skill set. As Patrizia says during the webinar, “DesignOps changes the existing reality to bring more value. It’s a very transformative discipline.”

Further to change management, a DesignOps leader must have a project management background. A DesignOps leader must also have strong business acumen to manage budgets and strategize to meet long-term goals.

Since DesignOps requires cross-functional collaboration, communication and problem solving are vital skills for a DesignOps leader. They must know how to network and become spokespeople for design, drawing attention to significant wins and getting buy-in for important projects.

You can learn more about a DesignOps leader’s qualities and how to get started with DesOps in your company in our free eBook, DesignOps 101:Guide to Design Operations.

What do Design Leaders do?

A design leader is someone who focuses on product design and strategy. Design leaders look outward to understand design’s influence on the customer experience and how to create business value. They also coach and mentor designers to improve their skills to facilitate creative thinking and innovation.

Ultimately, design leaders must ensure that design teams meet KPIs and objectives towards the organization’s business goals and user experience strategy.

DesignOps Leader vs. Design Leader

search files 1

As Patrizia puts it in Measuring DesignOps Impact, the DesignOps leader/design leader relationship works similar to that of the CEO/COO. The CEO (design leader) has a vision for the organization (design/product), and the COO (DesignOps leader) creates the systems and processes to achieve that vision.

Patrizia uses five bullet points to compare the two roles.

DesignOps Leader:

Inward looking and process-oriented

  • Mission: the How / the performance
  • Focus: End-to-end design process & teams
  • KPIs: Team health, spending, & performance metrics
  • Deliverables: Ops roadmap & strategy
  • Skills: Change management

Design Leader:

Outward looking and product-oriented

  • Mission: the What / the product
  • Focus: Product/service vision & individuals
  • KPIs: Product & experience metrics
  • Deliverables: Product & design strategy
  • Skills: Influence & negotiate

One quality a DesignOps leader and design leader have in common is a strategic mindset. They must design and implement strategies that take the organization towards its long-term goals. The most significant difference is the DesignOps leader looks inwards when creating a strategy while the design leader looks outwards.

Design Program Manager vs. Design Manager

Below each leader position, you have people who execute their directives. These tactical roles support the leads to ensure vision’s executed effectively and seamlessly. The design program manager (DPM) reports to the DesignOps leader and the design manager to the design lead.

We can compare these roles using the same five bullet points:

Design Program Manager:

  • Mission: Execute Ops roadmap
  • Focus: Align processes to execute
  • KPIs: Program metrics
  • Deliverables: Blueprints, project status
  • Skills: Process & project management

Design Manager:

  • Mission: Implement design strategy
  • Focus: Coordinate and execute design
  • KPIs: Project tracking metrics
  • Deliverables: Project status
  • Skills: Team & project management

A design manager must have a solid design background and have started as a UX designer or researcher. They must have hands-on experience with design to understand UX and its challenges.

A DPM is more project-based and therefore doesn’t require the same extensive design experience, but must still understand end-to-end design thinking and processes.

Further Reading

DesignOps 101

If you’re looking for more DesignOps knowledge and insights, you can also check out our free eBook, DesignOps 101: Guide to Design Operations. This free guide features six chapters, each written by DesignOps industry leaders. Topics include:

  1. What is DesignOps?
  2. The Importance of DesignOps
  3. The Impact of DesignOps
  4. How DesignOps Works
  5. How to Get Started With DesignOps in Your Company
  6. DesignOps Tools

DesignOps Pillar: How We Work Together

Would you like to create a stellar design team? Read our free eBook about the first strategic area of DesignOps, that is managing a design team. Learn about rituals, practices, and processes that will help you grow an amazing design team that’s happy at their jobs. Follow: DesignOps Pillar: How We Work Together.

Use UXPin Merge Tech to Scale Design Operations

UXPin is proud to provide this free content to help develop and evolve DesignOps practices. We welcome you to learn more about our revolutionary code-based technology Merge–a tool that solves many DesignOps challenges by bridging the gap between design and development.

Discover Merge

How DesignOps Can Increase Collaboration in Enterprise?

In February 2022, UXPin hosted a free webinar with DesignOps expert Dave Malouf titled Holistic Design Operations. Dave discusses how he and his team solved the “human operational problem” to break down silos–a common issue with large and enterprise organizations.

Join us for the May 2022 webinar about building centralized design system for enterprises. Sign up for free at “Enterprise Design System–How to Build and Scale.”

Increase UX value at your company with the world’s most advanced code-based design tool. Design, prototype, and test faster with improved cohesion and consistency. Sign up for a free trial and discover how code-based design can enhance your UX workflows.

Enterprises are Prone to Create Silos

designops increasing collaboration group collab

Silos are a significant issue for many enterprises. These vertical silos create a horizontal divider between teams, projects, and operations–getting in the way of design teams’ ability to do great work.

Companies have to manage work in individual workstreams at three levels:

  • Project level
  • Program level (a group of projects)
  • Portfolio level (a group of programs)

As organizations scale, these silos expand, creating and intensifying problems. The foundations that built these silos start to disintegrate–consistency, cohesion, optimization, efficiency, and speed begin to degrade.

Organizations lose the ability to maintain the supporting structure of a holistic design practice because they’re distracted by these vertical silos. Focusing on just one of these silos at a time isn’t a scalable solution and only compounds the problems.

For example, if you try to scale delivery, you create bottlenecks in other operational processes like practice and business. Bridging the gap between these silos requires a holistic DesignOps approach.

Introducing Holistic DesignOps

DesignOps (short for Design Operations) refers to the optimization of design processes, people, and technologies to improve the product’s design and business value as well as building a better, more nourishing and efficient, work environment for the employees.

Dave Malouf describes DesignOps in three pillars:

  • Delivery operations: processes and programs–usually the first place DesignOps starts. Delivery operations focus on optimizing efficiency, velocity, cost reduction–how to get things delivered.
  • Practice operations: The people, spaces, methods, and tools that make it possible for designers to design. Practice operations focus on quality, community, engagement.
  • Business operations: As Dave Malouf puts it, “the operations no one wants to talk about.” The bureaucracy that teams have to deal with. Business operations focus on finance, IT, procurement, compliance, legal, etc. 

As we mentioned above, these three pillars of DesignOps are intertwined–impacting one another. If you’re optimizing design operations, you must use a holistic approach, and prioritize all of those areas. When you leave something out, you may add to the issue instead of fixing it.

How Does DesignOps Help with Operational Issues?

designops increasing collaboration group

There’s a misconception that you can solve these operational issues with architectural solutions, like design systems, platform layers, reusable core components, and common branding, for example. 

While these are reasonable solutions, the problem isn’t about technical mapping; it’s about people.

Discovering the Problem with Operations

Dave and his DesignOps team found that adding more platforms and tools often amplified the issue they were trying to fix because they focused on optimizing processes without accounting for the human element.

The problem wasn’t with design; it was a service management issue.

Dave and his DesignOps team started a discovery process for this human problem. Finding the solution required a collaborative effort with team members from multiple departments.

Dave’s DesignOps team used journey mapping service blueprints to study four key areas:

  • Scale
  • Silos
  • Bridges
  • People

While they had the platform and components, the real issue was a lack of operations. They had to find a way to intertwine the human narrative with the practice and programs. Dave and his team’s solution had to move the narrative from design intent to design execution.

After completing their research, Dave’s DesignOps team arrived back at the vertical silo conundrum.

The code of this operational problem was the people who inhabited these silos also maintained them–making it difficult for tools alone to solve the problem. While they had some bridges in the technical sense, few were at the operational or narrative level.

They discovered that people were wearing blinders–there was a tunnel vision mentality. Team members measured things from the silo’s point of view, which didn’t align with other silos or the company.

There wasn’t anything fundamentally wrong with these individual silos. Teams used data to make decisions and optimize systems and processes. But with each silo operating independently, the delivery lacked cohesion and consistency.

Dave’s team had to change the operational model to create connection points from the user’s perspective at the narrative level.

Dave Malouf’s Strategy for Optimizing Operations

designops efficiency speed optimal

Dave and his DesignOps team created parent journeys for operational processes. Each parent had a 2D journey map with channels and a decision tree.

At each stage, Dave’s team created metadata so that team members could drill down into the meaning behind operational decisions. This metadata spoke to business and delivery teams to help with prioritization and making better decisions.

The metadata included links to work, insights, metrics teams must monitor as the project develops, and opportunities. Dave’s team also had a commenting system to collaborate and communicate, making the parent journeys dynamic to meet the project’s requirements.

This dynamic journey map allowed teams to visualize the project’s current state and multiple proposed future states for team members to prioritize and make decisions.

The operations team assigned a Design Program Manager (DPM) to the journey work and another DPM for delivery. These DPMs, combined with the team’s journey map system, were able to bridge the gaps between silos, thus improving cohesion and collaboration across projects, programs, and portfolios.

We highly recommend checking out the webinar UXPin hosted with Dave Malouf on Holistic Design Operations for more details about Dave’s approach.

Increase Collaboration With UXPin

Optimize your UX workflows to improve collaboration, cohesion, and consistency with UXPin. With UXPin’s code-based design tool, you improve collaboration between designers while streamlining design handoffs with engineers.

Try UXPin with your team. Sign up for a free trial today!

How to Hire a DesignOps Expert?

The webinar with Dave Malouf about Holistic DesignOps made us wonder what else we could write about to expand on the design operations topic. One of such things is hiring. What should you look for in a DesignOps expert? If you want to watch the webinar, we have a recording of it on our YouTube channel.

Let’s go back to the main topic of this discussion–how to hire a DesignOps expert?

Table of contents

As a discipline still in its infancy, there is no clear path to becoming a DesignOps expert. It’s not like UX, where you study to become a designer. Most DesignOps experts transition from product, design, change management, or project management because they want to solve their company’s inefficiencies.

Setting up systems and processes to keep design teams focused on building great products has proven to increase productivity and deliver a good return on investment. Building a DesignOps team is essential to compete in today’s ultra-competitive market.

Reduce time-to-market with UXPin Merge, the world’s most advanced code-based design tool–built to solve DesignOps challenges. Sync your company’s design system to UXPin’s editor to create a single source of truth between designers and engineers. Request access to Merge.

Who is a DesignOps Expert?

A DesignOps expert focuses on identifying operational inefficiencies and finding solutions to optimize them. DesignOps experts have little to do with design itself; instead, they focus on the tools, processes, systems, and protocols that enable designers to do work.

designops efficiency person

There are ten key DesignOps roles:

  1. Operations management: Creating and managing a design roadmap that aligns with design teams’ goals while identifying skills gaps to achieve those objectives.
  2. Process design: Creating design systems and mapping the tools teams need.
  3. Project management: Design workflows, assign projects, set timelines, and remove any bottlenecks.
  4. Creating a communication strategy: Liaising between the design teams and the organization, including communication channels and file and resource storage.
  5. Onboarding new hires: Hiring, orienting, and training new staff so that they seamlessly integrate with design teams.
  6. Building design team culture: Instilling the company culture with workshops, training, and other team-building events.
  7. Budget allocation and control: Managing the costs associated with running the design team rather than direct product costs.
  8. Legal: Working with legal teams to create NDAs, participant release forms, and other legal documents.
  9. Managing the procurement process: Streamlining and managing purchasing decisions to meet budget constraints which involves connecting with financial departments.
  10. IT and security: Liaising with IT to ensure all tools and processes meet security standards.

There are three primary DesignOps positions:

  • DesignOps Leader or Head of DesignOps
  • Design Program Manager (DPM)
  • Design Producer

DesignOps Leader

A DesignOps leader works closely with the Design Leader to create an operational vision and roadmap. This high-level role focuses on how design teams complete tasks and projects.

A DesignOps leader usually has a background in change management and project management. They have to understand how to facilitate change while recognizing the end-to-end project process.

As Patrizia Bertini says in UXPin’s webinar, Measuring DesignOps Impact, “DesignOps changes the existing reality to bring more value. It’s a very transformative discipline.”

A DesignOps leader has to find tools and processes to optimize operational workflows and then develop the strategies to encourage their adoption.

Design Program Manager (DPM)

A DPM is responsible for executing the DesignOps Leader’s strategy and roadmap. They work with UX and product teams providing the necessary support to focus on design.

To do this effectively, a DPM usually comes from a design background, so they understand the end-to-end design process and identify roadblocks.

The DPM also acts as a bridge between teams and projects to improve communication and collaboration.

Design Producer

A Design Producer works directly on a project managing the administrative and operational tasks so that designers can focus on designing. They manage the end-to-end design process, ensuring everything runs smoothly while facilitating communication and collaboration.

DesignOps Leader’s Skill Set

While it’s helpful for a DesignOps leader to understand design, it’s more important to have a change management background. They must understand how to implement change and encourage adoption.

designops efficiency speed optimal

DesignOps Leaders must have excellent business management skills for budgeting, strategy, and execution. They need to manage people and lead them towards their Ops vision.

Communication and networking are crucial DesignOps skills. Leaders spend a lot of time engaging with stakeholders and executives to advocate for design and get budget buy-in. They’re also the voice of design to the rest of the organization, meeting with peers to find opportunities for collaboration.

DesignOps Leader’s Responsibilities

In Measuring DesignOps Impact, Patrizia Bertini talks about three DesignOps areas of intervention:

  • Business
  • Workflow and design
  • People

1. Business Operations

Managing budgets, resources, and other business-related design functions. Examples include:

  • Budget management/spending optimization
  • Spending policy overview
  • End-to-end procurement and 3PRM (practice in performance & reward management)
  • Contract negotiations
  • Onboarding vendors and 3P (process, product, people) risk assessment
  • Spending ROI calculation
  • Tools ROI/impact assessment
  • Resource asks assessment (tools + people)
  • CW/FTE sequencing

2. Workflow and Design Operations

A holistic view of the end-to-end design process. How do designers get from concept to final product? Examples include:

  • End-to-end design process optimization
  • Tools ecosystem management
  • Tools onboarding/off-boarding
  • Cross-functional collaboration optimization
  • Design system management
  • Data governance
  • Participant sourcing process management
  • Research and design asset management
  • Design standards

3. People Operations

Considers the human aspect of design teams, like skills development, communication, and culture. Examples include:

  • Career path direction
  • Skills matrix/team composition assessment
  • Development programs and team training
  • Teams culture
  • Knowledge & experience training
  • Streamline ubiquitous cross-functional collaboration
  • Onboarding/off-boarding
  • Internal communication
  • Change management
  • Engagement models
  • Hiring/job specification/tasks review

Would you like to improve your skills concerning people operations? Here’s a free eBook that covers the first strategic area of DesignOps: People, called DesignOps Pillar: How We Work Together. Learn about hiring, onboarding, and managing a team of designers.

Is Your Company Ready to Hire a DesignOps Expert?

designops increasing collaboration talk

Here are some signs your company might need a DesignOps expert:

  • You’re having trouble with silos, communication, and collaboration resulting in poor cohesion and consistency for project deliveries.
  • You have too many tools which disrupt workflows or cause errors.
  • Design teams often miss deadlines, or high rework rates adversely impact time-to-market.
  • Designers complain that operational and administrative tasks prevent them from focusing on design.
  • Design leaders spend too much time onboarding, orienting, and training new hires–time better spent on design-related tasks.
  • Designers wear too many hats instead of focusing or specializing on one primary activity–i.e., UI design, research, testing, etc.

Check out these resources to learn more about DesignOps, and its role in your organization:

Optimizing Design With UXPin Merge

Managing design systems is one of the biggest challenges for a DesignOps expert. Ensuring the design system’s UI kit syncs with the component library takes considerable time and effort.

With Merge, you sync your design system from a repository to UXPin’s editor, so designers use the same components as engineers–creating a single source of truth across the organization. Any changes to the repository automatically sync to UXPin, notifying design teams of the new release.

Ready to optimize your UX workflows with a single tool? Request access to Merge.

Discover Merge

Product Design Influencers that You Need to Follow

product design youtube channels

YouTube is often the go-to for product design tutorials, career advice, design tips, design tools, and more. We’ve put together our favorite product design YouTube channels and influencers to inspire your next project.

We’ve selected the best YouTube channels featuring product design and product development content from some of the Internet’s most creative people.

One of our favorite YouTube channels is Jesse Showalter. Jesse has done a couple of UXPin product reviews, including a basic overview and a walkthrough of our advanced features. Sign up for a free trial and follow along as Jesse takes you through UXPin.

Top Product Design Influencers

These product design influencers offer practical advice and helpful design tips to enhance your design skills. Whether you’re just starting as a designer or a seasoned pro looking for advanced techniques, these product design YouTube channels offer excellent content for designers.

1. Flux (AKA Ran Segall)

flux

Flux is the personal vlog of a designer Ran Segall who documents his learnings of web design and entrepreneurship. Ran is extremely charismatic and knowledgable which makes him an amazing person to follow. Besides posting YouTube videos, he has a very energetic Instagram account where he publishes a bite-sized content for anyone interested in UX and UI design, as well as growing a digital business.

Here are links to follow Ran Segall:

2. Sharon Oniyine

One of the Best design influencers in 2022

Sharon Onyinye is a UI/UX designer with over five years of experience working in tech. Sharon uses her YouTube channel to share her expertise with aspiring UX designers, including how to get a design job, portfolio/CV tips, and other helpful career advice.

You can also book a one-on-one with Sharon for career improvement, Interview preparation, portfolio, resume reviews, and general design advice.

Here are links to follow Sharon online:

3. Jesse Showalter

One of the best design influencers on YouTube

Jesse is a Product UI/UX Designer from the United States. He shares high-quality digital design and web development content on his YouTube channel. 

What we love most about Jesse is his consistency–posting new videos every week to keep his followers up to date with the latest design tools, products, brand identity, and trends. Jesse also offers live streams with web design challenges, Q&As, design-alongs, and more.

Here are links to follow Jesse online:

4. DesignCourse – Gary Simon

Top product design influencers on YouTube

Gary Simon is a UX/UI Designer, Graphic Designer, and Full Stack Developer from the United States. He’s been posting vlogs to his YouTube channel since 2010 and amassed just shy of a million followers.

Gary has over 100 design and development courses on Envato Network’s TutsPlus.com, DigitalTutors.com, Pluralsight.com, LinkedIn Learning & Lynda.com. He also founded DesignCourse, which offers interactive design courses and a mentoring program.

Gary’s YouTube channel playlists include product reviews, typography & color tips, design/development tutorials, free courses, and much more. He also teaches his followers how to get the most out of design tools and front-end frameworks.

Here are links to follow Gary online:

5. Sarah Doody

Follow one of the best design influencers Sarah

Sarah Doody is a User Experience Designer and Researcher from Salt Lake City, Utah, with over 18 years of experience. She founded the Career Strategy Lab, “a UX career accelerator that helps UX professionals get hired without applying to hundreds of roles.”

Sarah’s YouTube channel offers practical tips and strategies for aspiring UX designers with career advice, portfolio reviews, and user research tips and tricks.

Here are links to follow Sarah online:

6. AJ&Smart

AJ&Smart are design influencers on YouTube

AJ&Smart is a Berlin-based Product Design Studio that also runs a successful YouTube channel with over 200k followers. The studio posts new vlogs regularly, hosted by different members of the AJ&Smart team.

AJ&Smart’s content focuses on UX/UI design, design sprints, design thinking, and research to help designers build better products. Other video topics include career advice, how to land clients, and tips for design teams.

AJ&Smart founded Workshopper, a platform offering free resources for UX/UI designers and product designers.

Here are links to follow AJ&Smart online:

7. Vytautas Alechnavicius

Design influencer who talks about product design

Vytautas (or Vy) Alechnavicius UX Designer, Researcher, and DesignOps Leader, originally from Denmark but living and working in the United Kingdom.

Vy works full time as a Product Design Manager at Tesco while running a successful YouTube channel about user research and design. He creates a lot of content around UX design processes and methods, with loads of valuable design thinking tips.

Vy’s Discord channel, Design Squad: UX Community, has almost 3,000 active members where designers and product strategists share knowledge and offer helpful advice.

Here are links to Vytautas’s website and social media:

8. Kim Tang

Best design influencer kim tang youtube

Kim Tang is a UX/Product Designer from the United Kingdom. Kim isn’t as established as the other design influencers featured in this article but shares interesting insights into her life as a product designer at eCommerce giant ASOS.

Kim now works as a product designer at FARETCH, a group of luxury fashion brands, including Browns, Stadium Goods, and New Guards Group.

Here are links to Kim’s social media:

Product Development Influencers

If you’re looking to develop your skills as a product developer, these four influencers offer excellent coding tutorials, tips, and advice.

1. CleverProgrammer

clever programmer is a top influencer for product design and development

CleverProgrammer, aka Rafeh Qazi, is a Los Angeles-based Full-Stack Developer and Software Programmer with over a million YouTube subscribers.

Rafeh’s YouTube popularity is due to his comprehensive video tutorials, several of which are over seven hours long with more than 2 million views each.

Rafeh is the founder of CleverProgrammer, which offers various coding bootcamps in Javascript, Python, front-end, and full-stack development.

Here are links to follow CleverProgrammer online:

2. Ania Kubów

Design influencer who's a developer

Polish-born, Dubai-raised, and UK-educated Ania Kubów is a software engineer sharing her knowledge and experience with aspiring developers. Her YouTube channel has over 210k subscribers, and Ania creates free content for freeCodeCamp.

Ania shares loads of fun code along projects on her YouTube channel, with playlists including games, APIs, web scrapers, clones of popular websites, React applications, and more. She also shares valuable insights into blockchain technology and how to create NFTs.

Here are links to Ania’s social media:

3. Dev Ed

product design influencer and development influencer

Not only does Dev Ed have the coolest name, but he’s also an incredibly talented web developer and designer from Romania with over 720k YouTube subscribers. His enthusiastic style and ability to simplify complex code concepts are what make Dev Ed so popular.

Dev Ed offers beginner coding tutorials for Javascript, Python, Node.js, React, CSS, and web development. He also has fun projects like building video games and creating exciting Javascript animations.

Here are links to follow Dev Ed online:

4. CoderOne

CoderOne is an educational channel for those of you who want top learn fundamental aspects of programming. It’s run by Islem Maboud who has an amazing gift of explaining the nuances of software development. He also teaches the audience step by step how to build something, such as food delivery app.

Here are links to follow CoderOne online:

5. Net Ninja

development and design influencers that help people understand front-end design

Net Ninja, aka Shaun Pelling, is a UK-based full-stack developer and online instructor. Shaun has four Udemy courses with over 62,000 students, and all his courses have solid 5-star scores (an incredible achievement) with thousands of positive reviews.

Through his YouTube channel, Udemy account, and website, Shaun offers courses in Node.js, Vue, React, Python, Ruby, PHP, HTML, Flutter, TypeScript, CSS, and other programming languages and technologies–“to Black-belt your coding skills.”

Here are links to follow Net Ninja online:

BONUS: Design Influencer We Would Love to Go Back on YouTube

These two design influencers have fantastic content, but they haven’t posted new videos for a while.

1. Mike Locke

One of the best design influencers who have great content on Youtube

Mike Locke is a UI/UX Designer from the United States with more than 25 years of design experience. He’s worked as a UI/UX Designer at many global organizations, including Thomson Reuters, Yahoo!, CBS, ADP, and Fox TV, where he currently works as a Lead UI/UX Designer.

Mike’s YouTube channel offers tons of practical tips on UX/UI topics, career advice, interviewing processes, and more. He’s passionate about sharing his wealth of knowledge from working with Fortune500 organizations–which is what makes his videos so unique and engaging.

Although Mike hasn’t posted for over a year, you should still explore his YouTube channel for helpful design tips and advice.

Here are links to follow Mike online:

Improving Product Design With UXPin

UXPin is a code-based end-to-end design tool used by UX and product designers worldwide. The intuitive design canvas and advanced features allow designers to build prototypes with significantly higher fidelity and functionality than other image-based design tools.

In this video, Jesse Showalter walks you through UXPin’s advanced prototyping features, including Interactions, States, Components, Variables, and Expressions.

You can also check out our free app examples and interactive UI patterns, demonstrating UXPin’s advanced features for you to copy and edit.

Sign up for a free trial and experience the endless possibilities with UXPin’s code-based design tool.

UX Engineer Tools that Make The Job Easier

A UX engineer’s (UXE) toolkit includes design and engineering tools. They are engineers first, so most tools apply to development, but they also use a fair share of design tools.

Table of contents

Working between product design and development means that UX engineer tools must allow for collaboration between both disciplines. They must also work with DesignOps and DevOps, meaning UXEs also have many operational tools.

UXPin is a code-based design tool UX engineers use to bridge the gap between design and development. From advanced UI design and prototyping to design systems and component library syncing, UXPin enables UX engineers to work and collaborate more effectively. Sign up for a free trial to experience the world’s most advanced code-based design tool.

What Does a UX Engineer do?

Before we get into UX engineer tools, it’s important to define what a UX engineer does so we understand their diverse toolkit.

UX engineers work primarily in front-end development, collaborating with the design team throughout the end-to-end design process–effectively making them hybrid designer/engineers. They have limited design skills, predominantly focused on UI design, interaction design, and prototyping.

Working across design and development means UX engineers work with a stack of tools for each–more than the average UX designer or engineer.

UX engineers work with design tools when collaborating with designers, and development tools for their engineering work. 

For this reason, we’ve split UX engineer tools into two categories:

  • Design tools
  • Development tools

UX Engineer’s Design Tools

collaboration team prototyping

UX engineers collaborate with designers from ideation to design handoff. Their role is to look at ideas through an engineer’s lens and give technical advice and support during the product design process.

UI Design Tools

Rather than designing UI elements and assets, UX engineers use design tools to collaborate with designers. 

For example, if they’re using a design tool like UXPin, UX engineers use UXPin’s Comments to share feedback and collaborate on wireframes, mockups, and prototypes (low-fidelity and high-fidelity). Many design tools have a similar feature, allowing designers and UX engineers to collaborate throughout the design process.

Prototyping Tools

UX engineers rarely use traditional image-based prototyping tools. Instead, they use HTML, CSS, and Javascript (or a front-end framework) to build fully functioning prototypes.

The problem with prototyping in code is that it’s time-consuming and isn’t accessible for designers to collaborate–they must rely on the UX engineer to build the prototype and make changes.

With UXPin Merge, designers and UX engineers can drag-and-drop components from a repository to build fully functioning prototypes in UXPin.

Sync React components directly to UXPin using Git or Storybook for other technologies like Vue, Ember, Angular, and more.

With Merge, UX engineers benefit from a fully functioning prototype without the time and effort of writing code. Once prototyping is complete, UX engineers can copy components from the repository, plus changes in UXPin, to start the development process.

Other Design Tools

While UX engineers collaborate with designers throughout the design process, they tend to provide feedback and advice rather than actively researching, designing, and user testing.

A UX engineer will have access to many of these tools, but they’re more interested in the results and analytics than conducting user research and usability testing. 

UX Engineer’s Development Tools

code design developer

UX engineers complete most front-end development, leaving data integration, APIs, performance, analytics, and other technical “non-UI” work to front-end engineers.

Integrated Development Environment (IDE)

UX engineers use an integrated development environment (IDE) to write code and collaborate with the engineering team. Visual Studio Code is a widely used IDE with tons of extensions to help streamline the development process.

Engineers can choose from a wide range of IDEs, including native applications like Xcode for iOS and Android Studio for Android.

Component-Driven Development Tools

design system atomic library components

Storybook allows engineers to build UI components, layouts, templates, and user interfaces in isolation. The open-source tool is popular for engineering teams that use component-driven UI or Brad Front’s Atomic Design approach to building digital products and websites.

UX engineers use a tool like Storybook to share new components with engineering teams for reviewing and editing before release. Developers can also use Storybook to build and test user interfaces before committing to development.

Version Control – Git

Git is the most widely-used version control system. It allows engineers to track code changes while enabling development team members to simultaneously work on the same project.

Git is crucial for UX engineers because they often collaborate on customer-facing UIs with front-end developers.

Package Manager

UX engineers use packages to build and scale digital products. They can use privately-hosted packages or public repositories like NPM for Node.js apps or pub.dev for Flutter.

UX engineers must use the command line to interact with these repositories and, therefore, must be competent with working in the terminal.

Webpack

Front-end developers use multiple APIs, plugins, and dependencies to build websites and web applications, each with separate CSS, Javascript, and other assets. Front-end frameworks like React, Angular, and others also come with assets and dependencies.

These assets have a significant impact on performance. A module bundler like Webpack combines these assets into single .js and .css files, optimized for multiple browsers and devices.

Chrome Developer Tools

Chrome Developer Tools is a crucial web development tool. UX engineers use Google Developer Tools to inspect the user interface, find issues, and edit code in the browser.

Google Developer Tools allows UX engineers to work on a website or web application without editing code or additional testing tools. Engineers can also use Google Developer Tools to inspect other websites to find inspiration or research competitors.

Accessibility Tools

accessibility contrast wcag

As UX experts, UX engineers must test their code for accessibility. Here are several standard accessibility tools front-end developers and UX engineers use:

  • WAVE: WAVE (Web Accessibility Evaluation Tool) is an accessibility tool for front-end engineers. It scans the web page’s code and assets, flagging accessibility issues with suggestions for improvements. WAVE also has a contrast analyzer so UX engineers can double-check designer color palettes.
  • Accessibility Developer Tools: A Chrome extension for Google Developer Tools to test accessibility and performance.
  • Tenon: A powerful front-end tool for automating accessibility testing. Tenon integrates with many IDEs, content management systems, and project management software to optimize accessibility testing and fixing.

GitBook’s Front-end Developer Handbook has excellent accessibility tools and other front-end resources.

Why Code-Based Design Tools are Important for UX Engineers

Designers and engineers speak different languages and use separate tools. This disconnect makes it difficult to understand each other and collaborate effectively.

Code-based design tools like UXPin bridge this gap–making it easier for UX engineers and designers to collaborate.

Why Code-Based Design is Different

Traditional image-based design tools render raster graphics or static images of user interfaces. These tools have little or no functionality, making it difficult for engineers and stakeholders to understand the product’s design.

A code-based design tool like UXPin renders HTML, CSS, and Javascript, allowing designers to create interactive prototypes, accurately replicating the final product.

uxpin merge comparison 1

Advanced Code-Based Prototyping with UXPin

UXPin’s advanced prototyping features allow designers and UX engineers to build fully functioning prototypes–eliminating the need for UXEs to write code during prototyping and testing.

For example, one of the challenges with image-based tools is that you can’t use forms, making it necessary for UX engineers to develop a prototype for testing a simple onboarding sequence.

In UXPin, forms are fully functional. Designers can build a dynamic onboarding flow that captures user inputs while creating a unique user experience for each individual-like a welcome message or thank you page with the user’s name.

Some of the other high-fidelity prototypes you can only create with code-based tools like UXPin include:

  • Form validation: Use Expressions to check users enter the correct email format or if a password meets specific requirements.
  • Computational components: Build functioning shopping carts that respond to user interactions, dynamically calculating items, shipping, etc.
  • States: Create multiple States for a single component and switch between those states based on user interaction.
  • Interactivity: Use advanced Interactions with Javascript-like animations and transitions to create immersive experiences that react to users’ clicks, taps, scrolls, swipes, location, and other actions.
  • Variables: Design forms that capture user inputs and take action based on the information–like a personalized greeting or populating a user’s profile page with information provided during sign-up.

Increase Fidelity & Functionality With UXPin Merge

UXPin Merge is the ultimate UX engineer design tool! Merge allows you to sync components from a repository to UXPin’s editor so designers and UXEs can build fully functioning prototypes.

UX engineers can use a component’s props (or Args for our Storybook integration) to give designers more control or set limitations based on the company’s design system guidelines. Designers can edit props via UXPin’s properties panel or switch to JSX, depending on their preference.

UX engineers simply copy/paste the JSX code at the design handoff to start the development process. Any changes UXEs make to the repository automatically sync to UXPin, notifying designers of the change–creating a single source of truth between designers and developers.

UXPin’s low learning curve makes it easy for non-designers (including UX engineers) to design layouts and prototypes. PayPal proved this point when its product designers could build fully functioning high-fidelity prototypes 8X faster than experienced UI/UX designers.

Discover Merge

What Is a Mockup — The Final Layer of UI Design

ui mockup

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

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

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

Build advanced prototypes

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

Try UXPin

What is a UI Mockup?

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

What are Mockups for?

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

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

Mockups also provide:

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

When to use UI Mockups

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

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

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

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

Anatomy of a Mockup

screens prototyping

Content Layout

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

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

Color & Contrast

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

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

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

Typography

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

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

Spacing

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

3 Types of Mockups

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

Graphic Design Software

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

Mockup Tools

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

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

Code

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

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

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

Best Practices to Create Mockups

color id brand design

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

Mobile-First Approach

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

Avoid Switching Tools

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

Use a Component Library or UI Kit

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

Don’t Reinvent the Wheel

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

Adopt a Minimalist Approach

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

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

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

Leverage Design Tools

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

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

uxpin autolayout

Name Files and Layers Properly

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

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

3 Tips for Collaborating with Developers on Mockups

design system atomic library components

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

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

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

Try UXPin for free

Tradeoff Between Time and Robust Prototypes? You Can Have Both!

Prototyping is challenging for designers using image-based design tools. These static mockups and prototypes never achieve the fidelity and functionality required to get accurate feedback from testing and stakeholders.

Designers often have to use several tools throughout the design process; one for design, one for prototyping, and another for testing. This workflow is not only disruptive but expensive as companies pay subscription fees for multiple tools and paid plugins to integrate this complicated workflow.

We will demonstrate how code-based tools can simplify your team’s UX workflow, reduce your reliance on extra tools and plugins, significantly enhance prototyping and testing, improve collaboration, and streamline the design handoff process.

Enrich your end-to-end design process with UXPin’s code-based design tool. Sign up for a free trial and start designing better user experiences for your customers.

The Challenge of Prototyping With UI Kits

One of the challenges with image-based design tools is that designers often have to start from scratch every time they start a new project. Even with a comprehensive design system, there’s only so much fidelity and functionality you can save in a static UI kit.

“Imagine this”–an all too familiar scenario…

You have to present your designs for a new onboarding flow to stakeholders, but your team didn’t have the time or resources to build a fully functioning prototype.

So, you connect a series of static artboards with some basic transitions and a few GIFs to demonstrate complex interactions and animations. The problem is that the prototype isn’t intuitive, and stakeholders battle to understand how it’s supposed to work.

You find yourself repeating, “ok, now imagine this…” as you guide stakeholders through your prototype. Stakeholders have to jump from static artboard to GIF to preview animations of what your prototype is supposed to do. It’s difficult to follow without your step-by-step instructions, and there are lots of confused faces.

By the end of your meeting, you’ve spent so much time explaining what the prototype should do instead of pitching your team’s innovative design.

Poor Fidelity from Static Prototypes

prototyping design drawing pencil tool

Many teams are stuck in this scenario where prototypes lack clarity. There simply isn’t enough time and resources to build working prototypes for every idea or flow. Designers have to compromise, hoping they can explain their designs to stakeholders, usability participants, and engineers. 

It’s a challenge with stakeholders but even more aggravating during the design handoff, where frustrations boil over between engineers and designers.

Getting accurate results from usability participants is near impossible with these low-fidelity prototypes. Designers are limited by what they can test, usually restricted to basic user flows. They must rely on UX engineers to build code-based prototypes for accurate testing and meaningful results.

Building fully functioning prototypes no longer means you have to rely on developers. UXPin Merge has revolutionized the standard UX workflow, so designers and engineers work with the same component library linked to a repository.

PayPal’s Faster Time-to-Market with UXPin Merge

PayPal uses Merge to scale design and ship products 8X faster than image-based design tools. Product teams also get better feedback from stakeholders because they don’t have to explain how everything works.

“Our stakeholders are able to provide feedback pretty quickly using UXPin. We can send them a link to play with the prototype in their own time, and UXPin allows them to provide comments directly on the prototypes. UXPin’s comments functionality is great because we can follow along and mark comments as resolved once we address them.” – Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal

PayPal’s internal products use the React component library from Microsoft’s Fluent UI design system. They host the design system in a GitHub repository which syncs directly to UXPin’s design editor.

These components include interactivity, minimizing interaction design, and animations designers must do to build interactive prototypes. These interactions also help maintain consistency across projects and teams.

Any changes engineers make to the repo automatically sync to UXPin, so PayPal’s product teams, UX designers, and engineers always work with the same components–creating a single source of truth across the organization.

“With this new UXPin approach, we’re seeing a more collaborative, integrative design process. Rather than separating design, prototyping, and development, UXPin allows us to create an integrated flow where we engage engineering and product teams throughout the process. As a result, the product’s final quality has improved dramatically.” – Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal

Iress’ Design System Maturity Using UXPin Merge

Every design system strives toward a fully integrated system where designers drag-and-drop components to build UIs and engineers copy/paste code to complete the development process.

The component-based end-to-end product development process means designers spend more time prototyping and testing than wireframing and designing. At the same time, engineers focus on optimization and innovation rather than writing code.

Iress’ Nick Elliott calls this stage four design system maturity, where designers and engineers use the exact same components for their workflows. Consistency and design drift are no longer issues with a seamless, almost non-existent handover process from design to development.

image 12

Nick spent 12 months reviewing design tools to bridge the gap between design and development to achieve level four maturity. UXPin Merge emerged as the clear winner, allowing Iress to develop a fully integrated design system where designers and engineers work with the same component library.

Increase Fidelity and Functionality in a Fraction of the Time

We learned from PayPal’s case study how much faster designers build high-fidelity code-based prototypes. PayPal tested this side-by-side with Merge vs. an image-based design tool.

An experience PayPal UX designer built the exact same one-page prototype using both tools. The image-based prototype took over an hour, while the Merge prototype (with higher fidelity and functionality) took eight minutes!

Due to Merge’s drag-and-drop workflow, even PayPal’s product managers (who have no experience with design tools) can build the same one-page prototype in under 10 minutes.

Getting the Most out of Merge

Merge works best for companies using an existing design system or open-source component library, like the MUI library. Engineers can give designers control to customize components via React props or Args if you’re using the Storybook integration (Angular, Ember, Vue, etc.)

uxpin merge comparison 1

The design system team can also set interactions and states for each component, like default, hover, active, and disabled for a button. Instead of designing interactions, designers simply select one from a dropdown in the properties panel.

Any changes designers make to a component UXPin renders in JSX, so engineers simply copy/paste for front-end development.

As we learned with PayPal, stakeholders can interact with prototypes with little or no explanation in their own time, leaving feedback via UXPin’s Comments feature. The design lead can assign these comments to team members to action and mark them as resolved when the task is complete.

Are you still using low-fidelity static prototypes with poor functionality, GIFs, and excessive annotations? Switch to the world’s most advanced design and prototyping tool to enhance collaboration with engineers and improve feedback from stakeholders.

Sign up for a 14-day trial to explore UXPin Merge via our free MUI integration.

An Introduction to the Design Iteration Process

An Introduction to the Design Iteration Process

Table of contents

What Is Design Iteration?

Design iteration is the repeatable process of improving a product (or part of a product) in relatively short but regular bursts, otherwise known as ‘design iterations’. These design iterations can consist of high-fidelity prototypes, mid-fidelity wireframes, low-fidelity sketches, or even simple diagrams such as sitemaps.

Design iteration drives the overall design process forward.

Why Is Design Iteration A Part of the Design Process?

Jumping immediately into product development and then trying to validate the end result using research (e.g. usability testing) leads us to design the worst possible version of our product. When this happens, the journey from the worst possible version to the best possible version is a costly one, and not least time-consuming.

A better approach to designing human-computer interfaces is design in iterations. It enables us to learn along the way, using feedback and trial-and-error to collect clues about how the design should look and function. It won’t be a straight road to the finish line, but we won’t end up moving completely in the wrong direction either. In the long run, design iteration awards the design process with more time, insights, and stability.

What Are the Benefits of an Iterative Design Process?

scaling process up 1

It Saves Resources

An iterative design process almost always saves the most amount of time because it regularly provides us with user feedback (or stakeholder feedback, at the very least) that propels us forward at a steady pace.

Although positive feedback can tell us when we’re on the right path, negative feedback can tell us when we’re on the wrong path as well — so we’re constantly moving forward, never truly wasting any valuable time.

With no feedback at all, we risk rushing all the way to the finish line only to fail, which is a huge waste of time and bandwidth. Plus, since time is money, this makes design iteration the most cost-effective option too.

It Facilitates Collaboration

An iterative design process facilitates healthy collaboration too since it awards stakeholders the opportunity to express their feedback and even share their own ideas. This provides us with insights that we’d have never discovered on our own because we’re only able to see things from our own perspective.

It Addresses Real User Needs

Without a methodic design iteration process (specifically one that incorporates collaboration), designers tend to fall into the trap of working in an isolated bubble. Being siloed causes us to become too introspective, which then leads us to make hasty assumptions and unproductive perfectionist behaviours.

However, implementing an iterative design process ensures that we stay focused on user needs and make decisions in accordance with user feedback. Also, it helps us to prioritize the next best way to improve the design rather than focus on random improvements.

As an added bonus, user feedback can also help to settle any conflicting opinions amongst stakeholders.

Facilitates Regular Updates

Having an iterative design process enables us to provide progress updates to stakeholders at regular intervals, as opposed to just dumping the end-result on them and leaving them in the dark until then.

For developers in particular, it means that development can begin even while the design is still in progress (in fact, it allows developers to leverage an iterative development process, so everybody wins).

When working with clients, frequent updates can illustrate the effort that’s going into their product, helping to foster good relationships with them. Regular product updates can even be relayed to customers to generate marketing buzz and acquire public feedback.

UXPin prototypes can be shared with customers and stakeholders within seconds. In just a few clicks, designers can begin acquiring contextual feedback comments as customers and stakeholders test design iterations that look and function like the real thing. When using Adaptive Versions, simulated prototypes will even adapt to their device and screen size. Just remember to use Preview mode to check prototypes for errors and oversights before sharing! 

Where Is Iteration Used?

process direction 1

Iteration isn’t only for designers. Software developers can also take an iterative approach to their work, working asynchronously or in tandem with iterative design. On a much larger scale, even entire projects can be methodically managed in iterations.

Iteration in Design

In design, iteration is a key aspect of many design methodologies such as: 

Regardless of the methodology used, teams can asynchronously address multiple user needs at once using concurrent iterative design processes as long the necessary resources are available to do so.

Iteration in Software Development

In software development, iteration is used to facilitate continual improvement, provides a margin for error, and avoids blocking other aspects of the product development process (unlike the waterfall methodology, which is linear and enforces all processes to be done sequentially). In fact, an iterative approach makes it possible for design and development team members to work in tandem (e.g. combine agile UX and agile software development to build out functionalities).

Iteration in Project Management

Finally, iteration can also work at a higher-level, becoming the overarching theme of the whole product or project management process. Iteration provides project stakeholders with regular updates about the direction of the product throughout its lifecycle, along with data that can be used to measure core success metrics.

Iteration can even be used to improve internal operations (e.g. DesignOps and DevOps), providing a massive boost to the team’s morale and productivity.

Iteration in Research

Iterations should be fueled by research. Whether that’s focus groups in design or browser testing in development, anything learned during research should be used to push us into the next iteration.

In some cases, research can be conducted asynchronously and independently and doesn’t need to result in a ‘designed’ or ‘developed’ deliverable. For example, when figuring out how to label and structure a navigation, designers can iterate through various formative and summative card sorting studies before finally winding up with a simple set of requirements.

What Does the Iterative Design Process Look Like?

responsive screens prototyping

An iterative design process can differ from methodology to methodology, but can generally be summarized into 5 distinct stages: planning, ideation, prototyping, testing, and finally, review.

Stage 1: Planning

Iteration should be quick but effective, hence a certain amount of planning is required in order to keep iterations focused on a particular user need.

The planning stage is mostly about deciding which problem to solve during the iteration. Occasionally this means listening to stakeholder observations but most of the time it means directly collecting user feedback from previous iterations (or somewhere else such as a feedback form).

Either way, this stage is always fueled by research and driven by a purpose. In many design methodologies problems are reframed as opportunities, and when many opportunities present themselves, methodology states that stakeholders should vote on what appears to be the best opportunity to improve the product. As an example, the design sprint methodology relies on ‘how might we’ and ‘dot voting’ for choosing opportunities.

In short, the planning stage should answer the question: “what should we improve in this iteration?”

Stage 2: Ideation

At this stage in the process the objective is to generate as many ideas as possible no matter how bad they are, usually via sketching. This is an iterative design process in itself where we’ll usually refine our best ideas and put aside the worst ones.

Iterative methodologies exist (e.g. Crazy 8s, Four-Step Sketch, etc.) to ensure that the creative juices remain flowing, and they also enforce time limits to keep the process lean, fun, and productive.

Eventually, we/our team will choose one slightly refined idea to move forward with. Chosen ideas are often phrased as user stories so that the prototyper then has a problem statement, a clearly defined actionable task, and a detailed-enough visual guide.

Stage 3: Prototyping

Once we’re at the prototyping stage the iterative design process starts to feel a little simpler as we’re now focused on a specific idea.

The time limit is usually enforced for maximum productivity, so it’s best to use a design tool that supports your workflow, such as UXPin. Better yet when the product team has a design system at hand and the UX designer understands it thoroughly, it can help tremendously.

Stage 4: Testing

The objective of the testing stage is to find out whether or not the prototype solves the problem we’re trying to solve, and how well it solves it. We won’t be implementing anything or even synthesizing the research, it’s simply about using the right research methods to learn as much as we can about the solution and documenting any feedback, findings, and insights.

Stage 5: Review

The final stage — the review stage — is about synthesizing the research and coming to a conclusion about the effectiveness of the solution. A conclusion usually falls into one of the following categories:

  • “Great” — time to implement
  • “Good, but…” — circle back to prototyping
  • “Flawed” — circle back to ideation

The Do’s and Don’ts of the Design Iteration Process

idea 1

Do: Fail Faster

Adopting a ‘fail faster’ mentality, embrace trial-and-error to learn what not to do even when missing the mark. Failure is inevitable so it’s best to get it out of the way early while making sure to learn from it.

Do: Be Flexible

Although design methodologies have strict rules to help us express our creative freedom without spending too long on each iteration, they still allow for a certain degree of flexibility. Ultimately, it’s up to us to decide which opportunities to focus on first, when to iterate or test more, and how many concurrent design iteration processes should be active at once.

Leveraging any data and research available, these decisions largely depend on instinct and experience.

Do: Work Asynchronously

Utilizing all available resources (tools, teammates, etc.), achieve the most in the shortest space of time by allowing other designers to solve other aspects of the product asynchronously, and developers to begin implementing validated solutions too. Doing both of these will shorten product timelines significantly.

Do: Collaborate and Listen

Which problem should we solve? Which iteration is best? Is the prototype ready for testing? What does all this feedback mean? Acquiring fresh perspective and unique expertise from collaborating teammates gives us the confidence to answer these questions.

task documentation data

Don’t: Try to Solve Everything

Once the problem we’re solving during the design iteration process has been decided, avoid trying to solve additional problems. Although it’s normal to identify things that can be improved (during testing or through observation), note them down because they might be good starting points for later iterations.

Allowing scope creep (additional problems to creep into our design iteration process) will only distract us, slow us down, and make it difficult to measure the impact that iterations are having on key metrics.

Conclusion

Now that we understand the foundations of design iteration, the next step is to choose an iterative design methodology that works for us and our team, and allow ample time for everybody to master it.

However, no design methodology is perfect. If something isn’t working then consider adapting the workflow or simply move on and try another method.

Iterative Design with UXPin

UXPin is an end-to-end design tool built to help product teams iterate quickly, collaborate on ideas, acquire actionable feedback, and eventually hand off high-fidelity prototypes that are code-based and give developers much more to work with.

With UXPin, go from validated iteration to production much quicker by letting developers implement prototype specs that are already translated to HTML, CSS, and JavaScript, collaborate on design system documentation, and even import real React components into prototypes using UXPin Merge.

Discover Merge