This case study aims to outline the design process of the creation of the UI components for UX Designers and Software Engineers of the Ad Department at Google. I’ll share insights into my process, product design, the tools I used to create and implement the system, and also how I document and share the system details with the team.
To create, approve, and publish the Google Material enterprise design specs for use by all Reach UX Designers and AD Engineers.
- Audit, Research
- Build component
- A11y (accessibility)
- Creating the spec
- Usability testing
The process started with information research about components and patterns for the system. Such as user experience, positive and negative feedback, as well as how exactly a certain component helped to enjoy the product and made its use easier and more accessible.
• Google search
• Moma (internal google search)
• Interview with googles
• Collaborate with different google teams
• Provide ideas for the whole team (PRD)
There were two general user personas for this product
- Regular employee
- An employee with special needs
2. Build a component
The next step after all research was to build a design kit. This kit is getting approved by the key stakeholders such as product manager, UX designers, and other involved teams.
The components were built from scratch and I provided multiple options for color, space, padding, length, and width.
3. Make it accessible
As a designer, my goal was to define how a user interacts with the product, including accessible technology.
Focusing on Accessibility provides improved user experience for everyone.
Concepts to keep in mind
The three categories below are not mutually exclusive and should be considered together:
Arrow and navigation
I defined the semantic structure and hierarchy for interaction: in what order a user interacts with content to complete a critical user journey.
Tab (The Green Line)
Jumps between interactive elements and groups, and is generally used for primary navigation
Arrow keys (The Red Line)
Used to navigate within and between components of the same type.
Together arrows navigate between single types of elements within a tab stop.
4. Creating the spec
Each component and pattern was measured by using Google production tools, Sketch plugin- Markup, or manually.
5. Design style guide
After components were created, made accessible, measurements were added, and approved by the Google Material team, UX team, product designers, and engineers the next step was to create a unified self-explanatory style guide.
Each component included the following sections:
• Card sorting
• Information Architecture
• Low fidelity Mockup
• Usability Testing
- Component description
- User interaction process
- Anatomy of component
- Component types and variations
- Best practices
- Configurable options
- Accessibility (keyboard interaction, verbalization)
6. Usability testing methods
- Lab Usability testing
- Online testing tools
7. Feedback & Revision
8. Challenge & Conclusion
Google is a large global company that strives to continuously improve internal tools. When employees are happy with work tools, they are motivated to create external products flawlessly.
The challenge was to adhere to the process. The design system team was recently formed and still was going through the norming process. This project op mech did not exist and the procedures were not mature enough. The team had to brainstorm and build the process from scratch.
Learnings and Results:
I contributed to all stages of the design process from initiation to implementation in production. I led the UX research part and collaborated with cross-functional teams. In many cases, I facilitated my teammates’ communication and brainstorming sessions. The project was a group effort for our family-like team and we treated it as our own child.
Every day more and more consumers use digital tools for everything.
It is very critical to ensure accessibility for everyone. Interaction with devices is similar to people’s relationships. Users want to feel good when communicating with tools. It is especially important for internal tools because we spend up to 70% of our time at work.
The project gave me the opportunity to study more deeply the best design systems currently in use, hone my design skills, and collaborate and learn from the top-notch development team.
The design system was released and it is being tracked with designers and engineers, and improving every day. We found out that people are engaging more often when a tool has accessibility features to compare to regular tools.