Challenges

Slickdeals’ vast inventory, coupled with time-sensitive deals, made it crucial to offer real-time, personalized recommendations that didn't overwhelm users. Our task was to design a solution that showcased these dynamic deals in a way that felt intuitive and guided users to relevant offers seamlessly.

‍
1. Real-time Personalization: Ensure users feel the recommendations are uniquely theirs, driven by both their past behavior and live updates.

‍2. Volatile Inventory: Deals expire and new ones appear frequently. The design needed to reflect this volatility while maintaining a smooth experience.

‍3. User Engagement: Increase click-through rates (CTR) and page views without compromising user experience.

‍

User Research & Insights

We kicked off with a user-centric discovery phase. Through user interviews and behavior analytics,we focused on understanding:

‍• What motivates users to click on deals.

‍• Their frustrations with missing out on time-sensitive offers.

‍• Their trust in personalized recommendations.

From these sessions, we learned that users wanted more control over the type of deals shown but preferred minimal effort in interacting with the interface. Trust in the system’s ability to deliver the best deals was critical.

‍

Wireframing & Ideation

Next came the wireframing phase. we mapped out the key user flows for:

‍Home Page Recommendations: Deals tailored to user preferences and behavior. A carousel design was proposed for its easy scrollability and digestible presentation of time-sensitive deals.

‍“Just For You” Section: A highly personalized section featuring hand-picked deals for individual users.

‍Product Detail Page Recommendations: Suggestions for similar products, enhancing the overall shopping experience.

Clear hierarchy: Users needed to immediately understand what the most relevant deal was.

‍Minimal friction: A simple, clean layout with smart use of white space to avoid overwhelming users with too many choices.

‍Interactive elements: Incorporating hover states and animations for smooth interactions and a more dynamic experience.

‍

Prototyping and User Testing

With wireframes in place, we developed interactive prototypes using Figma. This allowed us to conduct A/B testing and gather real-time feedback.

‍User feedback revealed:
• Users liked the streamlined experience but wanted more visible information about deal expiration times.

‍• The “Just For You” section was highly praised for its relevance, but some users preferred a compact layout that allowed them to scan more deals quickly.

‍Expiration Countdown: We added a visual countdown for each deal to increase urgency.

‍Grid vs. List View: We provided a toggle between grid and list views, giving users more control over how they wanted to view deals.

‍

High-Fidelity Design & UI Elements

In the high-fidelity design phase, the goal was to ensure a polished, cohesive design that aligned with Slickdeals’ branding while modernizing the overall aesthetic.

Typography: We chose a bold, readable typeface for deal titles to ensure users could quickly scan for offers.

‍Color Palette: Leveraged Slickdeals' existing blue and white color scheme but added accent colors (like red for time-sensitive deals) to create urgency.

‍Card Design: Deal cards were designed to be modular, allowing them to update seamlessly with live data without disrupting the user experience.

‍Hover States & Animations: Subtle animations were used for hover states on deal cards, providing instant feedback and making the system feel responsive and modern.

‍Design Strategy:
• We kept the design minimal yet informative. For each deal, the main components—product image, deal title, price, and countdown—were displayed in a well-structured format, ensuring clarity.

‍• To maintain simplicity, non-essential information (like user reviews) was hidden behind “click to expand” buttons, ensuring users weren’t overloaded with too much data upfront.

‍

Old UI

‍

New UI

Collaboration & Design Handoff

As the UI/UX lead, we worked closely with developers to ensure that the design aligned with the AI-powered backend system.

Key focus areas were:

Scalability: The design was built to handle large volumes of data, ensuring that the recommendation system could load quickly, even as deals were updated in real-time.

‍Responsiveness: We optimized the design for mobile and desktop, ensuring a seamless experience across devices.During the handoff phase, I ensured:

‍Design Consistency: All assets, including the grid layouts, components, and typography scales, were meticulously documented and delivered to developers via a shared design system.

User Testing Feedback Loop: We maintained an open line of communication with the development team during the build phase, ensuring that any tweaks or changes based on testing feedback were promptly implemented.

Result

• 70% increase in CTR to product detail pages.

• 30% increase in clicks on affiliate links

• Positive user feedback regarding the simplified, personalized experience.