{"id":601,"date":"2026-06-02T13:23:46","date_gmt":"2026-06-02T11:23:46","guid":{"rendered":"https:\/\/new.alapdesign.com\/?page_id=601"},"modified":"2026-06-18T20:45:50","modified_gmt":"2026-06-18T18:45:50","slug":"case-study-fitness-index","status":"publish","type":"page","link":"https:\/\/alapdesign.hu\/en\/esettanulmanyok-fitness-index\/","title":{"rendered":"Esettanulm\u00e1nyok – Fitness Index"},"content":{"rendered":"
\n\t\t\t\t
\n
\n
\n \t\t\t
\n \t\t\t

\/\/ Case studies<\/h3>\n\t\t\t\t\t

Fitness Index store redesign \u2013 a faster, clearer shopping experience that converts better<\/h2>\n\t\t\n<\/div>\n\n\t\t\t\t\t

Fitness Index is a well-known, high-traffic online store that ran into serious performance and UX problems after a previous redesign. Our job was to rethink the look and user experience, redesign the buying journey and optimise the WooCommerce system behind it.<\/p>\n\t\t

\n
\n \t\t\t

UX\/UI design<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

WooCommerce optimisation<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Store facelift<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Checkout redesign<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Product page UX<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Product card design<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Filter system redesign<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Checkout optimisation<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

AWS server environment<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Performance optimisation<\/h4>\n\t\t\n<\/div>\n
\n \t\t\t

Black Friday readiness<\/h4>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n
\n \t\t\t\"Fitness\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n
\n
\n
\n \t\t\t
\n \t\t\t

\/\/ Working together<\/h3>\n\t\t\t\t\t

Our work together
<\/h2>\n\t\t\n<\/div>\n\n\t\t\n<\/div>\n
\n
\n
\n \t\t\t
\n \t\t\t

\/\/ Fitness Index<\/h3>\n\t\t\t\t\t

Project idea
<\/h2>\n\t\t\n<\/div>\n\n\t\t\t\t\t

The client had a long-established, high-traffic but outdated store, which another agency had already tried to modernise. Despite a redesign and new build, the result was extremely slow, the shopping experience didn't support sales, and revenue dropped significantly. So the goal wasn't just a better-looking interface: it was to design and stabilise a store that could again handle heavy traffic, a complex product range and peak campaigns.<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \t\t\t
\n \t\t\t

\/\/ alap design<\/h3>\n\t\t\t\t\t

Our role
<\/h2>\n\t\t\n<\/div>\n\n\t\t\t\t\t

We refreshed the existing UI, redesigned the full UX and buying journey, and optimised the store's technical performance. Product cards, product pages, filtering and the basket-to-checkout experience were all rebuilt. The old one-page checkout became a clearer multi-step flow that guides customers from decision to order. We also paid close attention to the large catalogue, varied category queries and server load.<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n
\n
\n \t\t\t
<\/line><\/svg><\/div>\n\t\t\n<\/div>\n\t\t\t
<\/line><\/line><\/line><\/line><\/svg><\/div>\n\t\t
\n
\n
\n
\n \t\t\t

\/\/ alap design<\/h3>\n\t\t\t\t\t

Shared strategy<\/h2>\n\t\t\n<\/div>\n\t\t\t

The key was tying the visual refresh directly to how the store works as a business and as a system. Product lists, cards, pages, filters and navigation were rethought to be clearer for shoppers, easier to manage in the admin, and efficient with a large catalogue. As part of the build we set up an AWS server environment optimised for WooCommerce, followed by a full performance optimisation after launch.<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t
<\/line><\/svg><\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n
\n
\n \t\t\t
\n \t\t\t

\/\/ What we did<\/h3>\n\t\t\t\t\t

Key features
<\/h2>\n\t\t\n<\/div>\n\n\t\t
\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Redesigned product cards<\/h5>\n\t\t\t\t\t
Product cards got a clearer, purchase-focused layout so shoppers can decide faster in list views.<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Redesigned product pages<\/h5>\n\t\t\t\t\t
Product pages were updated at UX and UI level, so information, benefits, prices and buying options appear in a more logical order.<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Smarter filtering<\/h5>\n\t\t\t\t\t
Filtering was rebuilt so relevant products are easier to find, even in a large catalogue.<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n
\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Multi-step basket and checkout<\/h5>\n\t\t\t\t\t
The standard one-page checkout was replaced with a guided, step-by-step flow that makes ordering clearer.<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Intuitive category and brand navigation<\/h5>\n\t\t\t\t\t
With many categories and separate brand pages, we created a new, easier menu and navigation logic.
<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n \t\t\t\"\"\t\t\n<\/div>\n
\n \t\t\t
Campaign-ready store<\/h5>\n\t\t\t\t\t
The store is ready for Black Friday and other peak campaigns, and the client can update campaign elements on their own.<\/h5>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n
\n \t\t\t
<\/line><\/svg><\/div>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n
\n
\n \t\t\t
\n \t\t\t

\/\/ What we did<\/h3>\n\t\t\t\t\t

Brand identity
<\/h2>\n\t\t\n<\/div>\n\n\t\t
\n
\n \t\t\t
This wasn't a full rebrand but a targeted refinement. We kept Fitness Index's visual identity while updating colour rules, component styling and the site's overall digital character. The typeface got special attention: the old font was poor for both readability and performance, so after testing we introduced a faster, cleaner and more usable typographic solution.<\/h5>\n\t\t\n<\/div>\n
\n
\n
\n \n<\/div>\n
\n \t\t\t

#000000<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#252525<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#707070<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#FF7008<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#FF5400<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#E3E3E3<\/p>\n\t\t\n<\/div>\n\n<\/div>\n

\n
\n \n<\/div>\n
\n \t\t\t

#FFFFFF<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t
<\/line><\/svg><\/div>\n\t\t\n<\/div>\n\n<\/div>\n
\n
\n
\n \t\t\t
\n \t\t\t

\/\/ Case studies<\/h3>\n\t\t\t\t\t

Key website elements<\/h2>\n\t\t\n<\/div>\n\n\t\t\n<\/div>\n\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t