Design Studio

Design Studio is where the selection of SOLUTION with pre-defined modules in creating a project. The selected modules can be customized, and the pages can be personalized. The estimated costs are computed and can be viewed by the user.

Solution List

The first step in creating a project.

The solutions list is composed of pre-defined solutions with modules that can be build. The list also includes the DESCRIPTION for each solution and the ESTIMATED PRICE PER SOLUTION.

Feature	Description
View Details	• If VIEW DETAILS is clicked, redirect to the SOLUTION DESIGN PREVIEW page

Solution Design Preview

This page contains more specific information that will help you build your application. It has the Page Preview, Estimated Price per Solution, Choose Platforms for the solution and Descriptions.

Feature	Description
Module Name (Dropdown)	• Selection/List of Pre-Defined/Build Modules • If clicked will list down the different modules included in the application based on the selected Solution • User has the option to select the preferred module and display its information
Arrow navigator (left and right)	• It will be shown if the selected module has multiple pages • If left arrow is clicked will navigate to the next page • If right arrow is clicked will navigate to the previous page
Choose Platforms	• User has the option to select the preferred platform. • Multiple platforms can be selected. • List of modules dropdown value will depend on the platform chosen
Build Application	• If clicked and validations are met, will proceed to the LOGIN IN page if the user is not yet logged in. • If clicked and validations are met, will proceed to CUSTOMIZE MODULE step page if the user is already logged in. • If clicked and validations failed, error message must be shown
Web/Mobile Toggle	• If web toggle is shown, will show the web view . • If mobile toggle is shown, will show the mobile view

Customize Module

This is the second step in creating a project. It contains the List of Modules, Page Preview, Amount, Module Description and Solution Information.

In this step, the user can modify or add modules based on the selected Solution to fit the business needs or requirements.

Add Module

This page contains the list of modules not included in the pre-selected modules. User has the option to add more modules through this page.

Solution Information

Solution Information contains the Description, Platform, Estimated Price, List of Selected Modules and List of Selected Pages.

Note Page

Note page is where the user can jot down some important things. The artifacts can also be uploaded on this page.

Personalize Module

This is the third step in creating a project. In this step, the user can personalize the Page per Module or Add Pages that are not included in the module.

Add Page view

This page contains the list of pages not included in the pre-selected modules. User has the option to add more pages through this screen and be part of the build.

Add Custome page view

In this page, the user can upload pages, images or wireframe that are not found in the application. This is also where the user can put the figma link for further reference.

Page Parameters

This is the page where the user can personalize the components of the pages. Different variations available per section can be selected.

Page Setup

This is where the user can personalize the global theme of the pages like changing the background color, page layout, and logo & trademark.

Finalize Module

This is the last step in creating a project. The user can see the Solution Summary with total number of selected modules, Add-Ons and Project Card with selected platform and Grand Total Cost.

Payment Term

This page contains the payment breakdown and descriptions. The user can select the preferred payment platform on this page.