A partner home page with access to important documents, marketing, sales and training tools.
An example of a secondary page, utilizing accordion drawers to house regulatory documents and forms.
Financial Services
If the design of this site appears similar to UltraLux Travel, it's because both giants are under a common umbrella and share brand standards. Let's again employ the use of a pseudonym and refer to this entity as UltraBank Financial.
UltraBank is an international entity and has financial partners around the world. The ability to have regulatory policies and technical specifications at their fingertips is crucial. Additionally, branded marketing, selling and training tools are made available from this platform as well. The content for each partner varies and is generated dynamically.
An UltraBank administrator has complete control of users, content and reporting. Most recently, they requested a form-building tool be added.
After determining the types of questions and form formats, it was important to integrate UltraBank's specific styling of form elements. Across all branches of their business, UltraBank employs a content-styling system to ensure form component consistency. Since the users of this tool are financial professionals and not designers, every form created must be within branding standards.
Note: Clicking on images will open full-size screen captures in a new window. They will scale to the width of the viewport, but will not be responsive since they are satic images.
Landing page. Selecting the option to create a form is illustrated in the following steps. Selecting the option to manage forms takes the user to the Form Library (last frame).
Form Builder Step 1. Before adding questions, market(s) and partner(s) must be selected and the form given a name.
Form Builder Step 2. Once the audience has been determined and the name entered, questions can be added via drag and drop from the scrollable, form-components menu.
Form Builder Step 3. In this example, a series of text fields are organized to gather personal information. Free text fields serve for plain-text entry and specialized fields are used for sensitive information.
Form Builder Step 4. Upon saving the entered field names, the question collapses down. The user may still rearrange the order or delete a field.
Form Builder Step 5. The user may go back at any time and edit a question. The preview pane displays a thumbnail of the form in real time as it is constructed.
Form Builder Step 6. Clicking the preview button opens a full-size form for review. Once saved, the form is added to the Form Library.
Active and archived forms are stored here along with the form's status and various translations.