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.