Ways of Working Guide

The Ways of Working Guide, a cornerstone of our Figma integration, streamlined and standardized the creative process. Built directly in Figma, it provided easy access to essential resources, covering Figma basics, file naming conventions, and detailed breakdowns of our web and email templates. The guide helped teams quickly learn and apply Figma tools, fostering collaboration across departments.

Web Design Template

The Web Design Template was a structured framework that guided the web team through the design and development process, supporting designers, digital producers, and developers.

Below is a breakdown of the pages included:

1. Start Here – The launchpad for designers and digital producers, containing a title card and key project information to ensure alignment from the beginning—the central point of reference for the entire team.
2. Style Guide – A blank style guide that creatives could fill in as the design evolved. Once completed, the guide would be transferred to the Ready for Development page to ensure developers had the latest design specifications and guidelines.
3. Sitemap – A resource featuring various prebuilt blocks that enabled the team to assemble the site's sitemap quickly.
4. In Design – The core workspace for creatives featured title cards to help producers and designers quickly locate assets, along with a starting Desktop & Mobile frame that could be easily duplicated. Streamlined to display only current designs, minimizing clutter and maintaining focus on the active project.
5. Wireframes – A repository for wireframes, making them easily accessible to the team to reference or use as a project evolved.
6. Archive – A dedicated space for storing old or unused design iterations for later reference or reuse.
7. Junk Drawer – A space for experimentation that allowed creatives to test ideas and approaches without cluttering the main space.
8. Ready for Development – The final step before handoff, this page contained a detailed development checklist for designers to ensure all elements from the In Design page were prepared for handoff to developers.

By organizing the web design process into clear, actionable steps, the Web Design Template facilitated an efficient workflow that kept the team aligned and focused, supporting the transition from design to development.

Email Template

The Email Template for Figma was a streamlined 5-page system that optimized workflow and enhanced collaboration for email projects, providing an organized and accessible design process for all team members.

Below is a breakdown of the pages included:

1. Start Here – The first stop for any project. A standardized cover image template that made locating and identifying projects in Figma easier, providing a consistent visual starting point for quick recognition.
2. In Design – The heart of the design process, this page included a duplicatable email frame template and title cards for quick status updates on frames and components. The title cards helped the team stay organized, track progress at a glance, and keep designs on schedule.
3. Components – A library of prebuilt design components for creatives to easily copy and paste, streamlining the design process, reducing repetitive work, and ensuring project consistency.
4. Archive – The Archive page stored old designs and assets for future reference, allowing the team to access and repurpose past work instead of deleting outdated content.
5. Junk Drawer – The Junk Drawer gave designers a space to experiment, test concepts, and make quick revisions without cluttering the active design process, keeping the In Design page focused and organized.

The Email Template in Figma streamlined the workflow with a clear structure and flexible spaces for experimentation, reusable components, and project tracking, enabling the design team to collaborate efficiently and stay aligned throughout the project.