I decided to share my impressions on UXPin Merge Storybook integration and write about how it influenced the designer-developer collaboration in our team. 

Merge is a part of UXPin – that’s technology providing two main integrations with developers’ tools (Git and Storybook). It allows you to quickly prototype using ready UI code components that are React-based for Git integration, or any framework-based for Storybook integration. I tested the Merge integration with Storybook. 

The review was written by Roy S. Kim, the CEO, and Jacobo Moreno Quiroga – Front end engineer & Digital Content Designer from Fixel Inc., the Japanese UX/UI design consulting company specializing in Design Systems.

Design with interactive Storybook components in UXPin. Build products 10x faster and bridge the gap between designers and developers. Discover UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

UXPin Merge and Storybook integration 

I have both an engineering and design background, and I work on a daily basis on finding solutions to processes inside an application and then writing them in code. The designer part comes in handy when I need to consider and improve the user’s perspective.

This involves more than defining visual aesthetics, it requires considering how the application interface can be subtle enough for someone to not notice it so that they can focus on what they are trying to achieve in the app. 

I usually struggle with the back and forths between iterations of coding that aim to improve user experience. 

Those kinds of improvements are not the same as fixing the product because something doesn’t work. It’s more of intuitive work when a user reports that something feels off. Even if you apply all the design and UX good practices, the user could still complain, and they would be 100% right. This is where a coded Design System or an organized UI component library can help. If you have tested and polished the components approved for your Design System, then you can treat them as ready building blocks for new applications without spending too much time thinking or adjusting them. 

UXPin with Merge technology allows you to import all your Design System components stored in Git or Storybook to the design editor so that you can prototype with them right away. Thanks to this designers can use actual coded elements to speed up the prototyping. UXPin Merge’s motto is “The single source of truth” because what you see in the prototype is combining design with actual working code that developers use as well. 

UXPin – designing to coding 

Let’s start with just UXPin. Essentially, UXPin is a UI/UX design tool similar to Sketch, AdobeXD, or Figma. It’s similar to other competitors so you can get used to it very quickly. You can start with wireframing and end with advanced prototyping in this single tool. 

In most of the similar tools, there is a big difference between what the designer creates in the design tool and what happens in the dev environment, where the real working product is coded. Features like the inspect tab in Figma enable you to see roughly what the CSS behind a certain object would look like. However, this is not always an accurate depiction between what is designed and what is coded. 

Designers and developers essentially come from two different worlds when it comes to the tools used in their daily work. Trying to find a common language between them can lead to way too many meetings and back-and-forths. This might be the very issue that UXPin Merge aims to solve, by having “The single source of truth” which the whole team can treat as the ultimate place of the right components and documentation. 

The UXPin Merge approach 

Merge is UXPin’s technology. Essentially, what Merge does is that it brings coded Design Systems stored in Git repositories or Storybooks to UXPin. Hence, a designer can use real components in their mock-ups and prototypes.

These components are already coded in the repository, and the designer can access its different versions inside UXPin as needed. This way, the integrity of each component is never compromised. It minimizes possibilities for a designer to make mistakes and use elements that aren’t in line with the company’s standards. 

Once you have a Design System and repositories ready to go, you won’t be really modifying them often as their purpose is to store and unify all the versions of the possible elements to speed up the product development process and create governance.

Using UXPin Merge and the imported components, controls the design process as elements are predefined. The changes can be made without a problem but it must be done by developers, so that the chances for casual mistakes are pretty low. 

These limitations actually simplify the work of a designer. They can use fully interactive and prepared elements to focus on the most crucial part – user experience. Sure; color, padding, fonts, and other visual elements are important parts of the experience, but choosing every single little detail can slow down the process.

If all of that is already sorted out in the Design System and repositories, building prototypes with real code components gets easier and faster. Also, it helps keep the consistency even if the components get updated in code as the imported UI is in sync with the components stored in devs’ libraries. No need to worry that elements will be outdated and designers will have to redesign the projects. 

Connecting Storybook 

One of the UXPin Merge integrations I got to see was Storybook. Storybook serves as a sort of developers’ Design Systems to store all the coded UI. It is used by many companies, and it’s very flexible framework-wise as it provides support for around 15 of them.

Now, for teams that are not supported by developers,  setting up a Storybook project and placing all the components there may be a struggle. However, once it’s ready, it neatly holds and displays all the components that are in the Design System. 

UXPin Merge aims to bring what is stored and defined in Storybook to UXPin so that components made in whichever framework can be used for prototyping. The integration part is very simple; grab the URL of a published Storybook project to import the components to the UXPin library for designing. I tested it and it seemed to work perfectly with React components – all the elements behaved in the design editor just as they should. 

Thoughts for the future 

The design process including UXPin Merge in it can be visualized like this: 

UXPin Merge plays a big part in Step B since it provides production-ready UI-coded components that you can use to iterate faster when creating prototypes. With a defined Design System or a component repository, you really shouldn’t worry about Step A because you most probably already have the organized components. Still, there is a possibility that you need to adjust something within the coded components, especially if you are in the middle of creating your own Design System. 

With Step C, which is the build-up step of the application, the developers look at the Merge prototype to see how code components are put together, as well as what code corresponds to which part of the design. However, they won’t just copy and paste the whole code to build the product instantly – they will still need to adjust it so that the prototype becomes a product.  

UXPin Merge seems to be a great solution for rapid prototyping and keeping the consistency thanks to making the most of Design Systems. However, it appears that certain steps are still to be covered. 

To some extent, the work of designers is limited as they mostly can use pre-prepared components, however, it saves time and prototyping with code components brings the world of design and development together. 

Want to try out the integration? Sign up for a 14-day trial!

The post Storybook-UXPin: Review of Merge Integration appeared first on Studio by UXPin.

The level of prototyping fidelity isn’t important for users alone. It also helps stakeholders visualize the final product and decide whether the product development team is heading into the right direction. We’ve invited one of our long-time customers, Kovai.co, to tell us why and how they’re using UXPin.

Kovai.co has a portfolio of companies. BizTalk360, Serverless360, Churn360, and Document360. It is the last one that’s a highlight of today’s article. Document360 has been UXPin’s customer for over 10 years, using the tool to build high-fidelity prototypes that are clickable and consistent with the existing product’s style guide.

UXPin is an end-to-end design tool that connects the full design process. It makes it easy to build an interactive prototype that follows your design system rules and hand it over for development. Check it out. Sign up for free.

Build advanced prototypes

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

Try UXPin

Document360’s Design Team

The Document360 design team consists of four UX designers who use UXPin extensively. Their primary role is to rapidly prototype the functionality and provide a workable prototype that meets the business requirements. 

The team follows human-centered design principles with all UX processes based on its foundational concepts. The key objective is to maximize the user experience while optimizing the design for business goals.

Human-centered design requires teams to build solutions that puts humans that are using the product in the center. Document360’s team does that by testing their solutions with real users and incorporating gathered feedback into the next iteration of the design. They can get quality feedback because the prototypes that they create are fully interactive (read more about it here.) Let’s see how the team creates such prototypes.

Document360’s design team follows this step-by-step process:

1. Plan user flow based on the business requirement.
2. Create clickable, high-fidelity mockups of the product using UXPin.
3. Test the prototypes with real users to gather feedback.
4. Analyze the test results and implement necessary changes to the design, refining the user experience based on user input. This also gathers data based on human behavior and user interaction with the design to make data-driven decisions.
5. Work closely with developers to implement the design and ensure the user experience is consistent with the intended design.

Document360’s design team uses UXPin’s Spec mode to calibrate the design elements based on the screen size and other technical requirements that product managers share with them. In a matter of 5 days, they’re ready to send a polished prototype to production, which means that they stay within one sprint. 

They take data-driven decisions based on the product analytics and feature adoption. The engagement cost (measured in terms of user clicks) and time taken to complete an activity (measured in terms of seconds) are involved in design tweaking for producing optimal designs.

How does UXPin Fit In?

Prior to UXPin, designers were using wireframe-based tools. However, it was not well received by the product managers, developers, and product owners.

It was hard for stakeholders to visualize the final output of the design as wireframes lack complexity and interactivity. Plus, developers couldn’t understand what designers wanted them to build, so the product went through a lot of iterations, which prolonged the whole product development process. The lack of clarity in the wireframe based design was the major problem that they were looking to solve.

More efficient workflow

With UXPin Document360 is able to execute the designs for their product quickly. The designers built a library of design elements that can be reused across their product. This helps them keep consistency, design faster, and streamline the design decision-making process. “The prototyping workflow with UXPin aligns with our product design philosophy,” says Saravana Kumar, CEO, Document360.

Enhanced team collaboration

UXPin helps them build a design prototype that will be showcased to the product owner and product manager for feedback. They aren’t the only ones who comment on the design. The developers also provide feedback that’s related to the technical feasibility.

Thanks to the ability for other team members to leave comments on particular aspects of the design components, the design team knows what needs iterations. The stakeholders also get notified when the comments are being addressed, so communication is a lot smoother than with other tools.

Showcasing how the product will work

Designers are able to execute how the end-product is supposed to work, including validating text inputs and creating clickable UI elements. They produce a workable prototype in a matter of hours, using interactive prototyping features, such as conditional logic and expressions that are discussed in great detail in a separate article: 7 Advanced Prototyping Features You Must Try.

The team says that they “greatly appreciate the way we can execute the design components and build condition-based UX interfaces. We’re able to provide a visual walkthrough of how a product feature should work. UXPin is a great communication tool.”

Build Your First Prototype Today

Document360’s story shows that the tool you use impacts more than just the final output. It makes the process easier too. The team has managed to work out a transparent, collaborative, and efficient design process thanks to the tool they’re using – UXPin. Follow their path and try interactive prototyping in UXPin today. Sign up for a free trial.

The post How UXPin Helps Document360 Improve Team’s Productivity appeared first on Studio by UXPin.

This article is written in collaboration with TeamPassword, a simple-to-use password management tool that has started using UXPin Merge to design with code components.

__________________________________________________________________

Looking at the leading design systems, you may get an impression that they’re reserved for big brands that have time and resources to build one. Not at all! Today’s solutions allow teams of any size to create, maintain, and support a design system.

TeamPassword is one of such companies. When we met TeamPassword, they had a 2-person development crew with no designers in it. They plan on carrying on without designers, and it’s all thanks to UXPin Merge.

Reach a new level of prototyping

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

Discover UXPin Merge

About TeamPassword

TeamPassword is a password manager for teams that keep all the logins and passwords in one place. Instead of passing passwords via email, chat apps, or other less secure communication channels for that purpose, teams can access login details whenever they want via a clean interface which makes sharing simple. The tool is easy to use and pretty straightforward, which makes taking care of access security truly accessible.

Challenge

Switching to React for Better Maintenance

Matthew Chigira joined TeamPassword as a fullstack developer as one of the two developers on the team. He suggested that the tool should switch to React, as it would be easier to maintain in comparison to the old framework.

Updating UI Design to Stay Competitive

He also knew how convenient it is to create an app with a design system that stores and documents building blocks of the interface. There are also many other benefits for brands who use a design system from the very beginning instead of building interfaces with style guides or components that come from many different libraries instead of just one. Some of those perks of having a design system early on include faster work, better handoff, and of course, consistent UI.

Even if you’re building an MVP, consider following a design system. It will make the design process smoother and help you avoid problems with scaling UI when the team is bigger. Moreover, inconsistent look and feel may affect the way potential customers perceive the app.

“Brand is essential in this market.,” says Tony Caccavo, Director of Operations at TeamPassword, “Customers entrust us with sensitive information in their login records. Inconsistencies or an outdated design can cause some customers to question whether we are technologically up to date enough to keep that information secure. Front-end development builds trust and confidence in the backend performance.”

The same goes for feature shipment. If the team doesn’t act fast, someone will beat them to it. Yet, developing a product without designers doesn’t support easy-to-follow, consistent user interfaces.

Gaining Credibility through More Consistent UI Design

Many teams are facing a similar problem. They have exceptional engineers on board, but the need to move fast with development, which affects UI consistency and clarity. It doesn’t make it easy to create a powerful brand that stands out from the competition. Brand is essential in this market. Customers entrust the tool with sensitive information in their login records.

Inconsistencies or an outdated design can cause some customers to question whether we are technologically up to date enough to keep that information secure. Front-end development builds trust and confidence in the backend performance.

Hence, a design system was a must-have for TeamPassword, but it wouldn’t solve all of their problems. It would just help them make design decisions. They also needed a tool with which they could create a simple and effective front-end design, and that is where UXPin Merge came in.

Small Team Can Achieve Great Results

TeamPassword knew about UXPin Merge and its integration with code components libraries, specifically an open-sourced MUI. One of the main selling points was that they could get a themed version of MUI based on their brand from day one. They needed a design tool that would import MUI components and help them create prototypes by just dragging and dropping UI components onto the canvas.

UXPin Merge can bring a MUI library full of React components to the UXPin editor. There are a couple of ways of doing that. TeamPassword could import them from a Git repository or use Storybook integration. Importing coded components is also possible thanks to a code-free import of UI components – Merge Component Manager that you can request access to it here.

As with all of our Merge clients, UXPin scheduled a workshop with TeamPassword to show them how to design with code components. “We had a training session with Jack which was really valuable”, said Matthew, “We learned how to set up the tool and use the editor. The team also showed us how to adjust components.”

With UXPin Merge, TeamPassword doesn’t need a designer to put together a realistic prototype. What’s more important is that the UI design not only looks professional, but it also acts like a developed product, since Merge uses real React components, rather than image representations of the said components that still need to be coded. TeamPassword can truly benefit their single source of truth both in development and design.

Apart from UI designing features, the team has much hope for versioning that UXPin Merge offers. They can quickly update the last version and the prototype gets updated too. Without this feature, they would have to update elements, one by one. Version control also helps to keep track of changes and switch between versions of the design if necessary.

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

Plans for the future

TeamPassword has a full game plan prepared for how they want to use UXPin Merge.

• They want to start with a website redesign based on a chosen design system – the current website looks a bit outdated which may influence the purchase decision on some of the potential customers. Plus, its design is inconsistent. TeamPassword wants to give it a makeover.
• Then, they aim to rebuild the interface of the app using MUI and UXPin Merge – the next task is redoing the application’s front-end design. They want to switch to React and use MUI as their component library for the app. Since they use the same building blocks for design and development – React components – the whole task shouldn’t take very long.
• They will carry on building new features and growing TeamPassword – Their new approach to prototyping will help them design and develop their app that gives a unified user experience and cut down time to market

Summary

Using UXPin Merge helps TeamPassword to create UI design and export the code behind it in no time. They will finally be able to scale design, organize their workflow, and create consistent interfaces without having to hire a design agency. Small teams get design velocity that allows them to scale at the right pace. It’s a new level of working!

UXPin with Merge technology allows anyone to import UI code components from a library stored in Git, Storybook or via NPM packages. The teams can get a single source of truth for design and development even before they are ready to scale their product and team.

Request access to UXPin Merge and experience how fast prototyping can get. There’s no difference between a prototype and the coded product. It saves tons of time for a team of any size. Bring code components to the design tool and connect design and development workflow. Request access.

The post Case Study: How TeamPassword Builds Consistent Designs with UXPin Merge appeared first on Studio by UXPin.

We’re always excited when we get feedback about how UXPin has improved our customer’s design experience. It’s even more special when that customer is one of the world’s largest digital payment platforms.

We had the joy of sitting down with Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, and Anthony Hand – Sr. UX Designer at Erica’s team.

In her own words, Erica explains the design challenge she had to solve at PayPal—bridging the gap between design, product, and development.

In most companies, the designer-developer ratio is one designer for every ten developers. At PayPal, there are five designers to over a thousand developers!

PayPal needed the tools and strategies to overcome this challenge. So, they turned to UXPin Merge and improved their DesignOps process. 

Here’s how Erica and one of PayPal’s design teams revolutionized their design and development process using UXPin Merge. Scale design with UXPin Merge. See how to request access.

Reach a new level of prototyping

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

Discover UXPin Merge

Challenges

Challenge of scaling design:

I have a small design team of five designers, including myself. We’re responsible for somewhere between 60 and a hundred products and well over a thousand developers. 

As a small design team supporting such a large organization, we had to develop an innovative problem-solving approach. We were never going to get the budget to hire more designers, so we had to figure out how to scale design itself!

Challenge of consistency:

None of PayPal’s product teams had experienced UX people or UI developers. The result was a range of usability and design consistency issues—no two products looked the same!

So, I was assigned the challenging task of creating a cohesive and consistent user experience. With three designers and an infinite number of product teams, I knew that we couldn’t follow a traditional model to scale. And adding more designers wouldn’t solve the problem. 

We had to scale design to empower product teams to be successful.

Before 

The tools PayPal tried to use

To start, we knew that product teams were going to have to design products on their own. So, we looked at several different tools, starting with a traditional model, where we had design systems and standards.

Our initial idea was to adapt a traditional design approach while educating product teams about design. But, we quickly realized that with three designers trying to create documentation, providing support, and with the learning curve for design tools, the traditional model wasn’t going to work.

If product teams were going to design products successfully, we had to minimize the tools and skills they needed to learn.

The traditional way

In a traditional UX process, you have designers creating vector-based mockups, which they hand off to developers. Unfortunately, this process creates a gap between how components are supposed to work and what components are supposed to be there.

The result, lots of back and forth between designers and engineers to get design clarity and what the prototypes are supposed to do. Many times developers ask designers questions they hadn’t thought of because they were thinking purely about how the product is supposed to look and work.

Introducing UXPin Merge

For product teams to design products, we had to minimize this designer-developer gap while increasing collaboration. 

Several years before I joined PayPal, I had a theory that to scale design effectively we had to include developers and product managers in the design process. I just didn’t know how we were going to do that. I knew the what, but I didn’t know the how.

Discovering Merge and UXPin opened the door to understanding how I could bridge the gap between design and development—and formed the catalyst to PayPal’s improved design process.

A traditional DesignOps process is about scaling. The usual ratio is one designer for every ten developers. First by adding designers and then building the supporting infrastructure to accommodate a large design team. 

As an internal organization, we knew we would never get the resources to scale to the traditional one to ten designer-developer ratio. We had to find an innovative solution to solve our design challenges without adding designers.

So how does UXPin Merge work?

PayPal’s consumer-facing apps, services, Venmo, and other external services all use different technologies. We settled on Microsoft’s Fluent design system with UI controls for our internal tools development because they’re more enterprise-focused and better suited to internal user interfaces.

With UXPin Merge, we’re able to put our Microsoft Fluent Design System into a Github repo and import the components into UXPin’s design editor. Using this UXPin Merge setup, our product teams can design prototypes that leverage the exact components and UI controls our engineers use to develop these DevOps tools.

For example, a button on the canvas in UXPin’s editor renders exactly the same as it does in our developer tools, including hover/click effects, font styles, and other metrics. Designing with UXPin Merge brings significantly higher fidelity to our prototypes than we’ve ever had at PayPal.

With Merge

We knew we were going to save significant time designing with UXPin Merge during the initial rollout. 

Some of PayPal’s senior management asked us to do a time-saving comparison between using UXPin Merge and a traditional design model.

So, I had one of my designers pick a one-page design comparison test. We did a one-page vector-based design with another design tool we use at PayPal. And then the exact same prototype in UXPin using our Merge component library. How would these two tools compare against the clock?

The results: Using Merge our designer took around eight minutes while using the other design tool the same prototype took over an hour! It’s important to note that this was from an experienced designer familiar and competent with the tool we chose as a comparison.

We didn’t feel comfortable providing product teams with this vector-based design tool. They would have to maintain documentation and educate themselves about how to use the tool before they could even start designing! Even with that training (which would take a lot of time), they wouldn’t reach the competency of an experienced designer or design the same prototype in an hour.

With UXPin Merge, some of our product managers can build similar one-page prototypes in eight to ten minutes—the same time it takes our experienced designers in UXPin! 

Before, with our limited resources and designers, a one-page product would take two or three months just to design mockups. Now product teams can design and deliver a product within the same time frame. 

Impact of using UXPin Merge

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. 

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, how these boxes don’t look like a text field, for example. 

Now that we’re using UXPin with Merge my design philosophy and productivity have gone way up! I’m confident that I can implement a prototype in 30 minutes or less. Whereas with the tools I was using previously, it would take me half a day.

Feedback: Our stakeholders are able to provide feedback pretty quickly using UXPin. We can send them a link to play with the prototype in their own time and UXPin allows them to provide comments directly on the prototypes. UXPin’s comments functionality is great because we can follow along and mark comments as resolved once we address them.

Quality of the product: With this new UXPin approach we’re seeing a more collaborative, integrative design process. Rather than separating design, prototyping, and development, UXPin allows us to create an integrated flow where we engage engineering and product teams throughout the process. As a result, the product’s final quality has improved dramatically.

User testing: It’s been so helpful for us to have these high-fidelity prototypes built with UXPin. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.

UXPin gives you the tools to go from concept to high-fidelity prototyping right away! Explore UXPin Merge and discover how advanced prototyping and testing will change your design process.

PayPal’s redefined design process

PayPal’s DesignOps is an end-to-end process. 

1. Product teams must fully understand their users
2. Design products based on the users’ needs
3. Enable domain experts to complete designs based on their knowledge and testing
4. Validate the design’s success

A common internal issue is that product teams often see UX design as a bottleneck. So, our strategy was to start with removing that bottleneck and enabling the product teams to do the design on their own.

We achieved this with UXPin Merge which enabled us to perform this “snap-together” type design. We provide product teams with components they can drag and drop to build user interfaces.

Product teams were able to create layouts with fixed margins and components so everything looked and worked the way it was supposed to. Designers didn’t have to police anything or step in to design products. 

Designers still help product teams when they’re not following standard design principles or when they’re stuck on challenging problems. But product teams are able to complete 90% of the work on their own, freeing designers to focus on bigger picture design problems.

Outcomes  

Customer-focused

In my opinion, being customer-focused or design-driven doesn’t mean that designers are always leading. Everyone in the organization understands what it means to be design-driven.

When we do design at PayPal, it’s not focused on one little problem here or edge case there. We’re focused on solving problems at a global level, across the entire organization, and across the entire product line. 

We must provide a cohesive and consistent experience to our users across all PayPal’s products, not just little corner cases.

While PayPal’s product teams and domain experts are doing design, our UX team acts as a mentor or coach. Where a UX designer used to work with a single product or maybe a single domain, with Design Ops 2.0 our product designers now work across 10 to 15 different products at a time. 

Education in an enterprise 

When our UX designers mentor our product teams, they’re not only giving them guidance on how to design better layouts or products, they’re also teaching design thinking. 

Design thinking is not just about the UI design, but rather thinking about the complete user experience. How do API response times impact the user experience? How does latency impact the user experience? 

We want design thinking from top-level UI all the way down. We want everybody to understand their impact on the user experience so that our product teams can make good decisions for their end-user. 

Focus on what matters

My design team spends 50% of their time supporting various product teams and the other 50% is spent on larger UX initiatives that impact the organization globally.

Some of these UX initiatives include:

• Do we focus on things like how do we build trust between users on a platform? 
• How do we build an intrinsic attachment between users on a platform? 
• How do we build user research into all of our products, so we’re not running studies, but rather understanding how users use our products, where the gaps are, how we fix them, and how do we provide that data back to our product teams?

Future investment

Scaling your design process is an investment that pays off in the long run. It takes a savvy team to look at the overall design and development life cycle, what that looks like today, and try to figure out how we are going to shorten it, rather than stating, “this step is too long.”

While the initial process of building all of the technology seems like a long time, it’ll actually save you significant time in the long run—for your entire development, design, and development process.

UXPin Merge and your design process

If UXPin Merge managed to solve a complex design issue for one of the world’s biggest digital financial platforms, imagine what it could do for your business! 

PayPal used Merge to sync React components from a Git repository with UXPin but Merge also integrates with Storybook, giving you access to many more frameworks—like Vue, Angular, and many more.

Ready to increase the velocity in your design process? 

The post How PayPal Scaled Their Design Process with UXPin Merge appeared first on Studio by UXPin.

Anything you can create in code, you can design with UXPin powered by Merge technology. Designing with code components can cut down your time to market and simplify the handoff between designers and devs. It’s all thanks to using the single source of truth and designing with production-ready components. 

We’ve recently featured two really cool React components that you can use with UXPin Merge; the responsive design Device Viewer and Theme Switcher. You might think that UXPin’s technology is only useful for companies with a single design system, but we’ll show you how a large web agency, spanning several smaller portfolio teams, used these two components in an environment built around white labeling.

The troublesome design process in agency

Design agencies can come in all shapes and sizes. Individual small or large agencies or even portfolio companies constantly acquiring smaller teams, each using different technologies. But what does stay the same, are the issues faced when managing branding and creating future-proof, scalable, and efficient design systems.

The software and tools these companies use are incredibly important for solving these issues. Imagine how much time and money is wasted on back-and-forth communication due to using and maintaining multiple design systems and sources of documentation over several technologies and how much more rewarding it would be if you could simplify and improve this.

Agencies using the power of Merge technology

As mentioned in the Theme Switcher and Device Viewer articles, you see what amazing components you can create and how Merge can make complex design ideas easy; all thanks to designing with ready code components. Using your imagination, the possibilities of prototypes you can create seem endless.

Focusing on the Theme Switcher, you can see that it’s just a React component. It shows that anything you can imagine and code can be designed within Merge. It shows how agencies that use Merge can work efficiently with any number of clients, switching between clients’ brands with a click of a button. It’s also an incredibly powerful tool when it comes to requests for proposals (RFPs) and quick-turnaround demos. Imagine if all you had to do to create a new styled prototype to impress potential clients was to edit a simple style file, while your competitors had to create a new prototype from scratch. But, how is this different from using another piece of software and their theming tool?

Theme switching is not specific to UXPin Merge, some design tools have it, but how it’s implemented here is what makes it special, incredibly efficient, and design consistent. 

Unlike other design tools, Merge’s variable values are all predefined in the code and can be done at a component or layout level. Everyone, who uses the components, is designing with the same properties and values, hence everyone has the same tools. Consistency is created from the code itself – a single source of truth, meaning no more errors in branding and future proofs the design system. The library in the editor is also syncing with the Git repo, so there’s no need to remember about updating the components in two separate places. 

Imagine having a design system with a single source of truth. How easy it would be to maintain documentation or have a playground where anyone, be it a designer, developer, or account manager can go and test component props and create prototype presentations. Merge can provide this and it’s only getting better.

As we keep mentioning, anything you can code you can design with. This means you don’t have to install a 3rd party plugin to enable theme switching. Why go through all the complicated steps of adding theme switching to your vector-based design system when you can do everything you need in UXPin powered by Merge technology alone.

Summary

Changing design tools can be a daunting task with lots of worry and problems. There’s currently a very rigid design process that people like to follow and it can be very difficult to step out of that comfort zone and try something new, even if they believe it will be better in the long run. 

But there’s no need to worry as the UXPin team is with you every step of the way helping with any integration questions and issues. 

Want to find out more about Merge technology or would like to try it for yourself?

The post How to Make Design Process Simple for Agencies and White Labeling appeared first on Studio by UXPin.

Health technology is developing fast. The times when people would frantically boil water and shred sheets when someone needed medical help are, luckily, coming to an end. With Dr. Quinn, Medicine Woman forever in our hearts, we’ve welcomed the times of online medical support platforms, heartbeat monitors, earlier diagnosis, less invasive treatment options, patient portals, and all kinds of digital healthcare services. When we are the most vulnerable, we can rely on technology.

No pressure, health tech companies, no pressure.

Who Netsmart is and how they make the world a better place

Netsmart is one of the companies that decided to stand up to the challenge of providing reliable solutions and building experiences in the medical tech department. They are a US-based healthcare IT company with over two thousand associates. They provide technology for a variety of healthcare markets, such as behavioral health, family services, and post-acute care.

Needless to say, this industry is very demanding. Not only because people’s lives are at stake, however big of a reason this is anyway. From the product development point of view, the big challenge is still that you have to adapt to all sorts of user experiences that will both benefit the healthcare technology processes and the end-user.

There are a lot of different care settings, that have complex UX needs, to be addressed with the products designed and developed by Netsmart. What they do is provide products that combine all kinds of features that answer different needs, from rehabilitating a knee replacement over a couple of weeks to managing depression over a lifetime.

How the Netsmart design team operates

A very resourceful team of three is collaborating in one office, based in Kansas City Metro. Adding new features to existing tools or building brand new products to serve a big portion of the market.

Doing research, mockups, wireframes, user testing, and passing the design over to engineers – the entire UX process is all in their hands. In fact, wireframes are not used in Netsmart as much, but actually more high-fi design which is very important when it comes to the toolset on which they choose to work.

Is there a doctor in the house?

How did Netsmart work look like before they decided to move their work lives to the next level with UXPin, a full-stack collaborative design tool? They would generate flat mockups using Illustrator, and to describe interactions, they would type out a paragraph.

Because the company grew a lot in the last four years, their design process had to be scaled as well. There’d be more and more products to design and test, and most of all, to develop. They tried to explain their ideas to the stakeholders and users but the pitching and user testing are not easy in this particular industry. Graciela Brewer, Senior UX Engineer at Netsmart admits they have been using Axure for real interactions, but somehow it was a pain as they weren’t able to edit well.

“Our prototyping usually involves full workflow design, and interactions that just link to another page simply don’t cut it for our team.” – Grace Brewer, Senior UX Engineer at Netsmart

The design and engineer work started to duplicate and the team would start from scratch each time. The burning question had arisen. How to make it uniform?

Key pain points the Netsmart team decided to address

• The company had a lot of prototyping needs for all sorts of products.
• The healthcare industry is not familiar with technology so it was hard to explain the ideas.
• Users could barely complete the tests.
• The team had to start over with each design.
• It was hard to keep consistency throughout the whole design process.

Why and how Netsmart chose UXPin

Although Netsmart is a company with thousands of associates, the design team was and still is pretty small. With the company’s overall growth and raising expectations, they had to adapt to the new, faster work pace so they needed a toolset that could expand along with the demand for design and prototypes.

This tool also had to allow the designers to generate UI designs that feel like the real product so that their user testing could work and stakeholders could get a better understanding of what the design team had in mind. They were looking forward to smoothing the collaboration, too. Not just among each other, but most of all with the dev team.

Grace and her team had the freedom to choose a design tool and so they decided it had to have the three main traits. It had to be:

• scalable,
• interactive,
• collaborative.

After a lot of research, having a go with Webflow, Sketch, and InVision, they felt UXPin was the best match. It all happened in 2016 and that’s the way they keep making design happen ever since.

How Netsmart work looks like now

What kind of design work does Netsmart create with UXPin? As an all-hands type of design team, the Netsmart uses UXPin to creating all sorts of assets from hi-fi interactive app UI through web design to collateral.

Since a lot of their work is showcased to the management for approval before the development (as it happens), they happily exploit all the interaction features. It’s no longer a bunch of static images where you have to go through each of them and explain each action, like what this button does, what happens when the user clicks that box. They can simply set a variable and show that easily.

What Grace Brewer also emphasized is that in their field, accessibility features are highly helpful. Creating a UI design for vulnerable people or people with disabilities is a very complex and sensitive work. You have to be mindful of all the special needs your end-user might have.

“The addition of the accessibility features has been very valuable to our team. Being a healthcare software company, accessibility is extremely relevant and important to our clients. The ability to actually show our stakeholders how designs may look to those with different forms of color blindness has been a particularly meaningful addition.”

UXPin being browser-based is a big relief as well. The online repository allows quick access to all their work. They can simply share a prototype to cooperate easily and edit during deadlines. Not having to switch through a lot of tools or look for the most recent version but simply maintaining one common prototype saves them a lot of unnecessary work. Which at the end of the day, saves the company money, as you hire designers not to send files back and forth, but for their creativity and expertise.

UXPin’s top features according to Netsmart

• Browser-based,
• Accessibility,
• Conditional Logic,
• Variables,
• Interactions,
• Spec Mode,
• Symbols,
• Design Systems,
• Comment Mode.

What did Netsmart gain with UXPin?

First of all, in simple words, they can create images and make them interactive. And that changes a lot when your work is generating healthcare apps. The time they save while eliminating double work of design, describing interactions, handoff to the developers, is incomparable.

They created their own look and feel and it lined up with the Design Systems. This way instead of doing the mundane work of creating all the designs from scratch, the team can rather focus on software solutions and usability. User testing became much easier too with the prototypes that look and feel almost like the real product.

“The ability to create full, realistic interactions has helped stakeholders better understand our designs, enabled our clients to usability test our prototypes more effectively, and allowed other roles in the org to demo our work with much more ease.”

What has kept the Netsmart team excited to use UXPin for almost three years – Grace admitted – are all the helpful improvements and new features added in that time. With UXPin as their design tool of choice, they can create technology that helps people when they need it the most.

The post How Netsmart builds healthcare technology using UXPin – case study appeared first on Studio by UXPin.