Solution

Design Process

Our designers don’t rely only on the creative spark, but also do the heavy data crunching and dig deep into researching users before making UX decisions. That’s why we started with identifying the challenges users are facing while interacting with the store.

We saw that 95% of customers left a positive comment after the checkout process. Google Analytics and Hotjar analysis showed us how visitors use the existing store and what are the UX challenges they are experiencing in the purchase and browsing process.

To be even more effective in planning and designing the store, our design process includes the development of mood boards. This online store was no exception. The mood boards had a significant role in the overall style guide, UI design, and interactive prototype. They helped us craft the overall experience users encounter throughout the website and put out the vibe that true running experts are behind shop4runners!

Take some time to look at the full redesign process at Behance!

Technical and Upgrade Process

The process of building a new website started with technical and design & UX analysis of the existing store. The results gave us insights that were a great starting point for the results we want to reach in the future.

With a new technical upgrade and redesign, shop4runners had 3 major goals they wanted to reach:

1. Improving information architecture
2. Showcasing their expertise in running
3. Decreasing return rates

To achieve all that, we started with the development of the entire navigation structure from the ground up. It also included showcasing products and grouping them in a way that our previous analysis showed would work best, by mixing categories and attributes. The site is now divided according to type of activities you need gear for and by basic demographics (men, women, children).

There’s a full section on the homepage, dedicated to the profiles of shop4runners experts where they share personal running experiences, pieces of advice, and personal records in half marathons and marathons. It later leads you to their full personal blog post and overall blog, where they can show their expertise in running related content, and maybe the best part, tests of running equipment they offer in stores.

Decreasing of return rates called for the development of a complex new shoe size feature. To help the customer buy the right size shoes, we established the following method on the product page: through pictures and description, we show how to accurately measure the foot size in centimeters. After the customer enters his exact foot length, they have an option to pick an activity they want to use the shoes for.

The system then tells them what is customer’s recommended size for that activity, and also educates them why it’s better to wear one size bigger shoes for running. The final step puts the customer’s proper fit shoes in the cart. Educational, easy to use, and accurate feature for customers to be happy with their purchase!

We also developed a custom shoe advisor widget, which recommends the collection of shoes according to gender, shoe size, and activity. It’s great to use for customers who want to get almost instant search results for very specific products they are looking for in their size.

The search engine used for this project is Findologic. This search solution has the ability to understand users’ search terms and build up its own vocabulary. Its intelligent search function ensures that the user can find the items they are really searching for. Their motto showcases it the best: “stop searching – find!”

Results

All our of our initial analyses paid off! That’s why it’s important to leave enough space for the discovery phase, that is determined to face the complexity of development project like this one.