User Story:

As a user, I need the ability to use my mobile device to easily find the products that meet my project test and measurement specification needs so that I can build a new system or add on to an existing system.

The Problem:

The first phase of the digital transformation project for our hardware shopping experience did not prioritize a responsive product page. This meant that users could not successfully shop on their mobile devices and filter via specs/attributes to narrow down and find the products they needed. Given that we know users shopping habits have shifted over time and the expectation now is that a user should be able to shop on any device, the was clearly a big problem.

The Solution:

While it was not prioritized by the Business, during some down time, I took the opportunity to have fun and play on my own, ideating on what a mobile friendly product page could look and feel like for the user.

Challenges to Consider Along the Way:

Given that we already had a desktop version that had just been built and released, there were clear constraints in place as to what the experience for a mobile device could be. Instead of re-imaging the entire experience, and thinking “blue-skies”, this was more an exercise in understanding the current desktop experience and retrofitting it to work on a mobile device. It was a mapping exercise, taking the desktop features, flow and functionality and figuring out how I could map that into an intuitive and useful mobile experience.

One area in particular that was a bit tricky to map into a mobile experience was our progress bar, When purchasing hardware, if users are needing to configure their selection to include cables, connector blocks, software, services, etc (which they generally do), then the desktop experience was designed to be a multi-step experience with a progress bar at the top guiding the user through those steps. Finding a way to allow for the progress bar on a mobile device that would also accommodate localized text required a good deal of exploration and iteration. The final result was a progress bar that only displayed text on the active step while having the other steps display the step number as a simplified way of conveying to the user where they were in the configuration flow.

Filtering was another area that needed a different representation of the functionality for mobile than what had been designed for desktop. The desktop experience had not been designed with traditional faceted navigation shopping patterns. Due to the nature of our products and our users (engineers who love excel and data tables) the proposed and implemented desktop design for narrowing down a set of products via faceted navigation was to use a table layout that could have anywhere from 2 to 20+ attributes for the user to filter by. Below you can see the desktop product table with filtering.

As you can imagine, this dynamic table layout full of filtering and sorting capabilities does not lend itself to the most ideal mobile experience. So I had to think outside of tables for the mobile experience. I spent time looking at a lot of mobile shopping experiences as well as reading through the Nielsen Norman E-Commerce report, and landed on a design that utilized traditional mobile navigation and filtering patterns. The user would selected to filter, on select, the page would slide left and a set of filters in an accordion would be presented to the user for them to navigate and make filtering selections to narrow down their options to a subset of products that could meet their specification needs.

Another key area of the experience that needed extra thought was the summary container. When the user made a selection on the first step and moved onto the second step to begin configuring their selection, there would be a sticky summary container that would begin keeping track of the users items they had selected as well as a running total of their configuration. Because this was a multi-step configuration experience where the user could be making several selections, it was very important that the user always have access to this summary information to help track their selections and cost as they configure. The final solution was to have the summary be a collapsed, sticky container at the bottom of the screen that they user would use to navigate to the next step and keep track of their cost with the ability to expand to full view and see the list of selections the user had made.

The Result:

In the end, I was able to come up with a rough concept of a mobile experience that successfully mapped in our desktop flow and rich feature set to a mobile friendly version. You can check out the prototype on InVision and click through to get a feel for the flow and how I mapped the existing desktop experience into a mobile experience.

What’s Next?:

After releasing the first version of the shopping experience for hardware, business priorities shifted to other key areas of digital transformation including software and cart and checkout. Mobile product pages have yet to be prioritized but when they are, hopefully the business will have a head-start based on the conceptual work that I took on.

Role:

UX & UI Design

Medium:

Mobile

Methodology:

• Competitive Analysis

• Sketching

• Low Fidelity Wireframes

Tools:

• Adobe XD

Duration:

• 2 weeks