User Experience Design Internship

I had the opportunity to work as a User Experience Design intern at Teradata. My main focus was to enhance the design system for improved efficiency and consistency. Additionally, I actively led initiatives to boost engagement in onboarding tours, contribute in component development, and various other projects.

SKILLS & TOOLS

Interaction Design , Prototyping, Visual Design, Motion Design, Adobe Suite, Figma

ROLE

UX Design intern

TIMELINE

May - Dec 2023

LOCATION

Remote

TEAM

Experience team

DISCOVERY

The Problem

Upon starting my internship at Teradata, I was introduced to a well-established design system grounded in Material Design 1 principles. Despite its solid foundation, it had not kept pace with new developments. The Figma components lacked advanced features like variables or component properties — key elements for efficient design workflows. My first task was to modernize the design system, focusing on updating the color system in accordance with Material Design 3 guidelines.

Designers and developers were not as efficient as they needed to be because the design system did not support their needs. To achieve this, we had to answer the following:

How might we make a design system that is intuitive for both designers and developers?
How might we streamline workflow for efficient collaboration?
How might we enable scalability for complex projects?
How might we improve integration and documentation for design components?

Old design system

Outdated naming system

Follows the "foreground" and "background" color naming system, this does not exist in newer versions of Material Design.

Missing colors

showcases significantly lesser colors (28) than Material 3, hence missing out on various color use cases.

Shades + Tints
Generated using a 10 shade palette, as opposed to Material 3 which utilises a 13 shade palette for each core color.

RESEARCH

Understanding the needs

To meet the objectives outlined above, I began by doing some research. I started with studying and familiarising myself with the Atomic Design Structure followed by Teradata in its current design system (where each interface can be broken down into fundamental building blocks). Following this, I closely studied and compared Material Design 2's guidelines with our current design system to ensure that nothing was missed during the transition to Material Design 3.

Heres a quick peek at my research process

Material 2.0 research highlights

RESEARCH

The Users

At Teradata, the design system primarily caters to the dynamic needs of the experience team, which includes both designers and developers. This section outlines the user needs and pain points for these individuals:

Designers

Needs

Visual consistency throughout the different products
Streamlined workflow for efficient collaboration
Reusable design elements to expedite the design process
Clear documentation and guidelines for usage

Pain Points

Outdated components causing misalignment with current needs
Limited flexibility hinders creativity and customization for unique design solutions
Inconsistent adoption of components across products

PROCESS

Phase 1: Color Modernization

The color modernization took place in 2 phases

Phase 1 : Aligning the color system to match Material design 3

Re-generating tonal palettes

Material Design 3 prescribes distinct roles to colors, including primary, secondary, and surface categories, generating their palette from 13 shades compared to the 10 shades used in Material Design 1 & 2. The first step in my process was to regenerate these root tonal palettes. Each palette is derived from a selected key color. While Material Design offers a palette generator, the palettes it produced were unsuitable for Teradata's design system, primarily because of inadequate contrast and improper adaptation between light and dark modes.

To overcome this, I created separate palettes for light and dark modes for each color, utilizing a shades and tints generator. This approach allowed me to tailor the palettes more effectively to meet Teradata's specific requirements.

PROCESS

Documentation

Following extensive collaboration and iterative discussions with the UX team, which involved numerous adjustments to the color scheme, we arrived at the final selection of colors presented above.

Finally, as the concluding step of stage one, I developed comprehensive documentation for the new color system. This documentation encompasses detailed explanations of the color roles and provides illustrative examples of their application, enhancing accessibility and enabling designers to familiarize themselves effectively with the system.

This is a peak at the documentation, view the entire documentation here

PROCESS

Phase 2: Consistency across products

During the latter half of my internship, I collaborated closely with the marketing team to ensure alignment between the user experience guidelines and the marketing color standards. This collaboration was aimed at achieving a consistent color scheme across all our products.

Continuing from the previous efforts, this phase presented a significant challenge as the marketing team's color palette comprised six distinct colors, which did not adhere to the Material color guidelines. My task involved integrating these six specific shades into our established color system. This required careful consideration to determine the relative importance of each color, ensuring that their incorporation respected the Material guidelines while also meeting marketing requirements.

Marketing colors to incorporate

#FF5F02

#00233C

#3053F4

#333A3E

#F6F7FB

#FFFFFF

I began by following the same steps as phase one

Re-generating tonal palettes
Assigning color roles and updating variables
Testing colors in Teradata's design components and interfaces
Documentation

Here is a quick peak at a few important stages in the process for the same

Re-generating tonal palettes

We decided to integrate the navy shade into the surface color palette for the dark mode, we did this by generating a separate navy palette and then fusing the two.

SOLUTION

Final documentation

Click here to view the entire documentation

SOLUTION

Comparisons & Usage

Before

Outdated colors + fonts (Material Design 1)
Did not accommodate all use cases, singular "card" color instead of multiple "surface" colors
Inconsistent with marketing specifications

After

Updated colors + fonts (Material Design 3)
Accommodates all use cases, incorporation of multiple "surface" colors, for a more dynamic interface.
Consistent with marketing specifications

Product VS E-commerce website

Consistency in colors + fonts used
Complex design system re-brand to match marketing specifications

REFLECTIONS

Learnings & Takeaways

My internship at Teradata was a dynamic experience that pushed both my professional and personal boundaries. Despite its brevity, the internship delivered unexpected and valuable lessons. Heres a glimpse into some of my takeaways:

Show, Dont Just Tell

In a visually driven field, I learned the impact of conveying ideas (including new ones) through visuals. This helped me to jump started the conversation, and displayed proactiveness within the team.

Go Crazy! (within constraint)

In the context of a well-established corporation like Teradata, I initially anticipated strict design guidelines. While there were rules to be followed, on going discussions and collaborations with fellow designers, developers and other team members consistently encouraged me to explore innovative design solutions, fostering a continuous flow of creative ideas.

Put Users First!

Working closely with Teradata's content designer was an eye-opener, highlighting the critical role of user consideration throughout the design process. Testing should never be treated as a formality; its the secret weapon to validate design choices, particularly with stakeholders.

Designing at scale

One of my personal goals prior to the internship was to learn how to efficiently design at scale. My primary project of closely working with the design system, equipped me with skills to produce cohesive and organised designs for more complex projects.