Indeed Design System

As a member of the design system core team, my role was to address the product team's requests and create the requested patterns. I actively engaged with various cross-functional disciplines, including localization, accessibility, developers, product designers, and content experts. Indeed boasts a robust product team comprising approximately 500 UXers spread throughout the organization, who create tailored products for both employers and job seekers.

Role

UX Designer, UX Strategist

Project type

Design System for multi-devices

Team

7 Designers / 15 Devs

Contribution

Audit, research, design, and documentation

Tools

Figma, FigJam, Jira, Storybook

Duration

12 months

Context

At Indeed.com, I focus on creating and improving components based on feedback from our customers, and the product team. I also advocate for our audience's needs and align them with our business goals to deliver the best solutions.

To give you a better context of our organization, the key stakeholders of the design system encompass the following:

End users, aka the audience: The audience interacts with our company, services, and products, such as Job Seekers.
Product teams, aka the customers: The Indeedians designers and developers create consistent, holistic, and coherent user experiences based on the design system.
Design system team, aka the specialists: A collaborative group of designers, content experts, researchers, and developers who create scalable, flexible, and accessible UI components. They establish principles and execute processes developed and maintain the design system.

This cyclical relationship between our audience, customers, and specialists is driven by the objective of delivering features that offer intuitive experiences for our audience. It emphasizes a collaborative approach where customer feedback informs the development of components to ensure the continuous improvement of user experiences.

Process

I have been involved in developing multiple components to fulfill the requests of the product team. This process involves over 15 people from various disciplines, and we ensure top-notch quality at every step of the way. When we receive a component request, whether it's a simple icon or a complex table, it goes through the following process:

1. Research

I conducted research on the current usage of the components in the products in order to identify both existing and desired features. Additionally, I studied multiple design systems to understand how others have effectively addressed challenges. I assimilated best practices from several insightful articles and resources. This step of the process was documented in their respective Figma component discovery file to maintain the traceability of the findings and make decisions accordingly.

2. Discovery

Once all the internal and external information regarding the component is compiled, it is time to move on to the next area in the research file: discovery. In this stage, I have the opportunity to create the component, apply color tokens, establish specifications, nest components together, and configure the component set as required. This step of the process involves all the previous research and best practices discovered.

3. Design

Once the discovery phase is complete, we move on to the design stage in the Figma component research file. At this stage, I have a clear understanding of the required features and I incorporate them into the component to meet the user's needs. I come up with one or more proposals and then reach out to my fellow developers, who are experts in the technical aspects of the systems and the complexities involved in my designs. I meet with them to ensure that my design is feasible and within the scope. We also have a weekly design team session where we present our projects and receive feedback from our fellow designers. These reviews are critical in moving forward with the next steps.

4. Accessibility

This particular step of the process has been in place since the very beginning. At this stage, we consult with accessibility experts to obtain their review and approval. This review is not about soliciting advice on how to make my components accessible; rather, it is about presenting my accessibility applications and ensuring that I have executed them correctly. To accomplish this, I adhere to an a11y checklist that aligns with the Web Content Accessibility Guidelines 2.1 (WCAG).

5. Content

My fellow designers, developers, and accessibility experts have approved the component, so now it's time to create the documentation. To ensure consistency across all components, I follow a content model that applies to everything we produce. Our strategy aims to align the documentation and provide a consistent information structure for our customers. As designers, we are also responsible for following heuristic content guidelines to ensure our documentation is accessible and easy to understand. Once we have a solid draft, we work with our content experts to review and refine the documentation together.

6. Localization

The localization review is a crucial step in ensuring that the component is universally accepted and not offensive to any audience. This process involves translating and adapting the copy for support in right-to-left languages (AE, EG, IL, and SA).

7. Development hand-off

This step of the process started from the beginning with the involvement of the developer. The dev has been supporting with feedback along the process and sometimes, they can even start preparing the dev environment before the official hand-off. The design delivery for the devs is a step that includes a Figma design file and a documentation Google doc. The developers then start implementing my design and we communicate every step of their process to ensure that it is aligned with the design. To review his implementation before the release I use tools like Jira, Storybook, GitLab, and Chromatic.

8. Release

As part of our internal processes, I follow a release checklist step-by-step training file and I have reviewed the implementation and ensured that it aligns with the design and documentation. All the interactions, colors, and states seem correct, and the component is functioning as expected. We are now ready to merge! I have a meeting with the developer to plan the release. Typically, we schedule it on the same day to announce to our customers simultaneously and provide updates in both design and development resources equally.

Impact

I have created over 30 components for products and emails, ensuring accessibility compliance, right-to-left (RTL) support, and translation capabilities. These components are designed for flexibility and are used by multiple product teams, addressing various challenges along the way. Their creation and enhancement have significantly improved our product offerings, providing more features and a better user experience. This has led to increased customer engagement and higher profitability for the company.

Key results

I measure the impact of my work using both quantitative and qualitative methods. The quantitative measurement is based on the adoption of my designs, and I retrieve this information from Figma analytics. On the other hand, the qualitative measurement is captured through feedback received from customers and fellow coworkers.

30+

32+

245+

23.5k

Icons and patterns created

Teams using the IDS

Figma files using IDS

Instances created

Next steps

We have several initiatives in the team to continually improve the design system, optimize processes, and simplify the components. Some of the most important ones are:

Creation of internal processes to provide training materials for the design system team members.
Expansion of the design system to integrate with internal tools that work with React.
Simplification of the contribution process to enable our customers to build their own components by following the design system guidelines and self-serving their requests.

Takeaways

My journey at Indeed.com has developed my professional career exponentially. The opportunity to work with experts from other disciplines has refined my work quality and increased my expertise tremendously. These are my top takeaways from my experience:

Consistency vs. flexibility: A hot topic! I’ve learned that flexibility should take priority because we want customers who want to use the design system.
Accessibility is key: This extra layer is beneficial not only for those with disabilities but for everyone and should be considered when designing a component.
Design Systems are endless: A design system is a product that helps designers and developers create products faster and more efficiently. As a product, it has cyclical improvements that expand and correspond to the organization's expansion as well.
Simplicity: This is always a good starting point: Putting so much complexity in the first version of a component is not a good strategy, especially if it’s a new introduction for the customers. The best strategy is to implement priority features and add patches as the customers require.
I am a work in progress: Despite trying to keep up with the latest updates in the industry, there are always new tools, new functionalities, and new methods to speed up my workflow. I am always open to learning and sharing my knowledge.

Peers' feedback

"Diana is not just an asset to our team but an extraordinary design professional whose contributions make us all better at what we do."
Valeria Molina, Sr. UX Designer, Partner

"Diana was a great partner in establishing a streamlined content creation process for component documentation. The newly-created, dedicated Google Drive for documentation and image asset creation has significantly improved the efficiency of our documentation processes."
Jenny Park, UX Content Designer, Partner

"Diana has been my Design System partner as I work on a new email job card to add to the Email Design Library. She has been very helpful in understanding the process for adding a new component to the design system."
Debra Gladwin, Sr. UX Designer, Customer

Resume