Improve support for smaller viewports

[davicostalf]

High-level objective

Prepare all our current components and tokens to support mobile and tablet viewports. This envolves making sure that, despite the space constraint, hierarchy is still being accurately communicated and actions have comfortable touch targets. Designers and engineers must intuitively know how to convert a desktop layout into a mobile layout, and vice-versa.

Rationale for prioritization

Merchants gave feedback on legacy pages that were migrated to the new design system, including crucial flows such as Orders and Promotions, and it’s clear they expect pages to be at least usable in smaller viewports. To address these concerns, teams are to designing and implementing responsive patterns themselves, which leads to longer implementation times and inconsistencies.

Scope and timeline

Q1C1 - Design, Exploration: Most used components

Owner, Support: @davicostalf, @lucasaarcoverde

• Discuss with engineers the responsiveness of the most used components (admin shell, list template and form template) to collect ideas and concerns
• Benchmark how other admin-like web apps adapt to smaller viewports
• Design multiple mobile and tablet versions of the most used components considering ideas from internal and external examples
• List possible changes (grid, breakpoints, layout, content, tokens) and validate with other designers and core-team engineers

---

Q1C2 - Design, Specification: Most used components

Owner, Support: TBD

• Write and illustrate specifications for engineers to implement
• Build reusable resources in Figma for other designers to use
• Write documentation for other designers on how to adapt layouts
• Validate specs and docs with other designers and core-team engineers
• Communicate the release to designers

---

Q2C1 - Engineering, Refinement: Most used components

Owner, Support: TBD

• Benchmark how other design systems implement responsive layouts
• Write RFC for architectural changes needed to implement the responsiveness of the most used components
• Break down changes into a timeline with one-cycle deliveries
• Validate RFC and timeline with other engineers and core-team designers

---

Q2C1 - Design, Exploration: Remaining components

Owner, Support: TBD

• Discuss with engineers the responsiveness of the remaining components to collect ideas and concerns
• Benchmark how other admin-like web apps adapt to smaller viewports
• Design multiple mobile and tablet versions of the remaining components considering ideas from internal and external examples
• List possible changes (layout, content) and validate with other designers and core-team engineers

---

Q2C2 - Engineering, Implementation: Part 1

Owner, Support: TBD

• Implement the first part of the proposed timeline according to design specifications
• Document code with references and examples
• Validate implementation with core-team engineers and designers
• Communicate the release to engineers

---

Q2C2 - Design, Specification: Remaining components

Owner, Support: TBD

• Write and illustrate specifications for engineers to implement the responsiveness of the remaining components
• Build reusable resources in Figma for other designers to use
• Complement documentation for other designers on how to adapt layouts
• Validate specs and docs with other designers and core-team engineers
• Communicate the release to designers

---

Q3C1 - Engineering, Implementation: Part 2

Q3C2 - Engineering, Implementation: Part 3