Work With Us

Using Digital-Physical Workflows to Master Integrated Product Design

For many years, digital products stood on their own. Digital products were designed separately from analog or physical devices, and the user experience was largely defined by screen size.

Today, that’s no longer the case. Products now live in a new, more complex digital-physical category. By 2023, there will be 43 billion Internet of Things (IoT) products worldwide according to Gartner. That’s a nearly threefold increase from 2018.

Digital-physical workflows bridge the divide between product development disciplines.

Despite the prevalence of digital-physical products (also known as integrated products, connected devices, or IoT), digital-physical design is not easy. At Bresslergroup, we realized that we needed a way to get researchers, engineers, and designers to speak the same language in order to create these complex products.

This leads to the creation of new design tools and techniques. For example, non-finito prototyping and digital-physical workflows; a type of map that helps bridge the divide between design and engineering.

What is a Digital-Physical Workflow?

Digital-physical workflows (or digi-physi maps as we call them in-house) are one of our most effective tools for creating integrated and connected products.

They help us envision what needs to happen in the digital world and the physical world, as well as where the two need to work together. They break down language barriers within industrial and interaction design disciplines and help us quickly communicate design intentions with engineering.

Digital-physical workflows help us envision what needs to happen in the digital world and the physical world, as well as where the two need to work together.

We use these maps for everything from new-to-the-world products that have never existed before, like the Phlex EDGE swim wearable, to next-gen products, like a device used for feeding tube placements. We use them for consumer products, medical devices, and everything in between.

Start With People

Before we begin mapping, our first step is to connect with users. That means meeting people where they are; whether that’s construction sites, offices, daycares, or hospitals.

(In the context of COVID-19, when we can’t physically meet with people, we send products and ideas into those spaces through mailed product kits, home testing, diary studies, and remote codesign sessions.)

Digital-physical workflows start with understanding your user.

We want to get to know users, build empathy, and understand their goals. We need to understand their environment — both where they’ll use the product and what else might be happening in the background.

At this point, we’re focused on use, not demographics. When you design for use, we prioritize the more tangible things that are going to impact how people engage with our products.

This step is important — don’t skip it! If you do, your map will have little meaning, and your product will be irrelevant. Understanding your user will make everything that comes next more effective.

Map the Digital and Physical Elements

Once we’ve completed that crucial discovery work, we can begin mapping the interactions the product will require.

The digital-physical workflow map is made up of three lanes. On the bottom, we have the digital lane. Here, we fill in the info that the digital interface will need to provide. We decide what user inputs and system feedback the digital experience requires.

In the top lane, we map the physical interactions — what the user is doing outside of the digital interface. We fill in analog actions the user will perform, like pushing buttons or turning knobs.

The digital-physical workflow map is made up of three lanes.

The Magic Middle Lane

Finally, we’re ready to fill in the middle lane. This is where the magic happens. It’s where the digital and physical realms integrate to create a digital-physical product.

Here, we lay out what the system is doing in the background to bridge the gap between the physical and digital. We consider constraints like how the device will connect (Bluetooth, LoRa, WiFi, etc.) and how that will impact things like onboarding and setup times. We might also consider whether we’ll use haptics, LED, or audio for additional feedback, and other electro-mechanical factors.

We might also use the middle lane to capture social and environmental factors, like what other devices the user could be using at the same time or what other actors are present. This space creates the opportunity for conversations between designers and engineers.

The middle lane is where the rubber meets the road for your digital-physical product. Without it, your digital and physical experiences just don’t flow together.

HelmetFit’s Digi-Physi Workflow

We used digital-physical workflows when we designed HelmetFit, an app-controlled helmet-inflation system.

Proper football helmet inflation can save lives, but the physical process (old-fashioned hand pumps) is difficult and imprecise, so fit isn’t adjusted as often as it should be. HelmetFit wanted to make the process easier, more intuitive, and more accurate, and Bresslergroup saw an opportunity to add a digital component.

We started our human-centered design process by meeting with expert fitters, reviewing existing standards documentation and instructions, and exploring different user perspectives. We watched hundreds of online videos of people fitting helmets to understand pain points and see different contexts of use. We did our best to put ourselves in users’ shoes — or in this case, cleats.

Helmetfit's digital-physical workflow: first-time player fit digital

Next, we looked at the physical tools and materials used for helmet fitting. We wanted to figure out what the digital experience could replicate, remove, or redefine. We knew we’d need to keep the helmets, air bladders, and inflation cords, so we placed those in the physical lane of our digi-physi map.

The top lane also shows the physical human interactions, like the player putting the phone into the device, inserting the needle into the inflation port, and using the physical controls to inflate or deflate and verify the fit.

We saw that the inflation process and how the user observes it could be improved by a digital experience, so we added that to our digital lane. After many messy whiteboard sessions and iterations, we mapped the key user inputs and system outputs of the digital experience.

Helmet fit's digital-physical workflow: first-time player fit physical

Once we knew what needed to happen physically and digitally, we were ready to integrate those interactions in the middle lane.

Here, we mapped when the system would need to reference the cloud database to pull in info about the helmet manufacturer and model. We also noted what info the physical device needs to send to the digital device (like pressure readings) and vice versa.

Helmet fit's digital-physical workflow: first-time player fit digital-physical

Today, HelmetFit is being used by elite athletic programs, including Ohio State University and the San Francisco 49ers. Perhaps even more importantly, it has been widely adopted by junior high, high school, and college programs in the US and Canada. Ultimately, it’s saving brains, and that started with these digital-physical workflows.

Choosing the Right Map for the Job

There are many “maps” that are a part of the human-centered design process — journey maps, experience maps, and digital-physical maps among them. We think of these different maps as tools, and you want to use the right tool for the job. If you’re summarizing research findings in context, then a journey map is your first step. If you’re designing an entirely digital experience, traditional wireframing will suffice.

The right map for the right human-centered design process

But for integrated products, we need digital-physical workflows because they create space for conversations between designers and engineers at the concept design phase; something that the other maps don’t typically offer and early enough in the design process to have important input from engineering. Engineers can see the vision and communicate with designers about what’s feasible or what might be missing.

You’ll notice that these maps have a workflow feel, a wireframe feel, and an illustrative feel. That’s not by accident. We found that including these elements helps to bring together the different languages and disciplines involved to better tell the product story.

The Benefits of Digi-Physi Workflows

Creating digital-physical workflow maps may seem like a lot of work, but in the long run, they’ll speed up the process by helping you define a product vision and make sure the entire team, and the client, is on the same page. They ensure that you’re all headed in the right direction and minimize the risk of surprises — which will improve your bottom line!

This post was adapted from the webinar, “Digital-Physical Workflows: Our Favorite Integrated Product Design Tool.”

Learn more about our Digital-Physical Design expertise.