Skip to content
Snippets Groups Projects
Commit 4ee364bb authored by Andy Volpe's avatar Andy Volpe
Browse files

Merge branch 'update-design-principles' into 'main'

Draft: Update Design principles

See merge request !4301



Merged-by: default avatarAndy Volpe <avolpe@gitlab.com>
Co-authored-by: default avatarValerie Karnes <vkarnes@gitlab.com>
parents 0db26338 d80f03de
No related branches found
No related tags found
No related merge requests found
Pipeline #1686291580 passed
......@@ -9,56 +9,108 @@ There are two kinds of principles:
- The principles that guide the process, which are defined in the [handbook](https://about.gitlab.com/handbook/product/#product-principles).
- The principles that define the output, which are described on this page.
Though we take inspiration from other companies, our principles are defined by looking inward. This perspective ensures they are actionable and effective. Just like the rest of our work, we continually adjust our principles and always strive to make them better. Everyone is welcome to suggest improvements by opening an issue and creating a merge request in our [repository](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)!
## Design Principles
## Sophisticated simplicity
### Strive for Simplicity
GitLab is a product that supports people in their daily work. We respect the importance of their efforts and avoid unnecessary gimmicks. To that end, we work towards [sophisticated simplicity](https://handbook.gitlab.com/handbook/product/ux/product-designer/#aiming-towards-sophisticated-simplicity) in our product: we make thoughtful choices that streamline complex workflows and functionality. These choices help the user stay focused on what matters most.
**Simplify complexity without sacrificing functionality.** Focus on creating clear, intuitive solutions that empower users to achieve their goals effortlessly. Clarity ensures that users can focus on their work rather than deciphering complex workflows, allowing them to build and deliver software with confidence.
There are three principles that help support us in this work.
**How we achieve this**
### Prioritize the product
- **Deep Understanding of Complexity:** Recognize the underlying complexities of user workflows, technical constraints, and business needs. [We are not our only customer](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), reminding us that while we use GitLab internally, our broader user base has different challenges that require validation beyond our own experiences.
Though the product is made of many tools, everything should function seamlessly together. Design with this mindset to ensure that you are creating a more connected and coherent experience across the product.
- **Clarity and Focus:** A clear and intuitive experience minimizes cognitive load and allows users to focus on their work instead of figuring out the product. This reflects our commitment to [We are design-led](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring that users can focus on building software rather than deciphering complex workflows.
| Do | Don't |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Optimize connections between capabilities. | Optimize for an isolated use of tools. |
| Use patterns consistently across the product. | Use different patterns based on product area. |
| Optimize the broader user journey, even when it crosses product groups, or when you're focused on a particular step of that journey. | Optimize for individual interactions or features. |
- **Functionality Over Frills:** Simplify designs without compromising essential features or user goals. [Subtractive thinking](https://handbook.gitlab.com/handbook/product/product-principles/#subtractive-thinking), where we recognize that sometimes the best improvements come not from adding, but from removing complexity that burdens users.
<!--
1. **Bold sub principle(s) title** Explanation, plus optional reference
- Example(s), plus link towards a reference in real-life
-->
- **Seamless Integration:** Place capabilities where they are expected and needed rather than relying on visual indicators to compensate for a lack of intuitive design. Aligns with [Discoverability without being annoying](https://handbook.gitlab.com/handbook/product/product-principles/#discoverability-without-being-annoying), ensuring features are surfaced in ways that enhance the experience without causing frustration. We present new functionality in context, increasing the likelihood that users will engage with it naturally.
### Support learning
- **Iterative Refinement:** Continuously test and refine designs to ensure clarity is achieved without sacrificing functionality. This reflects our approach in [We fail fast and iterate with intention](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), where each iteration is an opportunity to improve usability.
Design to promote the user's learning and proficiency as they interact and explore. Seek to help them minimize mistakes.
- **Empowering Users:** Intuitive experiences should enable users to achieve their goals efficiently, aligning with our belief in [Product-led growth](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), where the product itself should guide users to discover value effortlessly.
| Do | Don't |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Clearly explain how recommendations are generated, especially with [AI features](/usability/ai-human-interaction#be-transparent). | Omit explanations for recommendations to simplify the experience. |
| Communicate the status of processes that happen in the background. | Only communicate about processes that happen in the foreground, as a direct result of the user's actions. |
| Ensure the user has all the information needed to proceed with confidence. | Delegate key information to the documentation to minimize the UI. |
**What it looks like in practice**
<!--
1. **Bold sub principle(s) title** Explanation, plus optional reference
- Example(s), plus link towards a reference in real-life
-->
- Creating concise interfaces that guide users effortlessly.
- Applying progressive disclosure to show the right amount of information at the right time.
- Using the Pajamas Design System to maintain consistency and clarity.
- Reducing the number of steps or interactions to only what is essential for completing the task.
- Ensuring that new features are usable by design, rather than relying on indicators to make them noticeable.
### Focus on outcomes
### Embrace Rigor in Design Methods
Empathy for the user starts with a deep understanding of their needs and goals. Design for the broader outcomes that the user seeks to achieve, instead of the isolated actions or discrete features used to complete specific tasks.
**Follow structured, repeatable processes to ensure consistency, quality, and informed decisions**. A disciplined approach to design fosters collaboration, maintains quality, and ensures decisions are rooted in evidence rather than intuition.
| Do | Don't |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Let the user's needs and intended outcomes drive the change. | Let the popularity or impressiveness of a feature or technology drive the change. |
| Prioritize user value. | Prioritize technical feasibility or development speed. |
| Design for current essential needs. | Design to accommodate future, potential needs. |
**How we achieve this**
## References
- **Consistency:** Following defined workflows, such as research, ideation, prototyping, testing, and iteration. Aligns with The [Minimal Viable Change (MVC)](https://handbook.gitlab.com/handbook/product/product-principles/#the-minimal-valuable-change-mvc), ensuring that each design decision contributes to a continuous and sustainable improvement cycle.
- **Framework-Driven Design:** Applying established methodologies such as, journey mapping, JTBD, and other conventional approaches to guide decision-making. Supports [We value data over intuition and anecdotes](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring that all design decisions are backed by research and evidence.
- **Data-Informed Decisions:** Incorporating insights from user research, analytics, and feedback to validate and refine designs. Reinforces [We value data over intuition and anecdotes](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), keeping the focus on real user impact rather than feature completion.
- **Documentation and Transparency:** Clearly documenting design decisions, assumptions, and processes to support collaboration and accountability. Reflects [We like to win…and we only win as a team](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring cross-functional alignment and shared understanding.
- **Continuous Improvement:** Regularly reviewing processes and outputs to identify areas for enhancement. Aligns with [Iteration speed and product excellence](https://handbook.gitlab.com/handbook/product/product-principles/#iteration-speed-and-product-excellence), ensuring that our design process evolves with changing user needs.
- [Design systems handbook - Design better](https://www.designbetter.co/design-systems-handbook/expanding-design-system)
- [From purpose to patterns - Alla Kholmatova](https://speakerdeck.com/craftui/from-purpose-to-patterns)
- [What are design principles - principles.design](https://principles.design/#what-are-design-principles)
**What it looks like in practice**
- Conducting structured user research before initiating design work.
- Defining experiment criteria, success, failure, duration, etc., prior to running experiments.
- Utilizing JTBD or journey mapping frameworks to map user needs and goals.
- Performing regular design critiques and MR reviews to uphold quality.
- Maintaining detailed documentation to ensure clarity and transparency.
### Lead with User Insights
**Put user needs at the center of every decision with continuous research and advocacy.** Great design starts with a deep understanding of users—their pain points, behaviors, and goals. Insights, not assumptions, should drive decisions.
**How we achieve this**
- **Continuous Research:** Invest time in user interviews, surveys, usability tests, and analytics to maintain an up-to-date understanding of user needs. Supports [We are not our only customer](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring a customer-first approach.
- **User Advocacy:** Act as a champion for users in meetings, reviews, and planning sessions, ensuring user needs and pain points are considered. Aligns with [We are design-led](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), placing UX at the forefront of decision-making.
- **Evidence-Based Decisions:** Ground design choices in real user data rather than assumptions or subjective opinions. Reinforces [We value data over intuition](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring every design decision is based on research-backed insights.
- **Empathy and Curiosity:** Foster a culture of empathy and curiosity to deeply understand users’ motivations, goals, and challenges. Aligns with [We fail fast and iterate with intention](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), encouraging an adaptive approach to problem-solving.
**Visibility of Insights:** Share research findings widely to ensure the entire team and stakeholders understand the users’ perspective. Supports [We value data over intuition and anecdotes](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles) by *measuring outcomes, not launches*, ensuring alignment between design efforts and business goals.
**What it looks like in practice**
- Starting every project with a clear understanding of user needs, documented in a structured statement.
- Regularly conducting usability tests and integrating findings into design iterations.
- Creating assets such as journey maps through research initiatives to keep the user top of mind.
### Design for Meaningful Impact
**Prioritize work that drives the most value for users and the business.** Focusing on high-impact work ensures that design efforts create real, measurable outcomes instead of surface-level improvements. This requires aligning efforts with clear goals, focusing on what delivers the most value, and measuring success through tangible results.
**How we achieve this**
- **Prioritization of Value**: Identify and focus on projects that will have the highest impact on user satisfaction, efficiency, and reliability. Aligns with [We value quality over velocity](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), ensuring well-considered, impactful design work.
- **Alignment with Goals**: Ensure design initiatives align with business goals and user needs. Reflects [We like to win… and we only win as a team](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), reinforcing cross-functional collaboration for impactful outcomes.
- **Outcome-Oriented Thinking**: Define what success looks like for each project and use metrics to measure progress and results. Supports [Iteration speed and product excellence](https://handbook.gitlab.com/handbook/product/product-principles/#iteration-speed-and-product-excellence) by defining expected impact, ensuring every iteration contributes to meaningful improvements.
- **Holistic Solutions**: Address root causes of user problems rather than just surface-level symptoms. Aligns with [Subtractive thinking](https://handbook.gitlab.com/handbook/product/product-principles/#subtractive-thinking), ensuring that design removes friction rather than adding unnecessary complexity.
- **Measurable Results**: Track the impact of design work through UX metrics like USAT scores, task completion rates, and usability scores. Aligns with [We measure outcomes, not launches](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), reinforcing the importance of usability-driven success.
**What it looks like in practice**
- Acknowledge that all work is necessary:
- **Low Impact:** Routine or minor tasks such as chores, non-urgent activities, and small requests. Minimize time spent on these by delegating when possible or politely declining to stay focused on higher priorities.
- **Supportive:** Essential but secondary tasks that enable progress, such as MR reviews, answering questions, and facilitating discussions. Streamline these activities and allocate time efficiently to maintain smooth workflows without detracting from high-impact work.
- **High Impact:** The primary focus of your time and energy. Prioritize work that directly contributes to the company roadmap, key metrics, and strategic goals, ensuring meaningful progress and impact.
- Defining success metrics at the start of each initiative.
- Prioritizing design work that addresses key user pain points identified in research.
- Regularly reviewing the impact of design changes and adjusting based on results.
### Balance Vision with Iteration
**Keep the long-term vision in mind while delivering value through iterative improvements.** Great design requires both a strategic vision and tactical execution. This means keeping the long-term product vision in mind while delivering value through incremental improvements. Each iteration should be a step toward a cohesive, inspiring end-state.
**How we achieve this**
- **Long-Term Vision**: Develop a clear, aspirational vision for the product experience and use it to guide design decisions. Reflects [Bringing ideas to reality](https://handbook.gitlab.com/handbook/product/product-principles/#bringing-ideas-to-reality), ensuring that design is rooted in a strategic and forward-thinking approach.
- **Incremental Steps**: Deliver improvements in manageable iterations, ensuring each step contributes to the larger vision. Supports [We fail fast and iterate with intention](https://handbook.gitlab.com/handbook/product/product-principles/#our-product-principles), reinforcing a balance between rapid delivery and strategic impact.
- **Continuous Feedback Loop**: Gather feedback from users and stakeholders to refine the vision and iterations over time. Aligns with [Feedback issues](https://handbook.gitlab.com/handbook/product/product-principles/#feedback-issues), ensuring that improvements are informed by real user input.
- **Intentional Iteration**: Avoid aimless or rushed iterations; each iteration should be purposeful and build toward the ultimate goal. Reflects [Flow One](https://handbook.gitlab.com/handbook/product/product-principles/#flow-one), ensuring a cohesive, well-structured design evolution.
- **Adaptability**: Be open to refining the vision as new insights and constraints emerge. Aligns with [Avoid “Not Invented Here” Syndrome](https://handbook.gitlab.com/handbook/product/product-principles/#avoid-not-invented-here-syndrome), promoting an open mindset to innovation and iteration.
**What it looks like in practice**
- Creating and referencing experience visions to guide iterative design work.
- Planning designs in phases, with each phase delivering user value and contributing to the broader vision.
- Reviewing progress regularly to ensure that iterations are moving the design in the right strategic direction.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment