Overview of design features

Overview of design features

Step into the realm of app design and let your creativity take flight! Alphonso empowers you to craft visually appealing apps without the need for coding knowledge. In this guide, we will provide a design overview of Alphonso, presenting steps for app design and highlighting Alphonso’s design modules.

Note: This user guide is applicable to BigCommerce.

1. How to design your app?

Alphonso’s design module offers you several components and features that empower you to craft your own distinct app. We will unravel the basic steps of designing with Alphonso, including designing main components, saving, and previewing. 

1.1 Add and manage blocks

  1. The drag-and-drop functionality allows you to add blocks from the block pane to the layout preview.
  2. To reorder the blocks, drag and drop blocks in the layout preview.
  3. To design a block, hover over it and click Design. Please note that the design settings vary depending on each component.

1.2 Save your drafts and publish to mobile app

  1. After designing elements within a component, click Save in the design setting screen before moving to the next one. 
  2. When the app design process is complete, remember to execute one final Save draft action.
  3. Saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile.

1.3 Preview your app

Previewing is an essential step during the design process. The preview button in the top right corner grants you the power to step into the user's shoes, seeing firsthand how every design element aligns with functionality and user behavior. For details about previewing your app, please see Preview the app.

2. What design modules does Alphonso offer? 

This part aims to provide a broad overview of Alphonso's design modules. The accompanying articles for each module are also attached to grant you access to a more comprehensive guide detailing the information on the components and instructions on their design.

2.1 Home 

Home is the foundation of your app's home screen, which is the first destination your app users are taken to by default when they open the app. With drag-and-drop functionality, you can easily design various blocks to suit your brand's aesthetic. For a guide on how to design home blocks, please take a look at Design the home screen. What’s more, we are thrilled to introduce two new features to Alphonso, multi-home and scrolling mode for each home. These innovative additions are expected to provide unparalleled flexibility and customization to your app.

2.2 Bottom Tab

Bottom Tab is where you can configure the bottom tab to display up to five destinations at the bottom of a screen. A well-designed bottom tab ensures seamless and intuitive navigation, allowing users to access critical app functionalities effortlessly. For further information and instructions about how to design the bottom tab, see Optimize app navigation with the bottom tab.

2.3 Categories

Categories is where you can organize products into main categories and subcategories. All categories in your web store are synchronized with Alphonso, so you can leverage them to design a two-level category structure. Enhance your understanding of the module and design possibilities by reading Build the categories page.

2.4 Brands

The Brands page allows you to showcase brands within your mobile app, making it easy for users to explore and purchase products based on specific brands. All brands are synchronized directly from the e-commerce backend, ensuring a fast page setup. We also provide various design elements to enhance the page's impact. For more details, please read Build the brands page

2.5 Product Detail

Product Detail is the module in which you can configure and design blocks to create a page presenting information about a specific product. With the provided blocks, you have various options to show the essential details of a product and configure the page according to your preferences. To explore the functionality of the product detail page and design steps, please take a look at Configure the product detail page.

2.6 My Account and Custom Pages 

My Account serves as a user-centric hub that allows customers to create and manage their profiles. Besides the built-in buttons such as Profile, Address book, and Order history, you can add other buttons to provide necessary information to your app users. For example, an FAQ page, a Contact Us form, or a returns form. You can create these pages via Custom Pages (see below). For further information on these two components, please visit Configure the My Account page.

In Custom Pages, you have the flexibility to create new pages by adding images, videos, and text. Use custom pages to showcase your brand story, share store information, or create landing pages for specific campaigns. The versatility of custom pages enhances your app's ability to engage users and promote your brand. For details on this component and how to design it, check out Build custom pages.

2.7 Theme

Theme is the module that allows you to customize the app's color scheme and overall visual style to align with your brand identity. A great mobile app theme can give users a sense of familiarity and keep them aesthetically engaged. You can gain insights into the app theme with our complete guide to Set the app theme.

Alphonso's design overview reveals a powerful platform that puts creative control in your hands, allowing you to design and build customized, high-quality apps that align perfectly with your business needs. Embrace the opportunity to create engaging and user-friendly apps that will undoubtedly have a significant impact on your business.

If you have any further questions about using my account, we’re happy to help! Please reach out to us at customer.success@jmango360.com!

    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...
    • Push notifications in Alphonso

      Push notifications have been proven to be a direct and cost-efficient communication channel, fostering user engagement and retention. In this guide, we’ll explore the scope of push notifications in Alphonso and how to send push notifications. 1. ...
    • Design the home screen

      In this guide, we'll explore the power of various blocks that allow you to customize and enhance the visual appeal of your app's home screens. From showcasing product collections to adding interactive elements, these blocks offer endless ...
    • Build the brands page

      In this article, we'll provide you with an overview of the Alphonso brands page, step-by-step instructions, and best practices for building the page. Note: This user guide is applicable to BigCommerce. 1. About the brands page The Brands page in a ...
    • Optimize app navigation with bottom tab

      Enhance user experience and streamline navigation in your app with the convenient bottom bar feature. This article shows you how to design and customize the bottom bar to suit your needs. From choosing icons to adding custom buttons, we've got you ...