UXPin

User Goals vs. Business Goals – Finding the UX Tipping Point

Striking the right balance between user and business goals is crucial for an organization and its products’ success. To deliver win-win solutions, product teams must encompass user objectives, desires, and challenges while meeting a company’s strategic goals.

We explore user vs. business goals and common associated KPIs. We also look at two real-world examples from Airbnb and Spotify, where product teams were able to balance these goals successfully.

Build fully interactive prototypes to enhance testing with end-users and stakeholders. Get meaningful feedback throughout the UX design process to deliver digital product experiences that meet user and business needs. Sign up for a free trial.

User Goals vs. Business Goals

What are User Goals?

User goals refer to the objectives, desires, or problems users want to achieve, satisfy, or solve when using a product. Understanding and prioritizing user goals ensures a product is usable, functional, and delightful–the core principles of design thinking.

What are Business Goals?

Business goals are the objectives that a company aims to achieve through its product or service. Some examples include increasing revenue, expanding market share, or improving brand reputation.

Understanding User Goals & KPIs

User goals vary depending on the type of product and its target audience. Some common user goals and KPIs organizations use to track them.

Efficiency

Users want to complete tasks efficiently with minimal effort. Products must streamline processes and reduce users’ time to complete tasks and accomplish goals.

KPIs for efficiency:

Task completion time
Number of clicks/steps/interactions required to complete a task

Usability

Users want products that are easy to understand, learn, and operate. Intuitive products with simple navigation and helpful guidance enhance the user experience.

KPIs for usability:

Accessibility

Designers must create product experiences that cater to diverse users and abilities. Features like adjustable font sizes, alternative input methods, and compatibility with screen readers are essential to delivering inclusive user experiences.

KPIs for accessibility:

Level of compliance according to an accessibility checklist.

Personalization

Personalization enhances the product experience with content and features tailored to meet individual needs and preferences. Satisfying this need increases enjoyment, retention, and the likelihood that someone will share their positive experience.

KPIs for personalization:

Percentage of users who customize settings
Number of customizations available
Number of customizations utilized

Reliability

Users expect products to work consistently without errors–especially if they’re paying for something. Products must function correctly without errors, glitches, or performance issues to maintain user trust and satisfaction.

KPIs for reliability:

Technical error rates (crashes, downtime, etc.)
Mean Time Between Failures (MTBF)
Mean Time to Recover (MTTR)

Security and privacy

Users expect organizations to secure personal information and data. mplementing robust security measures, transparent privacy policies, and offering a credit monitoring service reassures users that their data is protected. Using trusted tools such as a Windows VPN further strengthens data protection by encrypting traffic and reducing exposure to online threats. It also helps users maintain anonymity online, ensuring their sensitive activities remain shielded from unauthorized tracking.

KPIs for security and privacy:

Number of security incidents
Number of data breaches
Number of privacy complaints
Number of privacy complaints per jurisdiction

Aesthetics

An attractive and visually appealing product can enhance the customer experience and contribute to a favorable product perception. Good aesthetics also reinforce a brand’s identity and make a product stand out from its competitors.

KPIs for aesthetics:

User feedback on design elements (interviews, reviews, surveys, etc.)

Enjoyment

Incorporating elements of fun, delight, or entertainment can make a product more engaging and enjoyable.

KPIs for enjoyment (engagement metrics):

Average session length
Retention rate
Frequency of use
Net Promoter Score (NPS)

Users often seek social interaction or the ability to share their experiences with others. Integrating social features or facilitating user communication can improve a product’s appeal.

KPIs for social interactions:

Number of comments, likes, shares, etc.
Average follows per account
Number of invitations sent to friends

Support and assistance

Providing accessible and responsive customer support and comprehensive documentation or tutorials can enhance user satisfaction and build loyalty.

KPIs for support and assistance:

Number of customer support tickets
Customer support response times
Ticket resolution rates
Satisfaction scores from support interactions

Understanding Business Goals & KPIs

Business goals vary depending on the business, industry, and the organization’s strategic priorities. Here are some common company goals you’ll find across multiple sectors in product design.

Revenue growth

Increasing sales and revenue is a primary objective for most businesses. The product design team can contribute to revenue growth by creating appealing, functional, and well-priced products. They can also streamline revenue-generating interfaces and user flows to increase revenue. For SaaS companies specifically, tools like Baremetrics provide critical visibility into subscription metrics like MRR, churn, and customer lifetime value, helping product teams understand how design decisions impact revenue directly.

KPIs for revenue growth:

Total daily/weekly/monthly/quarterly/annual revenue
Revenue growth rate
Average revenue per user (ARPU)

Market share is a crucial product metric because it represents a company’s percentage of an industry’s total sales. Increasing market share relies on organizations being competitive in many factors. Those most relevant to product teams are innovation, features, performance, and good user experience, to name a few.

Innovative design can help differentiate a product and make it more attractive to potential customers, thus increasing market share.

KPIs for market share expansion:

Market share percentage
Market penetration rate
Customer acquisition vs. industry/competitor benchmarks

Customer acquisition

Acquiring new customers is crucial for business growth and influences many other business objectives. Designing products that cater to the needs and preferences of target audiences can help attract new users and convert them into paying customers. For B2B sales teams, Sendspark enables personalized video outreach at scale, combining AI voice cloning and dynamic personalization to create individually tailored prospecting videos that significantly improve engagement and conversion rates.

KPIs for customer acquisition:

Number of new daily/monthly/annual customers
Customer acquisition cost (CAC)
Conversion rates (from trial to paid plans, subscribers/users to customers, etc.)

Customer retention

Keeping existing customers engaged and satisfied (customer life cycle) is essential for long-term success. Product design can help improve customer retention by addressing user feedback, implementing feature requests, and continuously refining the user experience.

KPIs for customer retention:

Brand reputation and recognition

A strong, consistent brand identity can help businesses stand out and build consumer trust. Product design can enhance brand reputation by ensuring that products align with the company’s values, aesthetics, and overall brand strategy.

KPIs for brand reputation and recognition:

Cost reduction

Costs impact profit, which means lower salaries, bonuses, and shareholder returns. Businesses often seek to reduce product development, manufacturing, or support-related costs.

Efficient product design can minimize these costs in several ways:

Optimizing product performance (reducing server costs)
Reducing input costs
Simplifying workflows and processes
Improving product quality
Reducing time to market for new releases
Reducing support tickets

KPIs for cost reduction:

Product design costs (design, prototyping, testing, etc.)
Product development costs (programming, servers, API requests, etc.)
Operational costs
Labor time and costs
Employee onboarding costs

Scalability

Businesses must often scale to meet increasing demand or expand into new markets–especially growth-hungry startups. Product design teams must consider scalability to ensure products and supporting resources can adapt or grow to meet future needs.

KPIs for cost scalability:

Time to market for new product releases
System performance under increased load or demand
Product adaptability to new markets or customer segments

Innovation and differentiation

Remaining relevant and competitive requires continuous innovation. Product teams are crucial in driving innovation by exploring new technologies, products, and approaches.

KPIs for cost innovation and differentiation:

Number of new features or product improvements released
Percentage of R&D budget allocated to innovation
Number of patents filed or industry awards received

Regulatory compliance

Businesses must ensure products comply with relevant laws, regulations, and industry standards. Product teams must ensure that products, UIs, and processes meet regulatory requirements, making necessary adjustments for specific jurisdictions–for example, Californian and European users. To verify that these localized experiences are functioning correctly, developers often use a static residential proxy to simulate a connection from a specific region and audit the site as a local user would.

KPIs for regulatory compliance:

Number of compliance audits passed
Number of non-compliance incidents
Fines or penalties incurred due to non-compliance

Many companies prioritize sustainability and social responsibility initiatives, particularly in countries and states where the laws mandate they meet specific goals and requirements. Product teams can contribute to these goals by reducing e-waste (digital waste), optimizing performance (reducing server requests), and reducing product file sizes to minimize storage.

KPIs for environmental and social responsibility:

Measuring and reducing greenhouse gas emissions related to the product
Measuring and reducing energy consumption during the design and development process
Measuring and reducing e-waste
Measuring the social impact of products

How do you Balance Business Goals and User Goals?

Balancing business goals and user goals is challenging. It requires continuous iteration to develop features and improvements that address user needs and business goals.

Here are two real-world examples where product teams have managed to strike the right balance.

Example 1: Spotify

User goals: Spotify users want a personalized and enjoyable listening experience, with easy access to their favorite songs, artists, and playlists. They also appreciate discovering new music based on their preferences.

Business Goals: Spotify aims to grow its user base and increase revenue through premium subscriptions and ads. Product teams also constantly update the user interface, features, and performance to maintain a competitive advantage in the streaming industry.

Balancing Approach: Spotify addresses user and business goals by investing in algorithms that generate personalized playlists, such as Discover Weekly and Release Radar. These features enhance user satisfaction by providing tailored music recommendations, encouraging users to spend more time on the platform, increasing ad exposure, and driving subscription upgrades. By focusing on features that improve the user experience while also supporting its revenue model, Spotify successfully balances user and business goals.

Example 2: Airbnb

User Goals: Airbnb guests want a seamless booking experience, accommodation variety, and reliable communication with hosts.

Business Goals: Airbnb aims to grow its network of hosts, increase bookings, and generate revenue through service fees. The company also wants to maintain its reputation as a trusted accommodation marketplace.

Balancing Approach: Airbnb addresses user goals by investing in an intuitive user interface, robust search and filtering capabilities, and a reliable messaging system between guests and hosts. To meet its business goals, Airbnb offers support and resources for hosts to improve their listings and customer service, such as the “Airbnb Host Resource Centre.” (for the UK, but there are similar resources for other countries.)

By implementing a review and rating system, Airbnb ensures transparency and trustworthiness for guests and hosts. This balance between user and business goals has been vital to Airbnb’s growth and success.

Design user-centric products your customers will love while impressing stakeholders with fully interactive prototypes. Sign up for a free trial to explore UXPin’s advanced features.

Try UXPin for free

Advice to New Design System Managers from 5 Experts

We sat down with five experts to gather insights and advice new Design Systems Managers should consider when taking on a design system position.

Introducing our five collaborators for this article:

Nina Jurcic is a Product Design Manager and Advisor with expertise in managing efficient Design Systems and design teams.
Nicolas Chatelain is a Design System Designer in the DesignOps team at Orange. Nicolas is involved in growing DesignOps communities (DesignOps Assembly) and mentoring at ADPlist.
Anie Silva Chiba is a UX Design Manager with a strong experience in wireframing, prototyping, and design management.
Justyna Piwowarska is a Design Lead at Klarna and currently leads its Design System Team.
Rikard Nilsson led Klarna’s Design System Team before Justyna for two years and is now a Senior Product Manager at Checkly.

This article was a collaborative effort with the experts and UXPin’s team. UXPin Merge is a code-based design technology bridging the gap between design and development by syncing your design system’s repository to UXPin’s design editor–creating a single source of truth across design, product, and development. Visit our Merge page for more details.

Reach a new level of prototyping

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

Understand the Role and Responsibilities

Nina Jurcic pointed out that “a design system manager acts as a bridge between design, engineering, and product teams. They must manage relationships and safeguard priorities for cross-functional collaboration to thrive.“

Interdisciplinary background

Nina Jurcic also directed our attention to the fact that “ideally, [a Design System Manager] should come from a technical, interaction design, or interdisciplinary product background.” She also revealed that “if you are strong in one of these areas, you need a sparring partner who is strong in the other — in my case, that was a front-end lead.”

This interdisciplinary skillset provides a comprehensive understanding of the needs and challenges of UX designers, developers, and product teams.

“When you are a Design System Manager, you are simultaneously a UX Researcher, an excellent communicator, a trainer, an entertainer, a sensitizer, a UI Designer…” – Nicolas Chatelain.

Effective communication

Design System Managers must be able to communicate on multiple organizational levels, from executives to end-users. They must understand the needs of stakeholders, designers, product teams, and developers to facilitate communication and collaboration effectively.

“Speaking the same language and aligning vocabulary is important to streamline communication and understanding. Avoid trending terms and use those familiar to the team.” – Anie Silva Chiba.

Informed decision-making

A well-rounded understanding of a product’s design and technical aspects is crucial for making informed decisions when prioritizing features, setting goals, and making trade-offs during the design system development process.

Problem-solving

Design System Managers must solve problems across several disciplines and multiple levels. An interdisciplinary knowledge base helps identify and solve issues related to design and development, ensuring that the design system addresses the challenges faced by the teams using it.

Adaptability

Design System Managers will need the knowledge and experience to adapt to an ever-changing landscape of digital products and technologies. They must be able to react to these changes and implement updates to keep the design system relevant.

Operational and strategic skills

New design system manager’s role demands operational skills and having a broad view of what’s going on.

“Much of your day-to-day work will be similar to that of a Product Owner or Product Manager — managing the day-to-day operational aspects such as gathering requirements, writing tickets, and prioritising” – revealed Nina Jurcic, Product Design Manager and Advisor – “And while you’ve got one foot in the present, you should ideally be two steps ahead of the other product teams, anticipating their future needs and requirements and incorporating them into your roadmap and strategy.“

Shift Mindset to Internal Products

Design systems are different from consumer-facing products. Managers must understand that they will focus on enabling product teams to iterate faster and build more confidently.

“An internal product does not have the hard metric of revenue directly tied to it – you are the enabler that allows product teams to iterate faster and build with more confidence, but it will be difficult to show in revenue terms how much you and your team are contributing.” – Justyna Piwowarska and Rikard Nilsson.

Here are some key points from our experts on an internal product mindset shift.

Value measurement

Unlike consumer-facing products, which use revenue metrics, measuring ROI for internal products like design systems is difficult. Design system managers must focus on the indirect value their work delivers, notably:

Increasing efficiency
Reducing design and development time
Improving consistency across product teams

User proximity

Working on internal products means design system managers have direct user access–their colleagues. This proximity gives DS managers a significant benefit over consumer-facing products giving them more effective communication and feedback loops. They can use this proximity better to understand user needs, pain points, and expectations.

“What you will have, though, is direct access to all of your users, which is a superpower if managed well. Talk to your users weekly or daily if you can.” – Justyna Piwowarska and Rikard Nilsson.

Governance and diplomacy

As design system managers interact with various stakeholders, they must navigate the complexities of internal politics diplomatically. DS managers must be confident to say “no” to requests that do not align with the design system’s strategy or objectives while maintaining positive relationships with their colleagues.

Iterative and incremental growth

Internal products, like design systems, benefit from an iterative and incremental approach to development. Starting small and focusing on the most critical components allows for manageable growth and easier maintenance. This gradual expansion also enables the design system to evolve alongside the organization’s needs and priorities.

Focus on maintainability

Design systems require ongoing maintenance to remain effective; conversely, consumer-facing products will have more distinct release cycles. DS managers must prioritize maintainability when creating components and guidelines. This prioritization ensures efficient updates and improvements without disrupting product teams and schedules.

Start Small and Expand Slowly

Starting small and expanding slowly is crucial for building a functional foundation before adding complexity to your design system. This incremental approach ensures the core elements of the design system are well-established and scalable, making it easier to build upon them as the system grows.

“By starting small, you have a better chance of getting it right, and then you can add complexity as you go.” – Nicolas Chatelain, Design System Designer at Orange.

Begin with a limited set of components

Focus on the most commonly used components and patterns, ensuring these are well-designed, documented, and functional. This solid base allows product teams to use the design system as soon as possible while providing a solid foundation to scale.

“A Design System is not only made of visuals and code. Remember that products have communication in their essence, the standards that guarantee the coherence of speech with the brand (Tone and Voice). The writing team must participate in this process from the beginning, setting the standards for text structure, hierarchy, capitalization, verb tenses, and other items intrinsic to the field.” – Anie Silva Chiba, UX Design & DesignOps Manager.

Incremental improvements

Apply Gall’s Law: complex systems that work evolved from simpler systems that worked. Gradually refine and expand your design system, making improvements and adding complexity only when necessary.

Monitor usage and feedback

Monitor your design system closely and how product teams use it. Ask for regular feedback on which components are most valuable, and you must prioritize for expansion.

“Remember, the Design System is not a product under the exclusive responsibility or management of the design team.” – Anie Silva Chiba, UX Design & DesignOps Manager.

Be mindful of organizational needs

As the design system grows, ensure that it aligns with the overall goals and requirements of the organization. This alignment involves adapting the system to accommodate new products, features, or design trends.

Avoid over-engineering

When expanding the design system, focus on practical solutions rather than creating overly complex components or patterns. This focus on practicality will make it easier for product teams to adopt and utilize the design system effectively.

Get Buy-In and Sponsorship

Getting buy-in and sponsorship is essential to ensure the success of new design systems. Acquiring this support involves convincing stakeholders and higher-ups within the organization about the design system’s value and ROI.

“To get started, you need a champion – someone in the organization who understands the importance of a design system and is willing to provide sponsorship and support. Your first task is to secure this sponsorship and build a case.” – Nina Jurcic, Product Design Manager & Advisor.

“Once you have the green light and key stakeholder support, you can assemble a balanced team with diverse skills and industry insights to start working on the design system,” Nina added.

Involve Stakeholders and Users

Involving stakeholders and users is crucial for the success of a design system. When design system managers actively engage with their stakeholders and users, they can better understand their needs, expectations, and potential challenges. This involvement ensures the design system remains relevant, valuable, and user-centered.

“Not everyone will immediately see its value and potential, and that’s okay. Take the time to get to know your stakeholders and bring them on board – establish a regular operating rhythm to keep them informed or involved as needed. In the early stages, spend more time listening than talking.” – Nina Jurcic, Product Design Manager & Design System Expert.

Here are some ways to involve stakeholders and users:

Regular communication: set up communication channels (Slack, email, etc.) for stakeholders and users, and create regular meetings, status updates, or progress reports to keep everyone informed.
Workshops and training: Organize workshops, training sessions, or demos for users and stakeholders to familiarize them with the design system, gather feedback, and encourage adoption.
Collaborative decision-making: Involve stakeholders and users in important decisions related to the design system, such as prioritization of components, design decisions, and setting milestones.
Encourage contributions: Allow users to contribute to the design system by adding new components, improving existing ones, or updating documentation. This involvement turns users into creators, fosters a sense of ownership, and ensures that the design system remains relevant and valuable to all teams.

Resources for New Design System Managers

Accelerate design system maturity and create a single source of truth from day one with DreamFactory‘s API integration capabilities and UXPin Merge. Visit our Merge page for more details and how to request access.

Discover Merge

UI Design for Developers – Beginner’s Guide and Tips

Understanding user interface design principles, user experience, and user-friendly design is a strategic advantage for engineers. They can anticipate potential issues and ensure they solve these to avoid debt, redesigns, and friction with design teams. This advantage means product development teams can ship high-quality products faster, with fewer errors, at lower costs.

Key takeaways:

Developers should acquaint themselves with UI terms such as visual hierarchy, consistency, contrast, alignment, proximity, etc. that will make them more sensible to good UI.
They may also benefit from understanding rules of typography, color, grid systems, and more.
If we were to advise on UI for developers, we would mention that it’s vital for them to understand steps of UX design process and various frameworks that can be used to create user-centered designs.

UXPin Merge is a developer-friendly design tool for designing layouts using code components from a design system repository. Visit our Merge page for more details and how to request access.

Design UI with code-backed components.

Use the same components in design as in development. Keep UI consistency at scale.

The Importance of User Experience and UI Consistency for Developers

Developers may want to focus primarily on the technical aspects of their work. However, it is crucial to understand that the user experience and user interface consistency are integral to a digital product’s success.

One of the most significant consequences of poor UX is the accumulation of UX or technical debt. When development teams prioritize short-term gains, such as rapid deployment, over long-term considerations, such as usability and maintainability, accumulated technical debt leads to increased maintenance costs, reduced development velocity, and an overall decline in product quality.

User-friendly products are vital for user satisfaction, engagement, and retention. A well-designed user interface that caters to users’ needs and expectations can make the difference between retention and abandonment. By understanding and implementing good UI design principles, developers can create products that are not only visually appealing but also intuitive and efficient to use.

When programmers understand UI design principles and user experience, they can collaborate and communicate with design teams more effectively. This mutual understanding fosters a more cohesive and efficient product development process, ensuring design and development goals are aligned.

Fundamental Product Design Principles for Developers

Hierarchy refers to the arrangement of design elements in order of importance, guiding the user’s attention through the interface. For example, using larger fonts for headings and smaller fonts for body text helps users easily distinguish between different sections.
Contrast involves using different colors, sizes, or shapes to distinguish between elements and make them stand out. For instance, using a bold color for call-to-action buttons helps them stand out against the background and attract users’ attention.
Consistency means maintaining a uniform look and feel across your interface, including colors, fonts, and design elements. For example, using the same button style and color throughout your application ensures a cohesive and predictable user experience.
Alignment refers to the placement of elements relative to each other or a common baseline, creating a sense of order and visual harmony. For example, vertically aligning form labels and input fields makes the form appear organized and easy to read.
Proximity is the principle of grouping related elements to establish a relationship. For example, placing a label directly above or beside its corresponding input field helps users understand which label belongs to which field.
Balance involves distributing elements evenly in your layout, using symmetry or asymmetry to create visual stability. For example, a two-column layout with equal column widths and similar amounts of content creates a balanced and visually appealing interface.
Usability and accessibility focus on making your interface easy to use and understand, while accessibility ensures that people with disabilities can access and interact with your product. For example, providing clear navigation, descriptive labels, and adhering to color contrast standards can improve both usability and accessibility.

Key UI Design Terms and Concepts

Typography

Typography is a crucial aspect of UI design that involves selecting and organizing typefaces, sizes, and spacing to create a visually appealing and easily readable interface.

For frontend developers, understanding typography means considering factors such as font choice, hierarchy, and legibility to ensure that the text is visually appealing, effectively communicates the content, and supports the overall user experience.

Color palettes and theory

Color theory is the study of how colors interact and influence one another and the emotions and perceptions they evoke. In UI design, color helps guide users’ attention, convey information, and create a cohesive visual experience.

Frontend developers should understand the basics of color theory, such as the color wheel, color harmony, and color psychology, to create visually appealing interfaces that support the desired user experience.

Design process stages

A UX design process is an iterative step-by-step methodology UX teams use to complete projects. These steps vary depending on the product and organization:

Discovery: In this stage, designers and developers gather information about project requirements, user needs, and business goals.
Define: After gathering insights, the team defines the project’s scope, objectives, and user personas.
Ideation: In this creative phase, designers brainstorm and explore multiple design concepts and ideas.
Design: Designers create detailed mockups and prototypes of the user interface based on the chosen concept.
Prototype: Designers build high-fidelity prototypes that look and function like the final product.
Test: Design teams test prototypes with end-users and stakeholders to iterate on feedback and enhance designs.
Design Handoff: Designers deliver wireframes, mockups, prototypes, documentation, and assets to engineers for development.
UX audit: Design teams evaluate the release to ensure it meets design specifications and doesn’t introduce usability issues.

Grid systems

Grid systems provide a structured layout for organizing design elements consistently and logically. They help maintain alignment, balance, and proportion across an interface.

Frontend developers can leverage grid systems to develop well-structured layouts that are easy to navigate, create balance, and use screen real estate efficiently, ultimately enhancing the user experience.

Responsive design

Responsive design ensures interfaces adapt to different screen sizes and devices automatically, providing users with an optimal viewing and interaction experience.

While most frontend developers are well aware of responsive design techniques, such as fluid grids, flexible images, and media queries, it’s essential to understand how these concepts impact usability and accessibility to ensure user interfaces support all users.

User flows and navigation

User flows describe the steps users take to complete a task or achieve a goal within an interface. Effective user flows, and navigation structures guide users through these steps with ease and efficiency.

Frontend developers must understand and implement clear and intuitive navigation systems, considering factors like information architecture, breadcrumbs, and menu design, to ensure a seamless and enjoyable user experience.

Design patterns and components

Design patterns are reusable solutions to common UI design challenges, while components are the building blocks of an interface, such as buttons, input fields, and cards.

Frontend developers should be familiar with standard design patterns and the usability cases these UI elements solve. This comprehension will help devs know the correct UI patterns to apply when solving usability issues.

UX metrics in UI design

UX metrics are measurable values that help assess the effectiveness and quality of a user interface. Common UX metrics include quantitative measures, such as page load times, click-through rates, and task completion times, as well as qualitative measures, like user satisfaction and perceived ease of use.

Frontend developers must understand and track relevant UX metrics to make data-driven design decisions and continually optimize and improve the user experience.

Making Informed Design Decisions

design and development collaboration process product communication 1

Importance of collaboration between designers and developers

Effective collaboration between designers and developers is crucial for creating successful user interfaces. This partnership streamlines the design handoff process, ensuring that both parties clearly understand the project’s goals and requirements.

For example, a close collaboration can create an interface where the designer’s vision is accurately translated into code, resulting in a seamless user experience that meets aesthetic and functional expectations.

Understanding the design feedback loop

The design feedback loop is an iterative process that involves implementing design changes, gathering user feedback, and making further refinements based on that feedback.

For example, after implementing a new feature, developers can request user feedback through surveys or usability testing from design teams and make necessary UI adjustments, resulting in a more user-centered design.

Balancing aesthetics and functionality

Striking the right balance between aesthetics and functionality is crucial for creating a successful user interface. While visually appealing designs make a positive impression and enhance brand perception, they should not compromise usability or accessibility.

For example, a visually stunning website with unconventional navigation elements may initially impress users, but if it’s not intuitive, they will leave the site frustrated by the poor user experience.

Improving UI consistency with design systems

Design systems help improve UI consistency by providing standardized guidelines, components, and patterns. Developers can leverage a design system to ensure their user interfaces maintain a coherent visual design language and adhere to established best practices, leading to a more efficient development process and a better user experience. For instance, using Adalo‘s no-code app builder paired with a well-structured design system allows teams to rapidly prototype and publish database-driven apps across platforms while maintaining visual consistency.

For instance, a design system can prevent inconsistencies in button styles or navigation elements through reusable code, making it easier for users to understand and interact with the interface while streamlining developer workflows.

Try UXPin Merge

UXPin Merge is a collaborative design tool that makes high-fidelity prototyping and testing accessible to design teams and frontend developers.

Unlike image-based tools like Figma, Sketch, or Adobe XD, UXPin is a code-based design tool. Every component on the canvas is powered by HTML, CSS, and Javascript on the back-end, creating a more accurate environment for digital product design while providing familiarity for devs.

TeamPassword’s two-person developer team uses UXPin Merge to prototype and test user interfaces before shipping releases. Before, the team would prototype and test in code or simply ship releases to save time, resulting in UI inconsistencies and usability issues–not ideal when managing company passwords!

TeamPassword adopted a custom version of the open-source MUI design system which helped solve most foundational UI design principles, including accessibility. This foundational usability enables the team to prototype, test, and ship releases faster, with significantly better consistency and quality.

TeamPassword’s developers have complete control over their React UI library, patterns, templates, and layouts, which sync from the design system’s repository to UXPin Merge. Any changes they make to the repo automatically sync to UXPin.

Streamline your product development and create interactive layouts fast. Visit our Merge page for more details and how to request access.

Try UXPin Merge

UX Designer Bio Examples and How to Write One Yourself

UX Design is a competitive world. Standing out from the crowd is essential for success. Crafting a compelling UX designer bio is a powerful way to showcase your unique value proposition, share your design philosophy, and present your skills and work experience.

This comprehensive guide explores the best practices for writing an engaging UX designer bio tailored for platforms like resumes, LinkedIn, and personal websites or portfolios. These guidelines and real-life UX designer bio examples will equip you to create a memorable first impression, establish credibility, and set the stage for a successful UX design career.

Stand out from the crowd by featuring final product-like prototypes in your UX portfolio. Try UXPin’s advanced features and build your first interactive prototype. Sign up for a free trial.

UX Designer Bio Examples

Entry-Level UX Designer

Typically, an entry-level UX designer has less than two years of experience. They may have recently graduated from a relevant program or have transitioned from another field into UX design. If you’re making a career change into UX design, consider supplementing your bio with formal education—platforms like Treehouse offer browser-based coding and design courses that can help build your foundational skills and demonstrate commitment to the field.

Jenevieve Ghaly is a junior/entry-level UX designer from Los Angeles. Although Jenevieve has limited experience in UX, she highlights the value her psychology degree has for understanding human behavior:

“Hi! I’m a UX/UI Designer with a background in Psychology, which gives me a unique edge in empathizing with users and improving their experience through design. My research experience has refined my problem-solving skills and user insights. I’m constantly seeking new ways to learn and grow through real-world experiences.

My skills include user experience design, interaction design, user research, collaboration, problem-solving, and organization.

Let’s work together to create a seamless user experience using tools such as Figma/FigJam, Miro, Adobe XD, and Trello.”

Mid-Level UX Designer

A mid-level UX designer typically has between 2 and 5 years of experience. They have a solid foundation in UX design principles and have completed multiple projects, demonstrating their skills and ability to work independently or within a team.

Sandra Ekpechi is a mid-level UX designer from London, UK. Her bio is succinct while highlighting her core skills and experience:

“Hey there, I’m Sandra 👋🏼

🌐 I’m a user experience designer at MachineMax based in London, UK. Previously a UI/UX designer at EveryFarmer. I optimize business goals by solving human problems through user research and design.

🎨💭 I believe a product is wholesome if different kinds of users feel seen during their interactions with the product. Hence, I am passionate about human psychology, inclusive and accessible design, as well as cross-functional collaboration within teams.

🧩 In my spare time, I love to build legos, cycle, and binge standups on Netflix.”

Senior UX Designer

An expert UX designer has more than five years of experience and has demonstrated high proficiency in their craft. They may have an extensive portfolio of successful projects, a strong understanding of advanced UX design concepts, and possibly a leadership role or mentorship experience.

Adham Dannaway is an expert UX Designer and Product Designer from Sydney, Australia. We featured Adham’s website in our UX Portfolios article. Adham’s about page showcases his impressive resume with text, case studies, and visual design elements; here is the first paragraph:

“I’m a product designer based in sunny Sydney, Australia. Since 2005, I’ve enjoyed turning complex problems into simple, beautiful and intuitive designs. When I’m not pushing pixels, you’ll find me cooking, gardening or working out in the park.”–we recommend reading his entire bio for inspiration and ideas here.

Other notable UX designer bio examples:

Camryn Manker (portfolio website)
Melody Koh (portfolio website)
Christopher Wong (LinkedIn)
Allison Milchling (portfolio website)
Vera Chen (portfolio website)
Elisa Volpato (LinkedIn)

Importance of a Well-Crafted UX Designer Bio

A compelling UX designer bio showcases your unique value proposition, highlights your skills and experience, and increases professional opportunities. Your bio must inform potential employers, clients, and peers about your background and explain your design philosophy, problem-solving approach, and personal values.

A UX designer bio aims to create a memorable first impression, establishing your credibility in the field and distinguishing you from other professionals. A well-structured and engaging bio opens doors to networking, collaboration, and career advancement opportunities. Lastly, your bio will be vital in building your personal brand and positioning yourself for success in the competitive UX design landscape.

5 Key Elements of a Compelling Designer Bio

Personal brand statement

A personal brand statement concisely captures your unique strengths and value proposition as a UX designer. It should communicate your design philosophy, the problems you solve, and the impact you create in just a few sentences. This statement must hook readers (recruiters, clients, hiring managers, etc.) and encourage them to learn more about your expertise.

Relevant experience

Highlight your relevant experience by showcasing your background in UX design, notable projects you’ve worked on, and the industries or clients you’ve served. Focusing on experiences demonstrating your ability to deliver results and solve design challenges helps establish your credibility and showcases your adaptability in different contexts.

Skills and expertise

Emphasize your core UX design skills and any specialized expertise that sets you apart. Consider including your proficiency in design tools, user research methods, prototyping techniques, graphic design abilities, and familiarity with programming languages or front-end frameworks. Showcasing your technical skills (HTML, CSS, and Javascript), hard skills, and soft skills demonstrates your well-roundedness and ability to contribute effectively to a team or design project.

Accomplishments

Share your professional accomplishments, such as awards, certifications, or successful projects, to demonstrate your impact in the UX design field and previous organizations. Quantify your achievements using metrics like increased conversion rates or improved user satisfaction scores. Highlighting your accomplishments showcases your ability to drive tangible results and create meaningful user experiences.

Personal values and characteristics

Include the values and characteristics that make you a unique UX designer. These can be your approach to collaboration, your dedication to user-centered design, or your passion for continuous learning. By sharing your personal traits, you connect with readers on a deeper level and present yourself as a well-rounded professional with a strong sense of purpose.

Tailoring Your UX Bio for Different Platforms

Resume

Word count recommendation: 100-150 words

Your resume bio should be concise and focused, summarizing your core skills, experiences, and accomplishments relevant to the job description you’re applying for. It serves as an introduction to your resume and provides a snapshot of your unique value as a UX designer.

Example: If the job posting emphasizes user research skills, highlight your experience conducting interviews, surveys, and usability testing, along with any notable outcomes from those projects.

Word count recommendation: 200-300 words

Your LinkedIn bio (About section) offers more flexibility than a resume bio, allowing you to delve deeper into your personal story, experiences, and professional goals. Use this space to showcase your personality and connect with your network on a more personal level. Also, use keywords strategically in your About section and throughout your LinkedIn bio so you show up in search results.

Example: Share a brief story about what inspired you to become a UX designer or discuss your passion for creating accessible and inclusive digital experiences.

Personal website or portfolio

eugenie lee design user experience portfolio

Word count recommendation: 300-500 words

Your UX design portfolio or website bio offers the most freedom to express yourself and provide a comprehensive overview of your UX design journey. Treat this as a space to share your design philosophy, showcase your thought leadership, and further detail your experiences and expertise.

Example: Explain your unique approach to UX design, such as using empathy to understand user needs or employing iterative design processes to refine and optimize user experiences. You may also create blog posts about your design approach and philosophy–which you can link to from your bio–to establish yourself as an expert or thought leader.

Best Practices for Writing a UX Designer Bio

Showcase your unique value proposition

Explain what differentiates you from other UX designers, highlighting your specific skills, background, or niche expertise.

For example: “As a UX designer with a background in psychology, I specialize in creating intuitive and emotionally resonant user experiences for mental health apps.”

Emphasize your design philosophy

Share the principles that guide your design process and demonstrate how they shape your work.

For example: “I firmly believe in designing with empathy, putting users at the center of every decision to create products that truly resonate and improve lives.”

Highlight your problem-solving approach

Describe your methods for tackling design challenges and showcase how you have successfully applied them in previous projects.

For example: “Using a blend of data-driven insights and user testing, I develop innovative solutions to complex problems, leading to a 25% increase in user satisfaction in my last project.”

Quantify your achievements

Use specific UX metrics to demonstrate the tangible impact of your work, highlighting your ability to deliver results.

For example: “I have successfully led the redesign of 10+ mobile apps, resulting in a 35% average increase in user engagement and a 20% reduction in churn rate.”

Demonstrate your ability to work in a team

Share examples of your teamwork, collaboration, and communication skills to illustrate your value as a team player.

For example: “As a team lead, I foster a collaborative environment, working closely with developers, product managers, and stakeholders to ensure seamless execution of user-centered design solutions.”

Keep your bio concise and engaging

Write a concise bio using active voice and avoiding unnecessary jargon or fluff. A tool like Grammarly can help optimize your bio for grammar, fix sentence structures, and optimize for readability.

For example: “I’m a passionate UX designer dedicated to creating seamless, user-centric digital experiences that drive engagement and improve lives.”

Updating your bio regularly

Regularly review and update your bio to reflect your latest skills, experiences, certifications, and accomplishments, ensuring it stays current and accurately represents your professional growth.

For example: “I’ve recently completed Content Design London’s Advanced Content Design course, which has enhanced my expertise in creating user-centered content for digital platforms. This new skill set will enable me to deliver more effective UX design solutions that cater to diverse user needs.”

Showcase Your UX Skills With UXPin

Leverage UXPin’s advanced features to build an impressive portfolio exhibiting your wireframing, mockups, and interactive prototyping proficiency. Using UXPin to create visually engaging, high-fidelity prototypes will demonstrate your ability to bring design concepts to life, effectively communicate your design vision, and showcase your problem-solving skills in real-world scenarios.

Is your current portfolio in Sketch or Figma? Import your projects into UXPin to impress recruiters, clients, and hiring managers with UXPin’s advanced prototyping features. Sign up for a free trial to build your first interactive prototype with UXPin today.

Try UXPin for free

App Design Mockup — How to Create it Fast?

App design mockups play a crucial role in the design process by visualizing a mobile app’s user interface and allowing designers to refine aesthetics and collaborate with stakeholders. By enabling design refinement, facilitating feedback, and enhancing usability evaluation, mockups contribute significantly to the app’s overall success and help create a seamless user experience.

This comprehensive article covers various aspects of app design mockups, from their essential elements and best practices to leveraging open-source design systems for faster mockup creation.

Create high-quality mockups and prototypes leveraging the power of code-to-design in the UX design process with UXPin Merge. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

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

What is an App Mockup?

An app mockup is a visual representation of a mobile UI that showcases its layout, UI elements, and overall aesthetics. Unlike wireframes, which focus on structure and functionality, mockups incorporate more UI detail, including colors, typography, and images. Designers use these mockups to refine the app’s aesthetics before moving to high-fidelity prototyping and usability testing.

Purpose and benefits of creating mobile app mockups

Visual communication: Mockups help designers and stakeholders visually understand the app’s design, ensuring everyone is on the same page regarding its appearance and functionality.
Design refinement: Creating mockups enables designers to experiment with different design elements, iterating and improving the app’s aesthetics before prototyping and, later, the design handoff.
Feedback and collaboration: Mockups facilitate discussions and feedback among team members and stakeholders, allowing for better collaboration and design decisions.
Usability evaluation: Although not typically interactive, mockups can provide insights into the app’s usability, identifying potential issues early in the design process.
Efficient development: By resolving design-related questions during the mockup and prototyping stage, designers can save engineering time and resources, reducing the need for costly revisions later.

How do mockups fit into the overall design process?

Mockups are integral to the mobile app design process, bridging the gap between wireframes and interactive designs (prototypes). They typically follow the wireframing stage, where the design team maps the app’s structure and functionality.

Once the wireframes are approved, designers create mockups to add visual detail, exploring the app’s aesthetics and UI design elements. After finalizing the mockup, the design team moves into the prototyping phase, adding interactivity and testing the app’s usability.

This structured approach ensures a smooth transition between each stage of the design process, allowing for iterative improvements and effective collaboration throughout the design process.

Essential Elements of App Design Mockups

Interface layout and structure: Establish a clear, intuitive design that effectively organizes content and UI elements. Prioritize usability and maintain a consistent structure throughout the app to ensure a seamless user experience.
Typography and font choices: Select legible and accessible fonts that align with your brand identity. Consider readability across various mobile devices and screen sizes, and maintain consistency in font usage to create a cohesive visual experience.
Color scheme and branding: Choose a color palette that complements your brand identity and enhances the app’s aesthetics. Use colors to create contrast, draw attention to key elements, and improve usability by adhering to accessibility guidelines.
Imagery and icons: Incorporate high-quality images and icons to support your app’s content and enhance its visual appeal. Opt for a consistent visual style and optimize graphic elements for various screen resolutions.
Interactive elements and navigation: Design clear and intuitive navigation elements, such as buttons, menus, and tabs, to guide users through flows and tasks. Ensure that interactive components are easily identifiable, responsive, and consistent throughout the app to promote a smooth user experience.

Best Practices for Creating App Design Mockups

Start with low-fidelity wireframes

It’s standard practice to create low-fidelity wireframes before mockups. These wireframes let you focus on the app’s layout fast. This approach enables you to identify and address issues with the app’s structure and information flow early in the design process, ensuring a solid foundation for the mockup and prototyping stages.

Maintain consistency with design guidelines and principles

To create visually appealing and functional mockups, follow established design guidelines and principles that involve consistency, hierarchy, and alignment. These best practices will result in a cohesive and professional app design that meets user expectations and promotes a positive product experience.

Prioritize user experience and usability

User experience and usability guides the mockup design process. Consider load times, accessibility, and device compatibility to ensure your app caters to diverse users.

Collaborate and gather feedback

Actively seek feedback and input from team members and stakeholders during the mockup process. Collaboration encourages diverse perspectives, leading to innovative solutions and more refined designs. Use mockups as a communication tool to facilitate discussions and address concerns before moving on to the prototyping stage.

UXPin’s Comments feature makes collaboration and feedback effortless–even for collaborators who don’t have a UXPin account. Team members can tag each other, assign comments and mark them as resolved upon completion.

Iterate and refine your mockups

Continuously iterate and improve your mockups based on feedback and testing. Refining your designs throughout the process ensures you address issues and deliver a polished, high-quality app. Embrace the iterative nature of design to create a final product that meets user needs and stands out in the competitive app marketplace.

Leveraging Open-Source Design Systems for Faster Mockups

What are open-source design systems?

Open-source design systems (component libraries) are comprehensive collections of reusable UI components, patterns, templates, and guidelines that help designers create consistent and cohesive app mockups more efficiently. By leveraging these design systems, designers can streamline their workflow, maintain a consistent visual language, and focus on refining app-specific features and user experiences.

Benefits of using open-source UI libraries for app mockup design

Time savings: Using pre-built components from a design system can significantly reduce the time spent creating mockups from scratch. For example, drag and drop a navigation drawer onto the canvas instead of designing one from scratch. If your app relies on third-party data sources, you might also consider solutions like DreamFactory, which provides governed API access to any data source, allowing you to prototype with real backend connectivity without lengthy integration work.
Consistency: Design systems promote visual and functional consistency across the app. For example, applying the same color scheme and typography throughout the app ensures a cohesive user experience.
Scalability: Components in design systems are built for scalability, making it easier to adapt your app for future changes. For example, designers can combine existing elements to create new patterns and components, thus maintaining consistency while scaling quickly.
Collaboration: Design systems facilitate better cooperation among designers and developers by creating a single source of truth. For example, shared design assets and guidelines can streamline team communication and handoff.

Popular open-source design systems to consider

MUI: Modeled off Google’s Material Design, MUI offers a versatile design system with comprehensive guidelines for creating visually appealing and functional cross-platform apps.
Fluent Design System: An open-source, cross-platform design system developed by Microsoft with components and patterns for Web, Windows, Android, and iOS.
Ant Design: Ant Design focuses on enterprise-level app design, providing a comprehensive set of high-quality components and patterns for desktop and mobile applications.

Turning Your App Design Mockups into Interactive Prototypes

What is an interactive prototype?

An interactive prototype is a dynamic version of an app mockup that simulates the app’s user interface (UI) and functionality, allowing users to interact with and navigate through the app as if it were a fully developed product.

Unlike static mockups, interactive prototypes include animations, transitions, and clickable elements that accurately represent the app’s user experience. Designers use these prototypes to conduct usability testing, gather user feedback, and refine the app’s design and functionality before moving into the development phase.

The benefits of interactive prototyping

Usability testing: Interactive prototypes enable designers to test the app’s usability and functionality, revealing potential issues before development begins.
Realistic user experience: Interactive prototypes accurately represent the final app, allowing stakeholders and users to experience realistic flows and interactions.
Improved collaboration: Interactive prototypes facilitate better communication and collaboration between designers, developers, and stakeholders, ensuring everyone understands the app’s intended functionality.
Faster iteration: Designers can quickly iterate on interactive prototypes, making adjustments based on user feedback and usability testing to refine the app’s design and functionality.

Tips for transitioning from mockups to interactive prototypes

Identify key interactions: Before creating a prototype, determine the essential user interactions and app flows you want to test and validate.
Use code-to-design prototyping tools: Leverage specialized interactive prototyping tools to transform your mockups into interactive prototypes efficiently.
Animate transitions: Incorporate animations and transitions to enhance the app’s user experience and provide a more realistic representation of the final product.
Conduct user testing: Engage with real users to test your prototype, gather feedback, and identify areas for improvement.
Iterate and refine: Continuously iterate on your prototype, incorporating user feedback and usability test results to refine the app’s design and functionality before development begins.

Designing App Mockups and Interactive Prototypes With UXPin Merge

UXPin Merge is a code-based technology that allows designers to use fully interactive code components in the product design process without technical skills or writing a single line of code!

With Merge, designers can go from sketching to wireframing, mockups, and interactive prototyping effortlessly–and in a fraction of the time than traditional UI kits and image-based design tools.

Another significant Merge benefit is that it creates a single source of truth between design and development. Designers use visual elements for the design process, while engineers use the code behind them, both pulled from the same repository.

Designers can preview Merge prototypes in the browser or the UXPin Mirror app for native applications–perfect for cross-platform testing. UXPin provides designers with canvases for popular mobile devices, including iPhones, iPad, wearables, and Android.

Merge allows you to import any open-source component library or your product’s design system into UXPin:

Git Integration: direct syncing to React-only design systems hosted in a repository.
Storybook Integration: Connect any Storybook to UXPin, including React, Vue, Angular, and Ember libraries.

Enhance your mockup and interactive prototyping process with the world’s most advanced design tool. Visit our Merge page for more details and how to request access.

Discover Merge

Top Books About Product Design that Will Push Your Skills Forward

As UX designers, our prime job is to enhance user experience via creative, technologically-sound designs. The market out there is constantly evolving, and as dynamic professionals in the UX design field, it’s essential for us to explore new arenas to boost the quality of our work. UX books are a great way to gain insight into new areas of UX design and open our minds to collaborations we never knew existed.

UX books help you gain a fresh perspective, helping you refine your craft, and come up with unique, impressive ideas. This makes working as a team with developers a complete cakewalk, as you’re in the position to contribute value-enhancing solutions to the team.

So if you’re looking for the best books about product design to hone your craft, your search has ended right here! We’ve curated a list of the best product design books. Read on!

Simplify product design process, optimize design handoff, and improve collaboration between design and engineering. Discover UXPin Merge, a revolutionary technology for bridging the gap between code and design. Request access.

Reach a new level of prototyping

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

“The Design of Everyday Things” by Don Norman

Don Norman is synonymous with modern UX design. His book ‘The Design of Everyday Things’, published back in 1988, offers deep insight into the relationship between any product and its user.

It helps you understand how you can bridge the gap between what a product is intended to do, and how the user understands it. The best part about this book (which was published three decades ago) is that its content is still relevant – just as it was back then.

Best for:

UX designers looking for a fresh perspective towards designing.
Product managers who want to discover fundamentals of interaction design.

Topics covered:

Psychology of everyday things and how they are relevant to human-centric design.

What you’ll find:

Five principles to optimize the relationship between a product and a user via design.
Simple rules (with examples) to help you create Human-centered Design (HDC).

“Don’t Make Me Think” by Steve Krug

Steve Krug’s “Don’t Make Me Think” is a simple, straight-to-the-point book on UX design. The book’s title itself is intriguing, indicating that every time a UX designer creates something, it should be with the approach of “not making the user think.”

Steve emphasizes on ‘simplicity’ of UX design, rather than the superficial aspects such as impressive user interface or lengthy content. He has elaborately explained the concept in this book.

Best for:

Anyone involved in creating digital products.

Topics covered:

Common-sense approach towards app and web design.

What you’ll find:

Why research is important, even for established UX designers.
Real-world analogies to help you create accessible and simple user interfaces.

“Hooked: How to Build Habit-Forming Products” by Nir Eyal

Nir Eyal wrote this product design book to help designers and business people understand what it takes to win over and retain users. He sheds light on the Hook Model, i.e., a four-step process he’s seen in many successful products.

In this book, you’ll learn what makes people want to return to your website, app, or product. Spoiler alert – it doesn’t have to come down to paid ads like retargeting campaigns!

Best for:

Designers who want to learn more about human behavior.
Product managers who want to increase conversions.
Startup owners who want to increase ROI of what is already a great product.

Topics covered:

User behavior and psychology.

What you’ll find:

Tips on how to build desirable user habits.
Examples of products that successfully ‘hook’ their users – from Apple to Pinterest and Twitter.

“Lean Startup” by Eric Ries

This book is the perfect guide for budding (and established) entrepreneurs, and it redefines the way startups are established. ”Visualize, Steer, Accelerate’ are the three aspects Eric Ries points to as the secret behind successful businesses.

The book also helps us understand the importance of creating value-based products for customers rather than focusing on innovation of products. If you’re building a startup with limited resources, Adalo is a no-code app builder that pairs AI-powered generation with a visual canvas, allowing entrepreneurs and business teams to design and publish custom database-driven apps to iOS, Android, and web without developers—perfectly aligned with the lean startup philosophy of rapid iteration and MVP development.

Best for:

Entrepreneurs or anyone planning to start their own venture.
Designers who want to adjust their product design process to a lean environment.

Topics covered:

How to exercise the freedom to experiment with product development.
How to measure success and failure optimally.

What you’ll find:

Five main principles for creating a lean startup.
How to mitigate against innovation risk in a budding or growing startup.

“Change by Design” by Tim Brown

In his book, Tim Brown elaborately describes how the role of design has changed dramatically over the years.

Today, design is more disruptive and plays a critical role in the success of any new product in the market. Designers need to work toward incremental innovations to reinvent products, services, and business models – and this book precisely tells you how to do it.

It talks about how designers need to employ their sensibilities and methods to match the needs of people with strategies compatible with the viability of the business.

Best for:

Enterprise-level managers who want to introduce innovations.
UX designers looking to hone their design decision making skills.

Topics covered:

Evolution from design to design thinking.
How to offer impeccable user experience to users.

What you’ll find:

Techniques and strategies of design for businesses at all levels.
Approach toward design thinking.

“Laws of UX: Using Psychology to Design Better Products & Services” by Jon Yablonski

Human psychology plays an important role in UX design, and that’s precisely what Jon Yablonski has emphasized in this book. Understanding how users interact with different interfaces is one of the most important non-technical skills that every UX designer should have.

The book is a practical guide on how to apply psychological principles to build products and experiences, backed by examples of popular apps.

Best for:

Senior UX designers.
Product managers.
Startup owners.

Topics covered:

User behavior and psychology that is most useful for UX and UI design.
Framework for applying psychological principles in design and product development.

What you’ll find:

Predictive models, inclusive of Fitts Law, Jacob’s Law, and Hick’s Law.
Tips for effortless application of psychological principles in the design process.

“Solving Product Design Exercises: Questions & Answers” by Artiom Dashinsky

Artiom Dashinsky’s book is indeed a perfect guide for beginner UX designers who are figuring their way out of the world of UX design. It helps decode the approach to solving design exercises, practice product design, and prepare designers for Ux or UI design–focused interviews.

The book also gives insight into the skill set requirements for modern designers, and how they can adjust to the changing market.

Best for:

Beginner UX designers or designers looking to switch jobs.

Topics covered:

Preparing for design interviews.
Building an impressive portfolio for landing an attractive design job.
Stepping up your design career with additional skills, such as graphic design.

What you’ll find:

A 7-step framework for solving product design exercises.
30+ examples of exercises similar to those used by reputed companies.
Five full solutions for product design exercises.

“Continuous Discovery Habits: Discover Products That Create Customer Value and Business” by Teresa Torres

A designer’s role is dynamic – it keeps changing with time and the requirements of users. This is precisely why, as a designer, your job doesn’t end in creating an enjoyable user interface.

You also have to work on it continuously to ensure the products and services remain relevant and add value to users. This is the topic Teresa Torres focuses in her book, “Continuous Discovery Habits”.

https://www.youtube.com/watch?v=_23QuT-PVFk

Best for:

Designers looking for ways to thoughtfully improvise on products they have already worked on.
Product managers who want to better manage their product team.

Topics covered:

Ways to constantly evolve the UX of products and services to maintain their relevance among users.

What you’ll find:

Methods to assist designers with the process of continuous discovery in UX design.

“Just Enough Research” by Erika Hall

This guidebook by Erika Hall talks about how good user research (which is the backbone of UX design) is more about asking the right questions and finding the answers to them.

From the UX design perspective, this book is super helpful, as it lists out trusted and effective research methods that you can implement right away, irrespective of the size of your team or budget you’re currently working with.

Best for:

UX designers at all levels of experience.
Product managers who want to build a user-centric product.

Topics covered:

Research methodology to be followed to gain the right insights into designing UX for any product.

What you’ll find:

Framework for designing a thorough research process for products.
How to align the goals of the product with the expectations of stakeholders.
Methods to gather and assess data.

Bonus reading: Free eBooks from UXPin

We’ve listed out the top 9 UX designing books, and we hope you’ve found just the right pick for your next product design read. We also recommend that you take a look at UXPin’s free ebook library. Dive in and explore the diverse collection of books we’ve written on mobile & web prototyping, wireframing, usability testing, mastering the design process, and more.

If you’re looking for a tool that supports some of the world’s top product design teams, take a look at UXPin Merge. Among others, it allows you to create consistent prototypes with React, Storybook, and npm components. Ready to take it for a spin? Request access to UXPin Merge.

Discover Merge

UX Customer Journey — How to Map Out User Experience

Customer journey maps are effective visualizations that help organizations understand their customers and create better experiences. Product teams use these journey maps during the design process to solve usability issues, streamline user experiences, and identify opportunities that help the organization achieve its business goals.

Creating customer journey maps requires research, collaboration, the right tools, and an appropriate visualization format. Luckily, there are plenty of tools to streamline journey mapping, which we cover later in this article.

Build fully interactive prototypes of your user journeys that accurately represent the final product experience. Sign up for a free trial and enhance your customer experiences with UXPin.

What is a UX Customer Journey?

A customer journey represents the steps customers go through when interacting with a product, service, or business process. Companies use journey maps to visualize this end-to-end process and identify customer needs across multiple touchpoints.

User journey map vs. customer journey map

While the theory and application are similar, there is a slight difference between a user journey map and a customer journey map:

User journey map: A visual representation of the steps to complete a specific task or goal.
Customer journey map: A broader view of the entire customer experience across multiple touchpoints, including all the interactions with an organization.

Benefits of mapping the customer journey

Mapping customer journeys offer many benefits for organizations and teams, notably improving user experience and customer satisfaction by identifying pain points and opportunities within customer journey management initiatives.

Some key benefits of customer journey maps include:

Enhanced customer understanding: helps organizations gain insights about their target audience’s needs, preferences, motivations, and pain points by visualizing the experience from the customer’s point of view.
Pinpoint issues and opportunities: allows teams to identify which steps cause difficulty or frustration for customers. Conversely, the organization can find areas for improvement and innovation.
Streamlined and consistent experiences: organizations can identify and fix inconsistencies and gaps across multiple touchpoints, creating a more cohesive and consistent user experience.
Improve customer satisfaction and loyalty: by streamlining and optimizing product processes, organizations improve customer satisfaction leading to increased loyalty, recommendations, and growth.
Informed decision-making: journey maps help teams across the organization make decisions about design, development, marketing, etc. Many organizations use these visualizations to prioritize features, updates, and investments.
Cross-functional collaboration: customer journey maps allow organizations to visualize how customers pass through each department, creating opportunities for teams to collaborate and find ways to improve the customer experience at each touchpoint–UX design, marketing, customer support, social media, etc.
Creating benchmarks and continuous evaluation: organizations can use customer journey maps to evaluate projects and how products evolve and improve with releases.

Customer Personas – The Foundation for Customer Journey Maps

A user persona (customer persona) is UX research artifact design teams use as a fictional representation of a user group, including their demographics, behaviors, goals, and pain points.

These user personas are the foundation for customer journey maps because they provide the framework for understanding how different types of users engage with the organization and its products.

For example, if a company is designing a fitness app, the research team might create personas for three primary user groups:

Gym-goers
Runners
Yoga practitioners

These three user personas will have different needs, priorities, goals, challenges, and ambitions. Their interactions with your brand and how they enter customer journeys will also differ.

Incorporating personas into the customer journey

User personas give designers a start and end goal for customer journey maps. They can use the persona’s behavioral patterns to highlight how these users interact with a product or service and tailor content that meets their needs.

Returning to our fitness app example above: Researchers learn that yoga users prefer to use the desktop application at home, while gym-goers use the mobile app in their local gym. The runners view their daily running program on a mobile device before their run and don’t view the app again until they return.

The customer journey maps for these three users will look completely different, each with varying steps, challenges, and goals.

This example demonstrates how customer journeys for each persona vary and the importance of separately acknowledging each group’s needs, behaviors, challenges, and goals.

Stages of a Customer Journey

There are several key stages of a customer journey:

Awareness: the moment someone becomes aware of your brand through social media, paid ads, word-of-mouth, etc.
Consideration: customers research your product and compare it to others by reading reviews, comparing prices, and evaluating features.
Onboarding: once customers decide to use your product, they set up an account and learn to use its features. If your product uses a freemium model, these people may be users before converting to paying customers.
Engagement: customers regularly use and engage with your product, its features, and its content. During engagement, they often upgrade to paid services and make purchases.
Support: customers may require support during their journey. Organizations must answer questions (customer service, docs, etc.), identify ways to streamline experiences, and reduce support queries. Consolidating those questions in a ticketing system gives teams one record per customer, which both streamlines the experience and cuts repeat queries.
Retention & loyalty: when customers have positive engagement and support experiences, they will continue using the product and recommend it to others. Companies focused on retention may use Baremetrics, a subscription analytics platform that helps reduce churn and recapture lost revenue through failed-payment recovery and financial forecasting.

Touchpoints and Channels

Touchpoints and channels are points of interaction between a brand and its customers.

Touchpoints

Touchpoints are the interaction points between a customer and a brand, including physical, digital, and emotional. Some touchpoint examples include paid ads, social media posts, customer service interactions, and product experiences.

Channels

Channels are the mediums or platforms delivering these touchpoints–for example, social media platforms (Facebook, Instagram, Twitter, etc.), email marketing, ad channels (Google Ads vs. Facebook Ads), digital products, and physical locations (stores, service centers, events, etc.).

Organizations map these touchpoints and channels to identify areas for improvement and optimize the customer experience.

Emotions, Motivations, and Pain Points

Understanding a user’s emotions, motivations, and pain points throughout the customer journey is crucial, as these elements drive user actions and decision-making.

Here is a rough outline of how these core user elements relate to each other:

Emotions: The feelings people experience at each stage of the customer journey, including excitement, happiness, frustration, disappointment, and anger. Designers use empathy maps to visualize these emotions across the customer journey.
Motivations: The reasons why people take action at different stages of the customer journey.
Pain points: The challenges or obstacles customers experience during a customer journey.

By identifying these factors at each stage of the customer journey map, product teams can create solutions to reduce and mitigate problems while streamlining customer experiences.

Creating a Customer Journey Map

Select the appropriate format and tools for your journey map

The format and tools required for your journey map will depend on its complexity, level of detail, and available resources. Here are some tips:

Consider your audience: who is the journey map for, and what are their needs? Do you need a high-level overview or a detailed step-by-step analysis?
Choose a format: the level of detail will dictate the structure and medium of your journey map, including flowcharts, diagrams, infographics, and spreadsheets.
Use tools: there are many tools for creating and sharing high-quality journey maps, including Lucidchart, UXPressia, Canva, Miro, Mural, and design tools.
Find collaborators: identify teams, stakeholders, and departments that can offer insights and different perspectives about your customers to make journey maps as accurate and relevant as possible.

Collect and incorporate data from various sources

List the touchpoints and channels customers will have with your brand for the specific journey, including website, social media channels, customer service, etc.
Gather research data from customer surveys, user research, user interviews, analytics (product, social media, etc.), and other relevant sources.
Analyze the data to identify patterns, trends, and behavior. The key is to find common customer pain points and friction across the journey.
Create a visual representation of your customer journey, illustrating touchpoints and interactions and noting customer emotions, motivations, and pain points at each stage.

Visualize the customer journey in a clear and engaging way

Use your research to create a visualization of your customer journey. Start by sketching the journey and touchpoints or create a simple flow diagram mapping each step.

We recommend using customer journey map templates from Mural, UXPressia, or Miro to streamline the process and produce beautiful visualizations to share with your organization. You can even use a free whiteboard tool like Google Jamboard or create your journey map in a spreadsheet.

Recommended reading from UXPressia: Customer Journey Mapping Mistakes and How to Avoid Them.

Customer Journey Map Examples of Templates

Here are some customer journey map examples of templates that you may use at work or as an inspiration for your own visualizations.

user journey map interaction design example min — Source: Interaction Design Foundation

customer journey map example miro min — Source: Miro

nngroup customer journey map min — Source: NN Group

lucidchart customer journey map example min — Source: Lucidchart

basic customer journey map example min — Source: Lucidchart

customer journey map example uxpressia min — Source: UXPressia

Design, Prototype, and Test Customer Experiences with UXPin

Prototyping and testing are crucial for iterating and evolving customer experiences. Designers must assess various user experiences within a customer journey to ensure they’re free of roadblocks, usability issues, and friction.

Product design teams can use UXPin’s advanced features to build prototypes that accurately replicate the final product experience. These interactive prototypes give designers meaningful, actionable feedback from usability participants and stakeholders to iterate and improve. Create beautiful, intuitive product experiences your customers will love with UXPin. Sign up for a free trial.

Try UXPin for free

5 Key Design System Challenges and Lessons Learned

A report UXPin co-published with Whitespace identified five enterprise design system challenges at some of the world’s leading organizations. Within these five challenges, the common thread is “how do we achieve a single source of truth?”

This challenging question pertains to everything from design system documentation and components to tools and governance. Organizations struggle to maintain consistency and cohesion, which ironically is what a design system is supposed to accomplish.

Learn from 19 globally recognized companies about design system challenges and how to overcome them in our insightful report. Get your free copy.

Create an efficient design process and help your designers and developers share a single source of truth in both of their workflows. Discover more about UXPin Merge.

Reach a new level of prototyping

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

The Challenge of Tools

Most companies still use image-based design tools like Figma and Sketch during the design process. While these tools are easy to learn and make product design accessible for designers, they have many shortcomings, most notably limited interactive prototyping capabilities.

Companies rely on plugins or build custom solutions to complete these image-based tool stacks, which increases costs and creates workflow complications.

A single source of truth is the primary goal for every organization using a design system. Ideally, they would have a single tool for the entire product development process.

A solution to the tool challenge

Some companies have found a solution to the tooling challenge with UXPin Merge, allowing designers to build prototypes with coded UI components. This component-driven product development workflow gives organizations the single source of truth they want while allowing designers and engineers to work within their comfort zones.

Design teams still use a design tool during the design process but use fully interactive code-based UI components in UXPin rather than the image-based UI kits they’d use in Figma or Sketch.

Merge syncs UXPin to the company’s design system repository via Git or Storybook, so designers use the same components during the design process as engineers use to develop the final product.

The Challenge of Documentation

Documentation is the biggest design system maturity challenge for the companies we interviewed. Maintaining and updating a design system and its documentation is a resource-hungry process that slows maturity.

Design system documentation helps facilitate buy-in, training, and workflows with usage guidelines and rules. The purpose of this documentation is to increase adoption while ensuring teams deliver consistent UI experiences.

While documenting a design system sounds simple in theory, with no proper industry standard, companies struggle to execute this effectively. Some documentation solutions include:

PDFs
Online portals
Slack channels
Whiteboard tools (Miro, Mural, etc.)

Another challenge is that many companies manage more than one version of a design system–a component library for developers and a UI kit for designers. Furthermore, design teams might require multiple variations for each tool–i.e., designing in Figma and prototyping in Zeplin.

The design system team must manage library and documentation updates for all these platforms and solve any platform-specific challenges.

A solution to the documentation challenge

Modeling the documentation from successful design systems like Google’s Material Design, Shopify Polaris, Stack Overflow’s Stacks, and others allow organizations to copy what works. Finding tools that automate and unify documentation is also crucial for reducing operational burdens and accelerating design system maturity.

German-based software development agency dotSource is a fantastic example of overcoming documentation and the single source of truth challenges by switching tools. dotSource uses UXPin Merge and Storybook to manage its design system.

Using this combination, the company has achieved a real single source of truth where:

There are no inconsistencies
One change automatically syncs design and code
Documentation is always up to date
Seamless collaboration between design and development

The Challenge of Governance

Design system governance is vital for adoption and maturity, but implementing effective processes is challenging for teams who must constantly prove ROI to management–consuming valuable time and resources.

A solution to the governance challenge

Political and financial C-level support is the most effective method for overcoming design system governance challenges. Acquiring this support requires the design system team to build a strong business case that speaks to the needs and concerns of stakeholders.

Delivery Hero’s product team secured C-level support by creating a value proposition around the problem of technical debt. The team used an experiment to demonstrate how reusable design system components reduced project delivery by 57% with zero debt.

“People outside of UX have trouble understanding user experience and design thinking principles. Explaining the problem isn’t enough; you must show them what’s wrong and how it impacts the business.” Amber Jabeen DesignOps Director at Delivery Hero.

The Challenge of Adoption

Many organizations aim to achieve strong awareness and support of the design system for maximum success and company-wide adoption. Education and implementation make this adoption slow and challenging.

Adoption is particularly challenging for design-driven organizations and those with competing systems and workflows. A lack of C-level support also reduces adoption rates due to the increased effort it takes for the design system team to reach multiple teams and departments.

A solution to the adoption challenge

Organizations must treat design systems like products that require effective communication and marketing strategies for success. Some of the ways organizations overcome design system adoption include:

Involving HR and DesignOps in change management processes
Organizing design system workshops and meetups
Making the design system team more accessible through Slack, email, and other channels
Approaching teams individually
Hosting regular design system update meetings
Producing marketing and training materials

Delivery Hero uses a three-component adoption strategy for its Marshmellow design system:

Gamify: Delivery Hero uses four adoption tiers for design system usage and awards users. Team members can visualize their success on a dashboard, and the DS team encourages them to hit their next target.
Socialize: The DS team involves the organization in the design system’s key decisions and hosts regular events to connect with users and discuss challenges and successes.
Celebrate: The DS team celebrates every small win as a symbol of progress toward 100% adoption. They celebrate individual team members and overall adoption, creating a buzz and excitement about the design system.

The Challenge of Maturity

Design system maturity varies across organizations and industries. Development-driven product development teams are ahead of their design-driven counterparts due to the use of code components in design and development processes.

Most organizations are at design system maturity level three, with designers using an image-based version of the code component library. Many refer to this as a “single source of truth,” but it’s still one step away from being a fully integrated design system using one library.

A solution to the maturity challenge

As stated in the introduction, the common thread throughout the whitepaper is “how do we achieve a single source of truth?” This single source of truth is the key to achieving complete design system maturity–Stage Four – Fully Integrated.

The goal is to bring design and development into one iterative process where design handoffs, drift, inconsistencies, and technical debt are no longer issues.

UXPin Merge has proven to solve these challenges at the startup and enterprise levels. Bringing code components into the design process is the best solution for achieving stage four design system maturity–unifying designers and engineers while maximizing product coherence and consistency.

Merge’s code-to-design workflow solves many challenges outlined in our whitepaper:

UXPin does the job of multiple tools used in standard image-based workflows, eliminating the need for separate platforms for design, prototyping, testing, etc.
Using Merge with Storybook allows developers to generate documentation simultaneously with component releases and updates.
Merge streamlines governance by reducing burdensome operational tasks and manual workflows.
Increases adoption by delivering interactive components allowing designers to build advanced prototypes more efficiently and consistently.
Using Merge accelerates maturity, allowing even startups and one-person product teams to reach stage four.

Getting Started With UXPin Merge

Organizations have two options to get started using UXPin Merge for their design system:

Git Integration: Connects UXPin directly to a Git repo for React component libraries. Organizations get access to all of Merge’s features, including Version Control, Patterns, and managing JSX presets.
Storybook Integration: Connect any Storybook to UXPin, including React, Vue, Angular, and other supported libraries. The best solution for syncing DevOps and DesignOps workflows.

After the initial setup with UXPin, Merge works automatically behind the scenes syncing component updates to UXPin’s design editor, so designers and engineers always work with the same library.

Merge’s drag-and-drop design workflow makes design more accessible, even to non-designers like product owners, developers, and other stakeholders, allowing more people to build prototypes and test ideas within the organization.

Solve your design system challenges, and deliver higher quality products with fewer inconsistencies and debt using the world’s most advanced design tool. Visit our Merge page for more details.

Discover Merge

Discoverability in UX and UI Design — 9 Techniques to Try

Discoverability is crucial in effective UX design as it ensures users can effortlessly find and access features and content within an interface. A well-executed discoverability strategy helps users explore and interact with the interface more efficiently while increasing user engagement and retention, contributing to the overall success of a website, application, or product.

We explore the topic of discoverability in UX, its importance, how to test discoverability, techniques to improve, and real-world examples from Google Maps, Airbnb, Spotify, and Slack.

Get meaningful feedback about your product’s discoverability with immersive, interactive prototyping experiences from UXPin’s advanced features. Build your first interactive prototype with UXPin. Sign up for a free trial.

What is Discoverability in User Experience Design?

Discoverability in UX describes how easily users can understand, find, identify, and access a design product’s features, functions, or content. The user may not know these elements exist or the product’s full capability, so it’s essential for design teams to create discoverability and awareness.

For example, many mobile apps offer the option to swipe content for options like archive or delete–a typical feature in task apps and even Gmail. Without making this swipe feature discoverable, users may never use it and not enjoy the product’s full capability for streamlining tasks.

Optimizing discoverability creates more intuitive and enjoyable user experiences where users can complete tasks and actions effortlessly.

The importance of discoverability

Discoverability directly impacts user experience and how users interact with digital products. Good discoverability enables users to quickly and easily find, understand, and use the features and content they need.

This satisfying user experience results in more engagement and longer retention while increasing the likelihood that people share their positive experiences with others.

Here are several reasons why designers must pay attention to discoverability:

Intuitive interactions: Discoverability ensures that users can navigate and operate an interface with minimal effort with minimal guidance or instructions. This intuitive experience reduces user frustration and cognitive load.
User satisfaction: When users can effortlessly locate and use features or content, they are more likely to have a positive experience and be satisfied with the product. This satisfaction can lead to increased engagement, retention, and brand loyalty.
Faster learning curve: Improved discoverability helps users learn products and interfaces faster, allowing them to complete tasks more efficiently.
Accessibility: Good discoverability ensures that users with different abilities, including visual, auditory, or cognitive impairments, can also easily find and interact with elements in the interface.
Increased conversions and retention: When users can find content and complete tasks efficiently, they are more likely to continue using the product or service, make purchases, and recommend it to others.
Reducing support demand: When users can quickly discover and understand features, they are less likely to contact customer support, reducing costs and the need for support services.
Competitive advantage: Well-optimized discoverability results in better user experiences and satisfaction, resulting in a competitive advantage and stronger brand reputation.

Discoverability vs. findability – what’s the difference?

Discoverability refers to a user’s ability to understand a product and its capabilities and locate content and features they may not be aware of. Findability is more focused on specific features within a product, like finding a piece of blog content or a particular setting in the account preferences menu.

Check out this 3-minute video from the Nielsen Norman Group for a brief explanation of discoverability vs. findability.

Measuring and Testing Discoverability

testing user behavior prototype interaction

Designers continually evaluate discoverability to identify issues and areas for improvement. Here are some methods UX teams use to measure and test discoverability.

Usability testing

Usability tests allow designers to observe how to complete specific tasks within a product or user interface. These insights enable design teams to understand people’s actions and decisions–for example, did they use the navigation or search? Could they find the easiest route to complete tasks?

Designers can use these observations to redesign user interfaces to meet user needs and behavior–like moving the search functionality to the header of a mobile app instead of the navigational drawer where users couldn’t find it.

Heatmaps and clickmaps

Heatmaps and clickmaps allow designers to analyze users’ behavior within a product, including interactions, scrolling, clicks, mouse movements, and more. Design teams can use this data to determine which areas get the most attention and which elements remain undiscovered or underutilized.

Analytics and metrics

Analytics from products, tools, social media, and integrations provide design teams with behavioral insights such as page views, time on page, bounce rates, click-through rates, etc. These metrics allow designers to monitor discoverability implementations and identify areas for improvement.

A/B testing

A/B tests enable design teams to compare two interfaces and determine which version performs better for discoverability. This data-driven testing technique delivers the best results when testing the impact of minor adjustments, like element positioning, colors, language, comparing different assets (image or video), etc. If you A/B test multiple changes simultaneously, it’s difficult to tell which one was responsible for achieving the desired outcome.

First-click testing

First-click testing measures which element or task users interact with first, most often. This user research methodology is essential for discoverability as it tells designers whether a desired action or path is obvious.

For example, you may have a CTA on the home screen to initiate a feature, but the user’s first click is the hamburger menu because they expect to find it there rather than realizing the shortcut. Designers can conduct further tests, such as interviews, to learn why users aren’t using the shortcut and make necessary adjustments.

User surveys and interviews

Surveys and interviews provide UX research teams with direct feedback to learn how easily people find features or content and the challenges they may encounter.

Techniques to Improve Discoverability

Here are some UX design techniques for improving a product’s discoverability.

Progressive disclosure

Progressive disclosure is a design technique that gradually reveals features and content. This progressive approach prevents users from feeling overwhelmed, allowing them to learn and discover a product’s full features and capabilities in “manageable chunks.”

Tooltips and hints

Designers use tooltips and hints to draw attention and explain content or features. The hint catches the user’s eye by jiggling, enlarging, or changing the color of an element, and the tooltip popups up to provide information and context. This technique is a standard and highly effective onboarding strategy for introducing users to a product.

Contextual onboarding

Contextual onboarding is a dynamic onboarding methodology that adapts to user behavior rather than presenting someone with knowledge about the entire product. This technique is more relevant and meaningful to users because it doesn’t overload them with information until required.

Clear visual cues

Designers use icons, colors, typography, sizing, whitespace, and contrast to make important features and content stand out, making them more discoverable.

Visual hierarchy

Arrange content and features in a logical and intuitive visual hierarchy so that it’s easy to discover. Visual hierarchy also helps users understand related content and features, which can enhance the product experience.

Consistent design language

Design consistency, such as color schemes, icons, and typography, helps users develop a mental model of your product’s interfaces, making it easy to discover and interact with content and features.

Effective navigation and information architecture

A clear, consistent, and easy-to-use navigation system, including menus, breadcrumbs, and sitemaps, help users discover and explore content and features.

Many products use personalized algorithms that help users discover relevant information, features, and content based on their interests, browsing history, and other factors.

Accessibility

Designers must pay attention to accessibility, ensuring that users with diverse abilities and assistive technologies can discover and interact with content. A product may be fully discoverable for someone using their hands, but users using a keyboard or screen reader may have trouble finding or accessing the same content or features.

Real-world Examples of Discoverability

Here are some real-world examples where design teams have successfully applied discoverability.

Airbnb

In 2022, Airbnb redesigned its home screen to make its stays and types of properties more discoverable. The redesign uses a horizontal tab menu listing different property types above the search results. This feature allows users to find stays they might not have considered–for example, a historical building or tree house.

Google Maps

Google Maps uses multiple UI elements to help users discover features and content. A scrollable horizontal menu below the search field lets users quickly search restaurants, hotels, grocery stores, and other places of interest. The map also highlights points of interest and tourist attractions, so locating them without searching is easy.

Spotify

Spotify is the master of discoverability, suggesting hidden gems you never knew existed, from podcasts and artists to songs and entire playlists. The app is also in tune with your schedule and will often recommend playlists relevant to your environment or time of day, like mood music on Sunday or a focus playlist during work hours. Like many modern apps, Spotify leverages personalized recommendation engines to surface content that aligns with individual user preferences.

Slack

Discoverability is also crucial for SaaS and enterprise product design. Slack’s sidebar highlights the product’s key features and allows users to find communication channels and workspaces. The “Threads” feature is particularly helpful as users can scroll through multiple replies rather than clicking in and out of changes and message threads, reducing time-in-app and making them more productive–a crucial feature to discover!

Enhance Discoverability With UXPin

Interactive prototyping enables design teams to visualize and test discoverability with end users. UXPin’s advanced features allow designers to experiment with different layouts, navigation systems, and other UI design elements to find the most effective discoverability solutions.

UXPin’s interactive prototypes enable designers to get meaningful, actionable feedback from usability testing and stakeholders to iterate and improve.

By leveraging UXPin’s powerful features and capabilities, designers can create interfaces prioritizing discoverability, enhancing the overall user experience and the product’s success. Sign up for a free trial.

Try UXPin for free

Stakeholder Interview Questions – What to Ask About During Discovery?

Stakeholder interviews can be an anxious and overwhelming experience for first-timers wanting to impress. These interviews are crucial for UX design because they provide valuable details, context, and insights that guide projects–information designers can only get through relevant stakeholders and experts.

This article provides a seven-step template for planning and conducting stakeholder interviews, including how to prepare questions.

Get meaningful feedback from stakeholder interviews with high-quality interactive prototypes from UXPin. Try UXPin’s advanced design and prototyping features. Sign up for a free trial.

Internal vs. External Stakeholders

Internal stakeholders are people within an organization, including employees, management, execs, the board, and shareholders. These internal stakeholders are directly interested in the company’s decision-making and operations.

External stakeholders are indirectly interested in the organization, such as customers, suppliers, experts, creditors, and the community. These people don’t have decision-making power, but the company’s actions can affect them. For example, raising prices impacts customers, while discontinuing a product might affect suppliers.

This article will focus on internal stakeholders (and external experts) and how to interview them for design projects.

What is the Role of Stakeholders in Design Projects?

Stakeholders provide input on a design project’s goals, objectives, requirements, scope, budgets, and timelines. Stakeholders also offer feedback, support, and advice throughout the design process to ensure the project successfully meets its goals and objectives.

Understanding each interviewee’s role and interests can help improve communication and ensure the project meets their expectations.

What is the Purpose of a Stakeholder Interview?

Stakeholder interviews serve several purposes.

Understand business goals

Stakeholders have a high-level view of a project’s goals and objectives and how these relate to their department and the organization. Interviewing stakeholders before kick-off helps designers understand their strategic priorities and how these relate to the project.

Understand project constraints

Every project has constraints designers must work within–technical, budget, time, labor, etc. Stakeholders can help designers understand these limitations and how these might affect the project’s design and final release.

Understanding end-user needs

Stakeholders often initiate a design project because they’ve identified a user need or pain point. Talking to these stakeholders helps designers understand the problem, review existing user research, and discuss additional UX research they may need.

Stakeholder feedback sessions

Designers meet for regular feedback sessions with stakeholders throughout the design process. During these sessions, designers must explain concepts and ask stakeholders about feasibility and practicality. For example, the design team might have an idea and want to speak to a technical stakeholder to learn whether the product’s current tech stack can support it.

Stakeholder buy-in and support

Designers often have to get buy-in at various stages of the design process. These interviews include speaking to key stakeholders and getting support from decision-makers who can help advocate for design concepts and initiatives.

Mediating conflicting views

It’s not unusual for stakeholders to have conflicting views based on each department’s different strategic goals and priorities. These interviews can be tricky as designers must mediate interviews to find a win-win solution. For example, designers might present a concept that incorporates both ideas with some degree of compromise from both parties.

How do you Prepare and Conduct a Stakeholder Interview?

Step 1: Conduct a stakeholder analysis

A stakeholder analysis is a process of identifying the people who have a vested interest or power to influence a project. Designers can use their findings to list and segment stakeholders so that they can focus on key decision-makers and their business needs.

Further reading: What is Stakeholder Analysis and How Product Teams Should Do It?

Step 2: Research the stakeholder

The first step is understanding your stakeholder’s position, interests, and goals and how these relate to your project. This preparation will help tailor your questions and conversation to their needs.

The biggest mistake you can make is asking stakeholders irrelevant questions or being poorly prepared–especially for busy experts, managers, and execs.

Step 3: Set your interview goal(s)

What insights do you want to learn from the stakeholder? Exploring why you want to speak to a stakeholder is crucial for setting the interview’s goals.

Some interview goal examples include:

What are the stakeholder’s business goals?
What are the product’s technical limitations?
What is the stakeholder’s definition of success for this project?
Who are the major competitors?
What are the project’s key performance metrics/indicators (KPIs)

Defining a goal for the interview will enable you to craft and ask the right questions.

Step 4: Prepare a list of questions

Prepare a list of questions that will help gain insights into the stakeholder’s needs and expectations. The best approach to interviewing stakeholders is to ask questions as if you know nothing about the topic. This style of question encourages stakeholders to explain and elaborate in greater detail.

Stakeholder interview questions are similar to user interviews. You want to ask open-ended questions to get unbiased answers. Identify points where you want stakeholders to elaborate or go into more detail based on your interview goals.

Adam Fard, founder of the UX agency Adam Fard recommends keeping the tone conversational. “Remember, the interview should be steered in a more conversational direction. Although preparing specific questions is important, avoid asking them in a way that makes it seem like you’re just checking off bullet points on a list.”

It’s also good to prioritize your questions and ask them in order of importance in case the interview runs out of time.

Step 5: Set an agenda

Create an agenda with the topics you want to cover and how much time to spend on each. Structuring your interview will help keep the conversation flowing and ensure you get through all your questions.

Stakeholder interviews typically last 30-60 minutes, so be realistic about the time it’ll take to cover each topic.

Step 6: Conducting the interview

If the stakeholder allows it, recording interviews is best for future reference and analysis. Recording interviews negates the need to take detailed notes, allowing you to focus 100% on the stakeholder’s answers. If you don’t get permission to record the interview, get a team member to take notes so you can focus on the conversation.

Start by introducing yourself, the project you’re working on, and the reason for the interview–the goal you set in step two.

Always start your questions by asking the stakeholder about their role in the organization and their interests in the project. You’ll also want to ask what their team/department is working on (i.e., their priorities), what metrics they’re tracking, and their goals for the quarter/year. This information will help you understand their reasons and motivations.

Sarah Gibbons from the NN Group recommends using open-ended probing follow-up questions when you want more detail or clarity, for example:

Tell me more about that…?
Can you expand on that…?
Can you give me an example…?
Can you tell me about the last time that you did…?
How do you feel about that…?

Or, relating to specific ideas:

Tell me why you felt that way.
Tell me why you did that.
Why is that important to you?
Why does that stand out in your memory?

These questions are more important than the initial question because they’ll give you reasoning and insights into what the team has already tried, so you don’t waste time going down the same path.

Once you have gone through your questions, finish the interview by asking, “who else should we talk to?” This question is especially crucial if the stakeholder cannot provide a comprehensive answer or is unsure about specific details.

Step 7: Follow up

It’s good practice to follow up with an email thanking the stakeholder for their time and reminding them about any additional information or resources they would share.

Enhance Stakeholder Relationships and Increase Buy-in With UXPin

UXPin’s interactive prototypes allow stakeholders to experience design concepts like they would the final product. These high-quality prototypes offer several key benefits for stakeholder relations:

Boost confidence in design teams
Increase buy-in for ideas
Better usability testing
Identify and test more business opportunities
Improve stakeholder feedback
Enhance the final product user experience
Minimize design handoff friction
Reduce time-to-market

With UXPin’s Comments, stakeholders can leave feedback on specific features and assign comments to team members, even if they don’t have a UXPin account–perfect for collaboration with non-designers.

Enhance stakeholder collaboration and relationships with high-quality interactive prototypes from UXPin. Sign up for a free trial to explore UXPin.

Try UXPin for free

What is Product Design?

Businesses that prioritize product and good design have a significant advantage. With so many choices for software products on the market, users are looking for apps that cater to their specific needs and use cases.

In fact, 32% of customers will abandon a brand or product if they have just one bad user experience. That’s precisely why teams must focus on continuously improving their product.

Still, the specifics of what ‘product design’ entails may not be clear. What is product design, really?

Increase teamwork during the product design process. Use an advanced prototyping tool that makes it easy to collaborate on the design from start to finish. Speed up product development process by using interactive components in prototyping. Discover UXPin Merge.

Reach a new level of prototyping

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

What is Product Design?

Product design refers to the process of creating and improving digital products that address the specific problems and use cases of your target users. To do this, design teams will need to:

Conduct user research to understand who a product’s users will be.
Identify common pain points that frustrate users.
Brainstorm potential solutions to these user needs and find out how well they solve them.
Understand how their product will fit into a user’s regular workflow.
Strive towards achieving a business goals that stakeholders want.
Test and iterate a product design based on user feedback.

The end goal here is to design a product that is built around users’ needs and anticipates how the users will engage with a product.

The Difference Between Product Design and Industrial Design

Originally, the term ‘product design’ was used interchangeably with ‘industrial design’. The latter is reserved to describe the act of designing and creating real-life, material products. As the name already reveals, it was coined to describe the newly-found ability to create mass products for millions of users after the start of the industrial revolution.

For the first time in history, designers were propelled to develop solutions that weren’t heavily customized to fit the exact user. Rather, they were intended for universal use for users with various needs, at an attainable price.

Examples of industrial design can be found everywhere – from your toaster and the spoon you stir your morning coffee with, to the ergonomic desk chairs you can find at your office.

With the rise of digital products, there is now a tendency to use ‘industrial design’ and the term ‘product design’ separately. The latter is commonly used to describe the process of creating visual design for mobile and web apps. Just like their physical counterparts, these products also need to follow the right product design practices and be constantly refined to stay relevant.

In this chapter and throughout this guide, we’ll refer to ‘product design’ as the process of creating intuitive interface design for digital products. Let’s go!

5 Stages of Product Design Process

While the process of designing products is unique to each product and industry, most designers list five common stages in product design. These are:

Empathize: Product designers must learn and understand the user of the product. Who are they? What are their likes and dislikes? How do they approach problems? What types of issues with similar products frustrate them the most? At this stage, they build out detailed user personas which serve as the pillar for any new product design. This stage also involves empathizing with the business. It’s crucial to understand the business needs that stakeholders have.
Define: Here, product designer role is to identify the specific user needs a product should focus on. They should use the personas created in the previous step to evaluate which problems to tackle with their problem-solving skills.
Ideate: Designers will then brainstorm solutions to these user needs – perhaps, using techniques like design thinking, user journey mapping or storyboarding to explore and expand creative ideas. At this stage, all ideas are welcome – designers get absolute freedom to discuss potential solutions to user needs and problems.
Prototype: Designers build a prototype to test whether the product solves the necessary user problems. Prototyping also helps designers determine if they’re building the right design solution. Some designers build a low-fidelity prototype that is devoid of any interaction design, while others jump to high-fidelity prototyping and create interactive mockups of the end-product.
Test: Finally, designers test design concept (the prototype) with real users to collect feedback. This involves feedback from stakeholders, developers, and above everyone else, users. The more resemblant of the actual product the prototype is, the more accurate the feedback from user testing will be.

Bear in mind that – while the above steps might seem chronological – product design isn’t a linear, one-off process of designing a user interface. It’s iterat i ve, in which product designers continuously refine their solutions and fine-tune them for the market, testing user flows and adding useful functionalities.

What is the Role of Product Design in Product Development?

As we’ve explained in our guide on product development, designers are involved in every step of the product development lifecycle.

In the earliest stages, designers create early prototypes and wireframes to visualize products. On top of their principal task of creating visuals, product designers also engage in research, such as A/B testing, running interviews, and communicating with other product managers on the product roadmap.

Curious about product design career? Read our how to become a product designer guide.

Product design precedes software development. It unlocks a sense of clarity of what solutions should be delivered as part of the product, and how they should look and operate for the end user. As the product goes live, designers and developers collaborate closely on refining the app or website. Or, at least, that’s the approach that distinguishes the best product development teams out there!

A great example of this approach can be observed at Segment. Their Head of Product Design, Hareem Mannan, calls it a dual-track framework. In it, designers and other product team members are all involved in two simultaneous actions – discovery and delivery.

Discovery: Designers look to research and discover new ideas and validate them through testing and prototypes. This phase is driven by feedback – whether that’s from internal sources or collected from real users via surveys, interviews, or usability testing sessions.
Delivery: Once a design team has a solid idea of how the product should look or how it can be improved, they can proceed with drafting up the designs. Great UX design is achieved when designers and engineers work with the same components and collaborate together.

How can designers validate design ideas? You should collect insights from users to help identify what they need from a product. This warrants surveys and user interviews to help collect data. These insights should be combined with broader analysis. This includes:

Exploring what competitors are doing, by taking a look at their site, and verifying what people say about them on social media and product review sites
Addressing the current market conditions – will developing a feature or proceeding with a specific design help you position yourself against competitors? Also, will the product design improvement contribute to the price customers are willing to pay? This leads to the last point, i.e.:
Identifying how to outperform key competitors using great product design. Is there a better way to help users complete their journeys in products like yours? Perhaps, you can simplify the checkout process, or reorganize the information architecture?

Ultimately, to ensure a balance between delivery and discovery, prototyping is key.

By using a prototyping solution like UXPin Merge, designers and developers can use the same code components while collaborating on product. The ability to validate design ideas and move them quickly into the delivery and coding stage helps shorten production times and ensures consistency. For teams building custom applications from scratch, Adalo‘s no-code app builder pairs AI-powered generation with a visual canvas, enabling business teams to design and publish database-driven apps without requiring developers.

The Design Team’s Role in the Final Product

design and development collaboration process product

Product design involves ideating, designing, and delivering a product that accurately solves your users’ needs. It’s important to remember that product design isn’t just for building physical products anymore. Web apps, websites, and mobile apps design also involves numerous iterations and prototype testing.

While it’s a common misconception that product design refers to the initial phase of developing a product, in actuality, product design is an iterative process.

How so? As customer needs change, so must your product development and design process. Product design should be consistently improved upon, and new solutions should be constantly explored, developed, and tested.

In fact, this responsibility to build and adapt products to suit your users extends beyond the product design team. It’s the responsibility of the whole organization.

Successful product design circulates around perfecting practices and using the right prototyping tools. Here’s where a solution like UXPin Merge can do wonders. It allows designers to prototype faster, get more quality testing results, while also streamlining the design-developer handoff, thus reducing time to market and costs.

Instead of designing from scratch, designers drag and drop UI coded components to build fully functioning code-based prototypes that look and work like the final product. Discover UXPin Merge.

Discover Merge

Fluent UI vs MUI – Designer’s Comparison

Building scalable React applications from scratch is a challenging, resource-hungry endeavor. Fluent UI React, and MUI streamline this process by giving product teams comprehensive UI libraries to design, prototype, test, and develop high-quality, scalable digital products faster.

We explore these popular open-source ReactJS UI libraries in 2023 and why you might choose Fluent UI or MUI for your next project. We also introduce code to design and how to bring components from these design systems into the design process to enhance prototyping and testing capabilities.

Introduce fully interactive Fluent UI and MUI components at the prototyping phase. Build high-fidelity prototypes that have code-like fidelity and functionality. Discover UXPin Merge, a solution that makes it possible to introduce code to design. Learn more.

Reach a new level of prototyping

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

An Introduction to Fluent Design System and MUI

The Fluent Design System (Fluent UI React) and MUI (Material UI) are popular design systems primarily used for cross-platform products. The comprehensive front-end Javascript libraries include patterns like charts, graphs, advanced tables, data grids, and more, making it easy for product developers to build and scale enterprise user interfaces.

Microsoft developed the Fluent Design System in 2017 to rebrand the Microsoft Design Language (Metro). Microsoft used Fluent UI across its product ecosystem, including Windows and Microsoft 365.

While MUI is based on Google’s Material Design, the open-source project has no affiliation with Google. MUI’s founders created the UI library in 2014 to unify Material Design and React. It’s now one of the most widely used React libraries, with over 2.5 million weekly downloads on npm.

Code-to-Design Approach – A Single Source of Truth

MUI and Fluent UI offer UI kits for popular design tools, but wouldn’t it be easier if designers and engineers used the same components from design to development? This single source of truth workflow is precisely what UXPin Merge does for product development teams.

Code to design is a product development workflow that brings coded UI components into the design process using UXPin and Merge. Designers get the best of both worlds, a familiar design tool user interface with fully interactive UI elements.

UXPin Merge comes standard with the React component libraries for Fluent UI and MUI. Designers simply drag and drop components from UXPin’s Design Libraries to build fully functioning prototypes.

With Merge, design teams get all the functionality and interactivity that comes standard with Fluent UI and MUI, including fully functioning date pickers, charts, data visualizations, and more.

Design Principles

MUI and Fluent UI’s design principles are closely aligned. Both focus on motion, texture, and cross-platform experiences.

MUI’s design principles

MUI follows the design principles of Google’s Material Design 2:

Material is a metaphor: The UI library is inspired by real-world textures, light, and shadows. Its purpose is to reimagine the mediums of paper and ink.
Bold, graphic, intentional: Material Design uses typography, grids, space, scale, color, and imagery to create hierarchy, meaning, and focus for immersive user experiences.
Motion provides meaning: Subtle feedback and coherent transitions focus users’ attention while maintaining continuity. Elements transform and reorganize the environment with interactions generating new transformations.

Fluent UI’s design principles

Fluent’s design language aims to facilitate seamless cross-platform experiences that look “natural on every platform.” The design system’s five core principles include:

Light: The use of light and illumination to create a sense of depth, focus, and spatial awareness in the interface.
Depth: The utilization of layering and depth to create a sense of hierarchy and relationship between UI elements.
Motion: Purposeful animations and transitions that enhance the user experience and help guide users through interactions.
Material: Using different materials (acrylic, metallic, etc.) to create a sense of texture and physicality in the interface.
Scale: Designing for various screen sizes and input methods, ensuring the interface remains consistent and usable across different devices.

Component Libraries

MUI and Fluent UI have extensive component libraries capable of delivering high-quality cross-platform applications.

Fluent UI component library breakdown

Fluent UI has over 240 UI components with controls for React, Web Components, Windows, iOS, Android, MacOS, and cross-platform user interfaces.

Fluent UI also works with other front-end UI frameworks, including Angular, Vue, Ember, and Webpack.

MUI component library breakdown

MUI has over 200 React UI components, with an additional 240+ in MUI X, its advanced library. While MUI has a massive component library, these are primarily for web and desktop applications, lacking the same native capability as Fluent UI.

Templates

Fluent UI and MUI provide starter templates for building applications. Fluent UI’s templates are designed specifically for Microsoft products, while the MUI template marketplace offers an extensive range of dashboards, websites, eCommerce, landing pages, and more.

Customization and Theming

Fluent UI and MUI offer similar theming and customization, including core elements like color, typography, spacing, and other style properties. Both UI libraries allow dark mode switching, making it easy to create light and dark versions of your application.

While both libraries offer excellent customization, MUI is considered more customizable due to its extensive theming options, versatile component styling, and customization APIs.

Some aspects which make MUI more flexible for customization include:

The sx prop: enables inline styling for easy customization without requiring additional CSS classes or separate style objects.
Customization APIs: experimental_extendTheme is an API that extends the default theme giving developers more flexibility and greater customization.
Global style overrides: MUI allows developers to override a component’s default styles globally using the theme object. Using style overrides provides developers with more flexibility and better maintainability.
Tokens: allow you to change color, fonts, sizes, and spacing for components. MUI also enables you to add custom theme tokens to control any aspect of any UI element.

Fluent UI’s Theme Designer makes creating an exportable theme palette easy, with options for primary, text, and background colors. Developers can export the colors to CodePen in React, JSON, or PowerShell formats.

Design System Accessibility and Internationalization

Accessibility

Fluent UI and MUI prioritize accessibility and internationalization for developers to create inclusive products that serve a diverse global user base.

Both libraries offer core accessibility features for components, including:

Keyboard navigation
ARIA attributes
Accessible roles (provide additional information for assistive technologies)

Each library also offers unique accessibility features.

Fluent UI offers more assistive technology features, like “FocusZone” and “FocusTrapZone,” to manage focus in complex components and dialogs. Additionally, the “Announced” prop provides screen readers with comprehensive updates on system status for copying, uploading, lazy loading, and more.

Unique to MUI is the VisuallyHidden utility, which allows screen readers to ‘see’ off-screen content.

Internationalization

Fluent UI and MUI provide utilities and styling for right-to-left (RTL) languages. The design systems also include external integrations with localization libraries like i18next or formatjs (previously react-intl).

MUI supports component-level localization for relevant patterns like date pickers, time pickers, and calendars–features not supported without integrations in Fluent UI.

Documentation and Community

Fluent UI and MUI have excellent documentation and active communities for questions and support.

Documentation

Fluent UI and MUI provide detailed docs for components, usage examples, API references, code samples, and customization/theming.

MUI’s “How-to guides” provide additional support with details and steps for typical developer tasks and workflows, like using Typescript, routing, responsive UI, testing, internationalization, and accessibility, to name a few.

Communities

Fluent UI’s community is significantly smaller than MUI but still active and growing. Most communication happens on Fluent UI’s GitHub repository, where developers can report issues and contribute.

MUI’s GitHub repository is a developer go-to, but the design system also has several support channels, including various Discord communities, Stack Overflow, a blog, and premium support.

Recommended Use Cases

Here are some recommended use cases for Fluent UI and MUI. Both design systems are excellent for enterprise applications, but Fluent UI has better native and cross-platform capabilities and features.

Fluent UI Use Cases

Microsoft product ecosystem

One of Fluent UI’s primary purposes is for developers who want to build custom apps and services for the Microsoft product ecosystem, notably Microsoft 365.

Cross-platform enterprise applications

With a wide range of web, desktop, and native components, Fluent UI is an excellent choice for cross-platform applications. The enterprise-specific UI library, including data tables, charts, graphs, forms, and more, makes it easy to develop products that cater to business needs while creating seamless experiences across multiple devices and operating systems.

Complex web applications

Fluent UI’s advanced navigation components, like CommandBar, Nav, Breadcrumb, and Pivot, make it an excellent choice for applications with complex navigation structures or hierarchical content.

MUI Use Cases

Responsive web applications

MUI is excellent for building scalable, responsive, user-friendly web applications. The extensive library includes everything from basic inputs to complex data grids suitable for developing many types of web apps.

Customizable websites and web apps

MUI’s powerful theming and styling capabilities allow for granular control over each component’s appearance and functionality. This flexibility makes MUI the better choice for projects that require high levels of customization while maintaining ultimate consistency.

Enterprise applications

MUI combined with MUI X enables product teams to build advanced, responsive web applications, including complex components like tree views, data grids, sparklines, pagination, data filtering, and more.

Build Interactive Prototypes With UXPin Merge

With UXPin Merge, product teams no longer have separate design systems for designers and engineers. Merge connects UXPin to your design system’s repository, so designers use the same components in the design process as engineers use to develop the final product.

Any changes to the repository automatically sync to UXPin’s design editor, notifying teams of the update–creating a single source of truth across the organization. This code-to-design workflow simplifies product development, whether you’re a multi-national enterprise or a fledgling startup.

Startup TeamPassword uses a custom MUI library to prototype and test new releases in UXPin. When the team completes prototyping, they have production-ready code to develop the final product, connecting design and development like DreamFactory provides governed API access to connect enterprise applications with their data sources.

Build your first interactive prototype with the built-in Fluent UI and MUI design systems. Discover UXPin’s code-to-design solution.

Discover Merge

Dark Patterns in UX Design — Which Ones Are the Most Deceptive?

User experience design is a powerful discipline with a fine line between assistance and manipulation. Organizations often use dark patterns to trick users into decisions they otherwise wouldn’t choose. Sometimes these dark patterns don’t have malicious intent, but the result is the same.

Understanding dark patterns and their consequences is crucial for UX design teams. These deceptive design techniques harm users and could have legal consequences resulting in hefty fines from organizations like the FTC (Federal Trade Commission).

Get accurate results during usability testing using fully functional interactive prototypes from UXPin. Sign up for a free trial.

What are Dark Patterns?

Dark patterns are design techniques that manipulate and deceive users into taking specific actions–or directing them away from an intended action, like unsubscribing or downgrading. These techniques exploit cognitive biases or misdirect users to benefit the organization at the expense of their customers.

UK-based UX specialist Harry Brignull coined dark patterns when he started darkpatterns.org–an organization founded to educate companies about deceptive design patterns.

Do Dark Patterns Work?

The short answer–Yes! Dark patterns are highly effective. And many organizations, including leading tech businesses and online retailers, use these shady design techniques.

In 2018, the Norwegian tech watchdog Forbrukerrådet published a report showing how tech companies nudge users into sharing personal information. This report leads to changes in legislation, including GDPA and CCPA.

In 2021, the California Consumer Privacy Act made “a range of privacy-related dark patterns illegal – including certain kinds of trick wording, hidden small print, misdirection, and bait and switch.”

Common Types of Dark Patterns

Bait and switch

Bait-and-switch dark patterns lure customers into using a product under attractive terms, then change the conditions once engaged, forcing them to accept the outcome–usually a paid service. Many apps use this bait-and-switch strategy to trick customers.

For example, imagine you download a “free” filter application and spend time adjusting the settings. When you achieve your desired result and go to export the image, the app informs you that you’re using one of the “paid” features and need to pay to save this image or upgrade to a premium plan.

Users will often accept these terms begrudgingly because they’ve already invested the time, and the feature they use is essential for the desired result.

Disguised ads

Disguised ads look like regular content, so users click them. These are common in newsfeeds, where the ads are designed to look like any other article with a headline and image. You’ll also find these in search engines where the top few results are ads, but they look like actual results.

Search engine providers place a small “Ad” tag to differentiate these, but it’s easy for someone not paying full attention to click it thinking it’s a regular search result.

Forced continuity

Forced continuity occurs when someone signs up for a free trial which rolls into a paid subscription. This dark pattern is prevalent in SaaS, and many companies are guilty of deploying this strategy. Services like Baremetrics, which help SaaS companies monitor subscription analytics and recover failed payments, exist partly because forced continuity and billing issues are so common in the industry.

The best way to avoid forced continuity is by not taking credit card details for free trials or not automatically continuing the service at the end of the trial without the user explicitly accepting.

Hidden costs

Hidden costs are fees or charges not disclosed until the user is about to confirm payment. Have you ever got to the final step and gone, “Hey! Why is it $28? The price quoted was $19.99.” And then you see a “service fee” or some other ambiguous term.

Sometimes the hidden costs are more legitimate, like VAT which the company only discloses at checkout. Companies can avoid these hidden costs by notifying customers below pricing–for example, “VAT and taxes calculated at checkout.”

Misdirection

Misdirection uses design patterns commonly used for one action for another that favors the company’s business interests. For example, you’re unsubscribing from a paid service, so you click “Cancel” in your billing account.

The next screen is a confirmation screen, but the company shows the primary CTA as “Keep subscription” and the confirmation to unsubscribe in a smaller text link like this example below.

Companies know that most people function on “autopilot,” thinking that the primary CTA is the requested action, and unconsciously click “Keep subscription.”

Roach motel

Roach motel is another sinister dark pattern designed to keep users from canceling a paid service. Companies intentionally hide the cancel feature using several techniques:

Placing the cancelation at the bottom of an unsuspecting screen
Making users contact customer support–and jump through multiple hoops
Only allowing users to cancel on the desktop app and not mobile

Ironically, these products’ signup and payment features are usually super efficient and helpful, with immediate access to customer support during checkout. The second you’re signed up, the efficiency to leave disappears, and you feel trapped in an irreversible contract.

Confirmshaming

Confirmshaming is another tactic companies commonly use to guilt or shame someone for making a choice contrary to the company’s interest. The most common example is when an eCommerce store offers shoppers a discount for signing up for their newsletter with two options:

“Yes, I want to save 20% on my order!”
“No, I prefer to pay full price for my items.”

The second option makes people feel foolish, “why would you want to pay more?” Confirmshaming dark patterns are highly manipulative and exploit human emotions, forcing them into actions they otherwise wouldn’t have chosen.

Trick questions

Trick questions use words or phrases that mislead users. Like the misdirection tactic, trick questions prey on people’s unconscious actions to mundane tasks like clicking terms and conditions when signing up.

For example, a user might mistakenly check a box saying, “Would you like to opt out of not receiving exclusive offers and promotions from our partners?”

Read that carefully…

“Would you like to opt out of NOT receiving exclusive offers and promotions from our partners?” Most people will miss the double negative connotation and check the box, thinking they’re opting out when the opposite is true.

These trick questions are especially problematic for users with cognitive disabilities or non-native language speakers who don’t fully understand the sentence.

Privacy Zuckering

Privacy Zuckering is named after Facebook CEO Mark Zuckerberg, infamous for misleading privacy policies and settings. This type of dark pattern is still prevalent across every industry and country because data is so valuable–some call it the new gold.

Companies that make privacy policies difficult to understand with convoluted legal jargon or intentionally hide privacy settings (like turning data sharing on and off) are guilty of Privacy Zuckering.

This dark pattern is so problematic that Apple released a privacy update to iOS 14, allowing users to opt out of tracking and choose which apps they share data with.

Pre-selected options

Pre-selected options used to be more prevalent until the release of GDPR and CCPA, which prohibit this dark pattern–like pre-selecting the checkbox to confirm someone has signed up for a mailing list. New legislation requires users to check these boxes themselves, with instructions to review the terms and conditions. Still, this practice occurs, leading to users signing up for services they don’t want.

UX Designers – The Adults in The Room

UX designers are crucial in advocating for users (their fellow humans) and ensuring user interface design follows the highest ethical standards and intent.

Here are ten ways designers can avoid dark patterns and ensure non-designers understand the ramifications of using them (which may include costly legal issues for an organization):

Prioritize user needs: focus on addressing user needs over exploiting them for short-term gains. This focus will build trust and increase the customer life cycle.
Clarity and simplicity: make sure content and instructions are easy to understand. Avoid using confusing jargon or hiding important information.
Transparency: ensure users fully understand the implications of their choices and the data you collect. Use opt-ins with plain language, so people always know what they’re signing up for.
Opt-out by default: never pre-select options, even for mundane tasks and features. Users must always have control over what they want and take explicit action to opt in.
Easy opt-outs: conversely, companies must make it easy for users to end paid features or unsubscribe from services. Avoid burying opt-outs or making users jump through hoops to cancel something.
Establish ethics: creating internal ethical guidelines signed off by key stakeholders ensures teams follow best practices and avoid dark pattern strategies.
Education and awareness: create resources that explain dark patterns and how these negatively impact people.
Advocate for users: UX designers must be the voice of users within an organization and call out unethical conduct.
Testing and user interviews: design teams must test content and UIs regularly with end-users to determine whether content or features are confusing or misleading.
Accessibility and inclusivity: designers must consider the needs of diverse people, including those with disabilities, to ensure everyone understands critical language and features–particularly for decisions with financial and personal data implications.

Prototype and Test With UXPin

Build fully interactive prototypes that accurately replicate the final product experience with UXPin’s code-based design tool. Unlike image-based tools, UXPin allows designers to achieve fidelity and functionality similar to code, increasing testing scope so design teams can solve more usability issues and identify better opportunities during the design process.

Sign up for a free trial to build your first interactive prototype with UXPin and deliver the meaningful user experiences your customers deserve.

Try UXPin for free

What Designers Can Do to Ensure a Smooth Design Handoff

If you are close or are finishing up your design after a series of iterations, then you are probably anticipating the next step—the design handoff. There are many ways to unsuccessfully pass along your designs to the development team.

To help ease your mind and make this process easier, we have compiled a list that will help you thoroughly prepare for a design handoff. All so you can avoid any misunderstandings between you and the developers.

Design prototypes with a single source of truth between design and engineering. Bring interactive components to UXPin and reduce the friction during the design handover. Visit our UXPin Merge page.

Reach a new level of prototyping

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

6 Designer’s Tasks for Smooth Design Handoff

Standardize naming conventions

Using appropriate and coherent terms will ensure that there is no confusion between you and the developer. For example, instead of naming stages of your product with “Latest” or “Newest,” it is best to keep it simple and use, for example, “v1,” “v2,” “v3,” and so on.

This will make it easy to see the various versions of your design from the original to the latest and will help the developer navigate your design process. You’ll also want to familiarize yourself with developer handoff terms. A good resource for this is the BEM notation guide.

Read more about terminology in our Content Design System Guide.

Build interactive prototypes

Even the most beautiful prototype fails to communicate what developers need to build if it’s static. That’s why adding interactivity to your design is so crucial. You can do that by using advanced prototyping features like States, Variables, and Expressions.

There’s also another way. You can bring coded components to design and build prototypes that are fully interactive by default. Read more about it in our previous article: What is component-driven prototyping?

Annotate and explain your design decisions

Since you will be handing off multiple digital assets and designs to the developer, it is important to build a habit of annotating them. This will give the developer context of what each asset is. You should also explain each design and why you created it in the way you did.

Using a design handoff tool like UXPin will make this annotation process a lot easier. It will allow you to collaborate on your designs in real time and create contextual documentation.

You can add detailed descriptions of each element in your design which will help clarify the function each of them offers. There is also an option to include accessibility guidance for greater clarity.

Create templates or checklists for the future

For the most part, every design handoff process will involve similar structure. So, to make it easier for future design handoffs, it is best to create a template or a checklist that will help you make the process more efficient. This will ensure uniformity and a seamless transition from designer to developer.

It will also save you a lot of time because you will already have a good process to follow and won’t have to reinvent the wheel every time you have a design handoff.

Prepare specification

Specifications help developers understand CSS properties, be it heights, widths, spacing, font sizes, etc. Design tools usually automate this process. UXPin, for example, have a built-in Spec Mode that helps developers select UI elements to view specifications.

UXPin Spec mode will help you with developer handoff

UXPin also automatically generates starter CSS that developers can copy. And when you’re designing prototypes with interactive components, your devs can copy the code behind those components into their workflow. Read more about how UXPin Merge technology simplifies design handoff.

Improve cross-team communication

Smooth communication is important for any project – and the design handoff process is no exception. That’s why it’s important to bring the developer into the design process at an early stage. This way, you’ll have more time to introduce and explain all of your designs and ideas.

This will be beneficial not only for the development team but also for you as a designer. Namely, you’ll be able to take advantage of their technical expertise by asking them for feedback during the design process. For developers building apps or web projects, tools like Adalo can help bridge the gap between design and development, providing a no-code platform where design teams can collaborate with developers to build database-driven apps without requiring extensive coding knowledge.

By keeping an open dialogue, you can discuss with them which design components are working well and what needs improving. You’ll also be able to understand how you can implement positive changes to your design.

To summarize, good communication will:

Give the developers context and background knowledge of the design
Create a faster and more efficient design handoff process
Keep the developer on the same page, which will ultimately result in faster and more accurate development of the design
Avoid misunderstandings related to the design handoff.

As you can see, involving developers early in the design handoff is one of the best things you can do in the product development process. We discuss it in more detail in the next section.

Involve developers early in design

Oftentimes, design teams make the mistake of separating their work from the developer’s work. As a result, there can be a lot of confusion during and after the design handoff. This can lead to faulty development and more time that you’ll have to spend clearing up any misunderstandings.

So, in order to create a streamlined process, versus a fragmented one, you’ll want to include the development team early on. To accomplish this, there are three main steps you should follow:

Seek insight from developers—During the design process, it is always important to at least have some idea of how your design will translate to an actual website or app. So, in order to make design handoff smoother, it is important to seek insight and advice from developers early on.
Include developers in talks with stakeholders—Ultimately, the stakeholder is not looking for a well-designed prototype but for a good product. So, by including developers in conference calls or talks early in the design process, you can ensure that both the design team and development team have a sense of clarity. Hence, they’ll have a good understanding of what the end result should look like.
Sharing design ideas with developers—It is a lot easier to correct any potential problems with a design while they are still in the “ideation phase” instead of the prototyping phase. So, before carrying out any major design ideas, it is best to check in with developers to see if what you want to build is feasible.

Improve Design Handoff with UXPin

All in all, communication is key. Instead of seeing the design and development teams as separate, it is best to see them as one. So, involving the development team in the design process and making sure everyone is on the same page will help create a seamless design handoff.

In practice, using a tool like UXPin will allow you to create prototypes with components that come from your design system. This will make it very clear to developers how each component is meant to function and create a seamless transition process.

Bring components from Git repo, Storybook, npm to UXPin and streamline your design handoff process. Learn more about it.

Discover Merge

Designing the Overlooked Empty States – UX Best Practices

Empty states are a pause, not a dead end. Whether a user stumbles across an empty state due to first-use, accomplishment, or error, your product needs to guide them to the next logical step.

This article explores empty states and their vital importance for UX design. We also offer some tips with real-world examples from leading product developers.

Have you ever tried interactive prototyping? Interactive prototypes enhance testing so designers deliver meaningful product experiences to their users. Design your first interactive prototype with UXPin. Sign up for a free trial.

What are Empty States?

An empty state is a UI design pattern telling users the system has no content to display. Some empty states instruct users on how to find, create, or add content to the screen.

Designers also use empty states to communicate a screen/feature’s purpose with tips and instructions. For example, Gmail’s empty state tells users how to customize the inbox’s tabs.

Types of Empty States

Empty states represent a pivotal point in the user journey. Each is an opportunity to build rapport, drive engagement, educate, entertain, or delight users.

There are four primary empty states users encounter in product design:

First use: When new users first interact with a digital product.
User cleared: The user has just completed a task or cleared all content associated with the app or site.
Error state: The user has encountered a roadblock during the interaction.
No data: The system has no data to display or no results from a search query.

Many designers overlook the opportunities for empty states to engage users. They tend to focus more on the associated tasks and features rather than optimizing empty states for engagement.

Empty State Examples

Here are four user interface design examples of when and how to use the types of empty states mentioned above.

First use/onboarding

Onboarding or first use empty states, present users with a blank canvas with instructions to get started. These screens must invoke action, typically with a primary call to action button.

Facebook Messenger’s empty state install screen has a lot going on in a small space, but the primary CTA is prominent using plain language.

Let’s explore what users can do on this empty state screen:

Lets you know that you can take pictures or record videos in-app
Exerts social pressure by telling you how many of your Facebook friends are using the app
Allows you to look up additional information about the app before installing
An adorable graphic to create rapport and encourage engagement

Facebook Messenger’s install screen is a fantastic example of how designers can use empty states to encourage and educate first-time users.

Completing tasks/user cleared

Empty states are an opportunity to prompt users toward new interactions or congratulate them on completing tasks. This feedback acts as a placeholder and reward, helping to develop habit-forming products.

These “user-cleared” empty states are essential for encouraging further engagement. Here are three things to incorporate in task completion empty states:

Step 1: First, inform the user they have completed the task
Step 2: Reward the user–i.e., congratulate them
Step 3: Steer them toward the next step

We’ll use the WritekUpp app for iOS as an example:

Step 1: “You’ve got no more tasks”
Step 2: “Well done you!”
Step 3: “To create another task, simply tap below.” followed by the CTA: “Create New Task”

Error states

Errors are inevitable and can happen on both ends–from the user and the system. What’s important is telling the user what went wrong, why it happened (to avoid future occurrences), and what to do next.

This example from the iOS App Store shows what happens when users follow a link to an app unavailable in their region. The App Store informs the user what went wrong “Item Not Available” and why “The item you’ve requested is not currently available in the UK Store.”

What’s missing from the App Store in this example is what to do next–which likely causes frustration. A good option would be “Search for similar apps available in your region.”

Humor can help people feel better about errors but must not confuse or create added friction. This error screen from Piccsy is an excellent example of subtle humor. Here, Piccsy presents users with an illustration linking to the artist and a CTA to return to the app.

IMDB uses a similar humorous strategy with its 404 page. The page informs the user that the URL “was not found” with a link to return to the homepage. IMDB also includes a 404-altered quote from a movie, linking to the film’s IMDB page.

What’s clever about the IMDB 404 error page is that it educates and entertains. Users might discover a new movie while being amused by a humorous quote.

No data

Empty states must help users find content when the system doesn’t have answers. This example from DuckDuckGo shows what happens when there are no results for a query–rare with the sheer volume of content on search engines.

First, DuckDuckGo displays the user’s query, “No results found for [QUERY].” This prompts the user to check their keyword for errors. Next, the search engine offers suggestions to fix the problem:

Make sure all words are spelled correctly.
Try different keywords.
Try more general keywords.
Try fewer keywords.

These “no data” empty states can frustrate users because the system doesn’t have an answer. Keeping user interfaces clean with actionable advice can help them solve the problem–as DuckDuckGo does above.

Empty State Design Tips

Use visual cues

Visual cues through empty-state illustrations or GIFs help users understand what to do next. These must be relevant to the action while offering encouragement. Most importantly, the graphics mustn’t distract users.

For example, Google uses a document illustration to accompany the CTA, “Drop files here or use the ‘New’ button.” The simple image is relevant to the task, doesn’t distract the user, and draws attention to the instruction.

Offer suggestions

Suggestions help guide users with directions and ideas to get started. For example, Spotify’s new playlist empty state includes a CTA to add songs but also offers “Recommended songs” based on the playlist’s name–meaning if the user renamed the playlist to something more descriptive, “90s rap playlist,” they might get better recommendations.

Personalize empty states

Personalizing empty states with user data (i.e., their name) or personalized content creates a more meaningful experience, increasing engagement and product satisfaction. For example, Facebook Messager’s install screen shows the user’s friends also using the service.

Make empty-state copy meaningful

Microcopy expert and UX writer Kinneret Yifrah, argues that empty-state copy must be meaningful. She structures copy with three key elements:

Heading: describes the state
Motivation: how will it benefit the user or how to do it
CTA: descriptive call-to-action button

Using this structure, we can create an empty state for an example alert:

Heading: You haven’t set up any alerts yet.
Motivation: Alerts will keep you updated, so you won’t have to worry about missing out on something important.
CTA: Create alert

Following Kinneret’s user-focused strategy will help create meaningful copy that motivates users to take action.

Prototype and Test Empty States With UXPin

With UXPin’s advanced features, designers can create empty-state prototypes that replicate the final product user experience accurately. UXPin prototypes are fully interactive with immersive code-like functionality, giving design teams actionable feedback to test and iterate for higher-quality outcomes.

Interactive prototyping

Interactive prototypes respond to user engagement like clicks/taps, swipes, scrolls, etc. Additionally, UXPin’s prototypes allow designers to capture data from user inputs and use them elsewhere in the application. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics that accurately replicate the final product experience.

For example, our example Auction app allows users to select an item and place a bid.

The confirmation screen tells the user their bid is live and when the auction ends. A prominent CTA takes the user back to the auction’s homepage.

With UXPin, you can make this screen more personalized using Variables, including the user’s name and their bid captured from the previous screen. Tools like Adalo, which offers a no-code app builder with AI-powered generation for custom database-driven apps, can complement this personalization approach by enabling rapid prototyping and deployment without requiring extensive coding.

While the auction app doesn’t have an empty state, it demonstrates the powerful functionality UXPin offers designers for accurate prototyping and testing.

Actionable feedback

Better prototypes result in meaningful, actionable feedback from usability participants and stakeholders. Designers can solve more problems while identifying valuable business opportunities during the design process.

Smooth design handoffs

These prototypes also streamline design handoffs because front-end developers can visualize exactly what the product must do. UXPin prototypes require less explanation and documentation, allowing product teams to release products faster with less friction between design and development.

Design, prototype, and test at higher fidelity with code-like functionality in UXPin. Sign up for a free trial to build your first interactive prototype with the world’s most advanced UX design tool.

User Goals vs. Business Goals

What are User Goals?

What are Business Goals?

Understanding User Goals & KPIs

Efficiency

Usability

Accessibility

Personalization

Reliability

Security and privacy

Aesthetics

Enjoyment

Social interactions

Support and assistance

Understanding Business Goals & KPIs

Revenue growth

Market share expansion

Customer acquisition

Customer retention

Brand reputation and recognition

Cost reduction

Scalability

Innovation and differentiation

Regulatory compliance

Environmental and social responsibility

How do you Balance Business Goals and User Goals?

Example 1: Spotify

Example 2: Airbnb

Understand the Role and Responsibilities

Interdisciplinary background

Effective communication

Informed decision-making

Problem-solving

Adaptability

Operational and strategic skills

Shift Mindset to Internal Products

Value measurement

User proximity

Governance and diplomacy

Iterative and incremental growth

Focus on maintainability

Start Small and Expand Slowly

Begin with a limited set of components

Incremental improvements

Monitor usage and feedback

Be mindful of organizational needs

Avoid over-engineering

Get Buy-In and Sponsorship

Involve Stakeholders and Users

Resources for New Design System Managers

Design UI with code-backed components.

The Importance of User Experience and UI Consistency for Developers

Fundamental Product Design Principles for Developers

Key UI Design Terms and Concepts

Typography

Color palettes and theory

Design process stages

Grid systems

Responsive design

User flows and navigation

Design patterns and components

UX metrics in UI design

Making Informed Design Decisions

Importance of collaboration between designers and developers

Understanding the design feedback loop

Balancing aesthetics and functionality

Improving UI consistency with design systems

Try UXPin Merge

UX Designer Bio Examples

Entry-Level UX Designer

Mid-Level UX Designer

Senior UX Designer

Importance of a Well-Crafted UX Designer Bio

5 Key Elements of a Compelling Designer Bio

Personal brand statement

Relevant experience

Skills and expertise

Accomplishments

Personal values and characteristics

Tailoring Your UX Bio for Different Platforms