UXpin's Blog, page 59

7 Best Practices Worth Including in Your App Design Strategy

Why does Twitter chime with users? What is it about Amazon that keeps us all coming back for more? 

Awesome mobile app design ideas don’t just happen. That first, exciting spark of inspiration might be lightning fast. But building that out into a tangible product that users love demands a strong mobile app design strategy. 

If you want your app to take off, there are certain ‘best practices’ that are absolutely worth adding to your existing strategy. If you’re already doing some of these, you may also find it useful to look at where improvements can be made. 

Make sure these seven best practices are built into your app design strategy from the start – they’re core to the design process, not an afterthought or a nice-to-have. This will ensure you’re building the most successful app you can. 

Creating an App Design Strategy – 7 Best Practices to Follow1. Know your target audience inside out

Good mobile app design revolves around the user. If you can’t point to any element of the design process and answer ‘what’s in it for the user?’, then it needs reworking or rethinking. 

And the only way to build a user-centric app is to gain a deep understanding of your target audience. Everything, like a profiler. Who are they? What do they want? Why do they like your competitor? What don’t they like?

You can apply the following methods to learn about your potential users: 

Competitive analysis. Identify which apps you’re up against (and make tons and tons of notes and actionable insights based on your research). It’s a crowded market, so you may find it easier to limit this to the top three-to-five competitors. Use software and product reviews sites to get a feel for what users like and dislike about them. It’ll breed app design ideas that hit the mark.
Social media. Social media platforms offer a good insight into how the competition positions its brand. That helps you understand audience preferences and what really matters to them. Most importantly, it reveals how users engage with your rivals. Those findings can totally redefine your app design strategy.
Surveys, interviews, and focus groups. Get it straight from the horse’s mouth. There’s no better way to really get inside the heads and hearts of potential users than by directly talking to them. A mix of surveys, face-to-face and phone interviews, and focus groups helps glean. Some, for example, might feel like they’re on the spot during a sit-down chat. So, they give the answers they think you want to hear – not their true thoughts and feelings. 2. Define your app design idea

What does your app do? Not generally. Not vaguely. This isn’t a single-sentence elevator pitch. Your app’s objective needs to be specific. Because if it’s not, the app development becomes a resource drain. 

Clearly defined app design ideas keep everyone on the same page. Each member of the design and development team knows what they’re creating – and how their roles fit into realizing that concept. 

As a base requirement, you should know:

What is the purpose of this app design idea? Who are you building it for?How will people use it?Why should they choose your app over another? What resources are needed? How will you measure success? 3. Figure out your budget

Early on in the process, set a budget for developing your mobile app. This is a good way to avoid mission creep – the ‘art’ of adding more and more features to a product, resulting in spiraling development costs and, in many cases, failure. Your budget will help you decide which features you want to add (and which can be dropped or returned to at a later date). 

Align the budget to a project timeline with objective-based milestones. It’ll help you keep finances on track. 

Laying out a budget determines not just what you’re going to develop, but how you’re going to develop it. For instance, you might find it best to build a whole new team from scratch, if you’re a start-up. Or grow an existing team. Or use a specialized tech partner – these companies act as an experienced, external in-house team without the risks that come from the wholesale outsourcing of your app design idea. 

4. Learn how to activate users (making sure they stick around)

Long before your user downloads your app, you should have a pretty good idea of how you’re going to keep them around. What is it about your app that will ‘activate’ users, make them want to open it every day and spend time there rather than in another app? 

Part of this goes back to understanding the target audience and defining your mobile app design ideas. Let’s say your users are looking for snackable 10-minute sessions in an app they check out while they’re on the go. Your design, content, and experience will be totally different from an app that’s built for users who want to spend hours browsing products. Because if it isn’t, users probably won’t come back.

Amazon offers a masterclass in activating its users. Its app is consistently popular because it’s built for mobile use. And it does exactly what the user wants: makes it really simple to shop for a range of items. 

Meanwhile, Twitter is ready-made for bitesize chunks of content that can be consumed quickly in sharp bursts of time like waiting for the bus (or even for hours, if you get lost doom-scrolling). More recently, Wordle did the same in the gaming app sphere. Users just couldn’t get enough of it. Boom. Activation activated! 

Source: XDA Developers 

Focus on that one thing that activates your users. 

5. Agree on KPIs

You’ll often hear the words ‘what does success look like?’ thrown about in pitch meetings. And, ok, it’s a pretty ugly, business-y phrase that no one in the real world would ever dream of using. But it’s still an important conversation to have. You can’t know if your app’s achieving its objectives if you haven’t really set any. 

For this reason, you want to set out key performance indicators (KPIs). These are the metrics against which you’ll measure your app design idea. And there are a bunch you could potentially use. Heaps and reams of data to parse. 

Instead of reviewing them all, choose a few metrics that are best aligned with your vision and your goal. These include: 

The number of downloads – Do users like your product enough to install it? What needs to change to boost this? Monthly active users – Does your user base stick around and check in regularly? If not, why not?Daily active users – What makes your most engaged users log in every day? Churn – How many users are leaving or uninstalling or ignoring your app? What is it about the experience that’s driving them away?Session count and time – How many users keep your app open and active and for how long? Why? 6. Choose the right mobile app design tool stack

Bringing concepts to life is often easier said than done. For many, this can be a seriously frustrating part of the design process. After all, you’ve got a picture in your head. Somehow, that needs to be communicated to the team, who can then execute it. 

 The trick is to deploy the right tools to the right teams to make that vision a reality. So, make choosing the right tool stack a key part of your app design strategy. 

Your designers and developers will have preferences. Those need to be taken into account (they’ll hopefully be masters at using them, giving them the confidence, experience, and knowledge to build a better product. But you should also consider how well those tools play with other software. If they don’t properly integrate into your existing software, or require slow, clunky workarounds to get them talking to each other, they may not be the right choice. 

UXPin is one of those tools that helps create a seamless workflow – a start-to-finish-and-beyond-type tool that lets designers begin the creative work from building lo-fi wireframes to crafting hi-fi, pixel-perfect prototypes of your mobile app. 

This ‘concept art’ uses the same real-life code components your developers use to actually build the final product. So, they don’t need expert coding skills to make a design that works how intended – and can continue being worked on post-launch without hand-offs that go back-and-forth endlessly between teams. And because it’s important that your team feels comfortable mastering UXPin, it integrates with other popular design and dev tools like Sketch, Slack, and Jira.

7. Implementing a feedback & improvement design process

‘Continuous refinement’ is the real buzzword when developing your mobile app design ideas. It’s as much a mindset as it is part of your overall process. A way of thinking that constantly questions, ‘how can we make things better for our users?’. 

To make ongoing improvements that actually matter, introduce a feedback loop. This should be a combination of comments and reviews from your users and behavioral data analysis: how do users use your app, what do they do, what don’t they do?

It’s about going back to the start – conducting interviews, focus groups, and surveys – to better understand how users respond to your app’s interface and experience. That doesn’t mean you need to act upon every comment a user makes. Who has time for that?

Instead, create a system where valuable, actionable data can help direct features and updates aligned to business objectives. It’ll simplify the design and development process – but also helps build buy-in from key stakeholders across the company. 

A strong feedback loop will help you see where refinements can be made, continuously. 

So, you’ve centered the user, championed their needs, aligned their desires and loves to your own business objectives, and used that to determine the ongoing development of your app. 

Execute Your App Design Strategy with UXPin

A winning strategy draws on all of these best practices to put all your mobile app design ideas into the hands of users. And the great thing about each of these concepts is how well they work in tandem together (just like your tool stack, right?).

You can only specifically define your app strategy by fully knowing your audience. The budget will determine where to focus your refinements. Each one integrates with the others, creating an intuitive, easily adoptable process.

Try UXPin and explore the tool that creates meaningful experiences for designers, developers, and users. 

The post 7 Best Practices Worth Including in Your App Design Strategy appeared first on Studio by UXPin.

Fintech Design – A Compilation of the Best UX Tips for Product Designers

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

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

Whether you’re a FinTech startup designing a cryptocurrency product or an established multinational looking to revolutionize its mobile banking app, UXPin provides UX designers with a sophisticated code-based design tool to prototype and test with higher fidelity and functionality. Sign up for a free trial to explore all of UXPin’s advanced code-based features.

Table of contentsWhat is FinTech?What are examples of FinTech?Fintech UX Design Challenges1. The Challenge of Compliance2. Meeting Customer Expectations3. Embracing Product ComplexitySecurity Protocols8 FinTech App Design Tips1. Clean UI Design2. Clear and Simple Language3. Accessibility4. Helpful Visualizations5. Use Appropriate Keypads6. Use Descriptive, Helpful CTAs7. Help, Don’t Hinder8. Optimize for MobileOvercoming Common FinTech Usability ChallengesEducating & Converting UsersDisplaying Large Amounts of DataStreamlining Long FormsHow PayPal Builds Products 8X Faster With UXPin MergeWhat is Merge?How Did Merge Work for PayPal?What is FinTech?

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

What are examples of FinTech?

Here are some FinTech examples:

Digital banking (also called Neobanks): Monzo (UK), Chime (US)Digital wallets: Payoneer, Skrill, RevolutPayment services: PayPal, Venmo, Cash App, StripeInvestment services: Robinhood, BettermentCrypto products: Coinbase, Ripple

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

Fintech UX Design Challenges1. The Challenge of Compliance

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

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

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

2. Meeting Customer Expectations

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

3. Embracing Product Complexity

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

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

Security Protocols

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

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

8 FinTech App Design Tips1. Clean UI Design

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

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

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

2. Clear and Simple Language

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

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

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

3. Accessibility

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

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

4. Helpful Visualizations

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

5. Use Appropriate Keypads

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

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

Number-first keypadDate pickerEmail field (ensures @ and .com appear on default)6. Use Descriptive, Helpful CTAs

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

7. Help, Don’t Hinder

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

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

8. Optimize for Mobile

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

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

Overcoming Common FinTech Usability Challenges

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

Educating & Converting Users

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

Use bullet points to summarize your offering and regulatory informationKeep value proposition above the fold with CTA to reduce scrolling and increase the likelihood of conversionReiterate value proposition at the top of onboarding formsInclude social proof (TrustPilot widget) to build credibility and trustUse clear CTAs, i.e., “Sign up and Get Quotations.”Prefill form fields when an existing user applies for a new product or serviceUse progress bars to show users where they are in the processDisplaying Large Amounts of Data

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

Ensure primary CTAs standout with descriptive labelsUse outline/ghost buttons for secondary CTAsUse color and consistent spacing to separate contentCreate a clear distinction between headings and body copyUse an easy-to-read, legible typefaceHide secondary content behind carousels, accordions, and tooltipsStreamlining Long Forms

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

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

PayPal is one of the world’s largest payment platforms supporting 25 currencies in over 200 countries. In 2019, PayPal’s internal product development team started using UXPin Merge, which helped them scale design and deliver products 8X faster.

What is Merge?

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

How Did Merge Work for PayPal?

PayPal uses Merge to sync Microsoft’s Fluent design system with UI controls. With everything pre-configured through each React component’s props, PayPal’s product designers can drag and drop these components to build new user interfaces.

PayPal’s UX team provides mentoring and support to product teams who complete 90% of designing, prototyping, and testing before design handoffs. Work that used to take an experience UX designer a whole day to finish takes a product manager less than ten minutes–with significantly higher fidelity and functionality.

These prototypes include fully functioning graphs and data visualizations, sorting filters, real data, dynamic user experiences, and other functionality the team couldn’t achieve using image-based prototypes.

Not only do Merge prototypes improve usability testing for PayPal, but stakeholders can engage with prototypes without guidance or explanation. 

“One of the significant impacts of UXPin Merge is our ability to create higher fidelity prototypes. There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity—giving us higher quality feedback from stakeholders.” Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal

If UXPin Merge can revolutionize the workflows of one of the world’s biggest FinTech organizations, imagine what this code-based technology could do for your business! Sign up for a free trial to discover UXPin Merge through our MUI React library integration.

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

UI Design vs. UI Development – What’s the Difference?

There are many software and web development roles and responsibilities–from initial concept to design and delivery, QA, and lifecycle management. UI design and UI development are two crucial roles that impact how users engage and interact with a user interface.

This article compares the practice of UI design vs. UI development, the people behind these roles, and how they work together to deliver digital products.

Table of contentsWhat is UI Design?UI Designer Skills & ResponsibilitiesUI Designer Qualities & SkillsetUI Design ProcessWhat Software does a UI Designer Use?What is UI Development?UI Developer Skills & ResponsibilitiesFront-End Development vs. Back-End DevelopmentWhat Software does a UI Developer Use?UI Design vs. UI DevelopmentHow UI Designers and UI Developers Work TogetherThe Importance of UI designer-UI developer collaborationBetter Designer-Developer Collaboration With UXPin MergeThe Drift ChallengeThe Code-Based Solution

UXPin is a code-based design tool helping UX/UI designers and engineers collaborate better to deliver high-quality products to your customers. Sign up for a free trial to experience code-based design from UXPin.

What is UI Design?

UI design (User Interface Design) is the process of designing user interface elements, layouts, and interactions–everything users see and interact with. These elements include images, animations, sliders, text fields, buttons, etc. Like user experience design, UI design decisions are based on user needs and testing.

UI Designer Skills & Responsibilities

UI designers are responsible for the UI design process. Their role includes:

Product aesthetics: branding, visual designResearch: design research, user analysisTesting: UI prototyping (high-fidelity prototyping)Design: wireframes, mockups, interaction design, animations, viewport layouts (responsive design)UI Designer Qualities & SkillsetVisually creativeWeb designGraphic designDesign principles and design thinkingInterested in visual designUser journeys and personasUser researchTypographyBalances form with functionLooks at user interaction and behaviorTask orientatedUI Design Process

UI designers follow the same design thinking process as other UX professionals but complete different activities within the framework:

Empathize: focuses on the user’s environment, movements, and actionsDefine: focuses on each step users need to take to achieve their goalsIdeate: looks at the elements and components users will need to navigate a productPrototype: designs mockups and interactivity for high-fidelity prototypesTest: tests how users interact with the product and ask practical questions

Further reading: UX vs. UI Design – The Differences You Need to Know.

What Software does a UI Designer Use?

UI designers generally use the same tools and software as other UX designers. These tools allow them to design, prototype, and test user interfaces.

The goal for any UI designer is to create high-fidelity prototypes that look and function like the final product. Code-based design tools like UXPin have revolutionized how UI designers prototype and test digital products.

Some of UXPin’s advanced prototyping features include:

States : Create multiple states for a single component with separate properties for interactions and system changes. Conditional Interactions : Create dynamic user experiences with Javascript-like “if-then” and “if-else” rules that respond to user and system actions. Variables : Store user inputs and take actions based on that data–like displaying a customized welcome message from the user’s name input. Expressions : Write Javascript-like functions that perform complex tasks, like form validation, computational formatting, and more.

Discover these and more advanced UXPin features with a free 14-day trial–no payment details necessary!

What is UI Development?

UI development is the process of programming client-facing interfaces. Like UI design, the UI development process includes writing code for images, animations, sliders, text fields, buttons, etc.

UI Developer Skills & Responsibilities

Depending on the product and org structure, the UI development role might fall on a front-end developer, UX engineer, or full-stack engineer. Their responsibilities include (these will vary depending on the engineering team’s structure):

UI component developmentUI maintenanceStyling architectureImplementationTechnical feasibilityBacklog managementPerformanceQuery architectureSearch engine optimizationFront-End Development vs. Back-End Development

Engineers divide programming into two separate disciplines, front-end, and back-end development.

Front-end development: Focuses on developing “client-facing” interfaces using HTML, CSS, and Javascript.Back-end development: Write server-side code to connect front-end interfaces to databases, APIs, authentication, etc. Some programming languages include Java, Ruby, Python, and Javascript, to name a few.

Further reading: Front-End vs. Back-End: What’s the Difference?

What Software does a UI Developer Use?

Like any engineer, UI developers use an integrated development environment (IDE) to examine and write code. Modern IDEs feature various extensions to interface with engineering tools like Git, package managers, repositories, APIs, etc.

Further reading: The 7 Essential Tools for Frontend Web Development.

UI Design vs. UI Development

With UI design and UI development defined, it’s clear to see these disciplines appear on opposite ends of the software development process. UI design happens during the design process, while UI development occurs during the engineering process. 

While these are separate disciplines, UI designers and UI engineers must work together to deliver a successful final product.

It’s important to note that not every organization has a UI designer and UI engineer role. Here are some positions that might fulfill these UI roles and responsibilities:

UI design: UX engineer, visual designer, graphic designerUI development: Front-end developer, UX engineer/UX developer, full-stack engineerHow UI Designers and UI Developers Work Together

Here is a typical workflow demonstrating how a UI designer and UI developer would collaborate on a project:

UI designers start a design project with various forms of UX research to understand users, competition, the market, product, etc. They use user-centered design processes to understand the problem from a user’s point of view.UI designers will meet with UI developers early in the design process to discuss technical limitations, design handoff procedures, and documentation requirements.UI designers work with other UX designers to design, prototype, and test user interfaces, layouts, and components. In some instances, the UI developer might collaborate with the design team to build basic code prototypes to test complex UI components.Once the design process is complete, UI designers prepare prototypes and documentation for the design handoff.UI designers and UI developers might meet to discuss designs and ensure engineers understand everything correctly during the design handoff process. UI developers work with the rest of the engineering team to convert designs into functioning code.UI designers work with the design and product teams to complete the QA (quality assurance) process to ensure the final release meets design specifications.The Importance of UI designer-UI developer collaboration

Modern software development relies on exceptional UI design and development. 

Designers ensure the product meets users’ needs and thoroughly test user interfaces and UI components to ensure they meet usability and accessibility standards. Without this prototyping and testing phase, usability issues impact the product, resulting in a poor user experience resulting in avoidable costs on multiple fronts–customer service, rework, losing customers, etc.

UI developers also play a crucial role in delivering successful software releases. They must ensure the final UI meets design specs and test code for bugs and performance. They’re also responsible for managing code, including updates to packages, APIs, security, etc., to ensure the product maintains its integrity and consistency over time.

To achieve this, designers and engineers must collaborate throughout the software development process–which can be challenging in large organizations where silos and poor communication are common.

UI designers and UI developers often work with DesignOps and DevOps to help bridge the gap between these disciplines to improve operational processes and collaboration.

Better Designer-Developer Collaboration With UXPin MergeThe Drift Challenge

One of the challenges designers and engineers face is that they speak different languages. 

Designers = image-based static mockups and prototypesEngineers = code, browsers, operating systems, databases, etc.

Without in-depth knowledge and experience of one another’s disciplines, it’s hard for designers and programmers to understand the other’s limitations, constraints, and other challenges. Bridging that gap is crucial for organizations to deliver products successfully, on time, and on budget.

The Code-Based Solution

UXPin Merge has revolutionized the traditional UX workflow with a code-based design solution allowing orgs to sync a component library from a repository to UXPin’s editor, so designers build prototypes using fully functioning UI elements and components.

Merge components retain exactly the same properties as those in the repository, including interactivity, so designers can simply drag and drop to build UIs. Engineers can also set various props (for React or Args for Storybook) to allow designers to customize components in JSX or via UXPin’s Properties Panel. Any changes to these props render JSX, which engineers can copy/paste to begin development.

This Merge-powered workflow enhances collaboration and understanding between UI designers and UI developers because they’re speaking the same language with the same constraints–a truly single source of truth for your org’s component library.

UXPin has also recently announced the upcoming release of Merge Component Manager–a tool that reduces developer involvement in importing and managing coded UI components. Less reliance on engineers means designers can get up and running with Merge much faster.

“It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe. Faster time to market is one of the most significant changes we’ve experienced using Merge.” Erica Rider, UX Lead EPX @ PayPal

Discover how UXPin’s Merge technology can revolutionize your design processes with a free 14-day trial. You can explore Merge’s functionality via our MUI library integration and other advanced UXPin features.

The post UI Design vs. UI Development – What’s the Difference? appeared first on Studio by UXPin.

5 Powerful Insights About Design Value From Dave Malouf

Dave Malouf is a DesignOps expert and industry veteran. He’s contributed to developing the practice, including sharing his knowledge through blog posts, interviews, and talks.

UXPin hosted a free webinar with Dave where he shared his insights on a Holistic Design Operations approach to enterprise design.

UXPin Merge is the ultimate DesignOps tool. Simplify and automate many DesignOps challenges with a code-based design tool that bridges the gap between designers and engineers. Sign up for a free trial to explore UXPin’s advanced features, including its powerful Merge technology via our MUI integration.

5 Takeaways from Dave Malouf on DesignOps

We’ve put together five ideas from Dave’s talks and blog posts to help improve your Design Operations. You can find links to all these resources at the end of this article.

1 – Create “Intentional Spaces”

In Amplify Design, Dave talks about how “intentional spaces and processes encourage serendipity, emergence, and exploration.” He says spaces (where teams work, collaborate, and ideate) are one of the most “valuable pieces for amplifying the work of designers.”

Dave’s favorite workspace is a team pod surrounded by whiteboards with a high-top desk or podium in the center. This setup works for both designers and cross-functional teams.

Team members sit facing the whiteboards so they can focus undistracted. They can also look up at the whiteboard for notes or ideas they’ve scribbled.

The high-top desk in the center encourages collaboration. Team members use the high-top to address the rest of the team with questions, ideas, or presentations. This “intensional space” facilitates work while fostering communication and collaboration. 

Dave’s intentional spaces method aligns with another DesignOps expert, Salomé Mortazavi, who talks about a practices-first approach–optimizing practices (the way people work) rather than processes.

Salomé presented some of her ideas about approaching design operations at Design Value Conference that UXPin hosted in March.

2 – Define What Designers Amplify

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

Form giving: How form creates value–line, layout, composition, color, type, texture, volume, negative space, juxtaposition, alignment, flowClarity: From information architecture that enables users to use a digital productBehavioral fit: How design provides an intuitive user experience that streamlines or compliments a real-world activityExploration: How designers discover possibilities through sketching and trying ideas3. Write a Design Manifesto for Better Futures

Dave wrote a design manifesto to compliment form giving, clarity, behavioral fit, and exploration. The manifesto starts with the prefix; Designing happens better when…

different activities happen at their most appropriate cadenceintensional spaces & processes encourage serendipity, emergence, explorationa balance of both quantitive and qualitative data are synthesized into actionable insightscollaboration & inclusion are balanced with coordinated, focused developmentthe exploration of a multiplicity of narratives have people gaining meaning across possible futureswe understand that what attracts and motivates engaged designers is different from otherswe mutually understand & value what quality design output, AND quality practice is4. Discover the Four Laws of Design Program Management

Dave has four vectors or laws a Design Program Manager must consider when managing design work:

Fidelity: Providing the right support for different fidelities in the end-to-end design processCollaboration: Creating an environment to encourage collaboration to happen naturally and scheduling collaboration at critical parts of the design processCohesion: Ensuring teams and projects work cohesively towards “a singular vision”Reflection: Creating time and spaces for teams to reflect, evaluate work, thinking, and creativity5. Increase Design Value Through DesignOps

In How does DesignOps increase your design value? Dave identifies three areas where DesignOps leaders can amplify Design’s value:

Staff

Hiring, developing, and retaining the best people with your available resources. When Dave talks about “hiring,” he doesn’t only refer to attracting the most experienced and expensive “rock stars.” 

Investing in employee development or finding people with the highest potential and strong leadership is often better in the long run. 

Dave looks at four aspects of people operations:

Onboarding: How quickly can you develop highly functioning employees?Reward & recognition: How does your organization recognize good work, and are the rewards relevant to each individual?Developing people: Does your organization create paths and opportunities for growth and leadership?Career ladders: Defining criteria for growth helps manage expectations while setting standards for hiring the right team members.Infrastructure & Tools

DesignOps leaders must choose tools wisely. As Dave points out, “in the digital world, there is a stack of tools, digital and analog, that impact the use of their tools at the point of contact of craft.”

A case in point is how Erica Rider of PayPal tested many design tools before arriving at UXPin Merge. Erica needed a design tool to empower non-designers (PayPal’s internal product team) to design, prototype, test, and handoff new products.

With UXPin Merge, PayPal’s product teams drag-and-drop components to build fully functioning prototypes 8X faster than the experienced UX team using traditional image-based design tools.

Finding tools to fit the craft is crucial for team members to produce great work.

Governance & Workflow

Bureaucracy can often impede or slow team members from working or adopting new tools and processes. DesignOps must evaluate governance and workflows, removing roadblocks to increase delivery quality and pace.

Learn more from Dave Malouf

Here are some resources to learn more from Dave’s knowledge and experience:

A Guide to UX Leadership – a free eBook from UXPinHolistic Design Operations – a free webinar hosted by UXPin in February 2022Dave Malouf’s Medium account – Dave shares his knowledge about UX and DesignOpsDave Malouf Design – Official websiteAmplifying Design Value – 2020 DesignX Community talkIncrease Design’s Value With UXPin

With UXPin’s code-based design tool, designers and engineers speak the same language–facilitating better collaboration with smoother design handoffs.

Enhance your organization’s end-to-end design process to deliver a greater design ROI. Sign up for a free trial to explore all of UXPin’s advanced features.

The post 5 Powerful Insights About Design Value From Dave Malouf appeared first on Studio by UXPin.

Live-Data Prototype

One of the challenges with prototyping using a design tool is the lack of fidelity and functionality, preventing designers from completing comprehensive and accurate user testing.

Live-data prototypes seek to solve this prototyping issue by replicating the dynamic experience of code with data from user inputs. Designers must work with a front-end developer or UX engineer to build a code-based prototype capable of performing live-data functionality.

Table of contentsWhat is a Live-Data Prototype?How do you Build a Live Data Prototype?Live Data vs. Real DataLive-Data Prototype ExampleWhen Should You Use Live-Data Prototyping?1. User Triggered Features2. MVP Testing3. A/B TestingThe Pros & Cons of Live-Data Prototyping with Image-Based ToolsPro #1 – Meaningful Stakeholder FeedbackPro #2 – Improved Usability TestingPro #3 – Fewer ErrorsCon #1 – Slow PrototypingCon #2 – Getting Buy-InCon #3 – Limited ScopeLive-Data Prototyping Without Engineers Using UXPinFunctioning User InputsUsing APIs with UXPinImporting Real DataFully Functioning Prototypes with UXPin MergeWhat is a Live-Data Prototype?

A live-data prototype uses information from user inputs, databases, and APIs to create dynamic, customized experiences–like the final product. For example, capturing a user’s name from a signup form to create a custom welcome message.

Live-data prototypes usually test a single task or sequence triggered by a user, like an API, a one-time-pin email/text, or other complex user interactions. The prototype might be one or two screens or even a single component.

Due to it being a resource-intense process, designers reserve these live-data prototypes for features that could involve usability issues or cause product failure–thus justifying the time and resources to build it.

Unfortunately, designers can’t build live-data prototypes using image-based tools. They usually have to rely on engineers to develop something in code when using those vector design tools, which is a rather time-consuming and expensive exercise.

Nevertheless, there’s an alternative. A code-based design tool, such as UXPin and its revolutionary Merge technology that empowers teams to use the same UI elements in design and code, thus using the same source of truth. We will see how it works in just a moment.

How do you Build a Live Data Prototype?

Product design teams have a few options when building a live-data prototype:

Code: HTML, CSS, and Javascript provide the same functionality and fidelity as the final product giving accurate and actionable feedback, but designers need engineers to build them. Low-code builders : Gives designers control to build prototypes without engineers but within the platform’s constraints, limiting what designers can test.Design tools: Code-based design tools like UXPin provide designers with complete control to build, prototype, and test with live data, APIs, code components, etc.Live Data vs. Real Data

It’s important to distinguish the difference between live data and real data prototypes.

Live data prototypes provide live, dynamic data. The information changes dynamically in sync with the source. Let’s look at a basic signup form with a name and email address as follows:

Name: Joe KingEmail: joeking@uxpin.com

A live-data prototype allows Joe to enter her name and email. Joe can change her mind and use a different email or even make a spelling error. A live-data prototype will capture the data Joe enters as is.

Real-data prototypes are static. Designers must pre-populate a real-data prototype using Joe’s information because the form fields don’t function and can’t capture data. While the prototype uses Joe’s real name and email, the information is static and can’t change or respond to interactions.

Live-Data Prototype Example

Designers can build live-data prototypes using UXPin’s code-based design tool. A great example is UXPin’s free signup form template which uses States, Variables, and Conditional Interactions to simulate email and password validation and personalized email confirmation.

The prototype reacts to user inputs with error messages for the email and password fields. The password must be longer than eight characters, and the email must be formatted correctly. If the user clicks the “SIGN UP” button without entering anything, an error message says, “Can’t be blank” below the relevant input.

You can follow these instructions to edit UXPin’s free signup form template.

When Should You Use Live-Data Prototyping?

This list is by no means exhaustive, but these are the most common use cases for live-data prototypes. 

1. User Triggered Features

Live data prototyping is beneficial for testing notifications or APIs that rely on user data or interactions. For example, if you’re designing a two-step authentication using text or Google Authenticator, testing this feature with a live-data prototype is crucial.

2. MVP Testing

Live-data prototypes are excellent for startups wanting to test an MVP (minimum viable product). The team can use this MVP to test an idea’s desirability, viability, and feasibility–testing and iterating before they commit to the product development process. 

These live-data prototypes are comprehensive enough to get accurate results for a proof of concept but lean enough that it doesn’t take long to build and make changes.

3. A/B Testing

Marty Cagan describes how SVPG (Silicon Valley Product Group) uses live-data prototypes for A/B testing during product discovery. The product team can build two lightweight options of the same screen or flow to test the best option before committing to development.

The Pros & Cons of Live-Data Prototyping with Image-Based ToolsPro #1 – Meaningful Stakeholder Feedback

One of the challenges with image-based prototypes is that designers aren’t able to create a realistic product experience for stakeholders–making it difficult to get buy-in.

With image-based prototypes, stakeholders and usability participants have to “imagine” that they’ve entered their details or the app has performed a complex task.

Live-data prototypes give stakeholders an accurate representation of the product. It responds to their inputs, creating a dynamic, personalized user experience.

Pro #2 – Improved Usability Testing

Every UX designer’s goal is to test and solve usability issues before the design handoff. Live-data prototypes significantly increase fidelity and functionality, giving design teams actionable feedback from user testing.

For example, how do designers test whether form errors help solve a user’s problem? The dynamic nature of a live-data prototype allows designers to test multiple scenarios, like spelling errors, password validation, email formatting, etc.

Pro #3 – Fewer Errors

Live-data testing allows designers to solve more usability issues during the design process. Fewer errors mean less rework, saving companies labor costs.

Con #1 – Slow Prototyping

Live-data prototyping relies on engineers to develop prototypes. Unlike drag-and-drop design tools, coding takes time. It also requires more team members to build the prototype, resulting in higher costs and a slower time-to-market.

Con #2 – Getting Buy-In

Unless you’re a designer with coding skills or a UX engineer, building a live-data prototype isn’t possible without a developer. This means you must get buy-in from the engineering team and stakeholders.

Con #3 – Limited Scope

The time and resources needed to create a live-data prototype mean designers are limited by what they can build and test. For this reason, designers usually reserve these prototypes for big problems that require accurate results.

Live-Data Prototyping Without Engineers Using UXPin

With a code-based tool like UXPin, designers can build advanced live-data prototypes without involving engineers so much.

UXPin prototypes don’t only benefit designers during testing; they also streamline the design handoff process because engineers can see exactly how everything is supposed to function with minimal documentation and explanation.

Functioning User Inputs

Most prototyping tools don’t have functioning form inputs–making it impossible to test features that rely on user data. UXPin’s code-based prototypes feature functional inputs that designers can program to imitate code.

UXPin’s Signup Form example demonstrates how designers can test common errors and validation that typically require code prototypes. 

Using APIs with UXPin

Designers can use IFTTT to connect UXPin prototypes to other products and services via webhooks. For example, sending a Google Calendar invitation for a meeting booking app.

IFTTT has over 700 services you can connect to your UXPin app, including email, SMS, project management, internet of things products, chat, social media, and more.

By integrating external services through IFTTT, designers can connect live-data prototypes in a few clicks without the help of engineers. UXPin provides actions for GET or POST HTTP requests so designers can send or receive API data.

Importing Real Data

Designers can also import real data into UXPin prototypes using JSON, Google Sheets, or CSV. UXPin also allows designers to populate fields using dummy data using the feature or Unsplash for images.

These content and data features allow designers to populate any field no matter the source–live data, real data, or dummy data.

Fully Functioning Prototypes with UXPin Merge

Designers can take live-data prototypes to the next level with UXPin Merge. Sync a design system or component library to UXPin so designers can build fully functioning prototypes using code components.

With Merge, designers can build high-fidelity prototypes with the same functionality as engineers using code. Instead of writing code, designers simply drag-and-drop components to build live-data prototypes.

Here are some examples of live-data prototypes designers can build using Merge:

Fully functioning date pickersGraphs and charts that change according to user inputsData grids that users can filter, sort, and editFunctioning pagination and search fieldsVarious forms, including signups, email subscriptions, etc.eCommerce and ordering flows

Live-data prototyping in Merge means designers don’t have to rely on engineers to build prototypes. They also don’t have to get buy-in from stakeholders every time to justify the additional resources.

Merge also makes code-based prototyping more accessible to the rest of the organization. PayPal’s product team, who had little experience with design tools, can build prototypes 8X faster with Merge than experienced UX designers using traditional design tools.

With UXPin Merge, every prototype can be an immersive live-data prototype. And, designers can build these fully functioning prototypes faster than traditional image-based design tools.

Ready to start prototyping and testing with the world’s most advanced design tool? Sign up for a free trial to create better user experiences for your customers, enhance designer/developer collaboration, reduce errors and streamline the end-to-end design process with UXPin.

The post Live-Data Prototype appeared first on Studio by UXPin.

Most Important UX Artifacts That You Should Create

Designers produce many UX artifacts throughout the product development process. These records help design teams iterate on previous work and provide valuable documentation for stakeholders, design handoffs, R&D, and future projects.

This article explores common UX deliverables and how each artifact guides the next. We’ll also discuss which UX artifacts matter most to different teams and stakeholders.

Keep your UX artifacts like design files, documentation, components, prototypes, wireframes, and mockups in one centralized design tool. Sign up for a free trial to explore UXPin’s advanced code-based design features.

What is a UX Artifact?

UX artifacts (or UX deliverables) are the research records, sketches, design files, prototypes, reports, and other documentation that design teams produce during a project.

6 Key Benefits of UX ArtifactsOutlines project scope and define business, user, and technical requirements (UX design requirements document).Documenting the design process, so design teams can iterate on previous work and avoid duplication.Synthesizes research to guide the design thinking process and further decision-making.Simplifies communication and collaboration between teams and stakeholders.Enables design teams to research and understand user needs and pain points.UX artifacts provide valuable documentation for onboarding new team members.3 Types of UX Artifacts

To simplify matters, we’ve created five categories for UX artifacts to cover in this article, including:

ResearchDesignTesting1. Research Artifacts

Research artifacts include everything associated with research throughout the design process. Here are some common research artifacts:

UX design requirements documentResearch planUser researchCompetitor researchMarket research

Let’s look at a few of these in greater detail.

2. User Research

User research artifacts are essential for the early design process. These documents help designers understand users to make human-centered design decisions. User research artifacts include:

Personas : A fictional person representing a user group. Personas provide UX designers with a human representation to focus their empathy and understanding. Empathy maps : A practice to empathize with users to visualize what they think, say, do, and feel when encountering a problem or situation. User journey maps : A step-by-step visualization of a user’s journey as they complete a task.Storyboards: Similar to journey maps but focus more on illustrations and storytelling to visualize an idea or concept. User flows : A start to finish visualization of a user’s journey through a digital product–like an eCommerce checkout process.3. Competitor Research

UX designers use competitor and market research to gain a broader understanding of a product’s demand and gaps for opportunities. A typical competitor research artifact is a competitive analysis report–a document summarizing competitor research completed at the start of a design project.

Design Artifacts

Design artifacts will likely make up the bulk of artifacts designers create during the design process, including:

Sketches & paper prototypesWireframesSitemap/information architecture diagramsMockupsPrototypesStyle guide1. Sketches and Paper Prototypes

Designers create sketches and paper prototypes to iterate on ideas before committing to the digital process. They also use these paper artifacts as a template reference when designing digital wireframes and mockups.

2. Wireframes

Wireframes are usually the first artifacts designers create when transitioning from paper to digital. Designers use wireframes to determine each user interface’s structure and layout while providing a foundation for low-fidelity prototyping.

3. Sitemap/Information Architecture Diagrams

A sitemap (also referred to as information architecture) visualizes each product or website’s pages and how they’re linked. This information architecture is an essential UX artifact as it guides several key design and development decisions:

Total number of screens required for the project and how to design themHow to structure each user flowWhich UI elements to use when connecting screens (i.e., a button or link)How to prioritize content and navigationWhere to place navigational links (i.e., header vs. footer)4. Mockups

Mockups are accurate visual representations of the final product’s look, including UI design elements. These designs are static but provide a foundation for high-fidelity prototypes.

5. Prototypes

Designers build low-fidelity and high-fidelity prototypes as they iterate on ideas throughout the design process. Low-fidelity prototypes allow designers to test user flows and information architecture, while high-fidelity prototypes are valuable artifacts for user testing and stakeholder feedback.

High-fidelity prototypes also provide engineers with a reference during the development process. They use these artifacts to understand each screen’s layout and how the product must function.

One of the challenges with image-based prototypes is they lack fidelity and functionality, making them difficult to understand, creating friction between designers and engineers.

UXPin is a code-based design tool–meaning designers and engineers can speak the same language. Designers can use UXPin’s advanced features like States, Interactions, Variables, and Expressions to build prototypes with code-like fidelity and functionality. Sign up for a free trial to discover how UXPin can enhance your end-to-end design process.

6. Style guide

A product’s style guide tells designers important information like colors, typography, logos, branding guidelines, and other visual and interaction design instructions. Style guides are crucial UX artifacts because they help designers maintain consistency and reduce design drift.

Linked to a product’s style guide is a pattern library–a group of components that solve usability issues, like cards, navigational menus, CTAs, etc.

Testing Artifacts

Testing provides valuable data for designers to identify problems and opportunities to improve a digital product. These artifacts usually include important UX metrics for product roadmaps, project KPIs, and the overall UX strategy.

UX researchers also generate data and documentation during usability testing, which is crucial for identifying issues and opportunities or validating design ideas.

Some testing artifacts include:

Survey reportsUsability reportsAnalytics reportsUX audits1. Survey Reports

Surveys usually produce a one-page report displaying the results. Designers use this data to make decisions or for presentations to stakeholders.

2. Usability Report

Usability testing is a crucial part of the user experience design process. Every usability test produces a report describing specific issues and recommendations for fixing. 

3. Analytics Reports

Analytics gives design teams insights into user behavior and how they navigate a digital product. Analysts can generate various analytics reports, depending on what designers want to learn and analyze. 

Designers use analytics reports to identify issues and opportunities as well as validate research and test results.

4. UX Audit Report

“A UX audit is a quality assurance (QA) process that reviews an existing digital product to ensure it meets business, user experience, and accessibility requirements.”

A UX audit report summarizes the process, including actionable next steps, like fixing a broken link or replacing outdated content.

Who Uses UX Deliverables?

Research from the NN Group identified three key entities that use UX artifacts outside of the design department:

Internal stakeholdersExternal stakeholders/clientsEngineering teamsInternal StakeholdersWireframesHigh-fidelity interactive prototypesCompetitive analysis reportUser journey mapsTesting reportsExternal StakeholdersCompetitive analysis reportUser journey mapsTesting reportsHigh-fidelity mockups and prototypesEngineering TeamsSitemapUser flowsStyle guide & pattern libraryHigh fidelity prototypes and mockupsWireframesDesign handoff documentationCreating, Sharing, and Managing UX Artifacts in UXPin

UXPin provides designers with an end-to-end design solution, including creating, sharing, and managing UX artifacts. Let’s look at a few of these in detail.

1. Wireframes, Mockups, Prototypes

Designing wireframes, mockups, and prototypes are crucial for developing and testing ideas. Designers can use UXPin to design these artifacts and share them with team members for collaboration or stakeholders for feedback.

UXPin’s Comments feature allows team members and stakeholders to provide feedback on designs and assign comments to designers who can make them as resolved once actioned. 

Keeping these artifacts and feedback in one place makes it quicker for designers to test and iterate, streamlining the design process.

2. Design Systems

UXPin’s intuitive Design Systems feature allows teams to build, share, and manage a project’s visual design elements, including:

ComponentsColorsTypographyAssets

A dedicated designer or DS team can manage the project’s design system by adding descriptions/documentation and setting permissions to prevent team members from making unauthorized changes.

UXPin’s Design Systems is an integrated feature, so you don’t need extra plugins or applications for it to function–keeping everything in one centralized design tool.

3. Documentation

Design handoffs are notoriously stressful for designers and engineers. Designers often create multiple artifacts across several formats to explain designs and prototypes.

UXPin is optimized for design handoffs, allowing design teams to create documentation on prototypes–no more external PDFs or explainer videos showing designers what something is “supposed to do.”

UXPin also creates additional documentation automatically in Spec Mode, allowing engineers to:

Inspect propertiesMeasure distancesRead the style guide, which includes starter CSS

Engineers can also communicate with designers via UXPin’s comments to ask questions about specific UI elements.

4. Preview and Share

Many design tools don’t offer the ability to prototype and test, while others provide limited functionality not suitable for accurate testing. 

UXPin’s Preview and Test feature allows designers to launch prototypes with the click of a button. Preview and Share allows researchers to conduct tests with users and even make quick changes to iterate during testing–again, no external plugins or applications are required!

Use UXPin for Product Design

Design better experiences for your users and keep your most valuable UX deliverables in one place with UXPin. Sign up for a free trial and discover how code-based design can revolutionize your product design process.

The post Most Important UX Artifacts That You Should Create appeared first on Studio by UXPin.

Omkar Chandgadkar from Amazon – Implementing DesignOps as a UX Designer

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

Omkar Chandgadkar is a Senior UX Designer at Amazon Alexa Smart Home with a practical step-by-step approach to DesignOps. The humorous title of his Design Value Conference talk, “How to design a plane while flying it,” starts by discussing common design team challenges and how to develop strategic processes to achieve long-term goals.

One way to improve the end-to-end design process while enhancing cross-functional software development collaboration is through UXPin Merge. 

Sync your design system’s component library to UXPin’s editor, so designers, product teams, and developers all work with the same UI elements. Sign up for a free trial to explore code-based design and advanced UXPin features. Get a taste of Merge while using MUI kit in UXPin.

Common Design Team Challenges

Omkar starts his talk by highlighting three common issues with design teams using a plane-design analogy:

Stuck on a blueprint: “We spend a lot of time on the big picture vision, but we ship none of those things.”Baggage fell off on the runway: “Most of our design gets scoped back and then never revisited post MVP launch.”Designing a plane while flying it: “I feel like I am involved at the last minute, for specs that were needed yesterday.”

Omkar has two solutions for these challenges that design teams can apply at all stages of the software development process.

Connecting the dots map: To help you get unstuck and gain momentum when faced with different tactical or strategic projects.Design offerings: A proactive approach for you to be intentional about project intake to maintain a balance of tactical and strategic.Framework One: Omkar’s Connecting the Dots Map

Omkar simplifies the software development process into sets of activities and milestones (dots) for design, product, and engineering. 

“Stepping into Design Operations is about realizing where these dots from different disciplines should intersect before moving to the next milestone.” Omkar Chandgadkar is a Senior UX Designer at Amazon Alexa Smart Home.

DesignOps practitioners must understand how artifacts across design, product, and engineers are interconnected. 

What are these points of interaction?How do these artifacts inform each other?How are Decisions Interconnected?

The aim of the connecting the dots map will help you identify how your orgs make decisions and how these decisions are interdependent. To connect the dots, Omkar asks four critical questions:

What areas can we invest in?: Shared documentation of the project’s current state, like a customer journey map.What are the best ways to solve these problems?: Your product vision or “north star.”What do we solve first?: This might be a shared set of launch goals, slide deck, etc.What is the experience?: What are we shipping right now? i.e., sprint plans, design specs, wikis, etc. Launch-readiness documents.

To see Omkar’s Connecting the Dots Framework in action, check out the example scenario from 7:00 in his Design Value Conference talk.

Framework Two: Omkar’s Design Offerings

Omkar’s Design Offerings framework encourages DesignOps practitioners to take a step back and ask themselves, “What value does Design’s involvement add to different stages of product development?”

Omkar uses the Design Offerings framework in conjunction with Connect the Dots to create a set of product offerings from Design to the business. Examples include:

Horizons Class Project: A compelling product vision we can aspire towards in the next “x” years. Value:

Reinvigorate product backlogExplore “What ifs”Build a compelling pitch to get customers/product team excited

Mountains Class Project: An end-to-end design for a major product launch this year. Value:

Launch products that are usable and usefulSpend time on end-to-end customer experience, edge cases

Plains Class Project: Optimized experience for an existing product to improve basic usability. Value:

Refine and define UX patterns and update componentsQuick fixes for unimportant areas of the productFix usability issues

Omkar recommends DesignOps marketing these offerings to PMs proactively, saying, “These are packages Design can offer your projects.” Omkar even created brochures, delivered them to PMs, and left them in public spaces to advocate for Design’s value.

Omkar uses his offerings to decide what type of support Design offers during project intake or when working through his product backlog. These offerings allow DesignOps to immediately identify next steps, assign resources, and begin work.

How to Use Omkar’s Frameworks?

Connecting the Dots Map:

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

Design Offerings:

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

To shift from “designing a place while flying it” (tactical) to a more strategic approach, Omkar’s frameworks help:

Connect the dots on how decisions are made in your org. Use it to be proactive about future decisions and illuminate past decisions.Identify design offerings based on this mapping and use them for marketing design value and as an intake mechanism.Balance the distribution between your tactical and strategic projects through regular introspection.

Watch Omkar Chandgadhar’s Design Value Conference talk, How To Design a Plane While Flying It, for an in-depth explanation of his DesignOps frameworks and methodologies. You can also check out the complete list of Design Value Conference 2022 talks here.

Improve Design’s Offerings With UXPin Merge

UXPin Merge is a fantastic tool for creating Design value across the organization. Merge empowers non-designers, like product managers, to design, prototype, and test products without the help of UX designers.

PayPal’s Erica Rider proved this concept when she and her team created DesignOps 2.0–a framework where product teams complete 90% of design projects with UX designers providing mentorship, support, and stepping in to fix complex UX problems.

UXPin Merge also creates value for engineering teams and streamlines design handoffs. With a single source of truth between designers and engineers, UXPin Merge reduces drift, writing code, errors, and other time-consuming activities linked to image-based design tools.

Engineers no longer have to interpret or imagine what a prototype does because they use the same components with the same properties, interactivity, and functionality.

The post Omkar Chandgadkar from Amazon – Implementing DesignOps as a UX Designer appeared first on Studio by UXPin.

What is Design Advocacy?

Design advocacy has grown in popularity over the last decade as UX designers seek to educate non-design teams and stakeholders about the importance of user-centered solutions and user experience.

Design advocates take on many forms, from UX designers to c-suite executives with firsthand experience. The goal of a design advocate is to create ripples throughout the organization to transform thinking towards user-centered values.

Table of contentsWhat is a UX Design Advocate?What is the Difference Between Advocacy and Persuasion?Why is UX Design Advocacy Important?What is an Example of Design Advocacy?Advocating for User Experience at PayPalProof That Design Advocacy is Effective – A GM Case StudyWhat is the Best Way to Advocate for Design?1. Cross-Functional Collaboration2. Workshops3. Invites to User Interviews4. Invites to Design Sprints5. Storytelling6. Advocacy Through DesignOpsUXPin – The Ultimate Design Advocate for Your Users

Enhance your product’s user experience with code-based design from UXPin. Create high-fidelity prototypes that accurately replicate the final product, resulting in meaningful feedback from usability testing and stakeholders. Sign up for a free trial to discover how UXPin can revolutionize your UX design process.

What is a UX Design Advocate?

A design advocate is a UX practitioner dedicated to educating and collaborating with non-design teams and stakeholders about user experience while promoting design interests, user-centered design ideas, and design thinking.

Design advocacy is typically an inward-facing role where advocates work with design teams, stakeholders, and other departments on design-related matters. 

With design teams, avocates work primarily to instill the org’s design values and build company culture. With stakeholders and non-designers, they’re showcasing design’s value and looking for collaboration opportunities.

In some instances, design advocates will also connect externally with end-users through online forums or live events. Whether an advocate works internally or externally depends on the product and organization.

What is the Difference Between Advocacy and Persuasion?

Advocacy is about standing up for design interests and having a seat at the table, whereas persuasion tries to convince people to think or act like you.

Design advocacy is not about forcing people to adopt design practice; it’s about including design thinking and principles in their work. The goal is to get non-design team members and stakeholders to stop and think, “Does this decision serve our interests and our customers?”

Why is UX Design Advocacy Important?

Many stakeholders and non-design teams lack user experience understanding, believing that UX is only about making things look aesthetically pleasing. While this might seem trivial, it can have adverse implications for design projects, resulting in a perceived “design failure.”

For example, let’s say you’re building an app where stakeholders instruct designers to prioritize content and CTAs for business interests. But, user research and testing show that customers prioritize different content and features. 

Users become frustrated with the product because it’s not intuitive, or they have to navigate to menus and submenus to find what they need–resulting in simple tasks taking longer than they should. Several things might happen as a result:

Customers stop using the product, switching to a competitorCustomer service tickets increaseConversions and sales decreaseNegative reviews damage the brand’s reputation

These issues have adverse consequences for the organization, and stakeholders blame UX. The real problem was prioritizing business goals and assumptions over user research and user-centered design.

Stakeholders aren’t necessarily at fault; they simply lack a foundational understanding of user experience–this is where design advocates come in.

What is an Example of Design Advocacy?

We’re going to share two examples of design advocacy at two enterprise organizations–one at PayPal and the other at GM.

Advocating for User Experience at PayPal

In her Design Value Conference 2020 talk, Erica Rider, UX Lead EPX at PayPal, talks about how she advocates UX principles to product and engineering teams to hold everyone accountable for user experience–not just UX.

Erica realized a significant control/accountability imbalance in the product development process:

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

Erica believes the accountability should be balanced or fall on the delivery team. She works to educate engineers to understand user experience and measures their success through a purpose-built wizard.

By advocating for design and user experience principles, Erica has found a middle ground with her engineering counterparts to improve product delivery for her users.

You can learn more about Erica’s approach from her 30-minute Design Value Conference talk, DesignOps 2.0 – Scaling Design.

Proof That Design Advocacy is Effective – A GM Case Study

Talking at Miro Distributed 2020, Jerra Murphy, UX Researcher & Design Strategist at General Motors, discusses her strategies for advocating design and user experience at the motor industry giant.

Jerra uses design thinking workshops and shared experiences to educate stakeholders about users and their frustrations. Her biggest success was with GM’s Director of Global Innovation, Tanya Skilton, who realized her approach to products was flawed.

“Early on, I made the mistake of assuming that business-focused, high-level discussions about problems and products to solve them was adequate information with which to design and create products! How very wrong I was!

Working with you [Jerra] to create UX-focused research showed me how questions can be asked to genuinely learn about a problem or need versus simply reinforcing my pre-conceived notions about that user or problem.”

Firstly, hats off to Tanya for being open to new ideas and to Jerra for doing such a great job shaping the thinking towards design at GM. You can watch Jerra’s entire 30-minute talk here.

This example from GM reinforces our earlier statement, “Stakeholders aren’t necessarily at fault; they simply lack a foundational understanding of user experience.”

What is the Best Way to Advocate for Design?

Here are some ways to advocate for design across the organization, from partnerships to including stakeholders in design activities and even implementing new design practices.

1. Cross-Functional Collaboration

Collaboration is one of the keys to successful design advocacy. Design advocates must find ways to work with departments to share information and the value of user research.

Here are some examples of how design team can collaborate with others to offer value in other parts of the organization:

There is a lot of value in sharing information with sales and marketing teams. Both teams look at user behavior but through a different lens. Sales and marketing often have valuable data designers can use to support research, and UX can provide existing user research to optimize campaigns.User research can help business teams identify opportunities for new users or markets. Design advocates can offer to share this valuable information to improve product-market fit–increasing UX’s influence in business decisions that serve users and the organization.Data scientists have valuable insights into user behavior, the problems UX can solve, and how to prioritize accordingly. UX advocates can share user research data as another data point for analysts to develop a clearer picture and understanding of customer behavior.

Finding these collaborative opportunities is an integral part of being a design advocate and increasing the department’s value within the organization.

2. Workshops

Design thinking workshops are fantastic for educating non-design teams and stakeholders about design processes and how design thinking solves problems. Design workshops were one of the ways Jerra Murphy worked her magic at GM–and look at the results!

3. Invites to User Interviews

User interviews allow stakeholders to view the usability testing process and how UX designers develop solutions to user problems and identify opportunities.

User interviews are also an excellent opportunity for stakeholders to watch how users struggle with usability issues or poorly designed UIs, creating empathy for future decision-making.

4. Invites to Design Sprints

Design sprints allow stakeholders and non-design team members to experience the end-to-end design process firsthand in under a week. They’ll get a crash course into design thinking and processes and see user reactions to their solutions.

5. Storytelling

Jerra Murphy of GM often uses storytelling to tell user stories and UX successes. Over time, Jerra has found that sharing UX artifacts aren’t the best method for presenting these stories to stakeholders. They make sense to designers but aren’t visual enough for stakeholders.

Jerra looks for ways to tell UX stories that are relevant to the listener, usually with lots of visuals connecting the dots between the user and business goals, for example.

When telling a user or UX story, think about your audience and use appropriate language and visuals to get your message across.

6. Advocacy Through DesignOps

DesignOps is a popular vehicle to drive design advocacy. DesignOps practitioners create efficiencies within design and measure the impact in other parts of the organization.

They work on several initiatives to increase design’s value (some of these draw parallels with a design advocate’s job), including:

Encouraging and facilitating cross-functionalCross-functional information sharingSkills developmentInstilling design principles and building team cultureCareer development and coachingDesign team goal setting and mentoringDeveloping tools and processes for better cohesion and consistency

Learn more on the topic by reading our ebook titled DesignOps 101: Guide to Design Operations.

UXPin – The Ultimate Design Advocate for Your Users

User testing is a crucial part of the design process. But, if your prototypes can’t replicate the product experience, you won’t get accurate results. With UXPin’s code-based design tool, designers can build prototypes with code-like fidelity and functionality for better user testing.

UXPin prototypes also result in better, more meaningful feedback from stakeholders. Instead of “imagining” doing something, UXPin’s code-based prototypes offer advanced functionality, creating immersive experiences your stakeholders love.

“The C-suite people and the directors are able to give us stronger feedback about the ultimate direction because they experience the features and goals of these prototypes rather than just commenting about how these boxes don’t look like a text field, for example.” Erica Rider, UX Lead EPX at PayPal

Switch to UXPin’s code-based design solution and start creating more value and efficiencies for design advocates to talk about. Sign up for a free trial to experience how UXPin can create better user experiences for your customers.

The post What is Design Advocacy? appeared first on Studio by UXPin.

DesignOps Beyond Design Team at PayPal: How to Work with Engineers?

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

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

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

Traditional DesignOps vs. DesignOps 2.0

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

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

DesignOps 2.0 had to:

Provide users a consistent and predictable user experience across all toolsEnable product teams to successfully deliver useful and usable productsScale design significantly as efficiently as possible without adding new designers

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

Evolution of Responsibilities

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

Product Teams

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

Deliver products with a good user experienceConduct user research in collaboration with the UX teamDesign prototypes with guidance from the UX teamUX Teams

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

Enable “Self-Service UX” for product teams

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

Provide mentorship and guidance to PD teams

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

Design solutions at a platform level

Services that can be shared or are needed by most products

Solve big UX problems

How to establish trust between users and the platformBuild real-time user research analytics to collect both quantitive and qualitative user data directly in the platformEducating Engineering Teams About User Experience

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

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

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

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

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

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

Evolving PayPal’s DesignOps 2.0 Process

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

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

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

Developing an understanding of the userMeasure the success of UXHolding PD teams accountable

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

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

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

Measuring the Success of UX

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

Continuous & automatic collection of user metrics:

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

Tracking time-to-complete and drop off rates:

Total time to complete the workflowTime to complete each stepTotal drop off percentageStep with the highest drop off rate (used to identify step-specific issues)

Real-time qualitative data with strategic interrupts:

Trigger interrupts when users are having troubleOnly when a user meets the criteria

Baseline and benchmark analysis built-in:

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

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

UXPin Merge Scaled Design in Erica’s Team

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

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

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

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

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

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

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

UX Engineer Portfolio – A Short Guide with Examples

Springboard’s online learning platform lists UX engineers (aka UX unicorns) as one of the most in-demand jobs in 2022. Creating an attractive UX engineer portfolio will help you stand out.

We share tips on how to build a UX engineer portfolio, what info to share, and examples at the end for inspiration.

Improve collaboration and bridge the gap between design and development with the world’s most advanced UX design and prototyping tool. Sign up for a free trial to discover how UXPin Merge can revolutionize your product development process.

Who is a UX Engineer?

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

UX engineers are experts in primary front-end programming languages like HTML, CSS, and Javascript. It’s their job to assist designers in building high-fidelity prototypes and developing front-end UI elements and interactivity.

People often think of UX engineers as the bridge between design and development because they possess the knowledge and skills to collaborate with designers and engineers.

UX Engineer SkillsDesign thinkingVisual designinteractionUI designWeb designWeb developmentMobile app developmentVersion controlHuman-Computer Interaction (HCI)Design systemsDebugging & TestingNavigation and Information ArchitectureResponsive design and developmentHigh-fidelity prototypingWhy do You Need a UX Engineer Portfolio?

Whether you’re planning to work as a freelancer or looking for a full-time position, a portfolio is an opportunity to showcase your skills and experience.

UX engineers must use their portfolio to demonstrate that they’re competent at UX and front-end development and capable of working on cross-functional teams.

How to Create a UX Engineer Portfolio?

UX engineers have a couple of options when creating a UX portfolio website:

Use a content management system (CMS) – WordPress, Squarespace, etc.Build a static website using HTML, CSS, and Javascript

A CMS is easier to maintain, while a static website offers UX engineers more creativity and flexibility. A static website is also an opportunity for a UX engineer to showcase their complete skill set, from design to front-end development.

The Building Blocks of UX Portfolio WebsiteHomepageAboutPortfolioContact

Some UX engineers include a blog, but the fewer distractions, the better.

It’s important to think about your users when building a portfolio website. They’re potential clients/recruiters who want to know who you are and view your portfolio–prioritize content accordingly.

Homepage

Use your homepage to briefly introduce yourself (one or two sentences), an overview of your skillset, and links to your work (portfolio page). You could also include two CTAs above the fold, one linking to your portfolio and the other to your contact page.

About Page

Use your about page to share your knowledge, experience, and work history. You should also include a list of design and development tools you’re competent with. 

Include mentions and links to industry-related talks, articles in publications, etc.; this helps to present yourself as an expert, increasing the likelihood of landing a big job!

Keep personal information to a minimum–your users want to know about your professional expertise rather than pics of your cat.

Portfolio

Your portfolio page is the most important page on your website. We recommend sharing 3-5 of your best projects. If you prefer to land work as a UX engineer, include projects showing the end-to-end product development process where you had to collaborate with designers and engineers.

Check out The Anatomy of a UX Engineer Portfolio Case Study below for details about how to structure each case study.

Contact

Use a simple contact form for people to get in touch with the following fields:

NameEmailMessage

Remember to include links to relevant professional social accounts. Avoid including your email address and contact number, as this could lead to lots of spam!

The Anatomy of a UX Engineer Portfolio Case Study

Here is the anatomy of a UX case study, including extra parts relevant to UX engineers. Our best advice is to keep words to a minimum, so it doesn’t take people too long to read and digest your case studies.

1. Introduction

Use three paragraphs to explain the project, client/employer, the need for the new product or feature, and your role.

2. Problem Outline

Use 1-3 sentences to define your users and the problem the project had to solve. 

3. The Design Process

Use three paragraphs to describe your involvement in the design process and how you collaborated with design teams, including applying design thinking to understand the problem and develop solutions.

You might also include whether you used a design system and your part in the design handoff. These are key parts of a UX engineer role because it demonstrates how you enhance collaboration between design and development.

Important UX artifacts for this part of your portfolio include:

Ideation notes & sketchesUX researchScreenshots of high-fidelity prototypes

List the design tools you worked with when collaborating with design teams.

The Development Process

Use 1-3 sentences to describe your role in user interface development and how you collaborated with engineers. Include the tools, software, and tech stack you used to compile and test your code.

It’s essential to highlight challenges during the development process and what you did to overcome these. Employers want to know you’re capable of finding solutions to technical problems.

We also recommend how you turned design files into functioning code, the various iterations, any challenges, and how you arrived at the final product.

Product designer and UX engineer Adham Dannaway shows how he went from wireframe to final product by placing the two screenshots side-by-side.

Important UX Engineer Platforms

To increase your exposure and chances of landing the best jobs, we recommend these platforms for UX engineers:

LinkedIn : LinkedIn is great for UX engineers because they can take tests to prove their understanding of UX design skills and programming. CodePen : A community-based platform where developers can share code–great for demonstrating your programming skills. You can even embed CodePens, so people don’t have to leave your portfolio website. GitHub : Sharing links to your GitHub profile allows prospective clients and employers to see your contributions and personal projects.

Make sure you include links to these platforms on your website so people can explore more of your work.

5 UX Engineer Portfolio ExamplesXenia Lin – US-based UX Engineer

Xenia’s portfolio homepage includes an introduction about her skills, work, and experience. Xenia uses this space to highlight her skills in both design and development and her passion for building extended reality experiences.

Matt Farley – Canadian-Based Product Designer & UX Engineer

Matt’s portfolio homepage features a minimal UI with a clear CTA, “Say Hello,” taking visitors to his contact page to get in touch. Matt also includes several key sections on his homepage, including:

Designer, front-end developer, and mentor skillsRecent workCompanies Matt’s worked withHis startup projectsTestimonials

Matt’s footer includes a clear CTA and his social links.

Adham Dannaway – Australian-Based Product Designer & Front-End Developer

Adham’s homepage features a cool hero animation with “designer” on one side and “” on the other. Below the fold are links to some of his latest work. Adham’s header navigation provides links to the rest of his portfolio website and social media.

Helen Khor – UK-Based UX Engineer

Helen uses her homepage to showcase various projects. She includes a link to the project on GitHub and the prototype. While Helen’s UI is simple, she presents the most essential information and links for people to view her work.

Ata Dogan – AR Product Designer @ Meta

Ata’s portfolio website features an immersive video of his work, processes, and talks. It’s a creative idea to introduce himself and his work. Ata’s about page provides a brief introduction, his speaking engagements, and links to his social media. He also includes a link to his CV in the header navigation.

Bridging the Gap With UXPin Merge

UXPin Merge allows you to sync a UI component library from a repository to UXPin’s editor so designers can build fully functioning prototypes with code components.

Using code components to build prototypes means UX engineers have less work during UI development. Merge simplifies the design handoff process because UX designers and UX engineers speak the same language–a single source of truth!

Any changes to components in the repository automatically sync to UXPin, so design teams can prototype and test with the latest iterations. UX engineers can use component props (or Args with our Storybook integration) to allow designers to adjust properties in UXPin. Any changes render JSX, which engineers can copy/paste to start development.

Discover Merge

The post UX Engineer Portfolio – A Short Guide with Examples appeared first on Studio by UXPin.