Overview

As part of the design team at Dice, I worked on designing the Avatar component for Dice’s internal design system, Snake Eyes. The avatar is a crucial UI element representing users, and consistency across platforms was essential for maintaining a cohesive user experience. My work involved research into existing avatar components from other design systems, evaluating previous efforts by the design team, and synthesizing this information into a functional and adaptable avatar component for Snake Eyes.

Research & Insights

I began by conducting background research on how avatar components are handled in other design systems like Material Design and Atlassian. This gave me insight into best practices, such as adaptable sizing, placeholder handling, and support for different image types. I also reviewed work that other design team members had started, which helped identify the key needs for our design system.

‍

Privacy Considerations

One key variant I designed was for Dice's Unbiased Mode, which focuses on removing any identifying features such as profile pictures or initials to ensure privacy. In this mode, a generic avatar image is displayed, helping create a more inclusive and anonymous environment for users.

Design Process

Using the research and privacy-focused requirements, I developed the following features for the Avatar component:

• Adaptable Sizing: Ensuring the avatar can be resized without losing quality, making it suitable for various use cases across the platform.
• Placeholder Variants: Creating default avatars with users' initials for when users don’t have an image uploaded, adding flexibility.
• Unbiased Mode: A privacy-first approach where any identifying information is removed and replaced with a generic avatar.
• Accessibility Considerations: Ensuring all avatars were accessible, including color contrast and alt text for screen readers.

‍

Documentation

To support future implementation, I also began documenting the Avatar component. This documentation covers the design rationale, usage guidelines, and technical specifications to ensure a smooth handoff and consistent usage across the system.

‍

Outcome

While the Avatar component was not implemented by the time I left, my work will hopefully be used in future iterations of Snake Eyes. The design offers a flexible, privacy-conscious, and user-friendly way to represent users, adhering to best practices for consistency, privacy, and accessibility across the platform.

Having never worked with a design system or designed a component for one before, this project was an incredible learning experience. It gave me the opportunity to dive deep into design system best practices and component creation, greatly expanding my skills.