Finding the Right Shoe For the Job

Published in

ASICS Digital

7 min readDec 20, 2018

The law of instrument is the notion that we sometimes use one tool for all purposes when, in fact, there is a better tool for the job. This mindset can be applied to fitness and to one of the most notable “tools” in fitness…the shoe! Footwear is a key part of any activity and having the right pair can really make a difference in your performance and satisfaction.

Here at ASICS, we recently released a tool called Shoe Finder on our European sites in an effort to ensure that the best tool for the job is being used. Whether you are a regular road runner, tactical trail trekker, or a mega marathon master, having the right combination of cushion, support, and technology is paramount to crushing your running goals. By answering a short series of questions, we can provide you with the best ASICS shoes that fit the way you move.

The Flow

The format of the Shoe Finder flow is divided into four main questions as indicated by the interactive progress bar, which presents a fun and informative experience.

Gender

ASICS accounts for gender differences in gait, foot structure, and lower-limb biomechanics when designing running shoes to improve performance, comfort, and safety.

Goal

Extra cushioned shoes reduce the stress on your lower legs and make your landings more comfortable.

Lightweight shoes are engineered to feel more responsive so that every run feels fast.

Support

Pronation is part of the natural movement of the human body and refers to the way your foot rolls inward for impact distribution upon landing. Understanding your pronation type can help you find a comfortable running shoe.

Comfort

All runners have a slightly different preference when it comes to the underfoot experience. Some runners want ultimate cushioning and protection while others might prefer a more responsive connection to the ground. The level of cushion you select allows us to provide the perfect ride for your needs.

If you’ve answered all of the questions…congratulations! You have made it to the summary section, which includes an overview of the technologies found in the shoes that fit your running needs. From here, you can continue to a product list page of results to explore the matching shoes further, apply additional filters such as price and color, or start the flow over.

Under the Hood

At the top of Shoe Finder you see a handy progress bar broken into steps which gives the user an idea of what’s in store and follows along as they progress.

Each step in the progress bar has a concept of incomplete (default), current, and completed, each with their own styled state. The current step is slightly enlarged to bring attention to it, a completed step is filled in with a check mark, and an incomplete step is slightly muted, patiently waiting for the user to reach it. While it waits, it will gladly reveal its name when you hover over it. When a question is answered, we let CSS indicate the state change with subtle animation over 1.5 seconds. Between all the states, we make use of scale (for size), opacity (for visibility), and transform (for position).

Under that, you’ll find the Shoe Finder questions themselves. I refer to them as slides because the overall presentation of the flow is sliding left to right. When a question is answered, we trigger another CSS animation to slide the next question into view as the progress bar updates to stay in sync. By now we’ve done a little math to calculate how far the offset should be as we move between questions. Depending on the current screen width we translate the list of slides enough to move the next question into view. The same logic applies in reverse when a user goes back to previous question via the progress bar.

The final page will provide a dynamic overview of the technology (fondly referred to as the “tech party” 🎉) found in shoes that fit your needs represented by SVG logos and some helper text. Since the content here is dynamic, I could render it in the client as needed, but the site supports multiple languages and I wanted to be able to utilize the existing server-side helpers and localization patterns already in place. By making all of the possible shoe technology combinations available on page load, I can apply modifier CSS classes directly tied to the users responses to dynamically show and hide the applicable tech logos. Finally, we construct a button that points to a page with all the shoes that match their criteria.

One more piece to the puzzle for this feature was analytics. How will we know if this was all worth the effort? How will we know how to make it better in the next iteration? I’m glad you asked! While you make progress in the flow towards your next pair of shoes we were tracking clicks to see how the feature is used (if at all). If everyone drops off at the third question, maybe we should look into rewording the question. If people go through the flow but don’t click a shoe on the results page maybe we need to work on our product categorization. The need for analytics goes on. It’s only been about 2 weeks but things are looking promising for Shoe Finder. Here are some metrics we’re excited by:

81% of people who start the Shoe Finder tool complete all steps
Shoppers who use the shoe finder tool are roughly 2x more likely to find a pair of shoes they like
The average order value (AOV) for customers who go through Shoe Finder is 12% higher than shoppers who don’t

Personal Goals

When working on a new feature, as a front end developer, I have a few goals in mind (in no particular order).

Usability

It’s almost 2019, so whatever I’m making needs to work on all devices. I am not saying everything I develop is fully supported back to Internet Explorer 7, but it should at least deliver a consistent experience on all modern browsers. Responsive web design has been a thing for a while, and I’m sure you’ve heard the news: people browse the web on a variety of devices and screen sizes. At this point it should be baked into everything you create in your professional career. Invest in a good design team who can offer great looking solutions without compromising functionality or style.

Aesthetics

Secondly, it needs to look good. If we have a great idea that we are sure will improve our site experience, boost conversion, and cure the common cold, it needs to look good. Of course, it needs to function, but it should also look nice and provide a delightful user experience along the way (extra points for an audible response of delight). If you produce a feature that doesn’t look good, then chances are that people won’t even bother with it, and you’ve probably failed to hit Key Performance Indicators (KPIs) and wasted time and money. The quality and experience of a site and its features reflect on the quality of the brand. For some, your website could be the first time they’ve actually taken a good look at your brand and what you have to offer. Take this opportunity to build a good first impression with a potential customer.

Maintainability

The third thing I think about is maintainability. The last thing I want to do with a new feature is turn it into something that other developers are scared to work on! With a new feature, especially one with multiple things at play like localization, analytics, and tight deadlines the code can easily get bogged down due to hasty development. Organization and separation of concerns is key, and knowing which language is better for the job and achieving a consensus on coding standards within a team can really help the maintainability of a codebase and individual features.

Performance

Also, performance, specifically within CSS. Not all animations are created equal and using the right CSS properties makes a difference. Oftentimes I’m able to achieve a desired effect using a combination of transform, scale, opacity, and color. These are some of the more common animatable CSS properties. In Shoe Finder, I use each of these at various points to add a nice finishing touch to the interactions and animations.

Improvement

I’ll be honest…a small part of me was also fueled by the desire to “one up” the existing version of the feature seen on other regions’ sites, but mostly I wanted to produce something that was helpful and fun to use. Shout out to our design team for the opportunity to work together on a cool new feature!

Find Your Shoes

By now I am sure you’re thinking, “enough talk, where can I see this thing in action?”

Good news! Shoe Finder is available now and you can try it out yourself by visiting one of our European sites such as: https://www.asics.com/gb/en-gb/shoe-finder/

The Future of Shoe Finder

Our objective for this feature is to streamline the product discovery experience for people who are new to ASICS while also educating them on the important differences in their shoe choice. Next steps for Shoe Finder include:

Making it available to more site locales and languages.
Allowing users to find the ASICS equivalent of their current running shoe.
Keeping a close eye on its impact on user engagement and revenue so that we can continuously iterate and improve the feature.

Stay tuned as the quest for the right tool for the job continues!