Overview
A top Indeed priority for 2019 was scaling design across our products. Our Design System team supported this through crafting cohesive and flexible components and patterns, with the longterm goal of reducing design & tech debt.
As my first project at Indeed I led start to finish design of the table component.
Team + my role
I also partnered with a Design Technologist on prototyping, and consulted with Content Writing on usage guidelines.
As sole Designer, I led conversations with 6+ consumer & b2b product teams to build relationships and gather context informing prioritization and requirements.
Date
Static table (MVP) released in UI Kit with published guidelines,
Aug–Sep 2018Dynamic table exploration, Oct–Nov 2018
Problem
A new design system had rolled out at varying times across Indeed’s product suite–hence, no unified treatment.
Product teams needed a table component that displayed and behaved consistently.
Existing tables
Opportunity
How might we build the table component in a sustainable, scalable way that aligns with Indeed’s new design language?
Approach
Get to know our users & current landscape.
1 Conducted stakeholder interviews with cross functional partners.
Interviewed cross functional partners in 6+ product teams across Austin, Seattle, and Hyderabad offices. Included Designers, Technologists, and Product managers supporting consumer and b2b products.
2 Created followup survey to gather product context.
Collected data around table usage that informed feature prioritization & requirements.
Survey highlights
Table primary audience and usage
Why this mattered
Among top challenges our team faced included minimal visibility into product team roadmaps and insights.
Sharp focus and prioritization was the only way our lean team of 6 designers supporting 30+ product teams could expand the system.
Hence, making the effort to listen to our customers’ needs was paramount.
For example, while indexing “mobile first” is widely touted in the industry, I learned that optimizing for viewing on mobile–tho certainly desired–was not a priority for products’ audiences at this time.
3 Conducted internal + industry audit.
Analyzed product team examples, industry best practice, and competitive landscape for actionable takeaways.
Overview of internal + industry audit.
Define the component.
Break down
how to build,
in phases.
Explore
solutions.
Design constraints included
ADA WCAG2.1 accessibility, AA level
Localization, with focus on right-to-left languages
Audit of arrow icons that informed which to signify “sort”
Column sorting icon + interaction
Row hover explorations
Partnered with Design Technologist on creating prototype, which served as launching point for UX developers to build into ICL (Indeed Component Library).
Deliverables
UI kit “sticker sheet” table component
1 Constructed table component
Leveraged Brad Frost “atomic design” approach, optimizing for modularity and flexibility.
Released in UI kit (for Sketch), primarily used by Designers and Design Technologists.
Built as nested symbol with overrides for text, header color, and 3 density options.
Component guidelines website
2 Created guidelines
Written and visual content for Design System website including guidance on table definition, usage, best practice.
Partnered with Content Lead to ensure content guideline adherence.
Guided junior Designer on content for “Do” and “Don’t” visuals.
Outcome,
Next steps
This is a start.
Half the equation in
design + code.
Dynamic features in development to be released in Indeed component library.
Leverage survey insights for ongoing feature prioritization.
Validate design through testing with product groups. Iterate on findings.
Exceeded Design System leader’s (manager) expectations – tasked to create reusable research template that serves as linchpin of our team’s design approach.