FY23 Q3 Foundations KR1: Updated Pajamas IA that takes into account new and updated definitions and organization
Purpose
See epic description.
Steps
-
Evaluate existing IA to determine opportunities for improvement. -
Evaluate existing definitions found at https://design.gitlab.com/get-started/structure with a primary focus on: Foundations, Components, Regions, and Objects. -
Propose definition updates and work through internal discussion. -
Test updated definitions internally to make sure categories and meaning are clear. -
Update IA and structure by incorporating definitions and other content organization changes.
Before / after
Definitions
Definitions
Before | After | |
---|---|---|
Foundations | Foundations represent perceptual patterns. These are less tangible aspects of the design system. Together they create a certain aesthetic for the product. For example, colors, typography, and icons. | Foundational items communicate the opinionated way in which basic visual design attributes, elements, and concepts come together to create a distinct GitLab personality that’s expressed in the UI. For example, color, typography, and iconography. |
Components | A small design primitive. Components build upon the design foundations (typography, spacing, motion, colors, iconography, etc.) and are the reusable building blocks of the interface. For example, buttons, tabs, and input fields. | A component is a UI element that serves a singular purpose or function. Two or more simple components can combine to form a composite component that still has a single function. For example, an avatar, button, or combobox. |
Regions | Regions are areas formed by combining multiple components, creating a layout section that can be reused across various pages. For example, the comments and activity feed in issues or merge requests. | Deprecated |
Patterns | N/A | A pattern combines components and/or content elements into a repeatable, consistent group that has a shared purpose, content association, or both. For example, filtering, forms, or navigation. |
Page templates | N/A | A template prescribes layout and behavior for a page or common content layout. For example, an issuable, settings, or search results. |
Objects | Objects capture and organize data as a single source of truth around specific tasks and user interactions. Objects are described in terms of attributes (what they contain), functions (what they do), and relationships (what they interact with). When documented as a conceptual model, objects help understand how the product works and fits together on a system level, detached from the constraints of the user interface. An effective object model tightly aligns our user's mental model with the product's data model. For example, issue, group, and merge request. | An object is a conceptual building block or concept that defines how we think about something independent of its visual representation or interaction model. For example, a job, merge request, or repository. |
Retrospection
Good
- The IA and navigation are being updated and there were some good insights learned.
Bad
- This effort took so long that the other KRs didn't get worked on.
Try
- Breaking down even smaller.
Edited by Jeremy Elder