Design Principle > UI Components

Simplifying components for Consistency and Scalability on the bedrock of Design Principles. ft. comment panel

Services:

Systems thinking | Research | System Governance

Amazon

1. The Problem

Within the organization product suite (as part of my portfolio ft. comment component) the communication principle within tools - specifically feedback, annotations, and commenting - was completely fragmented and difficult to access

The logic and purpose behind the application of components were not traced to “Why are we designing this?”

Components were reproduced for every single project

This resulted in inefficient use of resources in every product resulting in inconsistency, fragmentation and inefficiency

2. The Fragmentation

  1. Commenting features were trapped within specific pages.

  2. Users couldn't find or reply to feedback outside of isolated reports, leading to a disconnected experience

  1. Because no centralized component existed, development teams were "re-inventing the wheel" for every product under the organization’s umbrella.

  2. Duplication resulted in inconsistent UI,

  3. Bloated codebases, & Wasted budget/man-hours

  1. We were maintaining dozens of disparate "comment" versions rather than one scalable solution

3. Research Methodology

My research methodology was rooted in what customer says vs what customer meant. I identified survey questionnaires, interview, observation and gathered insights and use cases.

01
Eagle-eye view

  • By understanding product ecosystem and application of components for annotation, feedback and comment are implemented in various projects uniquely and repetitively

  • Mapped the logic of application and reduced friction in finding it

02
Pattern Identification

  • Identified the "redundancy pattern” when developers were spending precious cycles building custom comment panels, annotation and feedback textfields for every new product instance.

  • This pattern observation allowed me to include comment panel in "optimizing an ecosystem."

03
Invent & Simplify

  • Opportunity to unify the communication panel

  • The lack of basic affordances (like tooltips) and the inconsistent handling of secondary elements (footnotes/modals).

4. The Solution

01
Developer-ready Design

Architected the component using Design Tokens and Figma Variables (Boolean for states, Text for content, Color for themes). This ensured the component was "developer-ready" and logic-based, not just a static graphic.

02
Responsive Adaption

I implemented a robust responsive logic (breakpoints) tailored for professional laptop environments, modes and tablets ensuring the panel reflowed perfectly across different screen densities without requiring custom overrides.

03
Variable Driven Theming

Efficiency in plug and play application and cost-reduction through ready to use complex components addressing logic and principle driven application

Initial conception ideations and Interactions

Annotation and feedback for enterprise tools

1. Annotate on a row

2. Access the annotation and view placeholder address

4. Delete a comment made in-thread

3. Upload files for quick turnarounds

Other Complex Components from the design library

30 - 40% faster production across all future initiatives*

Saved Developers 72+ hours across each of 3+ current projects

Design Review delay eliminated while ensuring design consistency

5. The Impact

01
Efficiency

By centralizing the Comment Panel concept, achieved design consistency for 3+ projects saving review time

Moved from custom-coded solutions to a plug-and-play component, significantly reducing the "design-to-development" cycle.

02
Developer Velocity

Saves 72+ development hours and eliminated the redundant workload and wait time for engineering teams, allowing them to focus on feature-heavy delivery rather than UI maintenance.

03
Standardization

Established a "component-first" approach, where all new feature requests might pass through a design system lens check, ensuring long-term scalability.

6. Key learnings

6.1 The Developer Designer Relationship

  • I learned that in enterprise environments, the biggest challenge is design to production timeline

  • As a designer, it is crucial to identify patterns and opportunities of scalability

6.2 Variables and Design Tokens

  • I learned the application of variables and design token in Figma

  • I learned how to make Figma files efficient for handoff and for quick low-lift development

7. The Reflection

  1. A learner should learn from every detail of their life so that as a designer, one can design an efficient workflow

  2. The judgement would be the basis of future UX design skills

6.3 The Power of Verification-First Design

  • I moved from an exploratory design (allowing users to search) to a verification design (allowing users to confirm).

  • I learned that experts don't need to be guided; they need to be supported with all the relevant context at once to make rapid decisions.

Previous

Devices UX
Next

Spatial UX