top of page
slider-img_3x.jpg

Fenerium

Project Overview

The Fenerium e-commerce redesign aimed to address key issues with the outdated website, including poor navigation, mobile incompatibility, and low sales conversion rates. The primary goal was to create a modern, user-friendly platform that better reflected Fenerbahçe’s brand and enhanced the online shopping experience for fans. This involved improving the website's layout, optimizing it for mobile, and streamlining product discovery to drive higher engagement and sales.

Project type: UX/UI, Responsive

Case study timing: 8 Week

Role: UX/UI Designer

Sayfa sayısı: 100+

Tools: FIGMA, Photoshop, Zeplin

Ekran Resmi 2024-10-15 18.06.09.png

Problem

Fenerium, the official retail brand of Fenerbahçe Sports Club, faced significant challenges with its e-commerce website. The site was outdated, both in terms of design and functionality, failing to meet the modern standards of user experience. Key issues included a cluttered interface, poor navigation, and a lack of mobile optimization, which led to high bounce rates and frustrated users. These usability problems made it difficult for customers to explore Fenerbahçe merchandise, resulting in low sales conversion rates. Additionally, the website did not reflect the passion and loyalty of Fenerbahçe’s large fan base, missing opportunities for engagement and brand promotion. The need for a redesign became urgent as the team aimed to improve the overall shopping experience, increase sales, and create a platform that better represented the Fenerbahçe brand.

Project Goal

The primary goal of the Fenerium e-commerce redesign project is to enhance the overall user experience and increase online sales. This involves modernizing the outdated website, improving navigation and mobile optimization, and creating a more engaging design that reflects Fenerbahçe's brand identity. By making the site easier to use and visually appealing, the project aims to attract more visitors, increase conversion rates, and foster stronger brand loyalty among Fenerbahçe fans. Ultimately, the project seeks to transform Fenerium into a more efficient and user-friendly platform for fans to explore and purchase merchandise.

Project Plan

The project began by analyzing SEO data from the previous Fenerium website to determine where users were abandoning the purchase process. This analysis provided key insights into pain points within the user journey. Following this, an extensive benchmark analysis was conducted to understand user behavior on similar e-commerce websites, giving us a clear understanding of best practices and user expectations.

Based on these insights, improvement suggestions were presented to the client, and initial wireframes were created to map out the redesigned site. The project was then broken down into sprints, each with a defined timeline, allowing the team to move through the design and development process in an organized manner.

At the end of each sprint, feedback was gathered from the client to ensure alignment, and the designs were then handed over to the development team for implementation. Throughout this process, the design of individual pages was done concurrently with the development of a style guide, ensuring a consistent visual identity and user experience across all pages.

Group 339.png
Group 48.png

Benchmark Analysis

A benchmark analysis was carried out to evaluate key aspects such as information architecture, navigation, homepage content, product listings, product detail pages, and checkout flows. This analysis involved reviewing 20 websites, both from international and Turkish markets, to identify best practices and gather insights for optimizing the Fenerium website’s structure and overall user experience. The findings helped inform decisions on improving functionality, enhancing ease of use, and creating a more seamless shopping journey for customers.

Information Architecture

Upon reviewing the previous website, it was clear that the information architecture was creating difficulties for users in accessing products and pages efficiently.

  • Users often began their navigation through the Women, Men, or Children categories, which made it challenging for them to find and explore products from other categories. The path to the intended product page involved following multiple layers of categories, making the process long and confusing.

  • Additionally, the repetition of the same category labels complicated the search process for users. For example, shoes were listed under both "Home/Lifestyle Accessories" and "Clothing Accessories," causing confusion about where specific products could be found.

  • Products were also not grouped under the appropriate main and sub-categories. For instance, in the "Children" section, a lighter was found under the "Home/Lifestyle" category, which was unrelated to the expected products for that segment.

Based on the benchmark analysis, the improvements made included positioning the Women, Men, and Children categories in the new information architecture along with the subcategories such as Match Gear, Clothing, and Training. The second-level subcategories were removed, as they can be displayed in the filtering options on the product listing page.

  • Groups such as Upper Wear and Lower Wear were clearly defined along with the products they include.

  • A shorter and clearer user flow was created to allow users to access products more easily.

  • The Training category was removed, as its products were also used under other headings.

Dropdown_Menu.png

Mobile Header

Current Design

Having too many icons for navigation in the header area makes it difficult for users to both differentiate between the options and easily click on these sections.

UX Enhancement

  • In the header area, navigation options were optimized to ensure users could easily access products and proceed through the purchasing process. The hamburger menu and search button were placed in the top-right corner, as this area is more easily accessible on mobile devices.

  • The logo, which links to the homepage, was positioned in the top-left corner, as it requires fewer clicks and is a less frequently accessed area on mobile devices.

  • The shopping cart was implemented as a "Floating Action Button" to allow users to easily take action and track it at any time, ensuring it is located in the most accessible area for users.

  • Based on SEO analysis, since the visit rate for the English version of the site was low, the language selection was removed from the header and moved under the hamburger menu.

Resim1.jpg
Resim2.jpg

Mobile Hamburger Menu

Current Design

In the hamburger menu, users are struggling to differentiate between subcategories and main categories.

Additionally, the size of the design elements is causing a ‘fat finger’ issue, which negatively impacts users' ability to find products and complete their purchases.

Ekran Resmi 2024-10-16 23.02.07.png

UX Enhancement

  • To ensure that main categories and subcategories are more clearly distinguished and easily accessible, the hamburger menu was designed as a two-page structure.

  • The sections "Track Shipment," "Mohikan," "Fener Ol," "Recommended for You," and "New Products" were highlighted by positioning them as navigation buttons on the first menu screen, giving them more prominence.

Group 24.png
Group 340.png

Create Your Jersey

Current Design

Since the sport selection, jersey type selection, and other required fields are positioned independently of each other, users may have difficulty reviewing alternatives and completing the process.

Screen Shot 2022-09-25 at 22.21 1.png

UX Enhancement

Grouping the selection fields and positioning them in a clear hierarchy makes the selection process easier.

  • The order is as follows:

  • Women, Men, Children Category Selection

  • Sport Selection

  • Size Selection

  • Jersey Type Selection

  • Jersey Number and Name

Screen Shot 2022-09-25 at 22.23 1.png
Group 341.png

Product Filter

Current Design

To help users find products that meet their needs more easily, the filtering steps need to be simpler and quicker to select.
Currently, users have to click on too many areas and scroll extensively to review options and make selections, which prolongs the decision-making process.

Screen Shot 2022-09-25 at 22.50.png
Screen Shot 2022-09-25 at 22.50-1.png
Screen Shot 2022-09-25 at 22.52 1.png

UX Enhancement

The placement of elements that provide access to selections on mobile should be aligned with the action of the opening window.

The filtering area has been expanded to allow users to view more options quickly on a single screen.

Using a Slider Bar for price range selection enables faster action.

Multiple selections have been arranged in a compact layout, ensuring that users can review and complete their choices with minimal scrolling, as long as the layout permits.

  • The order is as follows:

  • Women, Men, Children Category Selection

  • Sport Selection

  • Size Selection

  • Jersey Type Selection

  • Jersey Number and Name

Screen Shot 2022-09-25 at 22.53 1.png
Screen Shot 2022-09-25 at 22.53 1.png
bottom of page