Making Better Products, Faster
Solving Anthem Blue-Cross’ issue of user experience inconsistency, development process misalignments, and wasted development time by employing an internal design system
Project Summary
The company is building multiple applications both for the open web (B2C) and for partner organizations (B2B). Pega must support complex business requirements, provide a consumer-grade user experience and create components that can be reused in multichannel solutions.
This requires a flexible UI architecture and consistent user experience across applications and channels.
Responsibilities
Project Team
Long Term Goal
Ensure all users using each implementation of the application has the same user experience.
The Challenge
1. External UX, custom API – Most departments at Anthem do not have UX support, UI/UX is partially outsourced to an external agency. The agency built a custom API for a CMS system which is difficult to translate to any other technology.
2. Frequent changes to the UI style guide – The agency made frequent changes to their style guide, that results in additional workload and inconsistency across applications built at different times.
3. Reusing existing Skin rules in new applications causes overhead – The approach where we reuse one application skin and adjust it to fit another one results in unused styles and formats that are rendered at runtime. Our previous approach involved refactoring existing Skin rules to reuse some elements and customize others. In the long term this results in:
– Bloated, unnecessary code snippets
– Unused skin formats and styles
– CSS fixes for different versions of the platform
– Inconsistency across different applications in user experience and branding
4. Lack of internal UX resources – Internally there is no one responsible for Pega UI who can translate business and marketing requirements into Pega technology. Developing internal skills is important to ensure continuous quality of UI and consistency in user experience across projects. This project was big and its problems were comprehensive. So, the our team focused on streamlining and simplifying with a new, rebranded website that used user-centered design methodology to remediate public perception and user experience.
5. UI/UX is a bottleneck for projects – Due to lack of internal UX resources, documenting best practices and UI patterns becomes very important. The documentation must contain a development guide and a pattern library to help development follow best practices. We realized, that without internal UX support we will not be able to leverage the advantages of using Pega UI. Our mid-long term goal is to use more of what Pega can offer out of the box and optically adjust it to fit the style guide, rather than to use custom controls. The only way to achieve this is to have internal UX resources staffed on projects and enabled in Pega UI and best practices.
The Process
Establishing a single source of truth.
1
Prioritize pain points
After reviewing the issues with multiple projects, I decided to analyze the pain points that were consistent across the applications. I used an affinity diagram to map the most common pain points and how easy or difficult they were to solve with existing Pega functionality and prioritize them.
2
Rework the UI Architecture
With support from the main architect at Anthem we decided to start a project to ensure UI reusability and consistency across the enterprise.
We decided to use Pega’s Skin inheritance to create a reusable structure for the interface. Using inheritance, we take all generic UI components and merge them in an application called Enterprise Pattern Library. All application that are built on top of this layer can inherit the skin formats, override it or expand it as necessary.
3
Build the enterprise pattern library
We looked at all UI patterns used on the company websites and in current applications and selected the ones that can be reused in multiple Pega projects. We built a library around these patterns and added documentation how to develop them in Pega.
Instead of just being a style guide, the Pattern Library contains actual front-end code that can be reused in application development and be populate by properties. We also included instructions how to create each element from scratch if necessary.
4
Enablement of UI champions
Our goal was to have internal resources, who can support the Enterprise Pattern Library project in case of capacity problems. I enabled two UI Champions in Pega UI development. We worked together on developing a library of all reusable UI components. This helped them learn by creating more than just Skin formats: we implemented sections with different layouts, controls and custom components.
5
Implement UI Governance
To avoid bloating the Enterprise Pattern Library we set up, a UI governance program with help from the customers is needed. This governance (CoE) decides which UI patterns should be used across the enterprise and which must remain in their respective application layers.
UX CoE tasks:
– Making sure all projects offer a consistent and optimal user experience.
– Defining the Enterprise Pattern Library and expanding it based on project requirements.
– Limiting the number of custom components built for each application. The goal is for
applications to use 100% reusable UI elements and patterns instead of developing their own solutions.
Results
– Reduced UI development time by 80%.
– Significantly reduced number of UI bugs.
– Reuse and consistency across applications.
– No bloated Skin rules from reusing existing Skin.
– UI changes have to be implemented only once instead of on a project basis.