Design

Minis should be designed and built with the following guiding principles in mind.

Anchor to UX PrinciplesUX Principles

Anchor to Unambiguous purposeUnambiguous purpose

Each Mini should possess a singular, well-defined objective. The user interface should reinforce this purpose with a single primary action per screen.

Anchor to Rapid initialization and clear progress indicationRapid initialization and clear progress indication

Minis should offer quick initialization paths (e.g. pre-filled content from collections). Progress indicators should be implemented for multi-step processes (e.g. avatar creation flows).

Anchor to Engaging functionalityEngaging functionality

Minis should be both utilitarian and engaging, encouraging user interaction through delightful design elements rather than solely focusing on basic functionality. Gamification techniques, social engagement loops, and visual feedback should be intuitive and non-intrusive.

Anchor to Personalization and shareabilityPersonalization and shareability

User engagement should be fostered through personalization features, such as avatars, saved looks, and personalized analysis. Clear sharing functionalities should be provided to generate user-generated content (UGC) and links back to the Mini or Shop.

Anchor to Efficient completion and habit formationEfficient completion and habit formation

Each Mini should be designed to encourage repeat usage through clear options for saving, revisiting, or continuing progress.

Anchor to Accessibility by designAccessibility by design

Adherence to established mobile app design guidelines and accessibility best practices is essential, including the implementation of large tap targets, appropriate contrast ratios, and alt text for images. Keyboard navigation and screen reader support should be ensured where applicable.

Anchor to Standardized interaction patternsStandardized interaction patterns

Existing Shop Minis SDK components and common interaction patterns should be utilized whenever feasible. Established navigation conventions, including modals, bottom sheets, and swipe gestures, should be adhered to in order to minimize user friction.

Anchor to Preserve integrityPreserve integrity

The established character and flow of the user experience, once recognized through approval, should be maintained. Any dynamic modifications post-approval that could notably redefine the user's learned interactions or the Mini's core behavior should be approached with careful consideration for user continuity and confidence.

Anchor to Design specificationsDesign specifications

Anchor to Safe areaSafe area

Minis should observe the designated safe areas and avoid placing internal navigation buttons or any other pertinent information that is vital to the Mini's necessary function, outside the safe area bounds.