Contact Us Customization

Customization pattern creation for NCR banking products


The Problem

NCR offers banking solutions to their customers, including a website and mobile app that their end users can utilize to look at their bank account information, make payments, move money, and more features that you would typically see in a modern banking application. Different clients have different needs, which is why we also provide a software tool that allows these banks to customize the features of the products for their end users. Before this project, there was no way to customize certain pages without contacting NCR directly and working with them to make the change. We wanted to provide a way for banks to easily build certain pages to fit their needs without the friction of manually reaching out for changes.

The Solution

I led this design process, introducing a new pattern that would allow our customers to see previews of their pages in real time as they made updates. This pattern was originally designed for the Contact Us page, but was created to be scalable for other implementations of the pattern in the future, such as Login pages and Payment pages. This solution also had to incorporate previews for all device types, such as web and native mobile, which share the same data but have different UIs.

My Roles

• UX Designer

My Team

• Me

• 1 Product Manager

• 2 Software Engineers

• 1 UX Researcher

Methods Used

• Brainstorming

• Iterative Design

• User Testing

Research Process

Reasons to Use Contact Us as the First Use Case


Contact Us Creation

Before this effort, there was no Contact Us page in our product. As a workaround, banks would customize their app's navigation to hardcode their contact information as plain text. When UX began designing the Contact Us page, I worked in tandem with them to align on what users would want to see from the Contact Us page, and what banks would like their users to see.


Easy Moving Parts

Contact Us was a strong use case to begin with because of the simplicity of its parts along with the fact that it was being developed for the first time. Because of this, we could work with engineering to ensure that we align on which parts can be customizable by the banks.


Still Enough Complexity to Consider Scalability

While this new feature has easy moving parts, there are still some complexities, such as differences between web and mobile, that it would allow us to consider different edge cases that will help the customization pattern scale to other areas of the product.

Design Process

Brainstorming and Iterative Design

First, I considered the types of interaction that a page builder tool could use. I took inspiration from other customization softwares, and weighed the pros and cons according to the needs of our users and the limitations from the customization software and end user banking products. I met with stakeholders to introduce these concepts and iteratively design on them to reach a satisfactory design that met product requirements, engineering requirements, and informed design that would then be brought to end users for testing.


Dragging and Dropping Content Items

Pros: Great for tactile manuvering of items, easy to see in real time how changes are made.

Cons: Not all sections are the same across web and mobile, so it may be jarring to see some items move in web while none move in mobile, and vice versa. Also, moving items across sections could be difficult.


One Panel with All Sections

Pros: Easy to see all information at once, and move around information in between sections as needed.

Cons: Potential information overload. Lots of scrolling. Having one save button for all information may cause confusion if there are any errors.


Identifying Available Content Per Device

Some information is mobile only or web only. How would a user identify available sections and where the information would be placed?

Final Iteration of UI Pattern for Page Customization


Selection Controls and Panels

To open a panel, the FI clicks a section on the preview.



If a section is empty there will be a section guide in the preview screen with a gray title to indicate that the area exists. When items are added to a section in the panel, the preview will update accordingly.


Edit Mode and Preview

Preview mode will make the screens uninteractable and remove the gray section guide titles.



Cards in a section have drag and drop capabilities to change the order of the information. This satisfies changing the order across web and mobile consistently without jarring users through drag and drop on the previews.

User Testing


Adding and Editing Items

• Most participants added items from the panel, not the top “Add” button

• Participants expected to only be able to make changes when in “Edit Mode”

• All participants able to edit item order in properties panel

• 2/5 participants expected to drag items on left frames

Recommendation: Clarify Edit Mode


Main Actions

• Confusion on what main actions are

• ”Main actions is a bit ambiguous… could be whatever you want it to be”

Recommendation: Clarify or change meaning of Main Actions



• Participants understood what sections meant, and that they were interactable

• Participants noticed differences in web vs mobile but generally were not able to identify the reason for these differences

Recommendation: Provide parity across web and mobile


This feature has been implemented and is currently in production. This pattern has now been expanded to other capabilities, such as the login page and other internal features, however I cannot share these designs as they are not yet in production.

What I Learned

• Designing with multiple devices and products in mind, each with different requirements.

• Collaborating wtih engineering on a solution that is attainable within the software's architecture, while implementing the best user experience possible. This includes compromising and being adaptable to changes during the iterative design process.

• Scaling a solution that will work across different types of use cases with the same ease and consistency

Future Considerations

• How might we create a more tactile, interactive page builder?

• How do we expand this capability into all areas of our products, giving the power to the customers to create great experiences for their users?