30% more client upgrades:
How Alliance Laundry Systems scaled up industrial GUI development
Using graphically rich, gesture-based touchscreens to modernize user experience
Alliance Laundry Systems is a world-class manufacturer of commercial laundry solutions for premium markets, including hospitality, healthcare, industrial, residential, and military. Operating for over 110 years, Alliance invests heavily in innovation and development to support market-leading brands like Speed Queen, UniMac, Huebsch, Primus, and IPSO.
Modernizing user experience (UX) and reducing time to product launch were essential. To address evolving client behaviors in the commercial laundry market, Alliance had an urgent need to update their softkey-based controllers for existing washer-extractor and tumble dryer products to incorporate a graphical touchscreen.
Additionally, there was a desire to increase revenue opportunities for Alliance customers, to help product adoption and retention.
- Rapid new product introduction to market
- Easier access to user upsells for increased laundromat revenue — users up to 30% more likely to upgrade
- Positive customer feedback on swipe gestures and clean-looking, modern UX
Storyboard-built GUI on the Speed Queen washer-extractor
In 2017, Alliance made the decision to transform the commercial laundry industry by adopting graphically-rich, gesture-based touchscreens to provide a sophisticated and intuitive user experience for laundromat clients.
Having used softkeys and seven-segment displays on their laundry product controllers for years, Alliance saw the trend towards modern, smartphone-like experiences crossing over into the commercial and industrial markets. Their main customer base, laundromat owners, wanted to give their clients machines that were easy to use and flexible in terms of upsell options for purchase.
During the update of their non-touch 3.8” monochrome and 3.5” color screens, they saw an opportunity to launch a parallel project to bring a touchscreen experience to market as rapidly as possible. This also offered the chance to move away from a legacy GUI design tool that was limited in features and scalability.
Jeff Hochtritt, Manager of Global Electrical and Electronic Engineering at Alliance, explains. “Our existing tool was strongly tied into their hardware stack, which didn’t offer a lot of flexibility or growth. The nice thing about Storyboard was its platform independence, and the ability to run GUI applications on almost anything from Linux to bare metal. We wanted to move fast and needed the option to scale to any hardware in a cost-effective way, so we chose AMETEK Crank pretty quickly.”
Alliance also wanted to increase their agility to market, by recognizing and addressing the growing complexities in industrial GUI application development. “We definitely struggled with development timelines before AMETEK Crank,” Hochtritt explains. “There’s significant effort to get things working, as teams typically underestimate the amount of time it takes to understand today’s hardware modules and to get applications working on them. For example, we traditionally did the bulk of the controller processing in C code on the backend, so moving to a newer architecture where the GUI is in primary control was a shift for us that Storyboard helped streamline.”
Winning consumer markets means getting there first with flare. One of our wearables manufacturing clients (anonymous by request) wanted to enter the competitive smartwatch market with a bang, delivering features on a low-power microcontroller (MCU) platform wrapped in a user experience (UX) that could compete with the top vendors.
As this was their first smartwatch project, they needed a graphical user interface (GUI) development framework that supported sophisticated UX elements for small screens, while reducing overall development time. Due to the Covid-19 pandemic, they also required support for remote development teams as most of their employees were working from home and did not have easy access to hardware platforms.
The goals of the smartwatch project were twofold:
Meet or exceed the UX of competitive, high-end products on lower-power hardware; and integrate several different features (clock, fitness tracker, media player, etc.) onto one device with a consistent look and feel.
This meant developing a simple, uncluttered GUI that was easy to navigate and had small moments of wonder to delight the user on every screen — often referred to as “flare”.
“We wanted to provide a wealth of information through a simple and sophisticated user interface,” explained the team’s product manager. “Rather than dump everything to the user at once, our design decisions were made with simplicity and refinement in mind, from swipe and menu behaviors to including micro-animations on every screen.”
The team also had the challenge of finding a GUI development solution that supported UX designers and smartwatch developers working from home. The Covid-19 pandemic shifted the way the team worked, with most employees working remotely and access to platform hardware restricted.
The Storyboard wearable GUI development framework is a cross-platform environment for designers and developers to work together to deliver rich, vivid UX on low-power MCUs and microprocessors (MPU), including smartwatch development.
The selection of Storyboard resulted in:
- Significantly reduced effort for the creation of complex UX elements and behavior
- More efficient collaboration between designers and developers across the lifecycle
- Accelerated release of their smartwatch product
Using UX as a competitive advantage to increase client revenue
The touchscreen project’s business case included giving laundromat owners the ability to offer customers upgrades over the base cycle. Not only did this motivate owners to choose Alliance’s flagship model over lower-tier, seven-segment display products, it gave them the opportunity to make more money from their clients.
“We developed the new GUI to give the end user options for several tiers of laundry cycle modifiers, explaining features and pricing very clearly,” explains Hochtritt. “We’re finding a higher percentage of laundromat clients are paying for these cycle upgrades, making our product more attractive to our customers as they’re able to drive more revenue.”
How the industrial UX design was created
The biggest UX design challenge was to distill a variety of complex features into simple, approachable industrial GUI elements. With an audience split between those that needed greater control over their laundry options and others that wanted to push a single button, the project’s design team decided to perform extensive research and user testing to get the UX right.
Speed Queen tumble dryer
How AMETEK Crank’s Professional Services helped scale UX
With help from AMETEK Crank’s Professional Services team, the original UX design for the Speed Queen brand was implemented in Storyboard and ported to other devices in a much shorter period of time, using Storyboard features to retain the playful GUI approach built by the design experts while allowing Hochtritt’s team to be ahead of schedule and start testing earlier.
“We run the same Storyboard application on both washer extractor and dryer machines, making development and maintenance easier,” said Hochtritt. “Most GUI frameworks don’t offer this level of flexibility and it was another reason we went with Crank.”
Alliance runs Storyboard GUIs in two configurations of the NXP i.MX6 platform, Linux and Segger embOS, and on two screen sizes, 5” and 7”. They also use a dynamic feature approach, where code for multiple use cases is contained in one Storyboard runtime that’s configured based on deployment.
This innovative architecture includes:
- Features for both washer-extractor and tumble dryer products in one GUI application
- Two separate functional groups — control screens for laundromat owners and user screens for their clients
- Common code shared between features to minimize duplication and maintenance
- Ability to re-skin the GUI based on brand (colors, button types, logos, etc.)
Examples of scaling UX design across different Alliance brands
Daniel Conroy, User Interface Designer at AMETEK Crank, and part of the Crank/Alliance services team explained how a consistent UX was maintained across product lines. “Based on the Speed Queen design files, we created a style guide for the Alliance brand portfolio, with direction on how to deliver a consistent UX. Based on those guidelines, we used Storyboard global variables to apply color shifts to groupings of GUI elements like buttons and menus, eliminating the need to modify hundreds of assets by hand. All that remained was to swap out brand logo files and we went from no GUI to a fully functioning and branded one in very little time.”
Manager of Global Electrical and Electronic Engineering
Internationalizing the GUI
Working with AMETEK Crank Professional Services offered an unexpected benefit: Automated internationalization testing of the GUI. As Alliance products were available in 28 different languages and five more were added as part of this project, screen text had to be validated to ensure no translated strings were clipped across approximately 16,000 screen combinations per language.
Example testing report to identify clipped strings in internationalized GUIs
As traditional manual validation methods were cumbersome and prone to human error, AMETEK Crank’s Professional Services team developed an automated test framework to report on clipped strings in a fraction of the time. Using existing Storyboard Engine tools, the team built a system that identified the exact locations of potential clipping instances for every screen and language at runtime and generated a PDF that helped Alliance decide whether to perform a translation change or update the GUI element to fit.
UX successes in the commercial laundry market
The new features and modern interface have seen tremendous success in the market, according to Hochtritt. “Our new GUI has been well accepted by our clients, with great feedback on the swipe gestures and clean interface. We’re able to deliver a highly responsive and modern feel to our products — a direct result of the efficiency of the Storyboard runtime applications.”
The Alliance team takes advantage of Storyboard’s priority support program and professional services team, working together to eliminate any development barriers and reduce time to release. The combination has proved very effective in meeting Alliance's goal of delivering continuous UX innovations to their customers.
“Storyboard has transformed our slow and cumbersome GUI development process to a slick and effective way to scale UX development across products,” said Hochtritt. “Supported by AMETEK Crank’s Professional Services team, we’ve successfully launched different brands, opened up new revenue opportunities for our customers, and continued to lead the commercial laundry solutions market.”