top of page
Background
Role: UX-UI Designer & Researcher
Company: Amazon Web Services
Duration: January 2022-Present

Background

The RDS UX design team was in need of a design library that would make it easier for designers to do rapid wireframing, prototyping, and iteration in Figma. The team also wanted to establish a clear governance process to enable designers to contribute to the library.

The team & My individual contribution

As part of a team of 3 UX designers, I led the project and developed a design strategy. I coordinated user testing and iteration, focusing on the needs of our customers - the database designers - and working closely with the team to gather their feedback and iterate based on their insights. Through collaboration and effective communication, we were able to create a comprehensive design library that has had a positive impact on the design process.

Problem

Lack of Figma page Templates and Design Library Causes Time-Consuming Challenges for RDS UX Design Team
When I joined the RDS UX design team, they had recently switched to Figma from Sketch, but had not yet created any templates for their projects. There was no Figma design library of console pages available for database designers to use in their projects. In user interviews, several participants expressed the need for such a library. Many designers (82%) preferred to use Figma, but due to the lack of pre-built page templates, they continued to use Sketch.

Goal

Creating a Figma Design Library consist of pre-built page templates for RDS Console Using Amazon's Polaris Design Library to Enhance Consistency, Efficiency, and Collaboration
The goal of creating a Figma design library for the RDS console was to provide consistent and organized design templates using Amazon's Polaris design library assets and resources. Polaris has atomic design elements, but lacks pre-built templates and customizable components. By creating a design library, teams can ensure design consistency, save time and effort, and improve collaboration and communication among team members.
Problem & Goal

Who is this design library for? 

Approach & the Model

To improve the design library for the console, research was conducted through user interviews and existing design library audits. Team meetings were held to discuss insights and identify areas for improvement.
approach.png
AWS Polaris and Templatized Library: The Most Popular Design Libraries Which lack Page Template Components
Insights on Designer Preferences, Proficiency, Time, and Existing Library Usage
Participants: 2 AWS RDS UX designer, 2 AWS DynamoDB UX designer
Key findings:
Preference 
Designers want to use Figma but most of the time they prefer to use Sketch due to not having interactive pages in Figma.
Proficiency
They are not familiar with most of Figma features.
Time
Designers spent almost 3 hours at the beginning of each project to build pages in Figma from scratch.
Existing library usage
Users who are using Figma in their projects mostly use Templatizied design library.
Persona
Approach
Insights showed that we need an Informative and Feature-Rich Design Library to Enhancing Designer Efficiency
Based on these insights, a design strategy and model were defined to create a design library that meets the needs of designers.
Customer journey mapping:
Customer journey mapping revealed that meeting the needs and expectations of designers could be achieved through the creation of a design library that is both informative and teaches users how to utilize Figma features effectively. This could include publishing RDS-specific components and pre-built RDS console page templates with interactive components, to reduce the need for designers to search for resources in external libraries. By providing these resources and tools, we can support designers in their work and help them create high-quality designs efficiently.
Design Library for RDS Console Focuses on Creating Templates and Pages, with Some Molecular and Organism Components
Based on inventory and audit, it appears that we already have atomic, molecular, and organism components in AWS Polaris design system and Templatized library. So, the most important components we need to create for this design library are templates and pages, but we also need to create some molecular and organism components specific to the RDS console. I defined the type of components for this design library based on Brad Frost's atomic design book. 

Discuss & Create

Design Library Strategy Created Through Team Discussion and Designer Consultation
I have developed a strategy for creating a design library, informed by research insights and consultation with UX design customers. This strategy involves to first creating a sitemap of the RDS console to understand which pages are necessary and prioritize their development, and then creating the pages of the design library file, including an overview page, a component library page, tutorial page, and RDS console page templates. As the next step, we started to create pages based on the priority of designers need. We created almost all of the high priority page templates in 3 months. 
RDS console sitemap:
Structure of the design library: 
Consists of 4 main pages:
  • Overview page
    • Table of content
    • Why we are creating this library
    • How to get start using it
    • How to contribute to this design library
    • RDS console sitemap with showing available pages​
  • Component library
    • Molecules and Organism components that are specific to RDS​
  • Tutorials
    • Step by step tutorial of how to create a RDS page with RDS specific components​
  • RDS page templates
    • Available RDS page templates with interactive components​
23 RDS console page templates are created in Figma with interactive components
Measuring the Impact of the Design Library on Designer Workflows:
To ensure the successful implementation of the design library, I conducted individual meetings with designers to provide an overview and demonstration of its features. After two weeks of its publication, I also requested feedback from the designers on their experiences using the library in their projects. The following are the key findings from their responses:
  • Designers had difficulty finding the right components in some cases.
  • They had concerns about how to contribute to the library.
  • Overall, the design library was helpful but not completely comprehensive.
  • At the end of two weeks, there were just RDS design team that were using the library.
Designer quotes:
Adjectives utilized by designers to express their thoughts include:
Disccuss & Create

Exploring Further: Additional Research and Design Iterations

Based on feedback from designers, two different structures for the design library were created:
Structure A, where page templates are components and major patterns are also components that can be detached or swapped.
Structure B, where page templates are frames and major patterns are frames with components already arranged.
​To evaluate the effectiveness of the two structures, a user testing plan was developed and carried out with designers. The test were conducted with 4 AWS RDS UX designers and 1 AWS DynamoDB UX designer. The test included questions to assess the designers' proficiency with Figma and a task for them to complete using both structures. This allowed me to gather insights on the designers' experiences and preferences for each structure.
I conducted a user test with
Designers preferred Structure B because it allows them to rearrange components without needing to detach them.
During the user test, participants did not encounter any usability issues that prevented them from completing the tasks with either structure. When using Structure A, participants initially tried to find alternative methods, but eventually had to detach components to complete the tasks. In contrast, when using Structure B, participants were able to complete the tasks more easily without needing to detach components. All participants found Structure B to be easier than Structure A for the "move cards" task, and two out of three participants found it to be easier for the "altering a card's layout" task. Additionally, all participants preferred Structure B for ease of access to finding templates and overall usability. Some feedback was given regarding the library file, but it was not considered a blocker for the tasks.
How to keep this design library alive?
Next, I conducted research on the ways in which designers can contribute back to the community and used this information to educate other designers. In addition, I worked on creating page templates and regularly updated a library every 10 days.
“A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
Nathan Curtis
Following the review, I began researching the best ways to contribute to the design library. As a result, I identified three types of changes that could be made to the library based on designers contributing back:
  • Modification
  • Addition
  • Removal
Exploing further

Results

The usage data reveals that the library is utilized by 19 teams at AWS, with the most frequent users being the RDS and ElastiCache MemoryDB teams. On a weekly basis, designers are inserting 452 components into the library.
Results

Next steps

To maintain the relevance and effectiveness of the library, the following steps should be taken:
  • Assign specific designers to review and integrate branches created by other designers.
  • Continuously update the library based on designers' needs and newly launched features.
  • Hold biweekly meetings with designers to gather feedback and suggestions.
Next steps
bottom of page