Designing a Single-Click App’s UI
Designing a Single-Click App’s UI
Designing a Single-Click App’s UI
Your app’s user interface is loaded inside an iFrame in a store’s control panel after a user clicks the app’s icon in the left nav and triggers the load callback. To ensure a seamless user experience, you should design your app’s UI to match the design of BigCommerce’s control panel. We’ve built a collection of reusable React components, design guidelines, and UI patterns (known collectively as BigDesign) that you can use to rapidly develop an app front-end that’s consistent with BigCommerce’s UI.
Add BigDesign and styled-components to your project using npm:
or with yarn:
Import the GlobalStyles component and use it once in your app. This will set a few styles globally, including a base font family, Source Sans Pro and normalize.css. We recommend placing it close to your root component. Then import any component, such as Button, to use it anywhere in your app.
For additional installation and usage instructions, see the bigcommerce/big-design repo on GitHub.
The BigCommerce team has created BigDesign, a complete and thorough design system that covers design, development and UX writing tools to speed up and enhance the design of your app’s UI.
BigDesign also provides Figma assets to help you design your app’s UI. The Figma libraries include components, icons, and design tokens that match the BigDesign React components. You can use these assets to create mockups and prototypes that align with BigCommerce’s design language.
The BigDesign Playground showcases the visual style and behavior of each component, along with complete API documentation. You can customize each component using configurable props.
Go to the BigDesign Developer Playground.
The BigDesign Patterns Sandbox is a collection of common UI patterns that you can use in your app. It includes examples of how to use BigDesign components to create common layouts and interactions, such as forms, tables, and modals. You can use these patterns as a starting point for your app’s UI design.
BigDesign also provides a set of UX writing guidelines to help you create clear and consistent copy for your app’s UI. These guidelines cover topics such as tone, voice, and terminology, and provide examples of how to write effective UI copy. You can use these guidelines to ensure that your app’s UI copy aligns with BigCommerce’s design language and provides a consistent user experience.
BigDesign UX writing guidelines.
In order to facilitate your app’s UX writing, we have also developed a ChatGPT UX writing assistant that can help you generate copy that adheres to BigDesign’s guidelines. You can use this tool to quickly create UI copy that is clear, concise, and consistent with BigCommerce’s design language.
Single-click apps benefit from a high level of integration with the BigCommerce control panel. BigCommerce achieves this by rendering your app’s UI in an iFrame. To meet App Marketplace requirements, your app should perform all functions inside the iFrame. The iFrame approach requires special attention from app developers.
To load inside the control panel iFrame, your app must do the following:
Apps that operate in the iFrame get strong preference during App Marketplace consideration; however, we sometimes make exceptions for apps that need to interact with other services.