UX designer in a Design System team

AWS company logo Amazon Web Services (AWS)

UX design can be applied to more than a single UI, but to an entire Design System environment. A Design System gathers all use cases of a domain, in the form of components, guidelines, tools, and processes.

Design Systems provides the "why", "where" and "how" to solve user interface challenges within a specific domain. More than components, a Design system is about connections, methodologies, and design principles. It is a universal language and its rules.

As the single point of truth, Design Systems have the power to improve team collaboration, enhance UX and code quality, and reduce tech and design debt. But also unify intuitive and easy to use products.

Role specs

My role

Design, launch, and maintenance of Amazon Web Services (AWS) Design System.

Paired with UX designers, visual designers and Front-end web developers from Berlin, Seattle, and Palo Alto.

Supported Front-end web developers during the development and implementation phases of web components.

Provided coaching and guidance for designers and developers adopting the Design System. Helped AWS teams and end users meet their goals.

Mentored UX designers and on-boarded new designers to the team.

Projects

Developed guidelines for scalable, responsive and accessible web experiences for data-intensive interfaces.

Designed detailed interaction and user experience patterns (IXD / UX) for web components.

Architected (Information Architecture) the AWS Design System documentation website and drove the website’s content strategy.

Developed the contribution model and process for design contributions to the Design System.

Lectured at the University of Applied Sciences Berlin (HTW), Web development conferences, and diversity in Tech events.

Toolbox

Heuristic evaluation, task analysis, card sorting, benchmarking, design research, ideas and concepts generation, user experience (UX), interaction design (IXD), information architecture (IA), design critiques, design systems thinking, wireframing, prototyping, accessibility design standards, web design patterns, responsive web design, and usability testing.
Technical documentation skills for components, APIs, UX, and design usage guidelines.
Sketch app, Sketch library for flows and building blocks, Invision, HTML and CSS to inform my design decisions. Atom for HTML and markdown documentation implementations.
Software development processes (Agile and Kanban), design and development workflow, design team processes, coaching and mentoring of designers.

Know more

AWS Design System is internal use only. It doesn't have a public facing website and all deliverables are under NDA.

Amazon Web Services (AWS)

Project highlights

Infographic with Lambda interface and AWS hi-level connection system

Problem space

Amazon Web Services (AWS) provides cloud computing platforms with a pay-as-you-go model. AWS services range from computing, storage, networking, database, analytics, application services, deployment, management, mobile, developer tools, and tools for the Internet of Things. In 2017 alone, AWS released 1430 services and features by teams all around the world.

AWS is the world leader in providing a reliable, scalable, low-cost infrastructure platform in the cloud that powers hundreds of thousands of businesses across 190 countries.


Hi level isnfographic of layers from aws, to teams interaction, to services to and final end user.

AWS Design System

AWS Design System is a set of design guidelines and components to help AWS internal teams of designers and developers to build easy, intuitive and robust services. Providing a seamless experience across services for customers of AWS.

This Design System is an ever-evolving piece of tools and technology. That has the goal to solve the inconsistency and un-intuitiveness of interfaces across AWS. Operating in the domain of data-intensive interfaces for builders, developers, and engineers. While reducing internal costs of development, empower team-work, and raise code quality of front end applications.

AWS Design System includes UX patterns, guidelines, visuals, and code in GWT, AngularJS and React. So teams can build interfaces using modern web standards, while complying with usability and accessibility guidelines.


Patterns design and implementation

What else is there besides a table and a button? The patterns provided by the Design System must answer a need identified by the services teams. As a UX designer in a Design System team is my role to understand the service and end-user use cases to better define the problem we need to solve. When the problem cannot be solved by the combination of existing components and can be used across many services, I start doing research. Research on UX best practices, native implementation, and how users interact with interfaces to achieve that specific goal.

Many design solutions arise. The design solutions I propose must fit the remaining Design System principles, be intuitive, be creative, be scalable, and easy to implement with the current API and frameworks constraints.

With the development and research teams, we test assumptions and stress-test the proposed idea.

UX design work does not end there. Implementation comes into place, I also take part in development API discussions and weigh-in for the naming of properties and events.


Infographic showing the layers making a design system and its branches.

Design System documentation website

Releasing a design pattern or component must come with documentation, so it can better support the teams using the Design System. Each pattern is published on the documentation website with a set of guidelines on how to use the pattern, what it is good for (and what it is not good for!). I have written UX and usage guidelines for more than 15 patterns, and a few more articles on general accessibility and UX practices that fit the Design System principles. I architected the AWS Design System documentation website and drove the website’s content strategy.

But how do we make it all fit? For the first Information architecture of the Design System documentation website, I did an analysis of 33 Design System and Styles guidelines out there. With the intention to find reusable grouping sections, common terminology, naming conventions and in page content sections that better describe each pattern. I combined those findings with AWS designers and developers specific scenarios: Are they already on-boarded or considering adopting the Design System? What are they looking for? Is it about the usage of an API or a design flow? How does it fit in their product development journey? Do they need support and contact the team?

After a few months of the website release, it was time to reach out for input to improve the website information architecture. I gathered insights from a survey and a card sorting workshop I ran with AWS internal designers and developers. Like the Designs System, the website documentation is ever growing in quantity, specs, and diversity of needs. An Information Architecture is never done, it is flexible to support the evolution, change, and growth of the Design System.


Infographic showing the AWS designers, developers and stakeholders collaborating to deliver AWS experiences.

Contribution model

Design Systems are more about people and processes than they are about components. How can the Design System grow by leveraging the community of AWS designers and developers around it?

The goal when developing the Design System contribution model for design patterns, was to support growth, empower teams creativity while maintaining the high-quality bar for the Design System patterns. With the contributor, we analyze the use-cases and problem space. Together, we determine if indeed there is a need for something new and how it can be reused across services. When building a universal language, a few things need to be taken into account: repetition or overlap of solutions, UX practices, the flexibility of the design, edge cases, responsiveness, and accessibility. The contribution model is built around this relationship and wish for reusable quality design solutions.

Design Systems teams have the duty to engage with the community to build something greater than components for one simple single user interface.


Support and evangelization

As a UX designer in a Design System, my role does not solely rely on design patterns, but rather in supporting the community. I have held talks at internal web development conferences to share the knowledge on how patterns come to life and how the community can contribute back to the Design System.

On a daily basis, I support AWS designers and developers by answering their questions offline and face to face during design reviews with UX leadership.

What I enjoy the most in this relationship is to shed-light into UX best practices and solve together interface problems to deliver faster and high-quality services for AWS customers.


Screenshots of AWS products using the Design System language.

Examples of AWS products using the AWS Design System

Impact

AWS Design system team helped AWS teams to be successful and faster in building their user interfaces by understanding their needs, learning about the most recent technologies and design ideas, and implementing mechanisms to improve the customer experience. AWS Design System brings consistent quality with the goal to standardize and simplify the process of interface design and development.

By providing the support on frameworks and UX best practices, AWS teams feel that they produce faster with better code.


Send me an email

View my profile on LinkedIn

Follow me on Twitter

Discover my illustrations on my blog

Follow my artistic side on Instagram


Built by me with Boostrap & Sublime Text