Product Redesign — How to Make it Work

product redesign

A product redesign is an opportunity to improve many aspects of a digital product, most importantly, its user experience, visual design, technical bugs, and business value. Product teams can also extend the product’s lifecycle by making it more relevant and up-to-date with modern trends. 

Improve product redesign scope and achieve significantly better results with component-driven prototyping from UXPin Merge. Visit our Merge page for more details

Reach a new level of prototyping

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

What is Product Redesign?

A digital product redesign means updating and improving an existing product, like a website, app, software, or game. These redesigns are essential to keep products relevant and competitive with every changing technology, trends, and demand.

The extent of the redesign will depend on the project’s scope, which might include making significant changes to the user interface, functionality, or new features to improve the user experience, meet changing user needs, or address technical issues.

The redesign process typically involves a thorough analysis of the current product, user research to understand the needs and preferences of the target audience, and the development of new design concepts and prototypes. Designers must test and iterate on these prototypes to ensure the final product meets the design brief’s goals and objectives.

Product redesigns are often complex and time-consuming because designers must collaborate with many stakeholders, review past research, and conduct new research.

Why Do We Redesign Products?

error mistake wrong fail prototyping

Improve the user experience

Improving the user experience is often a priority regardless of the redesign project scope. Designers aim to make the product more user-friendly, efficient, and enjoyable. For example, a company might redesign a website to make it more intuitive and easy to navigate.

Technical issues

Designers often collaborate with engineers to solve technical issues or bugs that adversely impact performance or functionality. For example, the engineering team may require a new authentication system to fix a security flaw. Designers must test the new login flow to identify potential usability issues before release.

Organizations often redesign products to stay current with industry trends and best practices. Instagram is an excellent example of redesigning to meet industry trends. The company has made two significant redesigns over the last decade: Stories to compete with Snapchat and Reels to compete with TikTok.

Meet changing user needs

Like technology, users’ needs evolve. Organizations to redesign products to meet these changes. It’s also common for a target audience to change, meaning the organization must redesign the product to meet new needs and priorities.

Improve performance and scalability

When products experience growth spikes, they often have to redesign the product to accommodate new technology, increased traffic, and usage that goes along with the growth.

Optimize for new devices

With new devices and IoT frequently entering the market, designers must update UIs and features to meet demand. For example, in May 2021, Google released Material Design 3, which included new layouts and components to accommodate foldable devices.

Better align with business goals

Product redesigns are often required to align with business goals and objectives. These goals could relate to seasonal promotions, like Christmas, Black Friday, Valentine’s Day, etc., or new products. For example, an eCommerce brand is releasing a new product range and needs a redesign to promote and prioritize it on the website.

Improve brand identity

Companies may want to redesign the product’s visual design and branding to better reflect the organization’s identity or to align with a rebranding. For example, an organization may feel a product’s design looks outdated and want a redesign to make the brand relevant to modern design trends.

Address competitive pressure

Organizations must often redesign products to keep up with or surpass their competitors. For example, the research team identifies demand for a feature or functionality not offered in the market. So, the company redesigns its product to gain this competitive advantage.

Learn to do competitive analysis for UX in our other blog post.

Drive business growth

Redesigns are often necessary to facilitate business growth by entering new markets, attracting new users, retaining existing ones, and increasing engagement and revenue.

The popular blogging platform Ghost redesigned its product over the last five years to focus on the creator economy. Ghost still attracts its original customer base of bloggers and publishers, but the redesign means the platform is a preferred choice for subscription-based businesses and creators.

What is a Typical Product Redesign Process?

These are the steps for a typical redesign process.

prototyping elements components building

Define the goals and objectives of the redesign

Defining goals and objectives is a crucial first step in guiding the redesign process. This step involves meeting stakeholders to list and prioritize the redesign’s business goals while considering user needs.

Conduct a thorough analysis of the current product

Next, designers analyze the current design paying close attention to its features, functionality, user experience, and performance. This analysis will identify any problems or issues designers must address during the redesign.

Conduct user research

User research enables designers to understand the needs, preferences, and behaviors of the target audience for the product. Some user research techniques include interviews, surveys, user testing, focus groups, and existing product analytics. 

Designers use this customer feedback to update user personas or create new ones to guide the redesign process.

Create design concepts and prototypes

Designers analyze the research collected in steps one to three to ideate on design concepts. During this phase, designers may run a design sprint or rapid collaborative prototyping session to iterate over many ideas fast. Step four aims to find a solution that meets the project’s goals and objectives while solving user problems–essentially a balancing act for design teams.

Test and iterate

Testing is an essential part of any design process. Designers present prototypes to stakeholders and conduct usability testing for feedback on ideas. Depending on the project’s budget and scope, designers may iterate several times to refine the concept before the handoff.

Design handoff and development process

Next, designers hand off design files, prototypes, and documentation for engineers to develop the final product. Once engineers complete the development process, designers conduct quality assurance to ensure the final product meets the design project’s specifications.

Monitor and maintain

After the organization releases the redesign, product owners monitor performance through predetermined metrics (KPIs) and gather user feedback. They may use this data to update or improve the product, maximizing its lifecycle and relevance in the market.

Rapid Product Redesign With UXPin Merge

logo uxpin merge 1

UXPin Merge is an advanced code-based technology enabling organizations to sync a design system to UXPin’s design editor, so designers use the same components during the design process as engineers use for the final product.

This component-driven prototyping workflow allows designers to build fully functioning replicas of the final product for accurate usability testing and meaningful stakeholder feedback. 

Version Control for Product Analysis

Merge’s Version Control enables design teams to switch to earlier versions of a design system for prototyping old products–perfect for product analysis purposes. Designers can build prototypes of the existing product to identify issues and opportunities for improvement.

High-fidelity prototyping in minutes

Once designers have completed product analysis and research, they can begin prototyping and testing their solution to iterate and improve. They can build prototypes using the existing component library or create new ones with UXPin’s Patterns feature.

This component-driven prototyping environment enables teams to build, prototype, test, and iterate at a higher fidelity and greater accuracy than traditional design workflows.

In a webinar with UXPin, UX designers from pharmaceutical giant Johnson & Johnson demonstrate how the team builds a fully functioning redesign of a user interface using the organization’s design system in under ten minutes.

PayPal conducted a similar experiment with Merge, where an experienced UX designer built a one-page prototype in under ten minutes using UXPin vs. one hour plus for a traditional image-based design tool.

Usability participants and stakeholders can interact with Merge prototypes like they would using the final product, providing design teams with an accurate representation of the redesign’s user experience and performance.

Smooth, seamless design handoffs

The design handoff process using Merge is a frictionless, smooth experience for designers and engineers. Engineers require less documentation and explanation, with everyone using the same component library. 

UXPin renders JSX, so engineers simply import the components into their project and copy/paste the code from UXPin to complete front-end development.

Automatic updates

If engineers need to add new components to the design system after a redesign, UXPin will track these changes from the repository and automatically update the library for designers. UXPin even notifies designers of the new version, and with Version Control, they can choose when they want to switch to the latest release or return to an earlier version.

Enhance your product redesign process with the world’s most advanced component-driven prototyping tool. Visit our Merge page for more details.

What is Continuous Discovery and How to Get Started?

continuous discovery and why will it improve your UX

If you’ve ever heard about continuous discovery (CD), then high chances are you associate it with the work of product managers. However, this agile approach to research and project refinement isn’t confined to product people work only. It’s also a critical part of how design teams shape products and create value. 

CD offers a method of discovering and adapting products based on customer feedback, allowing both design and development teams to pursue results that provide value to users. 

Once you have all this feedback, time to check if you can use it to improve your product. UXPin is a collaborative, end-to-end design tool that makes it easy to create interactive prototypes that guarantee the most accurate feedback. Sign up for UXPin trial and design your first prototype right away. Try UXPin for free.

Build advanced prototypes

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

Try UXPin

What is Continuous Discovery? 

Traditional product release involves two main processes: discovery and development/delivery. In the ‘discovery’ phase, product teams decide what to create based on customer needs and pain points. Simply put, you’ll discover what your users need and develop solutions to those problems. 

Over time, however, your customers’ needs and problems may change rapidly. And so, traditional product development doesn’t allow any opportunity space to iterate on existing solutions. 

team collaboration talk communication ideas messsages

In continuous discovery, product people and product design teams use ongoing user research and iterations in order to understand and improve the user experience and business outcome. 

It integrates the “discovery phase” into the entire product development process, and makes sure that day-to-day product decisions are guided by user research and validation. 

Within this, insights are continuously discovered so they can be acted on immediately as they change. These include things like new requirements, problems, or a change in user habits. As a result, you can rest assured that products stay relevant and useful to customers.

How Can UX Design Benefit from Continuous Discovery?

Continuous discovery can guide UX design teams to create good products. 

Here’s how.

Lets designers prioritize work to align with users’ changing needs

Many startups suffer from scope creep, where they focus on solutions and features that aren’t relevant to users. After all, it’s difficult to prioritize based on your user’s needs when they change so frequently. 

Instead, why not let your users tell you their up-to-date problems and pain points? By infusing customer feedback and research into your design decisions, you can prioritize work and features to match your customers’ needs.

task documentation data

Recent data can guide your decision-making process and improve prioritization, saving your team plenty of time and resources. You can also prioritize the product backlog based on user feedback.

Build genuinely user-centric products

Engaging with customer feedback regularly helps you understand what your users want from your product. Without regular insight into user pains and expectations, you risk creating products that have no customer value. 

This is especially the case for design teams, where UX designers can get lost in what a product looks like, and focus less on how a user wants to interact with it. 

This can lead to end products that are disconnected from users’ goals – and so customers simply won’t find it useful enough to keep using it. 

Reveal interesting new solutions and features

Continuous discovery can also help you build user-centric products by presenting new solutions and pain points they would have identified in an initial discovery phase.

Design teams will often have a different understanding of their product than customers, and using data and feedback can help reveal interesting ways to solve customer needs. Sometimes, you might go as far as discovering that users have a completely different image of what your product does than product people.

testing user behavior prototype interaction

Also, this process may very well uncover features and approaches you wouldn’t have thought of before, resulting in a more creative and resilient product.

Uncover market and competitive opportunities 

When you collect feedback from users, chances are the insights you’ll gain will identify gaps in your new product that direct competitors may provide. 

Staying on top of what your users want from your product can help establish yourself in a crowded market and even uncover new growth opportunities. 

For example, customer interviews uncover that users in a specific industry wish your product had a new feature that would help their workflow, focusing on this pain point may further expose your product to a new target sector. That’s a true power of discovery work.

Continual research can help identify patterns and changes in the way your users behave and interact with your product. Identifying trends is an important step to keeping your product relevant to your core audience. 

Where do these behavioral changes come from? How can you identify them? 

  • Users asking for a missing functionality could indicate that your customer’s preferences and needs may have shifted. 
  • Shifts in the UX design orthodoxy may change your users’ expectations. For example, if customers are used to interactive experiences from other apps and services, they’d love to see it in your product.

To integrate such customer input into your product roadmap, your UX design team should examine how these shifts and trends impact both user and business objectives.  

Implementing Continuous Discovery

How should your UX design team approach continuous discovery? Here are a few things to include:

Ensure that you have a steady flow of customer feedback

Gaining actionable insights into how your users interact with your product requires comprehensive user feedback. In essence, icorporating user reviews into your design process helps you make better products. 

Recruiting customers to participate in discovery calls or fill out customer surveys is crucial. By planning customer touchpoints, you’ll be able to find out how your product hinders or enables your customers’ goals.

You’ll need a representative sample size for your product development team members to be confident in your insights and implement effective continuous discovery. 

continuous discovery helps keep track of trends

Different users experience different usability issues and user needs. Reach out to a wide variety of customers from different backgrounds, sectors, and locations. 

The best part? Useful customer feedback doesn’t just come from voluntary means. Customer-facing teams such as sales and customer support will find out useful insights every day from both thrilled and disappointed customers. 

Work with these teams to gather a list of users to contact for honest, grounded feedback.

Agree on the roles in the product discovery process

A product discovery team will often involve three departments: 

  • Designers
  • Developers 
  • Product manager

Each member will likely have a different point of view on how to approach the discovery process. We recommend encouraging leaders from all three of these departments to interact with customers. This will give them an accurate view of the user situation. 

As a result,  all teams’ perspectives are taken into account when discussing user feedback, avoiding inefficient silos. These leaders will then discuss the next steps jointly. In the discussion of solutions, they may bring in more members of their respective teams when needed. 

Keep a clear focus on the outcomes you want to achieve

To avoid scope creep, continuous discovery should stay focused on the outcomes and business objectives that you want to meet. 

That’s where defining team goals is so important. We recommend using OKRs (objectives and key results) methodology to keep your team focused on metrics and goals. 

This process guides teams to both identify what the intended objectives are and keep track of progress through real data. 

designops efficiency arrow

How can design teams ensure that solutions align with desired outcomes? KPIs, or key performance indicators, outline how you can measure whether a design decision creates business value. 

As you engage in product discovery, keeping your OKRs in mind will help you decide whether a piece of feedback from your discussions with users is critical for achieving your team-level goals and reaching crucial business objectives.

Want to explore how the OKR methodology can guide your team? Read our full guide on design team goals.

Use a prototyping tool that makes continuous delivery easier to implement

The secret to effectively adapting products based on user feedback is using a prototyping tool that allows different departments within a discovery to collaborate on product iterations.

Prototyping is a crucial step in the product development process, and involving development teams, product managers, and more in this step can help iron out any potential issues later down the lifecycle. 

That’s why it’s so important to use a prototyping tool that allows teams to work together collaboratively.

uxpin design color mobile

UXPin is a component-driven prototyping tool that lets you build prototypes that act like real products. You create products in the cloud and loop in key team members to ask for comments and revisions

This tool helps product teams maintain UI consistency, speed up design handoff, and help ensure that user feedback is instilled into every design decision. Designers can create interactive prototypes to successfully demonstrate your product’s user experience. 

The increased collaboration and information flow afforded by UXPin support teams as they embrace continuous discovery as part of their process.

Prototype User-Centric Products Through Continuous Discovery with UXPin

Continuous discovery ensures that every design decision is laser-focused on improving your user experience and providing solutions to customer pain points. It keeps your digital products relevant and useful to your target user base – especially in our ever-changing digital world. 

To keep up with shifts in consumers’ tastes and expectations, we recommend using this agile and adaptable approach to product development. 

Collaborative prototyping is a crucial part of this step, allowing product discovery teams to shape and craft the user experience to address customer feedback. That’s where UXPin can help. Our all-in-all prototyping tool allows you to bridge the gap between design and development so that teams can build user-centric products together. Get started with UXPin.

13 UI Terms – A Cheat Sheet for Product Designers

ui term

Entering the UI/UX world is an exciting endeavor for anyone new to the world of design. However, it comes with a few challenges — one being, that there is a whole different language you must wrap your head around. It’s safe to say that some UI terminology is not common knowledge for the everyday person.

Basic concepts can be learned through immersion in the industry, but the more technical language will not come so easily. This means that you must familiarize yourself with it to effectively communicate with designers and developers.

To help you avoid confusion during the design process and to better communicate with co-workers, it is best to become “fluent” in UI terminology. Here’s a list that will certainly come in handy.

Ready to build a prototype and use UI terms in practice? Use UXPin, an advanced end-to-end design tool for building interactive prototypes of digital interfaces. Try it for free.

Build advanced prototypes

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

Try UXPin

13 UI Terms You Should Be Familiar With

To make it simpler, we have divided the UI design terminology into two main categories—Verbs (Actions Terms) and Nouns (Identifier Terms).

UI Terms – Verbs (Actions Terms)

Click / Tap – An act of tapping, clicking, touching, pressing, and releasing a mouse or screen button. Typically, for touchscreen interfaces, the term “tap” or sometimes even “touch” is used to represent the action. Conversely, the term “click” or “press” is used in reference to a physical button. A lesser-known term that is sometimes used is “long tap.” This term should not be used in the general public but is appropriate to use, for example, in a software specification meant for a UI developer.

Press – An act of pressing a physical button on a user keyboard such as the “Tab” or “Power” button. While it may seem simple, it contains a series of actions to complete. First, the user needs to know that the button exists and whether or not it should be pressed. If pressed, a specific reaction should occur from the system, and that reaction should be associated in the user’s mind with the button. On top of that, it is very rare to have a one-button system which means that there need to be different “levels” of actions that the pressed button can perform.

Type – An act of pressing a key with the intent to type text into the UI. “Type” refers to the appearance of the text (i.e. style, size, color, etc.), and the process of designing/creating text that is appropriate, legible, and appealing to enhance user experience. Designers are responsible for choosing typefaces, alignment and spacing specifications, and ordering the text in a hierarchy to effectively convey the message of the text.

Type is one of the more useful UI terms, referring to the type of text in the UI

Swipe – An act of performing a “swipe” motion that usually involves moving a finger across a touch screen.

Hold – An act of clicking, tapping, or pressing a button without releasing it. In other words, it involves pressing and holding down a button and can be used to describe an action in relation to either mechanical or touch screen buttons.

While these actions may seem simple, they should not be used interchangeably as they describe a very specific interaction. They are especially useful when creating an interactive prototype. UXPin, for example, is a prototyping tool that allows designers to create a prototype by adding element triggers. These triggers will set off a specific action when activated by the user. There are also canvas triggers that can change the canvas state when activated.

UI Terms – Nouns (Identifier Terms)

Field – An area in the Web User Interface (WUI) or Graphical User Interface (GUI) where the user can enter information. Otherwise known as “input fields,” these fields allow users to input personal/non-standardized information and are often used when personal details are needed from the user such as addresses, names, or answers to questionnaire forms. Utilizing fields will allow for an enhanced experience that helps create a better interaction between the interface and the user.

Dialogue – A pop-up that creates a “conversation” between the user and the interface. It can appear before or after an action and typically asks the user for some type of response whether that be through imputing information or completing an action. Dialogues can be used in many ways such as:

  • When there is promotional or some other type of information that you want to show the user without redirecting them to a different page.
  • When there is important information that the user needs to see.
  • When there is information that the user needs to input to continue.
  • When there is information that is not necessarily related to the current page but can provide useful information or updates.

There are three main types of dialogues which include:

  1. Confirm Dialogue: Ideal for situations in which a user may automatically agree to a warning or disclaimer without reading it or realizing the possible consequences.
  2. Forced Interaction Dialogue: Should be implemented when an action is needed from the user to continue.
  3. Detailed View Dialogue: Best when used to display detailed information about an object on the page.

Panel – Some form of panel typically in the form of a control panel or toolbar. For example, a UI panel contains widgets that can be chosen and implemented. Panels can also act as a hub or list of all available widgets that can be used and arranged.

Pane – A section of a window within the WUI or GUI that contains and provides the user with access to additional features and/or additional information. Well-known examples of a pane are the “Preview” pane and the “Explorer” pane. As displayed in the picture below, the “Explorer” pane on the left displays additional folders and drives such as “Documents” that can be accessed with the left pane displaying specific contents of the selected drive—the “Primary Drive.”  

Pane is a UI term often used for sections of windows, like "explorer" and "preview"
Source: Computer Hope

Button – A web or graphical element that performs an action once clicked on. Buttons are a simple way to allow users to perform actions of their choosing simply by clicking on the desired button/action. Buttons are commonplace on web pages and are meant to create a more streamlined experience. As such, it is critical to clearly identify each button with the action that it will execute if pressed. They are also meant to fit within the style of each interface and can therefore come in many forms and sizes. Though they may seem simple on the surface, a considerable amount of time is needed to create, position, and map out what a button will do and how it will blend into the site’s design. All while still being noticeable when needed.

Icon – An image that represents a certain function, idea, or direction. Icons are meant to replace words while still conveying the same meaning in a simpler and more direct form. An example of an icon is a picture of a lock that is meant to represent that a certain function or feature is locked and cannot be accessed by the user. Another one is the ubiquitous magnifying glass for search. Icons are often used on buttons to succinctly communicate the function of the button. Oftentimes, icons are divided up into categories based on interactions, themes, style, etc., and commonly represent real-life objects.

 The UI term "icon" describes an image that represents an action or user goal

Tab – A navigation and divider tool similar to tabs in a filing cabinet or binder. Tabs will often separate different parts of a page or whole pages. Users can interact and organize tabs as well as click on them to “travel” to a specific location. Tabs are usually not used for smaller pages but can be a great tool to divide up and organize larger pages. A common example of tabs being used is on a more global level such as when opening up multiple website pages in a browser—each website page is represented on a tab at the top of the web browser. 

Wizard – A guide or setup assistant that helps the user fulfill a series of actions that are necessary to complete a task. Instead of giving the user all the information and a list of needed actions that need to be completed, a wizard will often simplify the process by dividing up a series of tasks into smaller and related portions. One of the more popular examples of a wizard is the classic e-commerce checkout process. There are often four tasks that need to be completed to buy a product:

  1. Choose to Buy an Item in the Shopping Cart
  2. Enter Delivery Details
  3. Enter Payment Information
  4. Preview and Confirm the Order

By dividing the series of actions that need to be completed into easily understandable, manageable, and logical parts, the user is able to more easily complete a task.

Knowing what a "wizard" is – one of the UI terms you should know
Source: UXDesign.cc

Why Do You Need to Know UI Design Terminology? 

When working in UI, a whole new world of communicating becomes apparent. Buzzwords, jargon, and other niche words in the industry are used throughout the entire design process. It is critical to understand this “language” so as to more accurately communicate with colleagues and to better understand the design process.

Knowing UI design terminology helps in designer-developer communication

Some other ways that understanding UI terminology can be of benefit are:

  • UI terms help colleagues, project managers, and even developers understand how the product should function and behave.
  • Developers are there to bring the designs to life and use well-defined terminology as a guide on how to more accurately develop the design.
  • UI terms help with organizing design files and knowing what each file is meant for.

The design hand-off process can be difficult and can result in a lot of confusion if not done right. However, by using proper UI terms, you can help avoid some of the confusion during the handoff and product development process.

In the long run, understanding and using UI design terminology will help streamline the design and development process, reduce confusion, and serve for more precise communication.

Start Building Your First Prototype

Knowing UI terms will help when it comes to creating an interactive prototype. UXPin is the ideal tool to use when creating interactive prototypes. 

It is a component-driven platform that helps you maintain UI consistency while bringing the design to life. This can result in smoother development and faster product releases.

UXPin can be used to make interactive prototypes of apps, websites, and more. It is used by designers to create a design that behaves like an end product. As a result, designers can show stakeholders and developers not only what the solution will look like, but also present the behavior which leads to better communication and limits misunderstandings. Experience prototyping in UXPin. Start a free trial.

Taming Scope Creep in Product Design

Scope Creep

Scope creep is a common issue in UX design projects. By proactively preventing scope creep, UX designers can ensure that their projects are completed on time and within budget. 

Establishing clear goals and objectives, creating a design brief, encouraging collaboration, planning for the unexpected, and creating a system of governance are all effective ways project teams can reduce project scope creep.

Eliminate designing and coding from scratch to reduce scope creep while creating a single source of truth between design and development with UXPin Merge. Visit our Merge page for more details and how to request access to this revolutionary technology.

Reach a new level of prototyping

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

What is Scope Creep?

Scope creep occurs when the scope of a project expands beyond its original objectives. Various factors cause scope creep, including changes in user requirements, lack of communication between stakeholders, or inadequate planning.  

When scope creep occurs, it can significantly impact a project’s timeline and budget. It can also lead to increased complexity and difficulty in completing the project. UX designers must be aware of the potential for scope creep and take steps to prevent it.

One way to prevent scope creep is to ensure that all stakeholders are involved in the planning process from concept to project launch. This collaboration will help ensure that everyone clearly understands the project’s objectives and deliverables while staying in sync with any changes.

It’s crucial to set realistic expectations for the timeline and budget of the project to account for any changes ahead of time. UX designers must remain flexible throughout the development process. This flexibility allows them to quickly adapt to any changes during development without completely overhauling their plans or starting from scratch.

By proactively preventing scope creep, UX designers can ensure that their projects are completed on time and within budget.

10 Common Causes of Scope Creep

Here are ten examples of scope creep and what causes them. Use these examples to create systems to mitigate scope creep for future projects.

Poorly defined requirements and project deliverables

When the project requirements and deliverables are not clearly defined, it can lead to scope creep as stakeholders add new features or change existing ones. For example, a client may ask for a website design that includes a blog, then request additional features such as an e-commerce store or a forum later.

Unclear project goals

Scope creep often occurs when stakeholders don’t clearly outline and agree on a project’s goals. Stakeholders and team members try to add more features or adjust existing ones to meet their interests, and no one interjects because they haven’t agreed on the desired outcome or scope.

Poor communication

Poor communication often results in silos across teams and misinformed stakeholders. Without clear communication, stakeholders may be confused or frustrated when teams report unexpected changes or delays, leading to additional requests for changes that were not part of the project’s original scope.

Unforeseen circumstances

Even with excellent planning and clearly defined goals, unforeseen circumstances can derail a project beyond its original scope. Technology changes, new regulations, or a company merger/acquisition can lead to scope creep.  

These unforeseen circumstances are often harder to plan for, so project managers and team leaders must design project scopes for flexibility and have contingencies for critical features and KPIs.

Lack of prioritization

Prioritization helps team members focus on what’s important and allocate resources accordingly. This prioritization also helps with tracking progress and clear goal-setting. Without proper prioritization, teams may spend too much time on less important aspects of a project and even go beyond the original scope within a specific area. 

For example, designers may allocate too many resources to creating a website’s homepage when the most critical part of the project is optimizing product pages for conversions.

Unclear roles & responsibilities

Every project brief must define roles, responsibilities, and decision-makers for every discipline (i.e., research, prototyping, interviews, testing, etc.). Without authority and accountability, team members and stakeholders add features that may not align with the project scope or goals.

Unrealistic deadlines

Setting unrealistic deadlines can lead to scope creep as team members rush through tasks to meet them without considering how they fit into the overall project plan and timeline.

Changing stakeholders

It’s common for new stakeholders to join a project, bringing new ideas and expectations. If the project doesn’t have clear goals, responsibilities, and priorities, new, overzealous stakeholders keen to impress could introduce features or ideas that don’t align with the project’s scope.

Poor risk management

Risk management is vital for planning a project. Project managers must identify any risks and implement plans to mitigate or reduce them while remaining within the project’s scope. This proactive approach will ensure team members don’t adopt a solution that doesn’t align with the project’s goals and objectives.

Poor budgeting and resource allocation

A project’s budget and resource allocation must align with the project’s goals and desired outcomes. Without adequate resources, stakeholders set unrealistic expectations, forcing team members to find alternative solutions, often resulting in scope creep.

How can Designers Help Reduce Scope Creep?

mobile screens pencils prototyping

Create a scope statement

Before beginning a project, designers must establish clear goals and objectives to create a scope statement which includes:

  • Project goals and objectives
  • Project requirements
  • Project scope description
  • Project exclusions
  • Project constraints
  • Project assumptions
  • Project deliverables

Meeting with project stakeholders, including management, the product owner, and the technical lead, will help ensure everyone is on the same page with these above points clearly defined.

During these meetings, design leads must agree on KPIs to manage expectations so stakeholders can monitor key milestones without asking for updates.

Create a design brief

Where a project plan outlines the entire project’s goals, a design brief is specific to the UX team. It’s important to create a template or framework for taking on projects.

Omkar Chandgadkar, a Senior UX Designer at Amazon Alexa Smart Home, created three design offerings or frameworks for UX projects. Each offering had a different scope, from basic usability fixes to a long-term product vision.

Creating these different offerings streamlined project onboarding for Omkar’s team, with design brief templates specific to each one. For example, a design brief to fix a usability issue requires fewer details than a product redesign.

Encourage collaboration

Clear communication and collaboration from before the project begins until post quality assurance is critical for ensuring design projects stay within scope and everyone is in sync.

The first step is to create a collaborative environment between teams, departments, and project stakeholders with

  • Open communication channels for the project (Slack, Teams, etc.)
  • Shared/integrated project management software
  • Schedule regular project meetings and updates with stakeholders
  • Shared resource access (Google Drive, One Drive, Dropbox, etc.)

Plan for the unexpected and document scope changes

No project goes perfectly to plan. Change is inevitable and often necessary for the project’s success. Designers need to remain flexible and open to changes.

For example, during the initial design of Quuu (a content-curating platform for social media), the product team decided to delay the launch in favor of adding a referral system. They realized the feature wouldn’t add much value if implemented after launch, meaning the delay resulted in a positive return on investment.

Create a system of governance to document and approve changes before implementation. This process will allow those responsible to make the final call and notify everyone of the changes. Keeping a record of this process creates transparency and accountability while reducing scope creep.

Reducing Scope Creep and Enhancing Collaboration with UXPin Merge

UXPin Merge enables you to sync a design system to UXPin’s design editor, so designers and engineers use the same component library. This single source of truth enhances collaboration between designers and developers.

Merge is also effective for reducing scope creep. With ready-made, interactive components, designers don’t have to design from scratch minimizing the risk of errors, inconsistencies, and design drift.

Project collaboration

UXPin also facilitates collaboration through Comments. Designers and stakeholders can preview designs and leave comments as feedback (even if they don’t have a UXPin account). Designers and stakeholders can assign comments to specific team members, who can mark them as resolved once complete.

UXPin’s Comments keep everyone in sync with design progress while enhancing feedback and collaboration. UXPin also integrates with project management tools like Jira and Slack to keep teams connected at all times.

Faster time to market

With styling and functionality “baked-in” to every Merge component, designers only focus on building and testing UIs to solve user problems and meet project goals.

UXPin Merge creates a drag-and-drop environment where designers can simply swap UI elements and design patterns with every iteration. These quick changes enable designers to get immediate feedback to test and iterate faster.

“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin Merge. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.” Erica Rider, UX Lead EPX at PayPal

Streamline project processes, sync designer/developer workflows, and create a single source of truth with UXPin Merge. Visit our Merge page for more details and how to request access.

A Quick Guide to Interactive Prototyping

A Quick Guide to Interactive Prototypes

As digital product complexity increases, so does the need for interactive prototyping. To minimize UX debt and reduce usability issues, designers must test and iterate with the highest accuracy during the design process.

Get the world’s most advanced end-to-end design tool. Create fully functioning interactive prototypes that look and feel like the final product. Sign up for a free trial to explore UXPin’s advanced prototyping features.

Build advanced prototypes

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

Try UXPin

What are Interactive Prototypes?

mobile screens pencils prototyping

Interactive prototypes respond to user engagement like clicks/taps, swipes, scrolls, etc., accurately replicating the final product experience. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics.

What is the difference between an interactive and a non-interactive prototype?

The short answer is interactive prototypes have interactivity triggered by user engagement or system changes, while non-interactive prototypes don’t. 

Product teams often call prototypes built using image-based design tools non-interactive, even though they have some basic functionality. Image-based design tools are excellent for designing wireframes and mockups, but they lack features to add interactivity–most don’t even offer functioning input fields.

Designers can only build truly interactive prototypes using a design tool like UXPin or collaborating with UX engineers to develop a code prototype (HTML, CSS, & Javascript)–the latter being the more expensive and time-consuming option. 

High vs. low fidelity interactive prototypes

Designers can create both high and low-fidelity interactive prototypes. Low-fidelity interactive prototypes are usually wireframes with basic interactivity, while the high-fidelity version looks and feels like the final product. Check out an extensive comparison of low-fidelity and high-fidelity here.

Designers use low-fidelity prototypes early in the user experience design process because they’re easy to build and allow faster iterations. This speed enables designers to test many ideas quickly without wasting too many resources. Because these wireframes are interactive, designers can increase the prototyping scope during the early stages.

High-fidelity interactive prototypes are fully functional, offering a comparable, immersive user experience indistinguishable from the final product. These high-fidelity prototypes allow designers to identify usability issues and business opportunities. Insights they wouldn’t get using traditional image-based design tools (non-interactive prototypes).

Benefits of Interactive Prototyping

screens process lo fi to hi fi mobile 1

Accurate usability testing

The closer designers get prototypes to the final product, the more accurate their testing results. One of the challenges with image-based design tools is that designers can’t test UI elements like forms, date pickers, filters, dropdown navigation, accordions, and other “complex” components, without using multiple frames, plugins, and other workarounds.

The problem with these workarounds is that they’re time-consuming to create and don’t provide an authentic user experience. Designers may think they have solved an issue within the design tool’s constraints which doesn’t translate to the final product.

Interactive prototypes increase prototyping scope, so designers get accurate results from usability testing. They can pinpoint usability issues and iterate on solutions.

Meaningful stakeholder feedback

To get feedback and approval, UX designers must present stakeholders with wireframes, mockups, and prototypes throughout the design process. Poor quality prototypes result in stakeholders fixating on what the UI design doesn’t do rather than visualizing the bigger picture.

Designers can present ideas that accurately replicate the final product with interactive prototypes. Instead of “imagining” what a prototype does, stakeholders can engage with user interfaces, components, etc., to get a true sense of what the final product will do.

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

Visualizing information architecture and navigation paths

Understanding how users navigate digital products and the different paths is crucial for designing information architecture that meets user needs. Image-based prototyping tools allow basic navigational functionality but lack features for dynamic outcomes, testing search fields, and filters.

Designers must create multiple frames to achieve comparable final product functionality in image-based design tools or rely on UX engineers to build coded prototypes, requiring significant time and resources!

With interactive prototypes, designers can test search fields, filters, and other navigational elements to organize and optimize information architecture to align with user behavior.

Smoother design handoffs with less documentation

Design handoffs are challenging for product development teams. The friction between designers and engineers is usually down to prototype quality or not meeting technical constraints.

Interactive prototypes eliminate ambiguity while conforming to technical constraints with code-like interactivity, providing engineers with an accurate reference for programming.

With a clearer picture of the final product, engineers need less explanation, documentation, or back-and-forth communication for development. 

Design handoffs are seamless if the product design team uses a tool like UXPin Merge for bringing interactive components to UXPin. Engineers install the design system’s package and pull the components they need to replicate the prototype. Merge renders any component changes as JSX for developers to copy and paste.

Learn more about Merge and how to request access.

How to Build Interactive Prototypes in UXPin

Our sign-up form example provides an excellent demonstration of what’s possible with interactive prototyping in UXPin. You can download the sign-up form example and import it to a new project to follow along.

This article provides the steps for creating a new project and importing .uxp (UXPin) files.

Build a mockup

We’re using a template for this example, but you can build mockups from scratch in UXPin.

UXPin works like any other design tool when it comes to designing mockups. Designers can choose from a selection of shapes, freehand tools, text, and boxes. UXPin also provides several function form fields and icons, enabling designers to create high-fidelity mockups much faster.

Check out our documentation for more details about the UXPin Interface and how to design UIs.

Add interactions

You’ll notice some of the elements in the sign-up form example, have a little yellow and black lightning icon, like the one pictured below.

sign up clickable button in an interactive prototype

This icon tells us the component has interactions set up, which you can view by clicking Interactions in the Properties Panel.

Compared to elements with no interactions like this one.

sign up clickable button in an interactive prototype

Select the element you want to make interactive and click Interactions at the top of the Properties Panel and New interaction (in this example, we’re adding interactions to the SIGN UP button).

interactive prototyping of signup form in uxpin

UXPin Interactions have four properties:

UXPin Interactionsand the list of their 4 properties
  • Trigger: a user action that starts the interaction–click/tap, swipe, scroll, etc. UXPin offers 20+ triggers for mobile and desktop.
  • Conditions: allow designers to make rules before the prototype performs an action or design dynamic user flows.
  • Action: what happens after the trigger (assuming this meets any conditions). Actions can be as simple as a page transition or more complex, like an API call or playing a video.
  • Select: below actions is a select property that changes depending on the action. For example, the selector will include a dropdown with available pages if you choose Go to Page.
  • Animation: lastly, you can add animation. UXPin provides many CSS animations with easing, duration, and delay to breathe life into your prototypes.

Our sign-up form button has four interactions:

  • Show confirmation screen: if the user completes the email and password fields correctly, the prototype will open the confirmation page. We’ve used a regex expression to ensure the email field includes an @ and domain extension, and the password must be longer than eight characters. The following error messages appear if the user doesn’t meet these conditions.
  • Email error: if the user doesn’t complete the required email field, an error message appears below the input “Can’t be blank.”
  • Password error: performs the same error message as email above.
  • Set content of Email: creates a Variable for designers to use elsewhere in the prototype. In this example, we use the email variable to tell the user we have sent a verification link to their email address (see below).

UXPin’s Interactions allow designers to create dynamic prototypes that respond to user engagement comparable to code. To achieve similar results in an image-based tool, designers must create multiple frames, predicting potential user actions and outcomes, thus biasing the test’s results. Image-based tools don’t have functioning inputs, limiting the testing scope.

Interactive Prototype Examples

Here are some more interactive prototype examples created in UXPin.

Share Text Between Screens

UXPin’s Variables enable designers to personalize a user experience and pass data between screens, as we saw with the sign-up form’s confirmation screen above. Designers can share a single input, like the user’s name, or populate an entire profile with the user’s full name, address, contact number, and billing information used for eCommerce checkouts.

Follow the Share Text Between Screens to learn more about UXPin Variables.

Scrollable Content

Vertical and horizontal scrolling is a significant facet of the mobile user experience. UXPin lets designers set up scrolling in a few clicks, creating a smooth, intuitive mobile app interface.

Follow the Scrollable Content tutorial to learn more.

Stepper

Steppers are essential eCommerce patterns. They allow users to add multiple pieces of the same item to their cart. Designers can use stepper functionality for volume control, light dimmers, and other incrementally controlled features.

Follow the Stepper tutorial to learn more.

Get started with interactive prototyping in UXPin

Design user experiences your customers love with the world’s most advanced design tool. Sign up for a free trial to discover UXPin’s interactive prototyping features.

2022 Wrap-Up – A Compilation of Must-Read Articles, eBooks, and Webinars

2022 Wrap Up

This year was full of exciting projects. Our content revolved around design systems, design operations, and design itself! We released an eBook, organized a virtual conference, and released a few features that let the design community experience component-driven prototyping.

Want to try it yourself? Beyond being an all-round advanced prototyping software, UXPin allows designers to build fully functional and interactive prototypes with component libraries imported from Git, Storybook or npm packages. See how it solves design challenges for teams, such as PayPal, Lumen, and more. Explore UXPin Merge.

Reach a new level of prototyping

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

The Most Engaging Webinar in 2022

We couldn’t have wished for more interesting speakers this year. Carola Cassaro talked about building and advocating for IKEA’s design system. Dave Malouf taught us how design teams can improve operations of the whole organization.

Amber Jabeen made us realize that the design system is more than a collection of reusable patterns and needs to be treated like a product. Her presentation should be bookmarked by anyone who needs to sell the idea of selling the business case for a design system. You can watch it on our YouTube channel where we put the recordings of most webinars.

Top 3 Product Releases

In 2022, we celebrated a few product releases to make interactive prototyping and cross-team collaboration easy.

logo uxpin merge 1

Here are three of them.

  • npm integration – enjoy the easiest way of bringing UI components to UXPin; you import npm components and build production-ready prototypes without dev’s support. Check what the integration is about.
  • Figma copy & paste plugin – import Figma designs to UXPin with our new Figma plugin; keep using the two design tools in unison and streamline your interactive design process. Follow the tutorial.
  • MUI built-in library – build prototypes with MUI components that are interactive by default. Experience fully functional prototyping that requires no code and technical skills. Assemble your first prototype today with MUI.

As Yuga Koda, our CEO, said during our Design Value Conference, UXPin aims at bridging the gap between design and development by giving designers the tools they need to build prototypes that developers can easily translate into code.

3 Most-Read Articles on Product Design

Based on the feedback, we chose three articles that seemed to be the most important ones this year.

  • Top 8 Design System Examples – this article dives into eight design systems used by the most design-driven organizations. Learn more about each of them.
  • Design Consistency Best Practices – some designers see consistency as constraint, others claim that it helps them be more creative. Decide for yourself after reading our article.
  • What is Component-Driven Prototyping? – this approach to prototyping can help teams work more efficiently. Discover what it is and see if it can help your team.

If you want to stay up to date with our content, follow us on Facebook, LinkedIn or Twitter.

Two eBooks to Add to Your Reading List

Those of you who like to read about organizing design teams, setting up team rituals, and improving collaboration, we have something for you.

Apart from writing an introduction to Design Operations, we released another eBook on the field. It was about DesignOps’ First Pillar – How We Work Together. Read both of them:

  • DesignOps 101 – Read the eBook composed of six chapters; discover DesignOps essentials, full of advice on the field that’s coming from leading design operations expert from top enterprises.
  • DesignOps 1st Pillar – Get a deeper insight into design operations by exploring its first pillar and learning about hiring, onboarding and leading a stellar design team.

Happy 2023!

Next year will be full of exciting projects at UXPin. As for this blog, we will continue writing about product design, sharing best practices of creating, maintaining, and scaling work, useful tools, and design hacks for you.

Looking for a tool that will help you bridge the gap between design and development? Try our Merge technology that allows you to bring interactive components from Git repo, Storybook or npm package to UXPin. Move beyond image-based design and create prototypes with UI components from your design library Read more about UXPin Merge.

Design Teams Goals and How to Set Them [With Examples]

Design Team Goals

Any design team needs to know exactly what they’re working towards. Without this, it can be easy to lose focus on the critical aims and goals of their work and projects.

Design team goals are a great way to ensure your team is on track to completing the right tasks and to help productivity and focus throughout the whole team. It can sometimes be hard to know how to correctly set goals, however.

At UXPin, we believe that any design team should be able to work to their full potential. That’s why in this article, we’re going to go over the ins and outs of design team goals, and how to set them. Give your team transparency, ease of work, and understanding by trying out component-driven prototyping. Get access to UXPin Merge and break silos between design and development teams right away. Discover Merge.

Reach a new level of prototyping

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

What are design team goals?

Design team goals are set milestones that your designers are expected to achieve in a given time. 

Instead of being specific, a ‘design team goal’ can be fairly broad. The term is frequently used for both larger objectives and smaller tasks, which can lead to confusion. Instead, the consensus is that OKRs (objectives and key results) are the way to go about goal-setting and hitting milestones. 

OKRs are used by many top tech brands and other organizations like Nielsen Norman Group to create goals, evaluate and track progress, and reward achievements within their organization.

The OKR structure is clear and simple and is designed to be straightforward for ease of communication and understanding.

  • An Objective (O) is something that needs to be solved, improved, or achieved for success.
  • Key Results (KR) are measurable indicators and outcomes tracked to show that the problem has been solved. 

OKRs are popular due to how great they are at unifying a team towards a goal and help stakeholders understand what the team wants to achieve.

With this structure, product teams are more likely to work more efficiently and productively towards a target. If they have a tangible target that they can see to attain, they can move towards it and ensure they’re on the right track.

Design team goals are set to enhance collaboration, refine your processes, and help unify your team. OKRs are the best approach for achieving your aims and getting solid results.

Here, we will use this methodology to show you how design team goals can be set to support collaboration, optimize the design process, and foster belonging throughout your team.

Why is it important to set goals for your design team members?

  • To help motivate your team by giving them tangible purpose: By giving your team attainable goals, you help motivate them to produce high-quality work, as they will feel as though their work has a purpose. Otherwise, their work can meander and feel like it’s not contributing to anything positive.
  • To enhance productivity and the quality of collaboration: By giving your design team clear goals, you help them focus much more easily towards achieving them. With this, productivity and the quality of work increase, and team collaboration creates far better results.   
  • To make sure your designers’ work supports company objectives: Making sure your team is working towards the success of your startup or enterprise organization is key. OKRs are ideal for this, as they are the best ways to ensure that your team is working positively in this direction.  

6 examples of design team goals

Improving the user journey

The following example is inspired by Nielsen Norman’s Anna Kaley’s example OKR of working towards improving the experience of customers and prospective buyers. You can measure this through different indicators — this example uses metrics, such as repeat purchases, conversion rates, and journey path abandonment rates.

Objective: Improve the user journey to save people time and effort

  • KR (Key Result) 1: 25% more repeat purchases
  • KR 2: 20% higher conversion rate
  • KR 3: 30% lower user journey path abandonment rates

Improving design–development collaboration

This example’s objective was set for three months and was based on collaboration and workflow. The Key Results are based on making collaboration more efficient and simple to save time.

Objective: Improve the workflow between design and development to save more time

  • KR 1: Reduce design task tickets reopened by development from 40 to 10%
  • KR 2: Reduce the average time of “small improvements” resolved from 10 days to 3 days
  • KR 3: Increase submitted design requests going into execution from 50 to 80%

Introducing new design processes that support team growth

The next example comes from Lattice. Their design team expanded from six to 39 designers over two years, which led to the company deciding to reevaluate the ways they set goals. 

Lattice’s Staff Product Designer ran an annual retrospective, which helped them set three key objectives for the upcoming year. Each objective was established and their respective teams worked to make four key results, one for each quarter of the year. The following example is one of these objectives:

Objective: Evolve processes to keep pace with team growth

  • Q1: Audited our Brand and Product rituals and proposed adjustments 
  • Q2: Drove more frequent design feedback and context sharing (by 2x!) 
  • Q3: Created templates for easier context sharing
  • Q4: Defined processes for brand + product design collaboration

Boosting landing page performance

GTMHub shared the following example based on turning ‘output into outcomes’, this one specifically being centered around improving landing page performance. With this set goal, you can have a certain percentage or number to reach, which can help your team track their performance and can push them when necessary.

Here, a specific team or subset of the design department has been assigned OKRs to help them prosper at this specific task. Their OKR examples include:

Objective: Boost performance through landing page UX/UI

  • KR 1: Double CTA conversion to 16%
  • KR 2: Increase page navigation rate to 5%
  • KR 3: Double product image gallery open rate to 24%  

Make design language consistent

Here, Delivery Hero-Talabat’s Amber Jabeen talks about Delivery Hero’s team struggling with their design language. As it was incredibly confusing and inconsistent, their team found it hard to keep productive and efficient with its mess. So, their team took the challenge to improve it.

The video below covers this process in-depth. It shows the benefits of taking time to improve their design language consistency so everything and everyone is on the same page.

#6 Take control of project intake

In this example, Amazon/Alexa Senior UX Designer Omkar Chandgadkar talks about his aim to take more control over his impact on company operations, from what was a more passive approach to design projects’ intake beforehand. By using goals to change his approach, he managed to make a shift and stay focused on his goals and achievement.

His process here was to move his approach from tactical to strategic, which is a great goal for teams to take more initiative regarding their design work. Certainly, it will affect their design skills as well and contribute to their personal development.

He goes over the full process in this great video.

How do you support your design team in reaching their goals?

As well as setting clear goals and objectives, a great way to support your team is by taking the initiative to reach out and assist them. This includes allowing and ensuring they have access to the right tools. Especially, those that can help enable their productivity while supporting team-wide collaboration and accelerating their work. 

UXPin Merge unlocks your design team’s potential, allowing them to work more collaboratively and efficiently to result in maximum goal achievement. With Merge, designers can bring interactive components into UXPin and work faster and smarter without duplicating work. 

Collaboration is important to any team, and Merge is great for working with your team clearly and quickly. By being able to keep consistency, you can ensure that everything is well-oiled and there’s no confusion as to how systems and components are applied and implemented.

Merge is a great way to strengthen your team — as giving them more transparency, visibility, and understanding will create better design culture and better product design-development team collaboration.

Enable Your Team’s Productivity With UXPin Merge

Design team goals help establish focus and motivation within your team. OKRs make it easier to refine your design and boost the effectiveness of your end product. By creating clear goals, you can ensure that your team is working towards positive outcomes and can overcome crucial DesignOps challenges. 

However, OKRs can’t effectively be achieved without tight communication and team collaboration – especially when there’s a disconnect between your UI and UX design and product development teams.

That’s where UXPin can help. Our prototyping tool allows you to design with the same components that devs use. This helps break down limiting team silos. With UXPin Merge, you can create hi-fi prototypes of products on the fly and understand the actual user experience of the product you’re creating. 

Discover UXPin Merge and see how you can supercharge your team collaboration.

Cross-Platform Experience – An In-Depth Guide for Product Designers

With an ever-growing list of devices, operating systems, and technologies, cross-platform experience design is an essential component of the product development process. 

Many organizations have dedicated teams for iOS, Android, Windows, etc., to ensure products meet platform-specific requirements and user expectations.

Create seamless cross-platform customer experiences with the world’s most advanced UX design tool. Sign up for a free trial to discover interactive prototyping with UXPin.

Build advanced prototypes

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

Try UXPin

What is a Cross-Platform Experience?

A cross-platform experience (also called platform-agnostic design) describes the user experience comparison across multiple devices, including Web, mobile, tablet, and wearables, in addition to operating systems like iOS, Android, Windows, Mac, etc.

The aim for product developers is to create a comparable, seamless user experience across different platforms and operating systems to ensure their products serve all users.

Designers also want to ensure end users can access the same features and complete tasks regardless of device or operating system. For example, the ability to make a payment from your bank account whether you use the bank’s web portal or mobile app.

Responsive design vs. cross-platform design

Responsiveness is one facet product teams must consider when designing cross-platform experiences. Responsive design is specific to web browsers and how user interfaces look across desktop, tablet, and mobile viewports.

Cross-platform design is a broader concept where designers must consider web browsers, devices, and operating systems, in addition to a product’s user experience on a web, tablet, and mobile apps on iOS, Android, Windows, and other operating systems. For example, a simple alert component will look completely different on iOS, Android, Windows, macOS, Safari, Chrome, and Edge.

Why Designing Cross-Platform Experiences is Important

Business value

From a business perspective, cross-platform design is crucial. In the United States, iPhone enjoys a 65% market share, but there are 2 billion global Android users or a 71.35% market share. Android makes up more than 90% of the market in some countries where iPhones are unaffordable. Not serving either of these markets means you’re leaving a lot of money on the table!

Companies must also consider responsive design and how their website and web applications render across desktop, tablet, and mobile. Many people only use their smartphones to browse the internet; if they can’t purchase products and services efficiently using these mobile devices, these companies lose valuable revenue.

Competitiveness

People expect products to work comparably across multiple devices. If users can’t complete the same tasks on your Web and mobile applications, they’ll find a competitor that does!

Nowhere is this more apparent than in FinTech. Mobile-first/only banking and investing applications have exploded in the last decade as startups aim to fill the gap left by traditional financial institutions. Many of these legacy institutions have been slow to deliver mobile solutions, allowing FinTech startups like Robinhood, Monzo, Chime, Revolut, and others to capture significant market share.

Inclusivity

If you want your products to be inclusive for everyone, then cross-platform design is essential. Apple products like iPhones and Macs are at the high end of consumer electronics–many people cannot afford these luxuries. 

If your products only serve Apple devices or don’t provide a comparable experience on Android, Windows, and the Web, then you’re excluding a massive part of the global population, including marginalized communities who cannot afford Apple’s products.

6 Key Principles of Designing Cross-Platform Experiences

Consistency

The first rule for cross-platform design is maintaining a consistent user experience across Web and mobile applications and operating systems. This consistency includes user interface design, functionality, features, interaction design, and branding, to name a few key factors.

It’s impossible to get precise UI consistency across multiple platforms and devices, but designers can control messaging, interactions, performance, and timing, which must always be consistent.

Seamless experience

A seamless cross-platform user experience means people can complete the same tasks across multiple devices. Additionally, they can start a task on one platform and complete it on another.

For example, you can create an email on the Gmail mobile app, save it to drafts and finish it on your desktop computer at another time. This seamless user experience gives users the flexibility to work and complete tasks according to their specific schedules rather than structuring their lives around technology–i.e., waiting until they get to a desktop to send an email.

Cross-platform usability (Interusability)

Cross-platform usability or interusability describes the user experience and coherency across multiple devices in an Internet of Things (IoT) ecosystem.

Netflix is a familiar example where users can watch on mobile phones, tablets, laptops, and Smart TVs. Within each category are multiple devices, operating systems, and screen sizes. 

Charles Denis and Laurent Karsenty coined interusability in a 2003 publication, Inter-Usability of Multi-Device Systems – A Conceptual Framework, which describes three key components for designing coherent cross-platform experiences:

  • Continuity: facilitating a seamless flow of content and interactions across products, tools, and devices
  • Composition: organizing functionality across products and devices
  • Appropriate consistency: designers must balance UI design consistency with native layouts and patterns

Prioritization and visual hierarchy

Prioritizing content and layouts is crucial for designing cross-platform user experiences. On desktops and Smart TVs, users can see more content and features. On mobile apps and other small screens, designers must prioritize content, often using personalization.

For example, no two Netflix or YouTube accounts look the same. Product developers use personalized algorithms to prioritize content and features to meet each user’s needs and preferences.

Prioritization also includes visual hierarchy. On large screens, there’s space for more content and features. On mobile devices, designers must determine what content is always visible and where they must hide content using accordions, navigational drawers, dropdowns, and other space-saving UI patterns.

Accessibility

Cross-platform accessibility is essential for compliance and ensuring products are fully inclusive. Designers must ensure users can use built-in assistive technologies like voice commands, screen readers, font adjustments, etc.

Designers must also provide dark and light modes to accommodate users with visual impairments. Colors render differently across devices, which impacts contrast and readability.

Adaptability

It’s not always possible to create a product for every device. For example, an enterprise warehouse management system won’t work on smartwatches–the UI and architecture is too complex. But you can create a smartwatch app that receives critical notifications so the user can get to a mobile app or desktop as soon as possible.

While adaptable experiences aren’t always in line with the product’s goals and features, they can provide value and even attract new customers.

3 Tips to Design Cross-Platform Experiences

Design for familiarity

Many apps use native styling and components to create platform familiarity. For example, using the iOS and Android icons instead of your custom set. While these features don’t conform to your brand, they can make the product feel like it was built specifically for the user’s device, thus elevating your cross-platform user experience.

Create design system

Design systems create constraints and solutions for maximizing cohesion and consistency. They also provide product teams with patterns and components to meet platform-specific rules and guidelines.

Material Design’s documentation tells designers how components will look on Android and iOS. For example, this Top App Bar from Material Design provides examples of how each operating system will render the component. The icons, alignment, spacing, and app bar height differ between iOS and Android.

material design components

Creating these cross-platform components ensures designers conduct accurate testing during the design process for the operating systems your product supports.

Use a design library

UXPin includes canvases for the Web, iOS (including iPhones, Apple Watches, and Apple TV), and Android so that you can create layouts for each device. You can also use a custom canvas size to meet your platform’s screen width.

UXPin’s built-in design libraries include iOS and Material Design components, so you can build cross-platform experiences without installing plugins or extensions. Drag and drop platform-specific UI elements to prototype products across both operating systems.

Use the UXPin Mirror app (available on iOS and Android) to test your cross-platform apps on multiple devices. You can also preview prototypes in the browser for testing on smartphones, tablets, desktops, Smart TVs, etc.

Building Cross-Platform Prototypes With UXPin

UXPin includes canvases for the Web, iOS (including iPhones, Apple Watches, and Apple TV), and Android so that you can create layouts for each device. You can also use a custom canvas size to meet your platform’s screen width.

With UXPin’s Design Systems, you can create a cross-platform component library and share it across your organization to keep teams aligned and UIs consistent. Use descriptions to include documentation for each platform and set permissions to prevent unauthorized changes to your design system.

Design better cross-platform user experiences with the world’s most state-of-the-art UX design tool. Sign up for a free trial to explore all of UXPin’s advanced features.

Website Design for Scannability – 8 UI Tips and Proven Reading Patterns

Website Design for Scannability

Website scannability is essential for creating a positive, user-friendly experience. Users want to find content that solves their problem and return to their lives. Facilitating that by designing for scannability creates trust, increasing the likelihood that visitors will return or convert.

This article describes the various scanning patterns users adopt for different tasks and best practices to increase your website’s scannability.

Build high-fidelity prototypes that deliver accurate results during usability testing. Learn what your end-users value most and prioritize web content to increase scannability. Sign up for a free trial to discover advanced prototyping with UXPin.

Build advanced prototypes

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

Try UXPin

What is Website Scannability?

Website scannability describes how easily users can find content by scanning a web page. UX designers use subheadings, white space, bulleted lists, and visual hierarchy to help users find what they need faster.

For example, we use a table of contents and subheadings to make this article more scannable. Our blog generally attracts people interested in product design, so we use eye-catching CTAs to try our design tool for free.

Why is scannability important for web design?

Users are spoilt for choice on the Internet. If your website doesn’t solve their problem, they’ll find one that does! Often you might have the answer users need, but a poor user experience and cluttered user interfaces force them to find a better alternative.

Designers must optimize web design for a user’s attention rather than beautiful look and feel. People want to scan web pages to find what they need and exit. 

Nielsen Norman Group research found that “79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.”

In another NN Group study, “Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people’s attention for much longer. To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.”

Your website must not only provide users with the features and content they need but present it in a way that it’s quick to digest and take action if necessary. If you don’t deliver this user experience, a competitor will!

Scanning Patterns–How Users Scan Web Pages

The NN Group’s famous 2009 Eyetracking Web Usability study identified several scanning patterns people use to scan web pages.

  • F-pattern
  • Spotted pattern
  • Layer-cake pattern
  • Commitment pattern
  • Zigzag pattern
  • Exhaustive review

F-Pattern

The F-pattern is the most common scanning pattern, especially for articles or pages with lots of text. Users scan the first few paragraphs from left to right (or opposite for right-to-left languages) and then the beginning of each line as they scroll down the page, occasionally reading a heading or sentence/paragraph of interest–creating an F shape.

To grab these “f-pattern” users, including a summary or table of contents at the top of the page will grab their attention and entice them to read further, increasing the likelihood of action (purchase, lead, etc.).

Spotted pattern

Users adopt a spotted pattern when searching for something specific–for example, a word, heading, address, or date. Different content types and formats can also influence spotted pattern scanning, like bulleted lists, styling (bold, italics), prominent CTAs, typography, etc.

The NN Group eye-tracking study asked users to find information about an individual’s education on Wikipedia. The eye-tracking software found that users scanned around the page searching for relevant keywords, eventually focusing on the word “studies,” where they found the answer.

Layer-cake pattern

The layer-cake pattern describes how users scan a page’s headings and subheadings to find a specific body of text. For example, if someone were looking for information about layer-cake patterns on this page, their eyes would jump from heading to heading, locate this subheading and read the content below.

Commitment pattern

The commitment pattern describes users who read every word on a page rather than scanning. They usually trust the source, are highly interested in the topic, or need detailed instructions (recipes, directions, documentation, etc.).

Zigzag pattern

Users digest two-column layouts using a zigzag pattern. Many websites use these designs to describe their services or how a product works. Designers typically place text in one column and an accompanying image in the next in two styles:

  • Alternating layout: images and text alternate from left to right for each row
  • Aligned layout: images and text appear in one column (either left or right)
Zigzag reading pattern for scannable website design

An NN Group study found that “an alternating list layout caused users to stumble.” Conversely, “users scanned efficiently on pages where text and imagery were vertically aligned.”

While the alternating list might keep things interesting, it’s probably not a good option for complex topics or if you’re creating content for users with cognitive disabilities.

Exhaustive review

An exhaustive review describes users who repeatedly scan the same page or content, looking for something–for example, scanning up and down a product’s documentation repeatedly, unable to find an answer to your problem.

But this pattern has some nuances. The exhaustive review may indicate heightened interest. Users interested in something will fixate on it over and over–like an outfit on Pinterest or a dream destination on Instagram.

Users also adopt an exhaustive review of landing pages or high-cost products to decide if the item will solve their problem adequately. They may read parts of the page, returning to specific texts to ensure they make the right decision.

How to Make Websites and Pages Scannable

Visual hierarchy

UX designers use visual hierarchy to attract attention to important content through:

  • Size: using larger text, images, buttons, etc., to differentiate from similar UI elements
  • Gestalt principles: how UI elements appear related through proximity, similarity, symmetry, etc.
  • Color: using a specific color or contrast only for important content immediately attracts attention

For example, our pricing page highlights UXPin Merge’s bestselling plan for companies using a color hierarchy.

visual hierarchy helps make website scannable

Limit choice

Pages with too many options take longer to scan and digest. If you’re trying to get users to take a specific action, limiting their choices will help them focus and decide.

Negative space

Negative space (whitespace) creates separation to make pages more scannable, but designers can also use it to attract attention. We use ample whitespace around our homepage feature boxes, headings, and text, making the content easier to read and digest.

negative space is a good practice for improving website scannability

Google’s homepage uses a more extreme negative space design to draw attention to most users’ primary reasons for visiting the page, search!

negative space use by Google helps you focus on the most important information

Headings and subheadings

Headings (h2 elements) create an anchor for a specific topic–in this case, How to Make Websites and Pages Scannable–while subheadings represent sub-topics or provide context, i.e., Headings and subheadings. Users can scan pages easier and only read content relevant to their needs.

Pairing these headings with a table of contents at the top of the page enables users to locate content faster.

Short paragraphs over blocks of text

Blocks of text (walls of text) are difficult to read on screens. Search engine optimization (SEO) experts Brain Dean from Backlinko and Neil Patel advocate using short paragraphs (usually one or two sentences) to optimize for readability and scannability.

Notice how we use short sentences and paragraphs in this blog post. We also create space between paragraphs, headings, and other content to make text, making the page more scannable while increasing text legibility.

Bulleted lists

testing compare data 1

If you’re making more than two points, using a bulleted list is easier to scan and digest than a paragraph. For example, under the subheading “Visual hierarchy” above, we used a bulleted list for size, Gestalt principles, and color. If we had to write this as a paragraph, we’d have to increase the word count, making it more difficult to scan and read.

Typography

text typing input 1

Designers often use different typography for headings and body text. This differentiation creates visual anchors for users to scan a page much faster. Font weights, sizing, and color are also effective.

Prominent Call-To-Action (CTAs)

interaction click hi fi 2

Users often visit web pages to complete a specific task, like contacting a business, completing an application, or buying a product. Prominent CTAs draw attention, so users save time searching for specific information and get persuaded to complete the task.

Design Better User Experiences With UXPin

Prototyping and testing are the core of user experience design. Designers learn from testing designs with their target audience, iterating until they find a solution that meets their needs.

Unfortunately, most image-based design tools don’t offer prototyping features that allow accurate testing. Designers must rely on external platforms or UX engineers to build prototypes–increasing time and costs!

UXPin’s advanced design tool enables UX teams to build advanced interactive prototypes that look and feel like the final product–allowing designers to identify UI pain points and opportunities during testing.

Increase your design team’s prototyping speed and capabilities with the world’s most advanced design tool. Sign up for a free trial to discover interactive design with UXPin.

Heuristic Evaluation – The Most Informal Usability Inspection Method

Design teams commonly use Jakob Nielsen’s heuristics to evaluate human-computer interaction because they provide a comprehensive user experience audit.

A heuristic evaluation explores ten critical facets of a product’s user experience, allowing design teams to focus on specific usability problems within user interfaces and interactions.

Get accurate insights about your product’s usability performance using advanced prototypes that look and feel like the final product. Sign up for a free trial to discover interactive prototyping with UXPin.

Build advanced prototypes

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

Try UXPin

What is a Heuristic Evaluation (Heuristic Analysis)?

Heuristic refers to problem-solving and self-education, usually through trial and error. In UX design, heuristics describes the cognitive load or mental capacity required to make decisions and complete tasks. Designers use usability testing to evaluate heuristics and identify issues for fixing.

There are ten usability heuristics, and a heuristic evaluation assesses these to identify a product’s usability performance. These usability heuristics come from Jakob Nielsen’s (co-founder of the Nielsen Norman Group) ten general principles for interaction design which he devised in the early 1990s.

10 Usability Heuristics

Jakob Nielsen created the ten usability heuristics based on research from two other UX and engineering experts, including:

Visibility of system status

Designers use system status indicators for a range of interactions and user tasks. For example, the battery icon on your mobile phone displays the battery life status. This battery life indicator is crucial because it informs users whether they have enough power and when to charge the device. Without it, the device would die intermittently without warning, causing frustration for end-users.

Visibility of system status is crucial for visual feedback–what happens when a user interacts with a component (click/tap, hover, swipe, etc.) or completes an action, like submitting a form? The system must provide feedback to inform the user that something is happening or that it has executed a task.

The following user interface design elements are great examples of visibility of system status:

  • Progress trackers on forms
  • Loading icons
  • System messages (success, warning, error, etc.)
  • Badges on shopping carts, text apps, etc.
  • App notifications

Designers must be careful not to overwhelm users with system status updates and only provide feedback when it’s relevant and necessary.

Match between the system and the real world

There are two rules within match between the system and the real world:

  • Speak the user’s language
  • Follow real-world conventions

Firstly content designers must always use obvious words and language. Facebook’s “News Feed” and “Photo Tagging” are excellent examples of speaking the user’s language. In a podcast with Lex Friedman, early Facebook exec. Chamath Palihapitiya describes how the company chose the most obvious names for Facebook’s features to ensure people knew what they did.

Connected to language are real-world conventions–mimicking real-world experiences and interactions in a digital product. For example, an eBook experience is similar to a physical book, where users can turn pages, highlight text, and add bookmarks.

Matching the system to the real world makes user experiences obvious, reducing the cognitive load required to navigate products and complete tasks. This obviousness is especially important for people learning technology, the elderly, and users with cognitive disabilities.

User control and freedom

Designers must provide exits and offramps for users through edit, undo, redo, back, cancel, etc. The freedom for users to rectify a mistake or change their minds is crucial for a good user experience.

This freedom is especially important regarding financial decisions like purchases or changing a paid service. Giving users this freedom and control builds trust while minimizing fears of exploring a product and its features.

Consistency and standards

There are two facets of consistency and standards:

  • Internal
  • External

Internal consistency and standards apply to your UIs and components, usually defined by your product’s design system or design language. Designers must follow these internal standards consistently to ensure tasks and actions are always obvious to users.

color sample library

External consistency and standards refer to globally recognized UX patterns. For example, the hamburger icon to open a navigational drawer or the cart/trolly icon for eCommerce websites. Breaking these conventions forces users to learn something new, thus increasing their cognitive load.

Following consistency and standards reduces the need to think about actions so that users can locate content and complete tasks with minimal mental effort.

Error prevention

Error prevention is one of the most critical heuristics. Errors can cause significant distress, especially for irreversible actions–for example, transferring money to the wrong bank account or accidentally deleting something.

error mistake wrong fail prototyping

Designers use a strategy called cognitive friction, which creates roadblocks to force users to stop and think before completing an action. For example, a dialog popup after a user clicks transfer confirming the amount, recipient’s name, bank account number, and branch code with the option to confirm or cancel the transaction.

Good user experience design creates these friction points to prevent errors and, in some cases, reverse them. For example, saving recently deleted items for 30 days.

Recognition rather than recall

Humans have limited short-term memory, which means we battle to retain information. Designers must make content visible or retrievable, so users don’t have to remember. For example, eCommerce platforms allow shoppers to save their delivery and billing details, so they don’t have to recall these at checkout.

This concept includes simplifying designs, so users don’t have to refer to the documentation or watch a tutorial to use a product. Designers use form labels, menu items, tooltips, placeholder text, and other reminders to help users complete tasks.

Flexibility and efficiency of use

Flexibility and efficiency of use allow users to complete tasks and actions fast while providing more than one way to execute them. The best example of this principle is copying and pasting. Users typically have three options, depending on the application:

  • Using the app’s primary navigation, Edit>Copy and Edit>Paste
  • Using the mouse’s right-click, right-click Copy, right-click Paste
  • Using the keyboard shortcut, CMD/CTRL+C, CMD/CRTL+V

Another example for you Instagrammers is the double tap to like an image instead of tapping the heart/like icon. 

When users first start using a product, they generally use the most obvious default option, i.e., the app’s navigation or icon in Instagram’s case. But as they become more confident, they use shortcuts to maximize efficiency.

Aesthetic and simple design

User interfaces must be aesthetically pleasing and simple so users can focus on the most critical content and actions without distraction. For example, an eCommerce store wouldn’t run ads on its website because A) it would create a busy UI, and B) competitors’ ads would likely appear, taking the user to another offer.

In a bid to convert users by any means necessary, companies often have too many CTAs on their website or landing page–join our mailing list, purchase this product, follow us on Twitter, Like us on Facebook, book a sales call! Too many options overwhelm users resulting in the opposite effect–they leave!

Designers must prioritize content to support the user’s primary goal or task while eliminating irrelevant and distracting UI elements.

Help users recognize, diagnose, and recover from errors

Error messages must do more than alert users to a problem; they must offer an easy solution to fix the problem. This snackbar example from Google’s Material Design adds an “Undo” action in case the user archived an email accidentally.

Google’s Gmail does a similar recovery action after you send an email with a snackbar allowing users to “Undo” sending–”Oh no! I forgot to add the attachment–*Undo–Thank you, Gmail!”

Other examples where designers help user recover include:

  • 404 errors with helpful links
  • Error messages with a link to activate the solution
  • Input field error messages with explicit instructions to fix the problem

Help and documentation

No one likes to leave what they’re doing to read documentation, but often it’s necessary to diagnose the problem and find a solution. Designers can help users by using walkthroughs, tooltips, popovers, and chat to find answers without leaving the page they’re working on. 

Google Docs provides users with a help popup where they can search the product’s documentation to find a solution. Additionally, there is a link to the Google Docs community and an option to report a problem directly to Google.

The documentation must be easy to search and navigate while providing users with helpful, actionable answers. UXPin’s documentation provides users with the most searched help categories and an option to search (with autocomplete). Each section offers images, GIFs, and written instructions to help users find what they need.

How to Conduct a Heuristic Evaluation

With a clear understanding of each usability principle, it’s time to conduct your heuristic evaluation.

The process of carrying out a heuristic evaluation is the same regardless of the industry or nature of the design project.

  • Phase one–Planning: the design team uses user research to map the heuristic evaluation. They also delegate tasks and define goals.
  • Phase two–Execution: conducting the heuristic evaluation.
  • Phase three–Review: synthesize and review the evaluation and design a plan of action.

Planning

First, teams define which heuristics they’ll use and the evaluation methods. These heuristics should be chosen carefully based on market research, previous user testing, and the principles of careful design.

Next, the team must select the evaluators–the usability experts responsible for the evaluation. Evaluators generally work in pairs to reduce bias and spot more usability issues. These small units must assess one heuristic at a time. Simultaneously evaluating multiple heuristics can result in errors.

Executing

  1. The first step is briefing the evaluators so that they understand the heuristics they’ll use and how the system functions.
  2. The evaluators interact with the system to understand how it works.
  3. The evaluators evaluate the system based on pre-determined heuristics, noting any usability issues they encounter.

Reviewing

Evaluators present their findings with recommended actions to fix the problems. The team collates these into one master document where they create and prioritize tasks to fix the usability issues.

Identify more usability problems and fix errors before they make it to end-users with advanced interactive prototyping from UXPin. Sign up for a free trial to explore UXPin’s sophisticated design tool.

Building a Component Library – A Step-by-Step Guide

building component library

Whether you’re creating a design system from scratch or want better front-end development cohesion and consistency, building a component library is an excellent way to improve your product’s user experience.

A component library will save you significant time in the long run, but it will require a lot of resources and attention to detail to build from scratch. Engineers must consider the product’s current priorities and future possibilities to ensure the component library is scalable.

With UXPin Merge, you can create fully functional prototypes with the UI elements that come from your component library that preserves its functionality when imported into the design editor. Share a single source of truth across design and development. Visit our Merge page for more details and request access.

Reach a new level of prototyping

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

Component libraries help unify code for improved front-end cohesion and consistency. It also minimizes how much code developers must write to release new products and features.

Most engineers decide to build a component library because they recognize one of several common problems:

  • UI inconsistencies–multiple variations of the same component
  • Programming syntax and markup inconsistencies–different ways of writing and structuring code
  • Ever-increasing front-end debt–backlog of programming bugs and fixes
  • Missed deadlines due to redundant programming and workflows

A component library aims to solve or reduce these issues while providing engineering teams with a scalable front-end framework.

Step 1. Create Interface Inventory

An interface inventory or UI audit is a crucial first step. Audits often uncover many UI and programming inconsistencies engineers must address before building a component library. Sometimes these inconsistencies are subtle, like two slightly different HEX codes, while others are more obvious, like multiple button variants (various sizes, shapes, colors, CTAs, etc.)

error mistake wrong fail prototyping

Design systems expert Brad Frost recommends screenshotting every user interface and cutting out each component. It’s a tedious, time-consuming but essential task to take stock. It’s important to do this inside the actual product rather than relying on project files because it’ll tell you exactly what customers see and expose any errors/inconsistencies.

Sort your components into categories to see what you’re working with. These categories will also form the foundation for your component library.

If you need help sorting your component types, consider copying Google’s Material Design or Apple’s Human Interface Guidelines. Alternatively, you can use Atomic Design to organize UI elements.

An interface inventory is also an excellent resource for advocating your component library to stakeholders. Showing these inconsistencies is often the best way to demonstrate the scale of the problem and the necessity to allocate resources for a component library.

Step 2. Select Tools and Framework

Once you know what to build, you must decide how to build it. If you’re using a Javascript framework (React, Angular, Vue, etc.), we recommend using Storybook to develop and manage individual components.

logo storybook

Storybook allows engineers to build and test components in isolation. You can also create documentation, set up development workflows, and collaborate with engineers and stakeholders.

Syncing design and development

The added benefit of Storybook is that it syncs with UXPin Merge–technology for component-driven prototyping. So, once your component library is complete, you can connect it to UXPin so design teams can build fully functioning prototypes.

logo uxpin merge 1

Merge isn’t only for UX designers. TeamPassword doesn’t have a design team, so the engineering team (of two) must prototype and test user interfaces. TeamPassword used to do this by writing code but wanted a faster method for prototyping and testing.

uxpin merge component sync

TeamPassword syncs its custom MUI component library to UXPin using Merge technology, where they build and test prototypes. 

The process of taking the finished design and developing it into a product got way faster, too. It is so rapid to export the prototype with all the specification and production-ready code. The time that the team normally had to spend on writing front-end code is saved.”

Step 3. Get Components

With your list of components and corresponding categories from the interface audit, it’s time to develop your component library–but where do you start? 

Here are some techniques for building a component library from scratch. We’ve also included some technical resources for developing your library in Storybook. 

design system library components

We recommend following Brad Frost’s Atomic Design methodology to develop components from the ground up. This method will create a modular system to build new patterns and scale your component library.

Atoms

Atoms are components you cannot break down further. They’re also the building blocks or dependencies for the rest of your component library. Atoms include:

  • Labels
  • Input fields
  • Buttons
  • Color palettes
  • Fonts
  • Icons
  • Animations
  • Design tokens

Molecules

Multiple atoms combine to construct molecules–the individual UI components users interact with, including forms, tabs, accordions, etc. For example, a search component = label + text field + button.

Organisms

Organisms are UI patterns that combine two or more molecules. A navigation bar is a common organism example:

  • Logo (molecule)
  • Navigational links (molecule)
  • Search bar (molecule)

Templates

Templates feature multiple organisms and molecules to make a complete user interface. These templates help eliminate redundant workflows to deliver products faster. Some examples include:

Design tokens

Design tokens are vital for building scalable cross-platform component libraries. These tokens contain UI data, including colors, spacing, typography, assets, animations, etc., to style UI components.

A single token contains properties formatted for each platform. For example, Android, iOS, and web browsers use different measurement units:

  • Websites and web applications (pixels/em/rem): 1 pixel
  • Android (dp density-independent pixels/dips): 1 pixel = 1dp
  • iOS (points): 1 pixel = 0.75pt

Engineers can program a token to accommodate each unit of measurement to ensure consistency across every operating system. 

Design tokens also make updates much more straightforward. Instead of modifying multiple files, engineers update the token to make cross-platform changes.

Creating design tokens from the start reduces redundant work while building your component library while future-proofing your code.

Remember documentation!

The most common recommendation from people who have built component libraries from scratch is documentation! Your component library’s docs make collaboration easier by informing other engineers how to develop and maintain components.

You should document every component as you complete it while it’s fresh in your memory. Additionally, you should document every change.

Mikael Sukoinen from Vaadin recommends documenting each component as follows:

  • Overview: component name and description
  • Instructions: how to install and use the component
  • Visual examples: demonstrating a use case for the component
  • Code samples: how to use the component’s API
file folder

Your documentation must also include:

  • HTML, CSS, and Javascript guidelines
  • Testing components
  • Instructions for props for React components (or Args in Storybook)
  • Versioning
  • How to collaborate and share work (project management tools like Jira, Trello, Notion, etc.)

Building a component library in Storybook

Here are some technical guides for building a component library:

Leverage Open-Source Component Libraries to Build Faster

Open-source component libraries provide a foundation to build a component library fast. Engineers also benefit from a scalable syntax–a process requiring many hours of friction and debate among developers.

Customization is the most important thing to consider when choosing an open-source component library. Make sure the library is themeable, preferably through design tokens. You also want something that’s regularly maintained with comprehensive documentation.

While open-source component libraries are themeable, there are limits to how much customization you can do to get a unique aesthetic. You’re also constrained by the library’s syntax and design language, so do your research before making a final decision.

Prototyping and Testing in UXPin With Merge Technology

Storybook is an excellent tool for building your components in isolation and testing them internally–but what about user testing? Unfortunately, Storybook has limitations regarding usability testing in browsers or mobile devices.

Yes, you can build a prototype with code, but making changes and iterating is time-consuming.

Merge allows you to import your component library from a repository to UXPin’s design editor so you can build prototypes to test your new component library. Merge creates a drag-and-drop prototyping environment, eliminating the steep learning curve required for traditional design tools.

This prototyping workflow has worked for tech giant PayPal and a startup of five, TeamPassword. Interestingly, both organizations switched to Merge due to UX scalability challenges. PayPal and TeamPassword have teams with little or no design experience completing UX tasks like prototyping and testing using Merge.

PayPal had five UX designers to over 1,000 engineers servicing more than 60 products. After switching to UXPin Merge, PayPal’s product teams (who had no previous design tool experience) complete 90% of design projects 8X faster than experienced UX designers could using image-based tools.

As a cash-strapped startup, TeamPassword doesn’t have the resources for a UX team but understands the importance of user experience to be competitive. Merge gives TeamPassword’s two-person engineering team a platform to prototype and test user interfaces with end-users–filling the UX designer void. Like PayPal, TeamPassword delivers products and features faster with Merge.

Building a component library requires significant resources. Often engineers don’t have access to a UX team or the knowledge to create and test components using a design tool. UXPin Merge bridges the gap between design and development, so designers and engineers speak the same language.

UXPin Merge empowers designers to build superior prototypes and solve more problems during design projects, but it also empowers engineers to prototype and test in situations where they don’t have UX resources.

Build your component library with Storybook and UXPin Merge. Visit Merge page for more details and how to request access.

What is Design Facilitation and How to Host Your First Session?

Design Facilitation

Workshops and design sprints are standard in most design processes. These collaborative exercises allow design teams to get valuable input from multiple departments and stakeholders.

Design facilitation provides the essential planning and framework to ensure these exercises deliver successful outcomes. Facilitators must guide team members through various tasks and activities to achieve the activity’s goals and define the next steps.

Use workshop insights to produce fully functioning prototypes to test ideas and hypotheses. Sign up for a free trial to build your first interactive prototype with UXPin.

Build advanced prototypes

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

Try UXPin

What is Design Facilitation?

Design facilitation involves organizing collaborative activities like design sprints, UX workshops, ideation sessions, etc., to ensure the exercise meets its desired goals and objectives.

Rather than telling people what they must do, design facilitation provides the framework (tools, resources, methodology, parameters, and environment) for the activity to achieve successful outcomes.

These can be designer-only exercises or cross-functional activities where other departments and stakeholders come together to solve design or product problems.

Design Facilitation Skills

These are some of the skillsets of a design facilitator:

  • Planning: design facilitators plan and execute events, often involving hiring venues, PA equipment, catering, and other service providers beyond the actual workshop or sprint activities.
  • Public speaking: facilitators must be comfortable speaking to a group and, most importantly, capable of disseminating instructions.
  • Problem-solving: no plan is perfect, and things often go wrong when planning events. Design facilitators must be problem solvers with contingency plans for any eventuality.
  • Enthusiastic/charismatic: people often don’t want to take part in workshops–they do it because they have to. Great facilitators must have the energy and enthusiasm to draw people into the process and encourage participation. 
  • Communication: facilitators must articulate information and instructions in multiple mediums (verbally, in writing, visually) so that people understand what to do.
  • Active listening: as good communicators, design facilitators use active listening when engaging with participants to make people feel like their feedback is valued.
  • Design thinking: a design facilitator must understand design thinking, as many workshop/sprint tools, processes, and frameworks use these foundational user experience principles to achieve desired outcomes.

What does a Design Facilitator do?

lo fi pencil

Design facilitators are responsible for planning, running, and synthesizing results for design exercises. Here is a basic outline of the design facilitation process from planning to completion.

Engages in early planning

A design facilitator’s first step is understanding the primary goal and deliverables. This information will help determine the format (workshop, design sprint, etc.), tools, environment, and people needed to achieve the desired outcome.

The facilitator meets with design leads and stakeholders to define the purpose and goals of the activity. They use this information to determine other elements, including:

  • Outlining an agenda to meet goals and objectives
  • Identifying facilitation tools, frameworks, and resources
  • Choosing the appropriate workshop exercises (how might we, the 5 whys, storyboarding, collaborative prototyping, etc.)
  • Listing the roles (i.e., UI designer, UX designer, product manager, front-end developer, business manager, etc.)

Next, the facilitator sets a date, selects the team, and books a location suitable for the exercise, keeping in mind that this might be a remote activity–for example, a remote design sprint or remote UX workshop.

Selects the team

The size of the team will depend on the exercise. For example, most workshops vary between 7-15 people, while design sprints generally have no more than seven participants.

Design workshops and sprints typically include a cross-functional team with designers, business experts, product managers, engineers, and other stakeholders. The aim is to get diverse perspectives and ideas for the problem you’re trying to solve.

Plans location and logistics

Ideally, the facilitator wants to book a venue close to the participants. This venue might be in the company’s offices or event space nearby. Facilitator Sara Yahyaoui offers three vital tips for selecting a workshop venue:

  1. Visit the location ahead of time to see if it’ll suit your workshop’s needs–at the very least, request images and video to explore the space remotely.
  2. The venue must have walls, windows, and whiteboards for post-its, storyboarding, paper prototyping, etc.
  3. Workshops and sprints require people to move around freely. Sara’s rule is 2-3 chairs for every participant. If you have 30-40 people, ensure the venue has a 100-seat capacity.

Invites team members

Team members usually get advanced notice about the workshop’s date, location, and purpose.

Expert facilitator Dee Scarano from AJ & Smart recommends waiting until a few days (maximum seven days) before introducing yourself, the tools, schedule, etc., so that the information is fresh in people’s minds when they arrive.

Dee’s welcome email includes:

  • A brief introduction as the facilitator and her role in the upcoming workshop–i.e., Hi, I’m Dee. I will be the facilitator for the design workshop on July 10.
  • A Loom video introduction saying hi to everyone (a personal touch we love).
  • Outline the schedule, including the length of the session(s) and any pre-work/homework exercises.
  • If it’s a remote workshop, Dee will notify people of the tools (digital whiteboard, video application, etc.) and even share YouTube tutorials showing people how they’ll use these.

Dee’s Pro Tip: If you’re using tools, create a warm up exercise to familiarize them with it. For example, Dee sends a link to a digital whiteboard with post-it notes for participants to fill in their names, roles, and fun a question (i.e., what you learned from your first job ever?).

Dee’s warm up exercise gets people using the tool so they’re familiar with the basics when they arrive for the workshop.

Facilitates the session – welcome and introduction

The design facilitator’s first important task is to start on time. If people are late, you can fill them in during the first break and see if they have any questions.

Tips for opening a workshop:

  • Introduce yourself as the facilitator and your role during the proceedings
  • Venue formalities–closest toilets, beverage station, break times, meal times & location, and other venue-specific instructions
  • Workshop rules–i.e., how to ask questions, not speak over one another, be respectful of ideas, collaborating, etc.
  • Introducing each team member (people can do this themselves by stating their name, department/organization, and workshop role)

Facilitates the session – explaining the exercises

With formalities out of the way, it’s time to introduce people to the schedule and exercises. Having run hundreds of workshops, Dee Scarano from AJ & Smart has a simple formula to ensure everyone understands the activity and objective:

  • What you are going to do
  • Why you are doing it
  • How you should do it

For example:

  • What: we’re about to do concept sketching
  • Why: we’re all going to make individual concept sketches so that we can look at a diverse range of ideas and make a final choice
  • How: use a sharpie marker and a piece of paper. Look at previous examples and inspiration and sketch your version of a concept idea clearly on the page

People absorb information differently, including verbal, written, and visual instructions, so offering multiple versions will ensure everyone understands the activity and objectives.

Dee’s Pro Tip: Only give one way to complete the exercise. Through hundreds of workshops, Dee has learned that people produce the best results with specific step-by-step instructions rather than allowing them to do what they feel is best.

For example, participants must “use one sheet of paper and a black marker” for concept sketching instead of “use as many pages as you like and any colors you prefer.”

Facilitates the session

Here is an outline of a design facilitator’s responsibilities once the session is underway:

  • Keeping to schedule: an essential task for any facilitator is ensuring everything runs on time, including activities and breaks. The facilitator must always set time limits for exercises and tell participants an exact time–for example, “we have 30 minutes for sketching. You have until 14:30.” Using a centralized clock or timer will help keep everyone in sync.
  • Encourage participation: the aim of inviting a diverse team is to get different ideas. Facilitators must encourage everyone to participate. One way is to ask a team member’s perspective based on their expertise–i.e., to an engineer: does this idea align with our product’s technical constraints?
  • Discussions and debates: design facilitators must balance free-flowing conversation and ideas with closure to keep things moving toward the workshop’s goals. They must recognize when discussions are too long or irrelevant and push participants to a conclusion–for example, voting on the best solution.
  • The decider: a common role for design sprints (but also useful for workshops) for final decision-making–often when there are two strong choices or disagreements. The decider is usually a product owner, CEO, or another high-level stakeholder familiar with the product/project.

Wrapps up and synthesizes the results

At the end of the workshop or sprint, the design facilitator must summarize and document the results with the group, so everyone agrees with the outcome and deliverables. The team might also discuss possible next steps.

Document the workshop by:

  • Take pictures of everything and upload them to a shared drive. 
  • If you use physical whiteboards, copy the final results to a digital whiteboard (Mural, Miro, Google Jamboard) for future reference.
  • Writing a summary report about the workshop and its outcomes.
  • Schedule a follow-up session for feedback and progress.

Improve Your Design Facilitation Skills

search observe user centered

These resources offer facilitation techniques to improve your skills as a facilitator:

Use Workshop Insights to Prototype in UXPin

After most workshops and sprints, the next step is to produce a high-fidelity prototype or MVP to test and iterate. UXPin’s advanced end-to-end design tool enables design teams to build prototypes that look and feel like the final product.

With built-in design libraries, designers can go from concept to fully functioning prototype fast! They can use these immersive prototypes that produce meaningful, actionable results from user testing and stakeholders–allowing product teams to iterate faster than traditional image-based design tools.

Turn your workshop ideas into fully-functioning prototypes with the world’s most advanced design tool. Sign up for a free trial to explore UXPin’s features today!

UX Content Strategy – How to Create and Track it

UX Content Strategy

Content exists across multiple touchpoints sourced from numerous creators. A UX content strategy ensures content production and governance remain high quality and consistency to enhance a product’s user experience while meeting business goals.

We’ll explore two significant factors in developing and maintaining a content strategy:

  1. The content lifecycle
  2. The four elements of a content strategy

A content strategy team uses these facets to create a framework for creating and maintaining a product’s content.

Scale design and improve collaboration across product design and development with UXPin’s Merge technology. Review content of your prototypes easily, speed up design iterations, and share a single source of truth between design and development. Visit our Merge page.

Reach a new level of prototyping

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

What is a UX Content Strategy? 

A UX content strategy defines a product’s content goals, creation, management, and distribution across multiple touchpoints, including (but not limited to):

  • Digital product user interfaces
  • Websites
  • Blog articles
  • Emails (system notifications, marketing, etc.)
  • Mobile notifications
  • Social media
  • Ads

Content strategists aim to create consistent and coherent messaging across these touchpoints to meet user needs and achieve business goals.

Like a UX strategy, a UX content strategy provides the framework for content designers and UX designers to align the product(s) and brand for a better user experience.

Beyond unifying an organization’s content, UX content strategists work closely with content designers and UX writers to design content that meets user needs precisely when they need it. For example, UXPin’s documentation uses written instructions, text highlights, images, and explainer videos/GIFs to help designers understand the design tool and its features.

Who is responsible for the UX content strategy?

The person responsible for an organization’s UX content strategy varies depending on the organizational structure. For example, many startups don’t have a dedicated content design team. In these small companies, UX designers are responsible for content.

Larger organizations may have a dedicated content strategist, but often content designers will fulfill this role.

What does a Content Strategist do?

Here is an overview of a typical content strategist’s role and responsibilities:

  • Content principles: defines how the organization uses copy, including language, sentence structure, reading level, etc.
  • Content policies: the organization’s content standards and guidelines, including legal requirements like GDPR, CCPA, etc.
  • Voice and tone: the brand’s personality and how to speak to the target users
  • Content roadmap: prioritizing content, assigning tasks, etc., for creating and maintaining content
  • Content audits: auditing content across every touchpoint regularly to ensure its relevant and up-to-date

Who creates the content?

Content strategists work cross-functionally to source content from multiple sources. Here are some examples of the people responsible for creating the various types of content:

  • Copywriters (blogs and other long-form content)
  • UX writers (user interface copy, messages, notifications, labels, etc.)
  • Graphic designers (icons, infographics, maps, and other visual elements)
  • UI designers (user interface elements and components)
  • Video editors (sourcing and editing video content)

The Content Lifecycle in 5 Steps

Meta (formally Facebook) Content Designer Erin Scime created the Content Lifecycle in 2009–a framework referenced on Usability.gov, and content strategists still use it today.

user search user centered

Erin’s five-step content lifecycle is an iterative process where content strategists regularly evaluate the organization’s content needs.

Audit

A content audit works similarly to a UX audit, including interviews and research to fully evaluate a brand’s existing content and business goals. Content designers can audit a single product, project, domain, or organization. A typical content audit includes:

  • Stakeholder interviews: understanding what key stakeholders and departments’ content goals
  • Competitive analysis: research competitors to identify opportunities
  • Market research: analyze the demand and find gaps
  • Catalog content: listing and categorizing all existing content
  • User research: evaluating user personas, user journeys, product data (analytics, heatmaps, etc.), and other UX research to define user needs

The primary aim of a content audit is to understand the organization’s current state, identify issues and opportunities, and how these align with the content, UX, and product roadmaps.

Strategy

The strategy step defines the high-level content needs and priorities, including:

  • Content sourcing, production, and workflows
  • Setting timelines and deadlines for content delivery
  • Content taxonomy (categories, structure, metadata, etc.)
  • Defining the voice and tone

Plan

The strategy phase outlines what content the organization needs, and the plan specifies who, how, and when to create it. Some examples include:

  • Assigning tasks for content sourcing and creation
  • Content management system customization
  • Metadata planning
  • Migration plan
  • Marketing/ad model

Create

Teams create content according to the plan and strategy, including:

  • Create a governance model
  • Copywriting, editing, and review
  • Creating and optimizing assets
  • Quality assurance for branding and SEO

Maintain

With an actionable content roadmap, the content design team uses KPIs to monitor progress. They also plan the next audit to repeat the process. This iterative content lifecycle ensures content stays relevant, serves users, and meets business goals.

The Four Elements of Content Strategy

Brain Traffic, a leading content strategy consultancy founded by content design pioneer Kristina Halvorson, developed the Content Strategy Quad, which the company published in a 2018 blog post.

color sample library

The Content Strategy Quad uses four elements divided into two parts:

Content design: solving user problems through content and UX design strategies.

  • Editorial strategy
  • Experience design

System design: the systems, architecture, interfaces, and technical constraints content designers must work within.

  • Structure engineering
  • Process design

Editorial strategy

The editorial strategy focuses on visual content and copy guidelines, including principles, voice, tone, brand, grammar, etc. If your product uses a design system, the content team will define these guidelines in the documentation.

A great example is Stack Overflow’s Content Guidelines in the company’s Stacks Design System.

Stack Overflow design system outlines ux design strategy

A clear editorial strategy published through a style guide or design system ensures creators deliver consistent content that aligns with brand values and user needs.

According to Brain Traffic, the editorial strategy answers the following:

  • What is our editorial mission?
  • Who are our target audiences?
  • What is our point of view?
  • What are our voice and tone?
  • What brand and language standards must we comply with?

Experience design

Experience design analyzes a product’s user experience and its relation to content. Content designers must assess the product’s different audiences, customer journey maps, and user needs to understand what problems they must solve.

Brain Traffic’s Experience Design aims to answer the following:

  • What are our users’ needs and preferences?
  • What does our content ecosystem look like?
  • What are our customers’ journeys?
  • What content formats do we need?
  • How will our design patterns shape content across platforms–web, mobile, tablet, etc.?

Structure engineering (content engineering)

Structure engineering looks at a product’s information architecture, each interface’s layout/structure, and how users engage with content. 

Brain Traffic’s Content Engineering quadrant aims to answer the following:

  • How will we organize content for browse-and-find?
  • What tags are most intuitive for users?
  • How will we categorize content for efficient management?
  • How will we structure our content for future reuse?
  • What are the requirements for personalization, dynamic delivery, and information architecture?

Process design

Process design focuses on content governance–creation, reviewing, editing, and approval. What is the workflow for the content lifecycle? Who is responsible for each facet of the UX content strategy?

Brain Traffic’s Process Design focuses on the following:

  • How will content move through its lifecycle?
  • What tools will we use to create, deliver, and maintain content?
  • Who is responsible and accountable for content? Who needs to be consulted and informed along the way?
  • What standards and metrics will we use to measure our content quality and performance?
  • How and when do we care for our existing content?
  • Who gets to say no?

Prototype, Test, and Iterate With UXPin Merge

The content design process is no different from a typical user experience design workflow. Content designers must prototype, test, and iterate to find content solutions that meet user needs.

While traditional design tools enable designers to build aesthetically-pleasing user interfaces, they don’t provide the fidelity or functionality for accurate prototyping and testing. Many content designers and UX writers don’t have the skills to use these tools, limiting their prototyping ability.

With UXPin Merge, content designers can sync their product’s design system, including components, patterns, and templates, with UXPin’s design editor to build prototypes that look and feel like the final product.

These ready-made components mean content designers don’t have to worry about designing from scratch, allowing them to focus on dragging-and-dropping UI elements to build fully interactive prototypes to test with end users.

TeamPassword is a fantastic example of how non-designers can leverage UXPin Merge to test a product’s user experience. TeamPassword doesn’t have a UX department, so engineers with no design tool experience build and test prototypes using UXPin Merge.

Users can interact with Merge prototypes like they would using the final product, giving content designers accurate data to test and iterate–for example, fully functioning, dynamic form fields to test error messages based on user engagement.

Get accurate feedback during testing to create meaningful content that solves user needs with the world’s most advanced prototyping tool. Visit our Merge page for more details and how to request access.

Design Handoff Basics – What Do Developers Need from Designers?

The Responsibilities of Developers During Design Handoff

Design handoffs are a tense time. Designers and engineers speak separate languages and work within different constraints, making communication and collaboration challenging.

The first step to bridging this gap is defining what engineers need for development. Communicating these needs at the start of the design process will help designers prepare accordingly and streamline the design handoff process.

We’ve included a list of what engineers need from designers at handoff, what they don’t need, and how to optimize your handovers using sophisticated tools.

One of such tools is UXPin Merge. It enables you to design prototypes with a single source of truth between design and engineering, that is interactive components. Designers can bring their app’s UI elements to UXPin, and share them with devs for easier design handover. Create seamless design handoffs with the world’s most advanced design tool. Visit our UXPin Merge page.

Reach a new level of prototyping

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

A Design Handoff From a Developer’s Perspective

We’ve talked a lot about designer/developer collaboration and creating better design handoff processes. The key takeaway is designers and engineers must start handoffs early in the design process.

Engineers must provide a list to designers of the files, documentation, assets, and specs they need to develop the final product. The teams must also decide on a file structure and naming convention to make everything easy to locate.

Defining technical and developer needs at the start of a project enables design teams to set up tools, workflows, and infrastructure (files, project management software, etc.) to support a streamlined handoff process.

What do Developers Need From Designers?

code developer design 1

Create a design system (even if your product doesn’t use one)

Many engineers build components in isolation and pull them into project files for front-end development–especially with component-based front-end frameworks like React. Creating a design system or style guide for your projects will help facilitate this workflow, making it easy to develop the final product.

Most design tools require additional plugins or extensions, but UXPin offers its Design Systems feature standard with every plan. UXPin has four categories for Design Systems:

Designers can also include written design system documentation, so everything is in one place. If an existing product already uses elements from your design system, find the correct file names and inform engineers to prevent duplicate work.

Organized components

Beyond creating a design system, designers must organize components so that it’s easier to code them systematically. This example from Material Design arranges UI elements by type.

Material Design is great at organizing components

Designers could also categorize components using atomic design principles:

  • Atoms: foundational elements
  • Molecules: UI components 
  • Organisms: Larger components and patterns

File structure and naming convention

Engineers work with repositories where file structure and naming conventions are essential for successful workflows and collaboration. Mirroring these practices for design projects reduces the “language barrier” between designers and engineers.

Documentation

Designers must create written documentation to support annotations on mockups and prototypes. The written documentation is a story to provide context to interactions, interfaces, and user flows–what happens when a user clicks “element X”? What are the success/error/warning messages? What happens if a user isn’t logged in?

Information architecture

Prototypes and mockups aren’t enough to develop websites and digital products. Engineers need to see how everything goes together and where user flows start and end through information architecture.

Wireframes or flowcharts are the best methods for presenting information architecture. Designers can share these with engineers using Miro or a free tool like Google Jamboard. Alternatively, UXPin provides a User Flows Design Library to build flowcharts for your information architecture.

Engineers can use this information architecture to organize file structures and prepare each screen before they start development.

Mockups and Prototypes

Engineers use mockups to develop each user interface and prototypes to create navigational points, interactions, and animations. The higher the fidelity and interactivity of prototypes, the easier it is for engineers to interpret and replicate them with less documentation and explanation.

prototyping elements components building

While most design tools create beautiful mockups, they lack features for interactive prototyping. UXPin is powered by code, giving designers tools and features to build fully interactive prototypes that look and feel like the final product.

Some key UXPin prototyping features include:

  • States: Apply multiple states to a single element, each with different properties, interactions, and animations. Designers can use States to create simple interactivity like button states or complex components like accordions, multi-level navigation, and more.
  • Interactions: UXPin offers an extensive list of triggers, actions, and animations to replicate code-like interactivity. Conditional Interactions allow designers to create dynamic experiences based on user actions, giving engineers an accurate reference for development.
  • Variables: UXPin features fully functioning forms designers can use to capture user inputs and use that data elsewhere in the prototype. Variables help engineers understand how the product’s inputs must work, including vital error messages to help users complete tasks.
  • Expressions: Javascript-like functions to create complex interactivity like form validation or fully functioning shopping carts. Engineers can use these Expressions as a foundation for writing the product’s Javascript functions.

Specifications

Specifications give engineers detailed information about an interface’s CSS properties like spacing, font sizes, heights, widths, etc. Design tools usually have plugins or extensions to automate this process.

UXPin’s built-in Spec Mode allows developers to select UI elements to view specifications, including automatically generated starter CSS they can copy/paste.

UXPin Spec mode will help you with developer handoff

Checklist

A design handoff checklist itemizes everything designers give to engineers. This checklist is one of the most important documents because it ensures designers remember to hand everything over and engineers confirm that they receive everything.

What Developers Don’t Need

What developers don’t need for design handoffs is just as important as what they do! As you can see above, there are many artifacts, and documentation engineers must reference to develop the final product. Too much information can confuse and delay development while engineers sift through unnecessary documentation.

Engineers don’t need access to your UX research artifacts like user personas, journey maps, competitive analysis, etc. High-level overviews, reports, and summaries are sufficient to outline the problems your designs solve.

Pick Developer-Friendly Design Handoff Tool

Designers who use image-based design tools like Figma and Sketch must rely on additional tools and plugins for design handoffs. These extras increase design costs and create room for error.

Even with these extra tools, designers still battle with fidelity and functionality, limiting prototyping scope. Sometimes, they use videos and GIFs to demonstrate interactions, which need additional context and clarification for engineering teams and stakeholders.

UXPin is an end-to-end design tool with everything designers need from concept to final design handoff. Designers can build prototypes that accurately replicate the final product experience, leaving no ambiguity regarding features, navigation, interactions, and animations.

Engineers can view prototypes, mockups, documentation, specs, and components and download assets from one interface. Teams can collaborate during handoffs via UXPin’s Comments and even assign comments to direct questions to specific team members.

UXPin also integrates with Slack and Jira so product development teams and stakeholders can stay up-to-date with design handoffs and project status.

Using one tool for ideation, wireframing, mockups, prototyping, testing, user flows, design systems, documentation, and design handoffs creates a productive environment for designers as they don’t have to switch between platforms. UXPin’s high-quality prototypes mean designers spend less time explaining features and interactivity, creating a smoother transition from design to code.

Seamless (NO) Handover With UXPin Merge

Where UXPin makes design handoffs easier, UXPin’s Merge technology facilitates a seamless (no) handover process where there is no designing or writing front-end code! Designers drag and drop, while engineers copy/paste.

UXPin Merge syncs a design system (private or open source) hosted in a repo to UXPin’s design editor, giving designers the same component library engineers use to develop the final product. This single source of truth means designers and engineers speak the same languages and work within the same constraints.

Any changes to the component library’s repository automatically sync to UXPin, notifying design teams of the update. Merge’s Version Control allows designers to choose when to switch to the latest version, and they can change to early versions of the design system at any time.

Merge components are fully interactive and include properties defined by the design system, including states, colors, sizing, etc. Designers can adjust these properties via the Properties Panel, which UXPin renders as JSX for engineers to copy at design handoffs.

Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress, noted that Merge has a huge potential for streamlining the company’s handoff process:

“The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the ‘design drift’ we so often see. Things like spacing and typography should all be aligned, as it is all driven from one place.”

Ready to make painful design handoffs a thing of the past? Switch to UXPin Merge create a seamless (no) handover product development process. Visit our Merge page for more details and how to request access.

Customer Experience vs. User Experience – Why the Difference Matters

UX vs CX

Don Norman, the founder of the Nielsen Norman Group and former Apple VP, coined the term user experience or UX in the 90s. Almost two decades later, Tony Hillson from Service Design in New Zealand came up with customer experience or CX. 

Many people incorrectly use CX and UX interchangeably, but these describe different levels of user/customer interactions. We explore CX vs. UX, how these differ/intersect, and the metrics teams use to measure and optimize performance.

Create a great customer experience with a good user experience. Switch to UXPin–the world’s most sophisticated design tool. Build better prototypes to solve more problems while identifying valuable business opportunities. Sign up for a free trial to explore UXPin’s advanced features.

Build advanced prototypes

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

Try UXPin

What is User Experience (UX)?

UX or user experience describes a user’s journey and interactions with a digital product. Factors impacting user experience include usability, information architecture, navigation, learnability, and visual hierarchy, to name a few.

It’s important to note that users aren’t always customers. For example, website traffic are users, which include customers and visitors. Many digital products offer free plans for users, hoping that these people will convert to becoming paying customers. Optimizing your UX creates a positive customer experience while increasing the likelihood of converting leads.

What is Customer Experience (CX)?

Customer experience describes a customer’s holistic relationship with a brand across multiple touchpoints–including a product’s user experience. The customer experience extends beyond products and UX to include:

  • Buyer’s journey–the process of paying for goods and services
  • Pricing fairness
  • Marketing communications
  • Brand reputation–are people proud to use your products?
  • Customer service interactions
  • The sales process–purchases, upsells, and retention
  • Social media engagement
  • In-store experiences (for retail and physical products)
  • Product delivery–physical (shipping, packaging, etc.) and digital

Within many of these touchpoints are user experiences organizations must manage and optimize.

CX vs. UX – Differences in Focus and Responsibilities

Areas of focus

This simple diagram demonstrates the differences between UX and CX. As you can see, CX encapsulates the user experience. CX is a high-level initiative, whereas UX focuses on digital touchpoints–i.e., website, applications, devices, etc.

Screen Shot 2016-01-11 at 5.49.30 PM

Tesla is a great company to demonstrate these different areas of focus. Telsa’s customer experience may look something like this:

  • Purchasing a car–including interactions with salespeople
  • Taking delivery
  • Interacting with customer service
  • Charging the vehicle
  • Servicing
  • The driving experience
  • Attending Telsa events
  • Vehicle servicing and updates

Within these touchpoints are multiple user experiences:

  • Using Telsa’s website to purchase a vehicle
  • Any Telsa native or web applications
  • Using the car’s digital automotive user interfaces

As you can see, many customer experiences have little or nothing to do with Telsa’s user experiences. 

process problems error mistake

Areas of responsibilities

CX and UX differ in ownership and responsibility:

  • User experience: product development teams (product managers, engineers, UX designers)
  • Customer experience: marketing and customer service teams

While these responsibilities are a generalization and may differ depending on the organization, the key distinction between responsibilities is:

  • User experience: those in charge of technology and digital user interfaces
  • Customer experience: those who directly or indirectly communicate with customers

CX vs. UX – Similarities

Human-centered

CX and UX use human-centered research and personas to understand users/customers and their journeys. Teams use similar methods for collecting this data, including:

  • Product/website analytics
  • Interviews
  • Surveys
  • Customer support tickets
  • User profile/account data

UX designers will also collect data through usability testing, which they may share with other teams.

testing observing user behavior

Retention

CX and UX aim to engage and retain users to create lasting business value. Teams do this by solving problems and creating positive experiences. For example:

  • A customer purchases a product through a brand’s website. The user flow from selecting the product to checkout is effortless, creating a positive user experience, meaning the customer is likely to return.
  • The customer receives their parcel within 48 hours, but it’s not the correct size. The company included return packaging, so the customer simply drops it in the bag provided and uses the brand’s website (user experience) to book a return collection.
  • As soon as the courier collects the parcel, the company credits the customer’s account, and they can purchase the correct size. This positive customer experience increases the likelihood the brand will retain this customer.

Personas and journey mapping

UX and CX use personas and journey mapping to understand their audiences and how they complete tasks. While the structure and focus might differ, the tools and methods are similar.

Understanding UX vs. CX Performance Metrics

Here are a few examples of UX and CX metrics and how marketing and product teams might use them.

Customer lifetime value (CLV)

Customer lifetime value (CLV) is the company’s average expected revenue from a single customer during their business relationship. CX professionals use this metric to guide budget and marketing decisions.

UX teams typically won’t use CLV because it has no direct connection to understanding user behavior or building empathy. UX metrics are more valuable to UX designers when they provide insights into how users think and feel. 

Net Promoter Score (NPS)

Net promoter score is a critical metric most marketing managers/CMOs monitor closely. NPS indicates customer satisfaction and how likely people are to recommend your brand.

Organizations use NPS testing in digital products and real-world experiences. We often see physical NPS systems in airport bathrooms or retail stores asking to “rate your experience” with three faces representing happy, satisfied/content, and poor.

nps testing in stores for better cx

UX designers use NPS scores for digital products to identify issues. For example, if people repeatedly score a specific feature poorly, UX teams can research to determine the problem.

Churn rate

Churn rate is another critical CX metric because it tells organizations the rate at which people stop doing business with you over a specific period, represented as a percentage.

UX teams typically only review churn rates if customers leave a company due to technical issues and poor user experiences.

Error rate

Error rate is a crucial UX metric because it tells designers where users get stuck or can’t complete tasks, resulting in a poor user experience. 

CX professionals don’t necessarily follow error rates. Still, this metric can directly impact churn rates and NPS, at which point marketing and UX teams must collaborate to find a solution fast!

Success rate

The success rate (completion rate) defines how many people complete a specific task. This metric is a gauge for UX designers, particularly after a new release. If the success rate improves, the design is successful; if it drops, there’s a problem.

CX professionals don’t typically follow success rates, but, like error rates, it can affect other CX metrics.

Conversion rate

Conversion rate is another crucial CX metric indicating the percentage of traffic/non-paying users converting to paying customers. For example, if 100 people visit a website and 10 purchase a product, your conversion rate is 10%.

UX teams also use conversions against designs and new releases as a success metric. For example, if the design team fixes a problem with an eCommerce checkout, the conversion rate will tell them whether the new release improves conversions.

How Can UX Improve CX?

UX is one of the strongest influences on the overall CX. If customers can’t complete tasks or solve problems using a brand’s app, website, or other digital touchpoints, this is a negative customer experience that ultimately results in higher churn, fewer conversions, and lowers CLV.

Make customer feedback easy

Make it easy for customers to contact customer service or find help. Add a contact link to your website’s footer and include a help screen in your desktop and mobile apps.

Design seamless cross-platform experiences

Users must be able to complete the same functions across multiple devices and operating systems. Ever wanted to complete a task in a brand’s mobile app, but they find you can only do this via the web application?

This restriction causes frustration for users and may have negative consequences for them, resulting in a poor user experience and customer experience.

Optimize performance

Slow load times are incredibly frustrating for users. If users have to constantly wait for screens to load or actions to complete, they will lose trust in the product/website and find a better alternative. UX designers must collaborate with engineering teams to find solutions to improve product performance and reduce friction in completing tasks.

Cross-functional collaboration

Behind designing, look for ways to collaborate and share information to improve customer experiences with other departments. For example, UX and CX professionals can share data to enrich one another’s personas and journey maps.

Moreover, they can share short videos of their prototypes to collect feedback from marketing teams. A tool like a Free video editor makes this possible without much effort, helping teams communicate ideas more clearly.

Designers can also include marketing team members in design sprints to gain more customer experience insights and improve design projects.

Advocate for design

Design advocacy is a strategy for educating an organization about design thinking and user experience. Design advocates also promote wins for the department–like demonstrating how a design project improved CX metrics.

Design advocacy is essential because it increases the department’s value, making it easier to secure resources for better tools and systems, ultimately improving user experience and CX.

Improve your user experiences across every touchpoint with UXPin. Sign up for a free trial to discover how code-based design can revolutionize your product development workflows to deliver better user experiences to your customers.