Chapter 4 User InterfaCe DesIgn Intuitive Architecture A DXP’s information architecture provides content in an organized and intuitive way. Navigating through the application enhances the UX journey. It makes the application simpler and more intuitive to use and the longer visitors stay, the more likely they are going to engage with the content and maximize the chance of buying services or products. Dashboard A dashboard is an organized way to provide and present information in an intuitive manner. The dashboard helps in visualizing, tracking, and analyzing data and displays key performance indicators (KPIs), metrics, and key data points to monitor accounts, business processes, department reports, etc. For example, in a banking experience platform, you can analyze account statements and track income expenditures from account statements. Behind the scenes, DXP architecture integrates multiple data sources, for example, files, attachments, services, systems, etc., and provides a single source of data as REST APIs, which integrate with the dashboard and display all data in the form of tables, line charts, bar charts and gauges, etc. A data dashboard is the most efficient way to track multiple data sources because it provides a central location for businesses or users to monitor and analyze data. Responsive Interface Grid system layout of a DXP handles the responsiveness of the application, on desktop, mobile, as well as tablets. DXPs work on a mobile-first approach to implement responsive features. The mobile-first approach is the best strategy in the market to make adaptive designs. In the mobile-first approach, content or information is prioritized and sorted into primary, secondary, and tertiary content, for example, the home page should have a company logo and links to products or services. As everything wouldn’t fit into a smart phone screen, the DXP provides the ability to prioritize the content as per business requirements. In Figure 4-1, the desktop screen has six UI components: components 1 and 2 are primary content, component 3 is secondary content, and components 4, 5 and 6 are tertiary content. As the resolution of the screen changes, these components start getting wrapped as per the priority of the content, as shown in Figure 4-2. Components 4, 5 and 6 where horizontally aligned, but the mobile view is wrapped up and these components are vertically aligned. 120