UX case study

Yatego UX/UI Concept: Navigation & Hero Redesign

Project

Website Redesign

Industry

E-Commerce

Role

UI/UX Designer

YEAR

2025

Project Overview

This self-initiated concept explores how a cleaner navigation, a focused hero banner with a clear call-to-action, and an improved content hierarchy can create a friendlier, conversion-oriented homepage for Yatego, a German e-commerce marketplace

This self-initiated concept explores how a cleaner navigation, a focused hero banner with a clear call-to-action, and an improved content hierarchy can create a friendlier, conversion-oriented homepage for Yatego, a German e-commerce marketplace

This self-initiated concept explores how a cleaner navigation, a focused hero banner with a clear call-to-action, and an improved content hierarchy can create a friendlier, conversion-oriented homepage for Yatego, a German e-commerce marketplace

Key UX Problems & Redesign Solutions

Hero Banner

Problem

The current banner uses a pleasant image, but the subline is too long and set in black, which clashes with the light background and reduces readability.

Although the banner links to the garden section, there is no clear call-to-action, so users don’t immediately know what to do next. Overall, the message doesn’t fully guide visitors or connect with the rest of the site’s tone.

Solution

I simplified the hero by removing the long subline and replacing it with a short, inviting headline:

“Make your home even cozier”

I added a prominent CTA button (“Explore now) to clearly prompt the next step.
The background was updated to a warm, welcoming photo of a smiling family in a cozy living room, creating a relatable and friendly atmosphere. The cleaner layout, warm colors, and focused copy make the hero easier to read and encourage users to start exploring.

Navigation Bar – Color & Focus

Problem

The navigation bar uses a bright orange background, which constantly draws the user’s attention away from the page content.
The strong color competes with the hero banner and product listings, making the interface feel heavy. Small black arrows next to each department label also add visual noise without giving much value.

Solution

I simplified the header by changing the background to white and the text to a calm grey, creating a clean look that lets the content stand out.
The small arrows were removed to reduce clutter and make the labels easier to scan.
The new design keeps the navigation clear and accessible, while no longer overwhelming users or distracting from the hero and products.

Navigation Bar – Active State

Problem

When a user clicks a department (e.g., Möbel & Wohnen), the page loads but the corresponding item in the navigation bar isn’t visually highlighted.
Without a clear indicator of the current location, users can lose track of where they are within the site structure, especially when browsing several categories.

Solution

The redesigned navigation includes a distinct highlight for the active department (shown in orange).

This visual feedback immediately tells visitors which section they’re viewing, improves orientation, and makes exploring the site easier and more intuitive.

Dropdown Menu – Structure and Hierarchy

Problem

The dropdown menu displays an overly long, unstructured list of categories. In the All Categories section, top-level and subcategories look identical, and the order feels random, which makes orientation difficult and slows down browsing.

Solution

I minimized and reordered the categories, grouping them into clear, logical sections.
Top-level items are now visually distinguished from subcategories, creating a clear hierarchy and helping users understand the menu at a glance.

Reflection

Working on this concept allowed me to practice a full UX/UI workflow on an existing e-commerce platform. By analyzing navigation, hero content, and dropdown structures, I learned how even small visual or structural changes can make complex sites easier to understand and more inviting.

Future adjustments could include a mobile-optimized hero and a deeper look at the information architecture and page layouts for individual departments, ensuring a consistent and user-friendly experience across the platform.

Reflection

Working on this concept allowed me to practice a full UX/UI workflow on an existing e-commerce platform. By analyzing navigation, hero content, and dropdown structures, I learned how even small visual or structural changes can make complex sites easier to understand and more inviting.

Future adjustments could include a mobile-optimized hero and a deeper look at the information architecture and page layouts for individual departments, ensuring a consistent and user-friendly experience across the platform