This project aims to redesign the Doping page to improve readability, simplify decision-making, and make key information and actions easier to identify. 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 challenging because I had to give the experience a fresh, more intuitive look while staying consistent with the rest of the website. Due to existing company guidelines and technical constraints, certain elements and interactions could not be changed, so I focused on improving the visual hierarchy, clarity, and usability without disrupting the experience existing users were already familiar with.
The page lacked clear guidance and visual hierarchy. Small checkboxes made it unclear how to select a boost, while the blue “Get a Boost” text looked like a clickable link, creating further confusion. Red text used for headings resembled error or warning messages, while limited information about Doping and the absence of a visible order total made the purchase process less clear.
The original preview showed users where each promotion would appear, but provided limited context and flexibility. Users could only view a single desktop example, with little supporting information about the selected promotion. The preview also lacked direct pricing and selection controls, requiring users to return to the main page before making a decision.
The redesign improves clarity through a stronger visual hierarchy and more intuitive interactions. Small checkboxes were replaced with prominent Apply buttons, making boost selection more obvious. Blue is used consistently for interactive elements, while recommended options are clearly grouped. A visible order total also provides immediate feedback before users continue.
An expandable “What is Doping?” section was added to help new users understand the service through key benefits, important conditions, and illustrative examples. The informational banner is shown to new users and gradually deprioritized after repeated exposure, while the detailed explanation remains accessible through ‘Learn About It’.
The redesigned interface brings the description, pricing, duration, and action into one place, allowing users to understand and apply a boost without leaving the preview. Clear navigation, improved visual hierarchy, and platform specific previews make the experience more intuitive and help users make decisions faster.
