Designing the IBM MetroPulse service with Adobe XD

Adobe partner IBM iX uses Adobe XD to redesign service that helps businesses predict and address local market demand.

Image source: Adobe Stock / mavoimages.

We love to showcase our customers’ successes, and the role our partners play in helping organizations achieve their goals using Adobe solutions. What we don’t get to talk about very often is how our partners use the very same solutions to create meaningful experiences of their own.

IBM iX used Adobe XD to design a next-generation user experience for IBM MetroPulse, a cloud service that gives customers like Nestle and Shell insight into retail demand patterns using a combination of company and third-party hyper-local data, such as weather and neighborhood demographics.

In turn, businesses use this information to make timely decisions, like stocking additional ice cream along the weekend’s parade route or investing in new point-of-sale locations based on predicted opportunity.

There is certainly demand for this level of insight, and its potential to boost revenue. According to an IBM Institute for Business Value report developed with the National Retail Federation, 85 percent of retail and 79 percent of consumer products companies expect to use intelligent automation for supply chain planning by 2021. By the same year, 79 percent of both groups also plan to use intelligent automation for customer intelligence.

Keeping beauty and purpose in mind

Originally designed by data scientists, IBM iX needed a way to reduce the complexity of the tool so that local store managers could not only comprehend the data it generated, but also know what to do with it. That’s where the principles of experience design came in to play.

“We began crafting journeys with the challenges and needs of the end user in mind,” says Azmina Poddar, the project lead at IBM iX. “It went beyond making things beautiful—it was about presenting data in a way that helps people actually understand it and take meaningful actions.”

Creating a new design system

Over the course of three-and-a-half months, the IBM iX team set out to simplify IBM MetroPulse, dividing data into four categories of relevance for retailers: asset allocator, demand forecast, product mix, and demand sensing. They also created target user personas to guide their work, empowering eventual users with clarity and actionable insights into the data they’re presented with. Along the way, they were able to share their Adobe XD design prototypes with data scientists and other business users.

“Adobe XD really helped us shape and deliver our MetroPulse product faster,” says Vriti Mehndiratta, Senior UX Consultant at IBM iX. “It was the first time we used Adobe XD and it was easy to learn, use, and execute while the design evolved. We collaborated within our team using the auto-saved cloud documents that automatically updated as we made changes in Adobe XD.”

In addition to creating a next-generation visual design for the product itself, the team used Adobe XD to build out an entire design system using the principles of atomic design. The system is now in place for anyone on the IBM iX team who works on IBM MetroPulse going forward, and provides a solid example for any net-new projects.

“Adobe XD enables thousands of IBM iX business designers spread across over 40 global studios to collaborate and get feedback on designs in real time,” says Azmina.

Improving workflows with developers

The team realized one of the best benefits of working with Adobe XD when it came time to hand off the designs to developers. Rather than giving the UI developers a sliced-up design, with Adobe XD developers can extract and download assets from Design Specs in the file format that they need, making it easy for them to maintain the integrity of the design.

“We can share assets with our developers faster than before,” says Azmina. “That’s where we really saw the magic of Adobe XD.”

Upali Biswas, Experience Designer at IBM iX, adds, “Adobe XD helped to bridge a path between designer and developer for better collaboration. Its inviting UI encourages creativity, inspiring the creation of interactive prototypes for users.”

IBM MetroPulse developer Navneet Varshney agrees. “A great user interface is a key component to creating positive user experiences,” he says. “Using Adobe XD, I could develop a React-based UI for MetroPulse. Adobe XD helped me to set the right styling and provided great support for the React component as well as ready-to-use HTML.”

Unveiling the final product to great fanfare

When it came time to demo IBM MetroPulse during a retail fair in New York City, the reaction was overwhelmingly positive. Analysts and customers at the National Retail Federation came by to compliment IBM iX’s work and discuss how various aspects of the design resonated with them.

The success of the IBM MetroPulse project, along with the time savings and collaborative capabilities enabled by Adobe XD, has IBM iX designers and developers looking forward to using it on future projects, including design systems, journey maps, and clickable prototypes.