USER EXPERIENCE TRANSFORMATION THROUGH PORTAL INFRASTRUCTURE MODERNIZATION

USER EXPERIENCE TRANSFORMATION THROUGH PORTAL INFRASTRUCTURE MODERNIZATION

The proliferation of cloud and mobility is forcing enterprises to digitally transform the products and services that they offer. User experience and user interface play a pivotal role in successfully transforming a digital product, even more so when users expect to access such services across different devices with different capabilities. Enterprises are revamping user interfaces to provide impeccable customer experience to their end-users, and improve lead conversion and gain competitive advantage. Some of the technical drivers that trigger enterprises to recreate user interface include consolidating different portal properties inside an organization and migrating to a newer platform to reduce time to introduce new functionality. This whitepaper discusses different architectural patterns and approaches that should be considered, while taking-up the user interface transformation journey.

INTRODUCTION User interface (UI) acts as a window to use digital services that

frustrated. This drives the need to relook at the portals user

an enterprise offers to its customers. User interfaces also allow

interfaces from a holistic view that puts user experience first

administrators

and

using right tools and technology platform. Leading research firm

infrastructure used for offering digital services. Typically, these

Gartner defines the term user experience platform (UXP) as an

user

portal

umbrella term for platforms that enable front-end presentation

backend server acts as a

and user interaction layer with UX as central theme and provide

value-added middleman that allows selection of content sources

effective, high-fidelity user experiences for a website, desktop

and presents information and options in a simple-to-navigate

application or mobile app across channels and devices. As per

and customized interface to the users. These portals are either

Gartner, UXP is a collection of services that enable, content

in the form of multi-screen responsive website or in the form of

management, multi-screen responsive pages for unified access,

native or hybrid mobile/tablet applications that aggregate

integration and API system, analytics, search, advanced user

information from diverse sources and present them in an

interaction enabled (either through gesture or voice or augment

organized, manageable way in a single page or in multiple pages.

reality) and mash-up of different content and services based on

interfaces

to are

manage

application

implemented

technologies, wherein portal

using

software popular

context. In order to transform existing content centric user In this world of digital economy, portals need to provide

interface portal to user experience centric portal, it is important

responsive and personalized services. However, most portals

to understand typical use cases that these user interface portals

today are content and workflow centric, with little emphasis on

address.

the user experience (UX), leaving most users confused and

User Experience Transformation through Portal Infrastructure Modernization

1

TYPICAL USE CASES THAT USER INTERFACES TARGET User interface portals are used in different business scenarios.

Agile, scalable means to deliver web applications, along with an

Some of these scenarios include:

environment that enables collaboration and communities;

Unified place to engage, support, learn from and respond to

publish and organize rich content quickly to provide a unified

customers – a vertical portal that offers access and interaction

and consistent interface

with specific applications and business functions

However, enterprises face lot of issues to effectively and

Manage collection of sites – a horizontal portal that integrates

efficiently implement these use cases and achieve stated

and gathers information from cross-enterprise allocations, as

benefits from the portal systems.

well as from different line-of-businesses

Key Challenges In the section below, the challenges that enterprises face during

actions that impact revenue generation

user interface transformation journey are discussed:

Longer time-to-market cycle to introduce new functionalities in

Silo of content assets and information presented to customers,

the user interface

partners, suppliers, employees and information posted on

Disconnected reporting and islands of excellences existing in

social media

different business units inside an enterprise

Non-responsive design of interfaces that fail to provide seamless experience across different types of screens

–

All these challenges can be addressed through a user

desktop, smart phone and tablet

experience platform that takes advantages of HTML5-based

Boiler plate experience, wherein user interfaces doesn’t adapt

single page apps, widgets, lean portal/portal-less portal,

to user’s needs and lacks personalized experience

lightweight web content management, on-premises and cloud

No embed micro interactions in the overall user interaction

based application integration.

process that ensures users to complete checkout and payment

APPROACH FOR USER INTERFACE TRANSFORMATION To transform existing content and workflow-centric user

interface

interface portal into a portal that puts user experience first,

architecture

enterprises need to take a phased approach. Creating a portal

transformation roadmap definition is an iterative process and is

that places the end-user at the center requires orchestration

influenced by stakeholder research, user interaction design and

and compositing different technology services. Key steps in the

information architecture design. The next section describes

transformation include, as-is analysis of the existing user

the various steps in detail.

User Experience Transformation through Portal Infrastructure Modernization

and

backend and

assets,

roadmap

determining

based

the

development.

to-be The

2

User Interaction Design

Iterative Development

Testing

AS-IS Analysis

Agile Implementation

Information Architecture

Selection of Suitable Architectural Patterns

Figure 1: User Interface Transformation Process

User Interaction Design and Information Architecture Identify different stakeholders’ expectations (customers,

Information architecture describes the overall user interface

partners, suppliers and employees) from the portal through

conceptual model and general designs used to plan, structure,

stakeholder interviews, field research, competitive analysis and

and assemble a site that is also in line with defined search

channel strategy analysis. Based on the inputs, develop the

engine optimization (SEO) best practices. As part of the

user interaction workflows and create high-level structural

interaction design, user experience (UX) designers would also

model, visual design strategy and information architecture.

develop wireframes and other visual design deliverables.

Selection of Suitable Architectural Patterns and Best Practices Various architectural patterns and best practices exist to

portal. Traditionally used for designing desktop user interfaces,

transform a portal into an interface with great user experience.

this architecture has become extremely popular for designing

Adopting one or more such patterns and best practices can be

web-based user interfaces and applications. There are a few

useful in defining the roadmap to deliver best-in-class user

variations of MVC patterns that take advantage of newer trends

experience portal, eventually helping enterprise achieve their

like single page application and portal-less portal approach.

business objectives. In the section below, various architectural

Selecting a suitable MVC variant is driven by existing user

patterns and best practices are discussed:

interface and portal technology assets and also by the

Model-view-controller (MVC) is one of the prominent

reusability strategy that the enterprise wants to employ.

architectural patterns used for defining user interfaces and

MVVM Architecture

View

View

View

Controller

Presenter

View Model

Business Logic

Service

Data Layer

Repository

Task

Service Task Repository Model

Model

Service Task Repository

Data Model

MVP Architecture

Data Model

User Interface

MVC Architecture

Data Model

3-LAYER Architecture

Model

Figure 2: MVC Variants

User Experience Transformation through Portal Infrastructure Modernization

3

Responsive web design (RWD) is a web design approach of

Even though, through responsive web design and SPA, user

building sites to provide an optimal viewing experience — easy

interface portals function seamlessly on smartphones and

reading and navigation with a minimum of resizing, panning,

tablets, native apps or hybrid apps are planned to take

and scrolling — across a wide range of devices (from mobile

advantage of underlying smartphone’s or tablet’s native

phones to desktop computer monitors). Enable personalization

platform. While architecting the apps, approach can be

of the user interaction by adopting recommendation engines

adopted to separate user interface – that enables

that would provide personalized experience based on user

interaction with user – from the middleware software

preference and usage pattern

function that works with native platform functions. This

Single page application (SPA) is a web application or website

approach helps in reducing effort required to make the app

which fits in a single portal page and view-controller related

work across cross-platform, as well as to frequently

business logic for the front end is executed in the context of the

fine-tune user interface to improve user experience.

browser without requiring a reload every time the web

User interface for Internet of Things (IoT) is required to take

application gets information from the backend. In SPA

a unique approach as connectivity to the ‘things’ is likely to

architecture, the portal backend focuses on getting the

happen over different protocols and different connectivity

information to the frontend through APIs and integration with

options. Additionally, since ‘things’ generate large amount

various other enterprise applications, as well as third-party and

of data, user interface will have to work with big data and

External Services Job Queues UI Frontend Framework

JQuery

Cloud

Server Side Framework

JQueryUI

DB

AngularJS Concepts – MVC – Data Binding – Filters – Events – Directives – Module

Data Access Library

Configuration and user data

REST Stack REST WebServices Services

Data Access Library Business Logic

SPA

Figure 3: SPA through AngularJS

partner applications. This decoupling enables more fluid

search layer to provide visualization and actionable

development of frontend applications to keep up with the

insights. Asynchronous notification is another functionality

changes adopted to address changing user preferences and to

that needs to be considered, while designing the user

implement micro-interactions. Increasing popularity of RESTful

interface and interaction system with ‘things’ like sensors

services and availability of better front-end tooling in

or wearables

AngularJS, Bootstrap, and similar items have fueled the

It will be important to test various localization scenarios to

adoption of SPA. However, generally web crawlers prevent

provide geo-specific support. Typical localization tests for

JavaScript execution, thus SEO is a major problem faced by

GUI include text translation to local language (for example:

anyone who wants to embrace the SPA model. To circumvent

from English to East Asian languages), currency, date and

this issue, search engine requests should be redirected to

time, support for bi-directionality to support languages that

server that has headless browser, which executes JavaScript to

flow from both left-to-right and right-to-left (for example:

create a fully rendered HTML page, which in turn is sent to

Arabic).

search engine crawlers to improve SEO.

Legacy portal systems were typically built as a collection of different modules that were either represented as portlets

Next section discusses some of the best practices and key

or widgets. Portlets are packaged in Java EE web

considerations for designing portals with great user experience.

applications, which by design, are suitable for isolating functionality, but it is difficult to mash them up to enable

User Experience Transformation through Portal Infrastructure Modernization

4

greater collaboration required for exchanging content and

Portal-less portal helps in presenting static content and can

services between modules. So, to enable SPA to reuse the

optionally be integrated with the content management system

backend capabilities, portlets can be converted into REST-based

(CMS). As complexity increases — especially around advanced

modules. And, to support newer backend functionality, it is best

personalization, visitor permissions and integration with legacy

to adopt lean portal or portal-less portal architectural approach.

application, portal-less portal is capable of becoming an

Lean portals sit over entire infrastructure and use existing

Portal-less portal

Single Page Application Angular JS - CSS, JS

Business Logic

JSON REST APIs

REST Termination

Data Cache

Integration Bus or iPaaS (CXF, Camel, ActiveMQ) or (MuleSoft)

REST, SOAP, Proprietary, HTTP Scraping Existing Portals SSO, LDAP

Figure 4: Portal-less Portal to Wrap-around Existing Portal Properties

back-end systems, workflows and system-to-system service

important backend system for reducing the complexity at the

buses without the need to replace anything. Integration with

SPA. Backend could adopt container-oriented architectural

partners and supplier system is achieved through on-premises

pattern to implement bundles of features either through

or through cloud-based integration bus or through API gateway

portlets or widget or through Java OSGi bundles

products.

Agile Implementation and Testing Once the target solutions architecture for the transformed user

user interfaces. A/B testing can use parameters identified in

interface portal is selected, product backlog can be created with

frameworks like Google HEART or pirate growth model to

fine-grained user stories, followed by creation of sprint plan by

measure the effectiveness of the interface that is under test.

logically

grouping

the

user

stories.

Since

in

the

UI

transformation, the UX deliverables such as wireframes change

Security testing must be undertaken to identify any security

frequently, the implementation team will have to work closely

vulnerabilities in the GUI application. Security testing includes

with the UX team. Setting up continuous integration and

static code analysis, as well as dynamic penetration testing.

continuous deployment processes through DevOps tools and

Static code scan includes tool-based code scan of the source or

automating various aspects of testing the user interface

binary code for security vulnerabilities, analysis of the results

through tools like Selenium, Apache JMeter and Sikuli are the

and recommendation based on analysis results. Penetration

key to enhance user interface development and deployment

testing includes ethical hacking of the web service to check

process, improve quality of user interface and reduce

against the scenarios identified in threat modelling and

time-to-market through automated testing.

common scenarios identified in OWASP Top 10 that include XSS, SQL injection and broken authentication. Cross-browser testing

It is further recommended to use frameworks to perform A/B

of the functionality across different browsers is also an essential

testing to determine the effectiveness of the newly designed

part of web GUI application testing.

User Experience Transformation through Portal Infrastructure Modernization

5

To enhance the performance of the web portal, performance

include response time, throughput, concurrent users and

testing is used to check how the system performs in high traffic.

requests/sec.

Performance metrics during web service performance testing

ARICENT AS A PARTNER FOR UI AND PORTAL TRANSFORMATION User interface and portal transformation journey is complex and

Aricent also has developed enabling software to help its clients

requires careful planning, while evaluating existing technology

accelerate time taken to achieve the stated transformation

landscape and selecting new technology. Aricent has been

objective. Our enabling software portfolio includes:

helping its clients de-risk this journey through its portfolio of

Remote testing enabling software that supports testing of the

product engineering services and enabling software.

user interface on different mobile devices and mobile operating systems. This framework helps to create a unified private cloud of devices spread across geography to ensure a consistent user experience across device types and form factors

Single Page Applications Foundational Components -Runtime

Foundational Components -Operations

Web Server(HTML/CSS3/js Framework) Services Model Business Logic Execution Environment

REST APIs

Data Tier Abstraction (Search & DB Abstraction)

ESB/iPaaS Connector

DevOps and Automation

Development frameworks for ensuring Monitoring & Operation code quality (Application and test frameInfrastructure works-unit, Monitoring) functinal, performance IaaS/PaaS and stability Configuration Templates

Data Center / Public IaaS

Figure 5: Aricent Expertise Areas in the Overall Transformation Stack

Aricent’s product engineering services for user interface and

Customer engagement enabling software that helps to improve

portal transformation include enabling its clients to select a

user experience with set of ready-to-use plug-in libraries to enable

suitable approach for transformation, UX refresh, developing SPA,

social media integration, unified notification across different app

REST or any other API wrap around existing portal properties to

store ecosystem, gamification and recommendations

create portal-less portal system, setting-up and optimizing

Cloud management enabling software to streamline orchestration,

DevOps tools, deploying and optimizing portals on the cloud or

management and monitoring of portal backend server workloads

data center infrastructure.

deployed across different public (AWS, Azure) and private cloud infrastructure (OpenStack, VMWare)

Prakasha M Ramachandra

Author

User Experience Transformation through Portal Infrastructure Modernization

6

-

REFERENCES 1. Gartner Research – Market Guide for User Experience Platforms 2. Lean Portal: http://blog.backbase.com/2805/what-is-a-lean-portal/ 3. Gartner Research - Generation 7 portals: Unifying the User Experience

Aricent is the world’s #1 pure-play product engineering services firm. The company has 20-plus years experience co-creating ambitious products with the leading networking, telecom, software, semiconductor, Internet and industrial companies. The firm's 10,000-plus engineers focus exclusively on software-powered innovation for the connected world.

The company’s key investors are KKR & Co. and Sequoia Capital. info@aricent.com

Š 2015 Aricent. All rights reserved.

All Aricent brand and product names are service marks, trademarks, or registered marks of Aricent in the United States and other countries.