DESIGN SYSTEMS | FIGMA ORGANIZATION
Developing a design system library and Figma project template for the Geo Driving design team
Product, visual, and system design work samples from my time on the Google Maps Driving + Auto teams.
Product, visual, and system design work samples from my time on the Google Maps Driving + Auto teams.
Product, visual, and system design work samples from my time on the Google Maps Driving + Auto teams.
Product, visual, and system design work samples from my time on the Google Maps Driving + Auto teams.
PROJECT STATEMENT
When the Geo Driving team was spun off during a reorg, it revealed significant workflow and organizational inefficiencies. I was new and discovered teammates were working in isolation and spending considerable time requesting files and recreating components.
Recognizing a critical opportunity, I proposed a project to establish centralized resources. This included creating a design library, specifically tailored to unique driving components, and implementing a file template that would enhance project visibility and organization.
I worked closely with the team to identify pain points and set goals, ensuring alignment, enhanced usability and long-term value.
When the Geo Driving team was spun off during a reorg, it revealed significant workflow and organizational inefficiencies. I was new and discovered teammates were working in isolation and spending considerable time requesting files and recreating components.
Recognizing a critical opportunity, I proposed a project to establish centralized resources. This included creating a design library, specifically tailored to unique driving components, and implementing a file template that would enhance project visibility and organization.
I worked closely with the team to identify pain points and set goals, ensuring alignment, enhanced usability and long-term value.
When the Geo Driving team was spun off during a reorg, it revealed significant workflow and organizational inefficiencies. I was new and discovered teammates were working in isolation and spending considerable time requesting files and recreating components.
Recognizing a critical opportunity, I proposed a project to establish centralized resources. This included creating a design library, specifically tailored to unique driving components, and implementing a file template that would enhance project visibility and organization.
I worked closely with the team to identify pain points and set goals, ensuring alignment, enhanced usability and long-term value.
When the Geo Driving team was spun off during a reorg, it revealed significant workflow and organizational inefficiencies. I was new and discovered teammates were working in isolation and spending considerable time requesting files and recreating components.
Recognizing a critical opportunity, I proposed a project to establish centralized resources. This included creating a design library, specifically tailored to unique driving components, and implementing a file template that would enhance project visibility and organization.
I worked closely with the team to identify pain points and set goals, ensuring alignment, enhanced usability and long-term value.
When the Geo Driving team was spun off during a reorg, it revealed significant workflow and organizational inefficiencies. I was new and discovered teammates were working in isolation and spending considerable time requesting files and recreating components.
Recognizing a critical opportunity, I proposed a project to establish centralized resources. This included creating a design library, specifically tailored to unique driving components, and implementing a file template that would enhance project visibility and organization.
I worked closely with the team to identify pain points and set goals, ensuring alignment, enhanced usability and long-term value.
ROLE
Lead Interactive and Visaul Designer
CLIENT
Google Maps Driving
MY CONTRIBUTION
MY CONTRIBUTION
As the sole designer on the project I:
- Developed an easy-to-understand and use file and libraray structure.
- Led and organized feedback meetings to ensure adoption and longevity.
- Designed project covers with variant components, instructional materials.
- Audited and presented app flows for both Android and iOS, highlighting differences and unknown variants.
- Designed a cohesive library style within Figma.
- Compiled existing components and created new ones from scratch.
- Created variants and theme components, linking to the Terra Design System where possible.
- Collaborated with team members to identify pain points and north star requests.
- Identified previously overlooked pain points and presented solutions.
As the sole designer on the project I:
- Developed an easy-to-understand and use file and libraray structure.
- Led and organized feedback meetings to ensure adoption and longevity.
- Designed project covers with variant components, instructional materials.
- Audited and presented app flows for both Android and iOS, highlighting differences and unknown variants.
- Designed a cohesive library style within Figma.
- Compiled existing components and created new ones from scratch.
- Created variants and theme components, linking to the Terra Design System where possible.
- Collaborated with team members to identify pain points and north star requests.
- Identified previously overlooked pain points and presented solutions.
Driving Design Library
LIBRARY BACKGROUND + SET UP
The Driving team had components unique to the navigation experience that weren’t part of the overarching Geo Terra Design System. Because of this, team members used different ways to store these components, which made it time-consuming to find or recreate them. This often led to inconsistencies, inaccuracies, and outdated versions. Creating a centralized design library aimed to address these issues.
To align with the Terra Design System, I kept the same atomic structure and linked to it whenever possible.
ICONOGRAPHY
Iconography was the only foundational element needed as colors and type ramps were pulled from the Terra Design System. Icons unique to driving were used in turn cards, alerts, and navigation settings as well as the driving base map.
COMPONENTS
I defined components as self-contained groups of foundational elements that werer reusable and could complete a single task. For the Driving team, these included alerts, info tags, floating action buttons, tool tips and navigational elements.
MODULES
Modules were defined as complex groups of styles and components built together to complete multiple tasks. For Driving navigation, these included directions lists, turn cards, and bottom sheets that were sometimes consistent or used as a momentary overlay from a users' action.
PAGES
I included full pages that represented complete layouts built from combinations of modules and components. Included were all of the base screens in the driving experience where actions could be taken to complete other tasks. This became a crucial section of the library for our engineering and feature teams, and enabled our team to save time on exploring and testing new components. W
FLOWS
I also included flows and prototypes of flows to show how the sequences of actions that are taken from a page.
SYSTEM MAP
This system map I created illustrates the interconnected interactions within the driving navigation experience. This provided a quick way for anyone to view all the screens supported by the driving team.
Figma File Template
FILE TEMPLATE BACKGROUND
The new Driving team, still adapting to Figma, did not have a team folder, leading many people to work out of their private draft files. This caused siloed work and extra time spent searching for project folders, requesting files, and responding to external teams’ requests. To resolve this, I proposed and designed a color-coded cover system and file template for the team.
COVER CARD BASE COMPONENTS
I started with base componets included color codes for project types, status chips and headers to enhance the glancability of the most important project information. Utilizing variants simplified the structure and made the process easier to adopt and continue to use.
COVER CARD VARIANTS
Base components combined to create cover card variants that were color coded for each project type. This made it easy to update projects as they grew changed or were depricated.
Base components combined to create cover card variants that were color coded for each project type. This made it easy to update projects as they grew changed or were depricated.
HOW TO - INSTRUCTIONS
Along with the template cover cards, I included visual step-by-step instructions to demonstrate best practices. This reference page helped reduce onboarding time for new team members and included aspects that were unique to these cards. The instructions also included tips, indicating which parts of the card should be edited and which were optional to turn off if unnecessary without breaking the component.
FEEDBACK AND STATUS CHIPS
Through feedback sessions, the team identified a goal to easily tracking project statuses. To address this, I created a status chip with key variants and placed it prominently for easy visibility while scrolling the team group page. Additionally, the "feedback wanted" chip was added to encourage collaboration in a remote work environment.
FILE TEMPLATE OUTLINE
The file template featured a flexible structure that accommodated personal preferences for page organization.
A key addition was a section on the title page for supplementary information, enabling inclusion of team member details, contact information, and links to related documents, slides, and Figma files. This enhancement not only improved accessibility and usability but also streamlined collaboration and information sharing across the team.
IMPACT
Creating this design library significantly boosted team morale and purpose. Positive feedback underscored the critical need for a centralized asset location, which not only saved considerable time on requests but also measurably enhanced overall productivity. New members praised the ease of onboarding, quickly accessing our team's owned screens. An unexpected benefit was the clear identification of platform inconsistencies, which became evident by centralized organization.
Establishing a structured Figma folder and file system notably improved project visibility and productivity by streamlining searches. This setup ensured team-wide clarity and sustainable usability. Team members efficiently directed engineering and cross-team partners to our organized folder without extensive guidance. Our engineering partners benefited from gaining independent access to files, significantly reducing response times.
TEAM
Google Maps Driving Team
Matt Hunter UX Program Manager
Joe Chehock UX Design Project Manager
April DiMartile Lead Interactive and Visual Design
More work
Based in Seattle, WA exploring the endless rows of trees.
Ready for a new design challenge - Let's connect!
© APRIL DIMARTILE 2024