SmartSave: Innovating the Way You Save for What Matters Most.
Role
UX/UI Designer
Industry
FinTech
Duration
2 months

A mobile app meticulously crafted to connect users with their financial aspirations, transforming every savings goal from concept to achievable plan.
Discovery
Crafting an ADHD-Friendly Product Search Page
When we began designing an ADHD-friendly product search page for a fashion e-commerce platform, I knew we were taking on a challenge that was as much about empathy as it was about design. For too long, the needs of neurodiverse users—especially those with ADHD—have been overlooked in the fast-paced world of online shopping.
I wanted to delve deep and see how best to showcase what I have learned from my Neurodiversity exploration. I had to investigate the usability issues common in e-commerce and the lived experiences of people like Jenny Trendy. The Challenge: Empowering Users to Save Smarter
The Problem: Overwhelmed, Frustrated, and Forgotten
Meet Jenny, a 35-year-old creative who loves fashion but struggles to shop online. For Jenny, finding the perfect summer dress should be an exciting journey, but more often than not, it’s a nightmare.
She lands on a product search page.
Her eyes dart across the screen, overwhelmed by flashing banners, countless pop-ups, and a cluttered grid of dresses, shoes, and accessories.
Filters are hard to find, and when she clicks one, it opens a complicated menu with too many options.
Within minutes, Jenny gives up and leaves the site, frustrated and exhausted.
Jenny isn’t alone. ADHD affects over 15.5 million adults in the U.S. alone (Reuters), and yet e-commerce platforms rarely prioritize their needs.
The result? Users like Jenny are forgotten, overwhelmed by complexity, distracted by unnecessary elements, and lost in designs that don’t consider their challenges.
Why This Matters: The Hidden Cost of Overwhelming Design
The numbers paint a stark picture:
68.8% of online shoppers abandon their carts due to usability issues (Baymard Institute).
Many ADHD users drop off long before reaching the cart—often at the product search page, their first point of interaction.
By failing to accommodate neurodiverse users, businesses are losing potential customers and billions in revenue.
But it doesn’t have to be this way.
Our Approach: Listening to Real Users
To better understand these challenges, I interviewed four users diagnosed with ADHD. Their insights were eye-opening:
Insight Grouping
We categorized their responses into five categories to help us better analyze and narrow down the interviewees' feedback.
Competitive Analysis: What Works and What Doesn't
When designing an ADHD-friendly product search page, our goal extends beyond usability and inclusivity; it must also balance the business needs of e-commerce platforms, such as upselling. To achieve this, we analyzed four major fashion e-commerce platforms ASOS, Everlane, Zara, and Forever 21 to assess their approaches to accessibility, usability, and upselling.
This analysis integrates insights into how these platforms currently cater to (or fail to cater to) neurodiverse users, particularly those with ADHD while highlighting how upselling strategies can coexist with accessibility for a truly user-centric experience.
Key Evaluation Criteria
Accessibility Features: Tools like screen reader compatibility, keyboard navigation, and WCAG compliance exist.
Usability: Simplicity of navigation, clarity of layouts, and support for user focus.
Upselling Strategies: Placement, relevance, and intrusiveness of recommendations or promotional content.
Impact on ADHD Users: How effectively the platform minimizes cognitive load and distractions.
Conclusion
The ideal product search page blends Everlane’s accessibility-first approach with ASOS’s balanced upselling strategies while avoiding the pitfalls of Zara’s overwhelming layouts and Forever 21’s intrusive design. By focusing on inclusivity and thoughtful upselling, we can create a product search page that supports ADHD users and drives business growth.
Prioritization Approach
To determine which features to focus on, I used a Prioritization Matrix. This approach allowed me to evaluate each feature based on its impact on ADHD users and the effort required to implement it.
Focus Mode: Ranked highest due to its ability to help ADHD users reduce distractions and stay on task.
Smart Filters: Selected for its high usability and low implementation complexity, making it a quick win for improving navigation.
Contextual Recommendations: Included as a medium-priority feature to balance user focus with business needs.
This structured evaluation ensured the features addressed core user pain points while aligning with the project’s timeline and resources.
User Journey Map: Before and After
Let’s use Emma, one of the ADHD users from the research interviews, as our persona to create a storytelling journey map. We’ll focus on her experience navigating a product search page before and after the redesign.
Reflection
This journey map illustrates the transformational impact of the redesign, focusing on Emma’s needs as an ADHD user. The changes reduced cognitive overload, simplified navigation, and enabled a smoother path to purchase.
Ideate
The ideate phase translated research insights into actionable design concepts. We began with quick paper sketches to brainstorm ideas, progressed to low-fidelity wireframes for layout exploration, and iteratively refined them into mid-fidelity prototypes to test functionality and structure.
Paper Sketching
To kickstart the design process, we created rough paper sketches to visualize potential layouts for the product search page. These sketches explored key features like the prominent search bar, sticky filter bar, and Focus Mode toggle. This phase encouraged rapid iteration and creative exploration without being constrained by tools.
Low-Fidelity (Lo-Fi) Wireframes
Low-fidelity wireframes were created to solidify the layout and structure of the product search page. We focused on key elements such as:
A central search bar for easy access.
A simplified product grid with clear spacing.
A sticky filter bar to improve navigation
Feedback and Iteration Between Lo-Fi and Mid-Fi
Feedback on the Lo-Fi wireframes revealed that the placement of the Focus Mode toggle was not intuitive. Based on this insight, we moved the toggle to the top-right corner for better visibility and accessibility. Additionally, the product grid was adjusted to include hover previews for quick evaluation.
5. Mid-Fidelity (Mid-Fi) Wireframes
Mid-fidelity wireframes added more detail to the design. We introduced a clear hierarchy for text and buttons, refined the spacing of the product grid, and incorporated interactive elements like hover states and the Focus Mode toggle
Design
High-Fidelity
Landing Page for ADHD-Friendly E-Commerce Website
The landing page is designed to provide a clean and visually balanced introduction to the store's offerings. Key sections like promotions, curated collections, and weekly highlights are clearly separated to reduce cognitive load and improve navigability. The focus is on simplicity and accessibility, ensuring ADHD users can quickly find areas of interest without being overwhelmed by clutter or excessive information.
Product Listing Page (Focus Mode Off)
The default product listing page presents a visually structured and intuitive layout that balances functionality and engagement. Filters and sorting options are always visible to guide users efficiently, while the product grid emphasizes clarity with consistent formatting, pricing, and actionable "Quick Add" buttons. Additional elements like wishlists and recommendations enhance engagement but remain non-intrusive.
High-Fidelity Prototyping
Usability Testing
Iterating Through User Feedback
As designers, we often create solutions we believe will work, but true innovation comes when we put those solutions into the hands of the people who will use them. For this project, the heart of usability testing was understanding how real users especially those with ADHD experience our design and ensuring it truly meets their needs.
Purpose
The usability testing phase aimed to validate the ADHD-friendly features of the e-commerce platform, focusing on the landing page, product listing pages, and the Focus Mode functionality. By observing real users interact with the design, we sought to uncover how well the platform reduced distractions, simplified navigation, and improved focus for users with ADHD.
Objectives
The main objectives of the usability testing were:
Participants
We recruited six participants, including:
Participants were asked to complete a series of tasks designed to reflect typical e-commerce user journeys, such as browsing for products, applying filters, and toggling Focus Mode.
Methodology
The usability testing was conducted remotely using Figma prototypes. Each participant was given five tasks to complete:
Metrics recorded during the session included task completion rates, time taken for each task, and participant feedback.
Key Findings
Next Steps
Moving forward, we plan to:
Results and Reflections
A Story of Progress and Purpose
When we began this journey, our goal was simple yet profound: to create a shopping experience that truly understands and supports users with ADHD. Along the way, we learned that designing for neurodiverse users doesn’t just improve accessibility it enhances the experience for everyone. The usability testing phase was not just a validation of our efforts but an eye-opening process that helped us discover the human impact of thoughtful design.
Reflections: Lessons From the Journey
1. Designing for ADHD Users Benefits Everyone
As we observed participants navigate the platform, it became clear that features like Focus Mode, simplified filters, and intuitive navigation weren’t just useful for ADHD users they resonated with neurotypical users too. This reminded us of a universal truth in design: inclusivity is for everyone.Emma, one of our participants, put it best: “I can finally shop without feeling like I’m fighting the website. This makes sense.” Her words were echoed by neurotypical users, who praised the platform’s clarity and ease of use.
2. Simplicity is the Ultimate Accessibility
It was the small, intentional details that had the biggest impact. Participants loved how filters were always visible and easy to apply, and the “Load More” button gave them control over their browsing pace. These features may seem basic, but their thoughtful execution transformed the experience. As one user noted: “It’s not trying to do too much it just works.”
3. Feedback is the Key to Great Design
Testing revealed both our strengths and opportunities for growth. While participants appreciated the clarity of the platform, they also pointed out areas like filter feedback and button visibility that could be improved. These insights were invaluable and shaped our next steps. We didn’t just design for users; we designed with them, ensuring their voices guided the process.
4. ADHD-Friendly Design is Just the Beginning
This project opened our eyes to the possibilities of creating for neurodiverse audiences. Focus Mode was a game-changer, but it’s just the start. We realized the potential for features like personalized filter presets, voice navigation, and broader accessibility tools that could take inclusivity to the next level. This isn’t the end of the story—it’s the beginning of a much larger mission.
Reflections on the Results
The usability testing phase reinforced the value of designing with empathy and intention. By prioritizing features like
Focus Mode, intuitive filters, and the "Load More" button, we were able to create an experience that simplified online shopping and gave users a sense of control.
These results not only validated the design but also underscored the importance of listening to users and addressing their unique needs.
The numbers are compelling, but the real success lies in how users felt less overwhelmed, more in control, and genuinely supported by a platform that understood them.
This is the heart of empathy-driven design: creating solutions that don’t just work but truly connect with people.
Closing Thoughts
This project wasn’t just about building a product, it was about creating an experience where users feel supported, understood, and empowered. By prioritizing ADHD-friendly features, we designed a platform that not only simplifies e-commerce but also fosters a sense of calm and control.
As we move forward, this case study serves as a reminder that the best designs come from listening, learning, and iterating. The journey doesn’t end here there’s so much more to discover and so many more voices to include. Because at its core, design isn’t just about solving problems; it’s about creating connections. And with every insight, we get closer to making the digital world a place where everyone can thrive.
Transforming the Product Search Experience for ADHD Users
A human-centered approach to creating a distraction-free and accessible e-commerce search page that balances user needs with business goals.
SmartSave: Innovating the Way You Save for What Matters Most.
A mobile app meticulously crafted to connect users with their financial aspirations, transforming every savings goal from concept to achievable plan.
Instagram (Profile Page Search Feature)
Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.