Trang's website

Collaborative design principles at Groupon

At Groupon, this is our designer community set of principles. I’ve put together these guidelines as a shared framework to ensure great collaboration with our stakeholders and smooth hand-offs to our development team. Think of them as our collective best practices to keep our work clear, structured, and accessible to everyone.

Clean design output #

Organized files #

Always keep your shared Figma files tidy and well-organized. While it’s okay to experiment in your personal archives, the versions you share with developers and stakeholders should be clean and structured.

Structure and Clarity #

Use auto-layouts and sections to build a clear hierarchy in your designs. Keep your utility components (like patterns and content elements) separate from your actual design work.

Clear naming and resources #

Give your designs a concise, intuitive title and include links to relevant resources such as Asana, Jira, diagrams, or user testing sessions. This makes it easy for everyone to find context and additional details.

Context through video #

When your designs are nearly ready, consider recording a short Loom or video to walk through the context and your solution. Link this video directly to your Figma file for easy reference.

Thumbnail #

Ensure that each Figma file includes a thumbnail cover. A well-crafted thumbnail not only adds a professional touch but also makes it easier for team members to quickly identify and reference your work.

Ensuring the right access #

Please ensure your Figma file is accessible to all relevant team members (ideally everyone at Groupon). Avoid keeping shared files in your Drafts. If an assigned developer doesn’t have a Dev seat or a PM lacks view rights, please make sure they get the necessary access. For access-related issues, you can use our dedicated Google Chat space called Figma Access.

All necessary resolutions #

Unless you've agreed otherwise with your product manager, please prepare screens for:

  1. Mobile (Touch)

  2. Desktop

  3. App (Light)

  4. App (Dark)

Consider special cases #

Loading states #

Error states #

Missing data or images #

Text overflow #

Dark mode #

Data-informed decisions #

Make design decisions grounded in data and aligned with our business objectives. For example, a new feature might potentially boost conversion rates by a certain percentage or streamline processes for agents, resulting in significant revenue savings. Use relevant data sources to guide your design choices, such as:

Product marketing #

Consider how the new feature will be communicated to our end users. Think about the various channels that might be used—whether it's through emails, push notifications, landing pages, modals, or in-app tours with cues. Additionally, prepare visuals that the content team can integrate into their communication strategy. This collaborative approach ensures that the feature is not only well-designed but also effectively marketed.

Implementation #

Where applicable, prepare accompanying HTML and CSS examples in CodePen to showcase animations or interactive elements. This helps developers better understand the intended behavior and enriches the overall design narrative.

Summary #

By adhering to these guidelines, we maintain a high standard of clarity and efficiency in our design process at Groupon. This collaborative approach not only streamlines our workflow but also reinforces our commitment to quality and transparency. I’m excited to share this glimpse into our processes and hope it inspires others to adopt similar practices.