This case study outlines the design process for creating UI components for UX Designers and Software Engineers in the Ad Department at Google. It will provide insights into my design process, the tools used to create and implement the system, and how I documented and shared the system details with the team. The focus of this case study is on product design and the steps taken to create and implement the system.
The Goal
To create, approve, and publish the Google Material enterprise design specs for use by all Reach UX Designers and AD Engineers.
The Process
- Audit, Research
- Build component
- A11y (accessibility)
- Specs/Measurements
- Styleguide
- Usability testing
- Revision
- Conclusion
1. Research
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)
User Persona
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 the research was to build a design kit. This kit is getting approved by key stakeholders such as the 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 an 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 specs
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:
Content elements:
- Component description/Intro
- Do/Don’t best practices
- Anatomy of component
- Specs/Measurements
- Accessibility (keyboard interaction, verbalization)
6. Usability testing methods
- Lab Usability testing
- Observation
- Online testing tools
- Surveys
7. Feedback & Revision
8. Challenge & Conclusion
Challenges:
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.
Conclusion:
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.
