Case Study: How TeamPassword Builds Consistent Designs with UXPin Merge
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.
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.
