Project Overview

Lenexa Manufacturing supplies bagging and slicing machinery to bakeries. As with most businesses, they were looking for a way they could capture more leads online while also making the sales process more seamless on the tail end. That’s where it was up to us to come up with a solution.

The Prescription

  • Interaction Design
  • Visual Design
  • Progressive Form Fill

1.

The Problem

The problem was clear. LMC needed a hands-off method of getting people into their pipeline. No matter how well-informed the user is on their bakery and machinery needs, it could still be overwhelming to land on the LMC site and have to sift through the ecommerce. Furthermore, users are often deterred from reaching out to get one simple question answered. We will often go to any length to not have to speak to someone! We had a set of parameters a user needed to self select and they would have their machinery solution. So now that?

2.

My Solution

At this point, all I had to go on was a list of questions. In order to match someone with a machine, they needed to answer about seven questions along the lines of “What type of product are you bagging?” or “How big is the product?”

I knew that hitting a user with a lengthy, stacked form containing such technical questions would be dull and might be a deterrent in and of itself. I wanted to incorporate the gamification of a progressive form that we so often see on mobile apps. I wanted to make it visual to keep them engaged.

So with that, it was time to start wireframing.

3.

Wireframe + Prototype

My strategy was to initially create a single screen for each question. I could get an idea of the flow and how each question might present, and from there I would think more about the branching logic and how different answers might require different follow-up screens.

It’s important to note that the wireframes shown above are actually closer to the final, approved stage of wireframes. For instance, it took at least two rounds of iterations of the “What’s your product size?” and “Is your product going to be sliced?” questions to be visualized in a way that made sense.

Next I needed to think about what came next for each question. In some cases, if a user answer “X,” it would nullify the form entirely and they would receive notice that a sales rep would call them. Or in others, if the user wanted their product sliced, it would result in an additional question versus scooting them along the form. There were scenarios to look at and solutions that needed to be decided on. The final wireframes looked more like this.

Once all the different form fill scenarios were imagined and the different user journeys laid out, it grew the wireframe from the scant little thing we saw previously to something like 20 screens.

The flow can be seen in the second screen which shows the logic behind the prototype. For a more interactive and detailed look at the prototype, click here.

4.

Hi-Fi Design

We redesigned the website for this client as a previous project, so the design portion of this was the most hands off. All I had to do was apply the design systems I defined to the screens I had just laid out.

There were a few specific choices I made at this page for user experience reasons. I wanted the form to overlap the header just a bit so it read like its own independent piece to the website. This wasn’t simply a form on the page, this was a tool designed with a problem in mind.

It was also important to me to include pagination circles at the bottom. I didn’t want the user spacing out or getting anxious with no end in sight. These ultimately got cut due to dev going over budget.

Since the general layout of each screen had basically been designed during the wireframing process, the dev team only required design of the first few slides. This allowed them to see how I envisioned the form styles to be applied across the board.

To interact with the hi-fi design in a more detailed capacity, click here.

5.

Conclusion

This project was extremely exciting. I got to start with very little and create a customized solution that solved a problem. We went through many different obstacles during wireframing, allowed many sets of eyes to work through it, and settled on conclusions that created a seamless user experience.

The end result? LMC now has a way to quickly match users with the correct machine for them. This allows the sales team to properly prepare for follow-up calls and ultimately to close more frequently.

The tool hasn’t yet been published on the website so now audience-specific user testing has been implemented. I am excited to see how bakeries interact with it!