This project aims to redesign the Doping page to enhance its readability, streamline user experience, and increase visibility. By improving the visual hierarchy, simplifying the selection process, and utilizing impactful visuals, the redesigned page will be more engaging and effective for users.
The redesign was tricky because I had to make it blend seamlessly with the rest of the website while still giving it a fresh look. On top of that, I needed to keep the same user experience so people who were used to the original design wouldn’t feel lost or confused.
The page has unclear pricing, poor visual hierarchy, outdated guidance, small checkboxes, and misleading red text. Too many options without recommendations, little explanation of doping, and a weak, poorly placed call to action make it harder for users to decide and proceed.
The redesigned page features a cleaner, card-based layout with consistent blue and white tones for a professional feel. Uniform buttons, clearer “Apply” CTAs, balanced font sizes, and strong contrast improve readability, accessibility, and user interaction.
An explanation of Doping, complete with illustrative examples, will be prominently displayed to new users. This informational banner will be automatically closed after the user views it three times, ensuring they're familiar with the topic. However, users can always access a more detailed explanation by clicking the "See more" button.
Preview of the Categories
Users can easily preview how their listing will be displayed on both the website and mobile app, allowing them to see exactly how it will appear to potential buyers. This ensures a seamless and consistent user experience across different devices, helping users make informed decisions about their promotional choices.
To improve the user experience, I restructured the card hierarchy and added a "Popular" category, making it easier for users to navigate and quickly identify the most effective options. This streamlined approach helps users make informed decisions with greater efficiency.
The redesign delivers a modernized and more user-friendly interface by introducing consistent card structures, clear typography, and well-defined spacing. This approach enhances scannability, makes pricing and actions more prominent, and removes visual clutter, resulting in a smoother decision-making process for users.
Uniform card-based layout makes the page easier to navigate.
Mixed formats create uneven visual flow.
Uniform card-based layout makes the page easier to navigate.
Mixed formats create uneven visual flow.
Uniform card-based layout makes the page easier to navigate.
Mixed formats create uneven visual flow.
Product details, pricing, and actions are visually separated.
Lack of spacing makes the page feel cramped.
Product details, pricing, and actions are visually separated.
Lack of spacing makes the page feel cramped.
Product details, pricing, and actions are visually separated.
Lack of spacing makes the page feel cramped.
“Uygula” buttons are larger and more visible.
Buttons blend in with surrounding text.
“Uygula” buttons are larger and more visible.
Buttons blend in with surrounding text.
“Uygula” buttons are larger and more visible.
Buttons blend in with surrounding text.
Hierarchy between titles and descriptions is more defined.
Poor Typography Hierarchy
Titles and descriptions are less distinguishable.
Hierarchy between titles and descriptions is more defined.
Poor Typography Hierarchy
Titles and descriptions are less distinguishable.
Hierarchy between titles and descriptions is more defined.
Poor Typography Hierarchy
Titles and descriptions are less distinguishable.
Icons, text, and buttons are proportioned for better focus.
Unbalanced Visual Elements
Icons and text compete for attention, reducing clarity.
Icons, text, and buttons are proportioned for better focus.
Unbalanced Visual Elements
Icons and text compete for attention, reducing clarity.
Icons, text, and buttons are proportioned for better focus.
Unbalanced Visual Elements
Icons and text compete for attention, reducing clarity.
