Scalable component design

AWS Database Pricing Widget

An interactive pricing configurator designed for the AWS Console that provides real-time cost estimates as customers configure their database resources. The widget dynamically calculates and displays pricing based on customer selections, connecting directly to the AWS Pricing API to ensure accuracy and transparency at the point of resource creation.

Goal: Improve pricing transparency during database resource creation, help customers make educated pricing decisions, and reduce confusion around AWS database pricing through real-time cost visibility.

Role Lead Product Designer
Timeline 4 weeks
Team 2 (Designer, Engineer)
Platform AWS Console
The Challenge

Pricing Opacity Was Blocking Customer Confidence

AWS customers consistently reported difficulty understanding pricing transparency, particularly during the resource creation process. Without clear visibility into costs at the point of configuration, customers struggled to make informed decisions about their database setup, leading to confusion and frustration.

Hidden Costs

Customers had no visibility into the financial impact of their configuration choices during resource creation. This lack of transparency made it difficult to understand what they would be charged before committing to a database setup.

Complex Pricing Models

AWS pricing varies based on multiple factors—instance type, storage, region, and more. Without real-time calculations, customers couldn't easily understand how their choices affected total cost.

Decision Paralysis

The absence of pricing information during configuration led to hesitation and abandoned workflows. Customers couldn't confidently proceed without understanding the cost implications.

Fragmented Experience

Customers had to leave the console and visit separate pricing pages or calculators to estimate costs, creating friction and breaking the creation workflow.

Why it mattered: Pricing transparency is critical for building customer trust and confidence. Without it, customers hesitated to adopt AWS services or made uninformed decisions that led to unexpected costs.

Our Approach

Real-Time Visibility, Reusable by Design

The approach focused on creating an interactive experience that would update dynamically as customers made configuration changes, while building a reusable component that could scale across multiple AWS services with minimal customization.

1

Research & Discovery

Leveraged existing usability research study data that specifically highlighted customer pain points around pricing transparency. The research revealed that customers faced significant challenges understanding costs during the resource creation workflow.

  • Analyzed customer feedback on pricing confusion and uncertainty
  • Identified gaps in the resource creation workflow
  • Mapped pricing factors to configuration inputs
2

Design & Prototyping

Using Figma and the AWS Design System, I explored various layouts and interaction patterns that would seamlessly integrate into the existing AWS Console experience. The key principle was to make pricing information visible and understandable without disrupting the configuration workflow.

  • Designed dynamic pricing display that updates in real-time
  • Created clear visual hierarchy for cost breakdowns
  • Ensured seamless integration with AWS Console patterns
3

Technical Architecture

The technical architecture was designed with reusability as a core principle. I worked closely with the frontend engineer to define the component's logic, establishing a flexible architecture that would allow any AWS service team to implement the widget with minimal customization.

  • Mapped configuration inputs to AWS Pricing API SKUs
  • Created flexible component architecture for multi-service use
  • Built using AWS Design System for consistency
4

Testing & Validation

Throughout the development process, we validated the technical accuracy of pricing calculations by cross-referencing API responses with known pricing data. The component logic was tested across various configuration scenarios to ensure accuracy and performance.

  • Validated pricing calculations against API data
  • Tested across multiple configuration scenarios
  • Ensured performance with real-time updates
The Solution

An Interactive Widget That Builds Trust Through Transparency

The pricing widget provides real-time cost estimates directly within the database creation workflow, giving customers immediate visibility into the financial impact of their configuration choices.

Real-Time Updates

Cost estimates update instantly as customers modify their database configuration, providing immediate feedback on pricing impact.

API Integration

Direct connection to AWS Pricing API ensures all displayed prices are accurate and reflect current rates.

Reusable Architecture

Built for flexibility, allowing any AWS service team to implement with minimal customization.

Key Capabilities

1. Real-Time Dynamic Pricing

The component updates cost estimates instantly as customers modify their database configuration, providing immediate feedback on the financial impact of each decision. This eliminates guesswork and helps customers make informed choices.

Demo available to view on desktop.

2. AWS Pricing API Integration

Direct connection to the AWS Pricing API ensures that all displayed prices are accurate and reflect current rates, with each configuration input mapped to its corresponding pricing SKU. This guarantees customers see exactly what they'll be charged.

AWS Pricing API Integration Flow Configuration Inputs Instance Type db.r5.large Storage (GB) 100 Region us-east-1 Engine PostgreSQL Deployment Multi-AZ SKU Mapping Logic Instance Type + Region + Engine → SKU: RDS-PG-R5-LARGE-USE1 Storage + Region → SKU: RDS-STORAGE-GP3-USE1 Multi-AZ Deployment → SKU: RDS-MULTIAZ-USE1 API Request Payload { "SKUs": [ "RDS-PG-R5-LARGE-USE1", "RDS-STORAGE-GP3-USE1", "RDS-MULTIAZ-USE1" ] } AWS Pricing API Returns Current Pricing Rates $0.29/hour + $0.115/GB Real-Time Price Display Estimated Monthly Cost: $221.50 maps to query live data

3. Reusable Component Architecture

Built with flexibility in mind, the widget was designed and architected to be easily implemented by any AWS service team, reducing development overhead and ensuring consistency across the console. The modular design allows for service-specific customization without requiring significant re-engineering.

Reusable Component Architecture Core Pricing Widget • Modular Architecture • Shared Pricing Logic • AWS API Integration Amazon RDS Service-Specific Config: • instanceTypes: [db.t3, db.r5, db.m5] • engines: [PostgreSQL, MySQL, Oracle] • storageTypes: [gp3, io1, io2] Amazon DynamoDB Service-Specific Config: • capacityModes: [on-demand, provisioned] • storageClass: [standard, IA] • globalTables: [enabled, disabled] Amazon ElastiCache Service-Specific Config: • nodeTypes: [cache.t3, cache.r6g] • engines: [Redis, Memcached] • clusterMode: [enabled, disabled] Consistent UI/UX Same user experience across all services Reduced Overhead Minimal re-engineering for new implementations Implementation Flow: Service configures widget

Design Impact: By providing real-time pricing visibility at the point of resource creation, the widget empowers customers to make educated decisions with confidence, directly addressing the pain point of pricing transparency.

Impact

Live and Actively Improving Customer Experience

The pricing widget is currently live and actively being used by AWS customers in the database creation workflow, providing immediate value through improved pricing transparency.

Customer Results

  • Directly addressed customer feedback regarding pricing transparency at the point of resource creation
  • Reduced confusion and uncertainty around AWS database pricing
  • Enabled customers to make educated pricing decisions with real-time visibility
  • Eliminated workflow interruptions from needing to visit external pricing calculators

Technical Results

  • Successfully deployed a reusable component that can be implemented across multiple AWS services
  • Established accurate API integration ensuring pricing calculations remain current and reliable
  • Created a scalable architecture that maintains performance with real-time updates
  • Built foundation for improved pricing visibility throughout the AWS Console

Business Results

  • Established a precedent for pricing transparency in the AWS Console
  • Created a scalable solution that can be adopted by other service teams
  • Reduced development overhead through reusable component architecture
  • Improved customer trust through transparent cost visibility

Bottom Line: This project demonstrates how design solutions that prioritize transparency and usability can directly address customer pain points while creating technical infrastructure that scales across an organization.

Key Takeaways

Lessons That Scale

Research Accelerates Design

Leveraging existing research data can significantly accelerate the design process and ensure customer needs are addressed from the start. Understanding pain points early allowed us to focus on solutions that directly addressed real customer challenges.

Build for Reusability from Day One

Building for reusability from the beginning, even with tight timelines, pays dividends when the component needs to scale across multiple services. The initial investment in flexible architecture reduces long-term development costs and ensures consistency.

Design-Engineering Collaboration is Critical

Close collaboration between design and engineering is essential when defining complex component logic and API integrations, particularly for accuracy-critical features like pricing. Working together from the start ensured both technical feasibility and design quality.

Conclusion

This project demonstrates how addressing customer pain points with thoughtful design and technical solutions that prioritize both usability and accuracy can create lasting value. Future enhancements could include cost comparison features, savings recommendations, and historical pricing trends to further empower customers in making informed decisions.