Similarweb
Unified Drop-Down Component Redesign
Similarweb is a leading AI-driven market intelligence platform. The Shopper Intelligence tool aids eCommerce brands by offering insights into Amazon’s consumer demand and competitive positioning.
Key Results:
Improved platform-wide consistency. Enhanced user efficiency in multi-select and search scenarios. Streamlined developer integration through Storybook
Role & Timeline
Product Designer
2 weeks (Design Discovery and Component Building) + 3 weeks (Design Integration with Development and Release)
Work Methods
Research / Prototyping / Usability Testing / Developer Collaboration / Storybook Integration
This project focused on redesigning and unifying the drop-down component across the platform to ensure consistency, adaptability, and a streamlined user experience. The redesigned drop-down use cases are single-select lists and search-enabled. The component integration into the Storybook for consistent developer usage was a dominant part of this project.
Before
The drop-down component consisted of several disjointed versions, often created ad hoc when new areas were added to the platform. None of these components were integrated into the Storybook. This led to:
Fragmented User Experience: Styles and interactions varied greatly across the platform, creating user confusion.
Inefficiency: Developers lacked a unified source of truth, resulting in redundant code and increased development time.
Unification: To ensure consistency across the design system we needed a scalable, unified component aligned between design and development teams.
Inconsistent variations before the redesign, lack of cohesion and usability challenges
Part 1: Design Discovery & Usage Mapping
Objective
Map the different contexts and requirements for drop-downs across the Shopper Intelligence platform to ensure a single, adaptable design for varied use cases.
Research Methods
Usage Mapping Table
Documented each drop-down instance in Excel, categorized by function (e.g., Category, Brand, Keyword), selection type (single or multi-select), search functionality, and unique properties.
Insights
Identified four primary drop-down types requiring unified styling and interaction models.
Usage mapping table. Click to enlarge
• • • • •
Stakeholder Interviews
Discussed with product managers and the development team to clarify technical requirements and constraints. This collaboration ensured that the new component would align with back-end limitations and front-end flexibility requirements.
Personas & Use Cases
Detailed user personas based on stakeholder interviews and platform usage research, capturing key roles and needs:
Pain Points Identified
Inconsistent Design and Interaction Styles: Fragmented drop-down interfaces across the platform caused confusion and inefficiencies for users.
Inefficient Search Function: Users struggled with slow, cumbersome workflows when filtering.
Lack of a Unified Component: The absence of a reusable, scalable drop-down component led to redundant development efforts and inconsistent user experiences.
Complex Integration with Development: The lack of alignment between design and Storybook made implementing cohesive and adaptable components challenging for developers.
PART 2: Ideation and Prototyping
Applying Atomic Design Methodology
I employed Brad Frost's Atomic Design Methodology to ensure a systematic and scalable approach to building the unified drop-down component. This methodology, which organizes design into five hierarchical levels—atoms, molecules, organisms, templates, and pages—proved essential in creating reusable, modular components aligned with Similarweb's design system.
Atomic Design in Action:
The drop-down atomic design structure. Click to enlarge
Atoms
At the foundational level, I identified key atomic components essential to the drop-down, such as:
Icon Button: A clickable element for interactions like opening and closing the drop-down.
Icon: A visual indicator for actions or statuses.
Molecules
Next, I combined these atomic elements into molecules, small functional units with a defined purpose:
Selector: A molecule housing the label and dropdown toggle.
Search Item: A molecule incorporating a search field for filtering options.
Result Item: A molecule displaying individually selectable options in the dropdown.
Organisms
To enhance functionality and scalability, I grouped these molecules into more complex organisms:
Result List Organism: A cohesive structure combining the Search Item molecule and Result Items for a dynamic, interactive list.
Dropdown Organism: The final organism, integrating the Selector molecule and Result List organism to create the complete drop-down component.
Outcome of Atomic Design Implementation
The methodology streamlined the component creation process by fostering reusability and consistency. Each level—atoms, molecules, and organisms—ensured clarity and alignment with the platform's design language, facilitating seamless integration into the Storybook.
Usability Testing
Conducted rapid usability testing with 5 internal users from various departments, to evaluate the functionality and efficiency of the redesigned drop-down component.
Focus Areas:
Validating the usability and clarity of the Selector Molecule as the starting point for drop-down interactions.
Assessing the effectiveness of the Search Item Molecule when integrated within the Result List Organism for searching flow.
Testing the intuitive design and overall performance of the Dropdown Organism.
Results:
90% preferred the cohesive and consistent design of the Dropdown Organism, reporting a seamless experience compared to the previously disjointed system.
87% of participants found the Selector Molecule intuitive, enabling them to interact with the drop-down effortlessly.
85% noted faster and more accurate filtering using the Search Item Molecule within the Result List Organism.
These results validated the Atomic Design approach, highlighting the effectiveness of modular components in addressing user needs and ensuring consistency across the platform.
The usability testing confirmed that the redesigned drop-down successfully addressed key user needs by enhancing efficiency and clarity across interactions. The Atomic Design approach ensured that each component—from the Selector Molecule to the Dropdown Organism—was scalable, and seamlessly integrated.
PART 3: Component Design Integration
High-Fidelity Designs
The finalized designs of the drop-down component in Figma ensured consistent styling, usability, and adaptability across all use cases. Each iteration aligned with the Atomic Design Methodology, allowing the modular structure to scale seamlessly. The Selector Molecule, Search Item Molecule, and Result List Organism combined to create a cohesive Dropdown Organism, balancing aesthetics and functionality.
Key Design Features
Unified Design
The drop-down component supports single select and search functionalities, offering flexible configurations for various platform needs.
Scalable Modularity
Built as a flexible component, easily adapted for different use cases while maintaining design consistency.
Collaboration and Storybook Integration
Close collaboration with developers was essential to integrate the drop-down into Storybook and the design system.
Highlights:
Provided detailed Figma specifications, covering all interactions and states.
Addressed technical constraints through regular feedback loops with developers.
Updated Storybook with all drop-down variants, usage guidelines, and examples for easy implementation.
Integration Challenges
The component’s complexity required rigorous testing across scenarios and iterative adjustments based on developer feedback to ensure usability and technical feasibility.
This collaborative process delivered a scalable, polished component that aligns with platform-wide goals.
Design System Update
Integrated the drop-down component into the Shopper’s design system as a reusable framework for consistency and scalability. This included detailed documentation of modular structures and interaction models for reference in future projects.
PART 4: Impact and Learnings