🔍 Articles in This Section

Please use the following list to see additional internal articles regarding Gem Extension:

• (Internal) Design at Gem
• (Internal) Gem Design Principles (📍you are here)
• (Internal) Gem Brand Guide and Resources
• (Internal) Gem Product Personas
• (Internal) Color

"Design principles act as a reusable standard for [the team] to measure their work.

They replace subjective ideals with a shared understanding of what design must do."

— Design Systems Handbook

These principles help the design team create usability heuristics, which we use as a quality bar “checklist” of sorts for anything the product team launches.

The way we’ll know if our principles are working is that we’ll be able to reference them any time we face a difficult decision.

1. Bite-sized and digestible

Do a lot with a little. Keep workflows focused and as concise as possible. Build with modularity in-mind.

Recruiting workflows can often be daunting or monotonous. We design aiming to enable users to do a lot with a little, without feeling overwhelmed, while helping Gem move with velocity. Every large user workflow is broken into many smaller efforts to help our team and customers stay focused.

Prompts to ask

• Does the design enable tasks to be chained easily?
• Is a similar or identical workflow used elsewhere in the product, can parts of it be leveraged here?
• Could a user realistically complete their task in less than 1 minute?
• Is a user able to complete recurring tasks without needing to navigate between areas of the product
• Is the design clutter-free and does it enable helping users focus on the task-at-hand?
• Are we trying to design more than a user will be able to bite-off in any given moment?

Trade-offs

• Full, end-to-end workflows may require more action from the user to engage.
• Designs will be created with an emphasize on shipping velocity and therefore sacrifice some level of “perfection.”

2. Built for flexibility

Ensure what’s being designed can flex for more or less information or usage. Always design at the extremes of absolute minimal usage of a feature and an impossible amount.

As Gem grows we need to ensure what we build is flexible enough to meet the diverse needs of our customers. We design for the most basic use cases as well as the most complex ones, always working at the edges of both extremes, to ensure what we build can accommodate everything between.

Prompts to ask

• Does the design accommodate simple use-cases as well as complex ones? Does it support data of quantity one and quantity 100?
• Will the design work for one person and for a larger, collaborative team?
• Is this being designed around known workflows for our customers, or hypothetical ones?

Trade-offs

• Usability suffers somewhat as we optimize for flexibility in the product, creating more possible paths for a workflow than if we were designing with rigidity in-mind.
• Speed of designing is slowed as the designer is responsible for exploring extremes for a feature.

3. Clear and conventional

Follow modern, conventional patterns of design. Seek to be clear with language and patterns rather than overly clever or creative. Clean design is good design. When in doubt: use a pattern that users are likely already familiar with.

We can move faster as a team and create experiences that are easy to pick-up and use by relying on clear and conventional patterns. Rather than seeking to repeatedly re-invent the wheel, do we use clear, conventional patterns for our work? We should always seek to be clear, not overly clever, because it will help our users do their job efficiently.

Prompts to ask

• Is the language used clear and familiar?
• Are we designing with modern, tested patterns?
• If someone were to view this design without any context, could they immediately figure out what it’s for and how it might work?

Trade-offs

• Minimalism, innovation, and overly creative solutions are greatly limited as we focus on simple, conventional, and clear designs.

4. Opinionated

Use the data we have internally to help users make decisions and navigate the product. Remember that trying to make everyone happy will make nobody happy. Be opinionated, seek to optimize an experience for a select few without sacrificing fundamentals for everyone else.

Our product in-particular can be overwhelming for users. We want to help guide and direct users to the most impactful workflows without extensive configuration, even if it means the product doesn’t readily appear very comprehensive.

Prompts to ask

• Is it immediately clear which type of user matters “most” for the experience?
• Is it immediately obvious what any screen wants me to do vs. what I am enabled to do?
• Does the design offer a clear path forward and an escape hatch if I get lost or confused?
• Is the design optimized for a specific user or workflow without cannibalizing the workflows of other user types?

Trade-offs

• Feature parity with competitors or similar products is not a focus, but rather internal opinions built from direct customer feedback are.
• There may be less room for customers to use the product in creative ways, beyond the use-cases it was designed for.

5.Transparent

Be transparent with the design through honest language, imagery, and options. Use straight-forward language and expose states that are authentic, not misleading or purposefully designed to elicit a specific response (positive, negative, or otherwise).

To ensure trust with our customers, we should always be honest with them about what’s going on in the product. Never trying to hide an issue or cover up an error or less-than-ideal path to success for users. Make it clear when there are multiple paths forward but which one is “optimal.”

Prompts to ask

• Are we using clear and precise language?
• Does the design attempt to hide any part of the process/flow, or is it honest?
• Is anything hidden that will impact the user’s understanding of status?
• If something goes wrong or takes a long time, are we clear about it in the product?

Trade-offs

• Transparent design can sometimes mean a more complex design, as more information is available to users.

Examples

Opinionated

We use the NUX experience to help guide users to best practices and ways of operating within Gem. Bite-sized, the NUX experience is built to encourage small, one-off tasks through creating projects and navigating product walkthroughs.

Transparent + opinionated

Our DEI breakdown in Pipeline Analytics is transparent and opinionated; when filtering by DEI information in Pipeline Analytics we display a prominent banner in the table to inform users as to how the information is generated and what they can/should do with it.

Bite-sized

• 1. Bite-sized and digestible
• Prompts to ask
• Trade-offs
• 2. Built for flexibility
• Prompts to ask
• Trade-offs
• 3. Clear and conventional
• Prompts to ask
• Trade-offs
• 4. Opinionated
• Prompts to ask
• Trade-offs
• 5.Transparent
• Prompts to ask
• Trade-offs
• Examples
• Opinionated
• Transparent + opinionated
• Bite-sized