Set up the Geometrixx Finance reference site as described in Getting started with Geometrixx Finance reference site.
Geometrixx Finance is a leading organization in Financial Services domain that offers comprehensive and personalized financial solutions to suit the requirements of diverse customer profiles. They have just launched a range of credit cards for select customers. Their goal is to reach out to these customers and other prospective audiences on their preferred device, explain the benefits of the cards on offer, and help them enroll for the credit card program. In addition, they are looking to pitch for additional financial products that customers may find interesting.
The following infographic depicts the step-by-step workflow of the reference site scenario.
The scenario involves the following personas:
- Sarah Rose, a prospective Geometrixx Finance customer
- John Doe, an existing Geometrixx Finance customer
- Gloria Rios, Head of Credit Card division, Geometrixx Finance
Let’s now look in detail the steps in the reference site scenario to see how the AEM forms helps Geometrixx Finance achieve the goal.
The steps described in the walkthrough, where both Sarah and John are involved, include descriptions and images pertaining to Sarah. However, they are also applicable to John. Any differences for Sarah and John are called out in the steps.
Geometrixx Finance initiates an email campaign to send personalized email to select customers, including Sarah and John, to introduce them to the credit card program. The email explains the benefits of the credit cards on offer and also includes a button to apply for the credit card program.
AEM forms integrates with Adobe Campaign to deliver forms and documents through online and offline marketing channels. The email is a part of an email marketing campaign created in AEM using Adobe Campaign components. Note that the email shown in the image is personalized for Sarah. The GeometrixxFinanceWorkflow is used to trigger the email.
If you configured Geometrixx Finance reference site as described in Getting started with Geometrixx Finance reference site, you should have received an email on the email ID you specified when creating users, Sarah Rose and John Doe.
Sarah reviews the offer and chooses to apply for the credit card. She clicks Apply now button in the email.
If Sarah clicks Apply now from her mobile device, the credit card application opens in a view that is optimized for viewing on a mobile device. In this view, instead of presenting the entire application form in one view, it shows one section of the application at a time. It allows Sarah to view and provide information progressively as she navigates from one section to another.
The following images show a few of the screens as Sarah navigates through the credit card application on her mobile device.
If Sarah clicks Apply now from her desktop, the credit card application form opens as shown in the following image. The application form is organized in sections, like a card layout. Sarah navigates from one section to another to fill in the details.
Sarah fills a part of the application and that’s when she remembers that she needs to rush for a meeting. So, she clicks Come back later on the application form, which saves all the information Sarah has filled in and a dialog pops up to confirm if she’d like to receive an email with a link to her partially filled application to complete it later. Sarah clicks Send mail.
Geometrixx Finance sends the following email to Sarah that includes a Resume button take her back to the draft application form. The following images show the email on mobile and desktop.
John Doe, who is an existing Geometrixx Finance customer, can also access the draft credit card application in his Drafts folder on Geometrixx Finance portal, when logged in.
The Apply now button on the email takes Sarah to the credit card application. The application is an adaptive form supplied with the cq-geometrixx-finance-adaptiveform-pkg.zip package, while the cq-geometrixx-finance-layout-pkg.zip package defines the layout of the application. The adaptive form uses various components and expressions to capture details and adapts to user responses.
The adaptive form is configured to switch layout depending on whether the form is opened from a mobile device or a desktop. It shows the progressive mobile layout when opened from a mobile device, which presents a specified number of fields at a time instead of the entire form. In the desktop view, it displays the complete adaptive form.
The Come back later button initiates a submit action that generates a unique ID for the user and saves the partially-filled application as a draft in a node in the AEM repository. Also, it displays a dialog seeking permission to send an email with a link to the node containing the draft application. The Send mail button on the confirmation dialog triggers an email with a link to the node containing the draft. The Retargeting cron expression configuration, described in Getting started with Geometrixx Finance reference site, triggers the email at 2 AM everyday for applicants who have not completed their draft application.
Click the Apply now button in the email you received in the previous step. Fill in some details, explore various adaptive form components, and click Come back later to receive another email with a Resume button that links to the draft application.
If you didn’t configure Campaign and therefore didn’t receive the email on your email ID, you can view the application form as it would appear to Sarah by visiting the following URL.
Sarah comes back later, checks her inbox, and clicks the Resume button in the email from Geometrixx Finance that takes her to the partially-filled credit card application. The information that she provided earlier comes prepopulated. She navigates from one section of the form to another, completes the application, and submits it.
If you configured Campaign as described in Getting started with Geometrixx Finance reference site, you should have received an email with a link to the draft application on the email ID you specified for Sarah. Go ahead, fill in the remaining sections in the application, and submit it.
Geometrixx Finance receives the credit card application submitted by Sarah. The application goes to Gloria Rios of Geometrixx Finance Credit Card division. She reviews the application, carries out the risk analysis, and approves it.
As Sarah submits the application, a Workbench process implemented in the reference site triggers and a task is assigned to Gloria Rios for reviewing the application and approve or reject it. The user Gloria Rios is created automatically when you installed AEM forms JEE as described in Getting started with Geometrixx Finance reference site.
The following image depicts the approval workflow that processes the credit card application and generates a PDF output of the application.
Gloria opens the task in HTML Workspace, reviews the details in the credit card application, and approves it. Based on the details filled in by Sarah, the credit card approval tasks includes a risk summary generated by the Application data processing step in the approval workflow. It helps Gloria assess the risk associated with credit card approval.
If you installed AEM forms JEE server, you can access HTML workspace at http://<hostname>:<port>/lc/ws, where hostname and port refer to the JEE server installation. Log in to the HTML workspace using grios/password as the username/password for Gloria Rios, and approve the credit card application.
As Sarah's credit card application gets approved, she receives an email with a link to the Welcome kit. She opens the Welcome kit, which includes her credit card account details. The Welcome kit also includes a carousel window that displays promotional offers personalized for Sarah. As she scrolls down, the Welcome kit contains an embedded form to apply for an add-on card. Sarah quickly filled in the required details from within the Welcome kit and applied for the add-on card. A confirmation dialog for the add-on card application appears.
The welcome kit is personalized for Sarah and shows information relevant to her. It provides her an option to download a PDF version of the welcome kit. The arrow button at the bottom allows Sarah to scroll down and navigate through other sections in the welcome kit.
The welcome also reiterates the benefits of the credit card in an interactive card layout. While the benefit cards are static on the mobile version, the cards flip on the desktop version on the card to show details of the benefit as Sarah hover the pointer, as shown in the image below.
The welcome kit includes another application form that Sarah can fill and submit to apply for an add-on card from within the welcome kit without having to visit Geometrixx Finance portal or office.
As John Doe is an existing Geometrixx Finance customer, he can track the status of his application and view welcome kit on the Geometrixx Finance portal.
The welcome kit is an adaptive document included in the cq-geometrixx-finance-content-pkg.zip package. The promotional offers in the welcome kit are served by Adobe Target server. The offers are customized and targeted for specific customer segments. The welcome kit fetches offers from a preconfigured Adobe Target server for an audience segment of female Platinum card customers.
The interactive cards in the desktop version to showcase the benefits of the credit card in the welcome kit is a custom layout created using the default card layout of a document fragment.
The add-on card application is an embedded adaptive form in the welcome kit adaptive document.
Click the Resume button in the email that you received in the previous step. It opens the draft application. Fill in all the details and submit the application. You will then receive a welcome kit. Review the welcome kit.
If you didn’t configure Campaign and therefore didn’t receive the email with welcome kit, you can view it at the following URL:
As Sarah begins to use the credit card, she receives another email from Geometrixx Finance that includes her credit card statement. The following images show the email with a link to the credit card statement on mobile.
Sarah clicks View Statement in the email to view the credit card statement. The interactive statement constitutes various elements:
- Statement summary
- Detailed expense report
- Graphical expense analysis
- Option to make a payment for the due amount from within the statement
- Download the payment receipt
The following images show different part of the credit card statement on mobile, as Sarah scrolls down.
Sarah doesn’t need to go to the portal or search through her emails for the latest credit card statement. She just clicks the View Latest Statement button from any statement to opens the latest statement.
The detailed statement is laid out in a responsive table and provides an option to pay a part or the entire due amount from within the statement.
Sarah makes the due payment from within the statement and gets an option to download the payment receipt instantly.
The credit card statement will render on a desktop as shown below.
The credit card statement is an adaptive document. It is generated using the batching process and sent using Campaign. The detailed expense table in the statement is a responsive table. The graphic for expense analysis is a custom chart component and reads the expense table and generates the pie chart.
You can review the interactive credit card statement at the following URL:
Geometrixx Finance, from time to time, reviews the performance of their credit card application to check for any issues that customers might be facing. They use this analysis to take informed decisions about the changes required in the credit card application to enhance the user experience, reduce abandonment rate of forms, and thereby improve conversion. They leverage the integration of AEM forms with Adobe Analytics for their analysis. The following image depicts their analytics dashboard.
For more information about how to interpret the analytics dashboard, see Viewing and understanding AEM forms analytics reports.
The performance metrics for the credit card application form are tracked using Adobe Analytics. For more information about configuring Adobe Analytics and viewing reports, see Configuring analytics for forms and documents.
For you to view and explore the analytics report, we are providing seed data for the credit card application in the reference site. Perform the following steps to view the report with the seed data:
- Go to Forms & Documents UI at http://<hostname>:<port>/aem/forms.html/content/dam/formsanddocuments.
- Click to open the Geometrixx Finance Folder.
- Click the Select tool in the toolbar and select Application for Credit Card adaptive form.
- Click More in the toolbar and click Analytics Report. To generate the analytics report with seed data.
A/B testing of the credit card application
In addition to analyzing performance of the credit card application and constantly improving it, Geometrixx Finance leverages integration of AEM forms with Target to create A/B tests. It allows them to serve different experiences of the credit card application form and identify the experience that causes better conversion rate in terms of form completion and submission.
To configure Target in AEM forms server, see Set up and integrate Target in AEM forms.
Perform the following steps to experience the creation of A/B test for Geometrixx Finance credit card application form:
- Go to Forms & Documents at http://<hostname>:<port>/aem/forms.html/content/dam/formsanddocuments.
- Click to open the Geometrixx Finance folder.
- Click the Select tool in the toolbar.
- Select Application for Credit Card adaptive form.
- Click More in toolbar and select Configure A/B Testing. The Configure A/B testing page opens.
- Specify an Activity Name.
- From the Audience drop-down list, select an audience to whom you want to serve different experiences of the form. For example, Visitors Using Chrome.
- In the Experience Distribution fields for experiences A and B, specify the distribution, in terms of percentage, to determine the distribution of experiences among the total audience. For example, if you specify 40, 60 for experiences A and B, respectively, the experience A will be served to the 40% of the audience and the remaining 60% will see the experience B.
- Click Configure. A dialog appears to confirm the creation of the A/B test.
- Click Done.
- Select the Application for Credit Card form and click Open. It gives the option to open one of the experiences. Click Experience B. The form opens in the edit mode.
- Modify the form as desired to create a different experience than the default experience A.
- Go to the Forms and Documents UI, select the form, click More, and select Start A/B Testing.
- Now open the form in chrome browser several times using the following url:
Note: Remove the cookie with the name mbox from browser’s cookie persistence before opening the form next time.
You will see experience A and B of the form at random.
- Select the form, click More, and click A/B Testing Report. You won’t find much data in the report as you have just started the testing. Let’s now provide some seed data to see how A/B Testing report looks like.
- Open CRXDE Lite and take a back-up of the following file: /libs/fd/fmaddon/gui/components/admin/targetreport/clientlibs/targetreport/js/targetreport.js
- Replace the content of the above mentioned file with the content of the following file: /apps/geometrixx-finance/demo-artifacts/targetreport.js
Note: These changes are only for the demo purpose. Ensure that you restore the file contents after completing this procedure.
- Refresh the report that you generated, and you will see something like the following. Review the reporting dashboard.
To end the A/B test, click End A/B test button on the reporting dashboard. At this time, a dialog prompts you to declare an experience. Choose a winner and confirm to end the A/B test.
If you choose experience A as the winner, the A/B test will be put to an end, and going forward, only Experience A will be served to all audiences, including those on Chrome.