For many musicians from amateur to professional players, online shopping has become the preferred way of shopping due to convenience and easiness. One of the main problems with buying instruments online at least in Latin America is that most brands websites don’t let you buy from their own site, as well as not providing pricing information, only technical details about their products, forcing people to search and compare prices in other online or physical stores.
Re-imagining the Fender's mobile website by creating an engaging and dynamic buying experience.
Improve the navigation experience.
Improve filtering and personalization options.
Create a modal UI system.
Improving Fender’s e-commerce platform is based providing an engaging experience that lets people have an easy and simple way of filtering and navigating through the products.
Navigating through the product categories is easy while swiping through modal cards. When you focus on a category, sub-categories appear below each card as suggestions related to each product such as accessories, replacements and maintenance services.
If you have already entered a product category you still can change it without having to go back to the main menu by swiping the different options of the categories menu above the guitar catalogue.
You can customize your search options by accessing the different filters above the guitar catalogue. When selecting a filter, a modal window appears showing the different options in a simple and order way instead of having cluttered information having the filters always visible.
You can preview from the guitar catalogue information such as the colors available, type of wood, price and availability without entering and see the details of each product.
The design of the UI still keeps the actual look & feel of Fender's brand identity. This design decision was to make a simple but intuitive modal interface in which users could be familiar with some common gestures such as swiping through cards and filters, making it easy to access different options in a dynamic way.