The Customer Portal experience
At Sungard Availability Services, they design, build, and run disaster-ready production and recovery environments that are more resilient and Always On, Always Available – giving their customer's the agility they need to compete cost-effectively in the marketplace with little to no downtime.
In short, Sungard provides disaster recovery "insurance" for data centers.
My Role
As Sr. UX / UI Design, Team Lead, my role was to lead the customer portal experience setting the vision which led to the customer portal being awarded the DRaaS Leader Award from Gartner Magic Quadrant for four consecutive years. Below I describe the problem Sungard users faced and the solution I ultimately envisioned.
I was the first UX design hire who could also code in HTML and CSS. Being the first, and for the most part, the only, designer allowed me to focus on the unified portal vision holistically while being able to manage other projects in the pipeline and mentor to curious front-end UI developers and other UX / UI designers.
I managed and delivered assets, HTML, CSS, feature specs and prototypes for the developers to see the user experience in full. We used bootstrap, d3js, react.js, zoomcharts, charts.js. I created worked mainly in Illustrator and sometimes in Sketch. I used Redpen.io as well as Invision to collaborate cross-departmentally. I built SVG assets as well as a Iconfonts.
I created the start to a living design system — called PNGUX (pronounced PING • UX) allowing mainly developers and other UX / UI designers to scavenge for necessary design elements, fonts, colors, icons, components, feature/product design specs, learn about the portal styling in comparison to corporate brand, read user research and insights, and copy / paste code snippets for rapid development. PNGUX housed the UX prototype — an almost exact replica of the customer portal where I was able to workshop ideas in a separate sandbox detached from the sprint production pipeline. This sandbox became important to convey to users as well as leadership our path forward to achieving the unified portal idea.
Toward the later half of 2016, I encouraged the creation of a reusable components library. And in 2017 the development team began pursuing this library using React JS to build and manage them. The UX department maintained, updated, evolved these components as they were created. The components were customized Bootstrap components.
UX Product Story
The Complaints
When I began in 2012, customers had five portals with five user experiences, five logins, five user admins, five disconnected databases, five different branding styles and voices and five UI pattern libraries. Users were not very happy logging in to their five portal experiences and began voicing their discontent loudly to their service delivery managers.
- Customers wanted a single unified portal experience, from login to app navigation, as well as a single brand vice, look and feel.
- Customers wanted Sungard to move beyond the traditional table design model and create more compelling and engaging apps for them to use.
- Customers wanted a better way to generate service tickets rather than use a third-party software, as is, which came with a laborious reference guide PDF.
- Customers wanted a way to see the disaster recoverability health of their environment and assets.
- Customers wanted a way to manage their users and manage their portal access privileges easily.
The ANALYSIS
With many front-end frameworks (some out-dated and no longer maintained by their authors), the only way to resolve the UX was to start new. And it began with speaking closely with Sales before diving into focus groups. Product and I held conference calls with real existing and new customers provided by Sales. After months of customer interactions we had plenty of useful information and research to begin developing user personas, journeys, wireframes, mockups, and prototypes.
At first the idea was to shut down four of the five portals. But that was met with resistance internally and rightfully so. Product and myself convinced leadership and engineering to create a "new" portal focusing on Recover to Cloud (R2C) app. Sales had been aggressively selling the R2C service to existing and new customers. This new product aligned with our other users who wanted a unified and elevated Sungard portal experience.
The SolutionS
The R2C portal went live in early 2014 to a subset of users, about 125. Product, myself and Senior Service Delivery Managers (SDMs) on-boarded each customer introducing them to their new R2C portal. Once on-boarded, the subset of users provided a bounty of feedback (good and bad) that Product and I used to progress further with the unified portal production road map. By 2017, the R2C portal morphed to the unified portal and was released of the entire user base of 4500+.
I set out with a vision of one portal with one user experience, one login, one user admin, one database with one brand voice, look and feel making the customer portal unified, scalable, modularized, and modernized.
We delivered appropriate solutions to each of the customer complaints.
UX Product details
The Users
Three groups of users: Operators, Managers / Directors, Executives / C-Level (both external customers and internal users) who had varying needs for their portal experiences coupled with keeping portal development costs down. To achieve the company's economic goals and the end-users varying needs meant that the portal had to allow a similar experience for all but with various administration levels to each user role.
The Journey
With five disparate UX journeys for a user to take previously, users were extremely unhappy and began vocalizing their discontent, loudly. Now unified in a single portal experience, the user journey is easier and more enjoyable. UI elements exists for a reason and with purpose.
The Login
Complaint: No unified login experience.
Solution: Branding is the first impression a user sees when logging in.
Sungard Availability Services introduced itself as a new company separate from it's parent, SunGard Data, in early 2014 complete with a new branding and new imagery.
It was key to implement and extend the new brand guidelines in the portal before launching the new unified portal that same year to a subset of users for beta testing.
Placing the login input fields and button in the upper right corner provided a subliminal marker to the user that this area will be where the logout action is located as well as other user help tools.
It's consistent across all platforms.
The Launchboard
Complaint: Too many launchboard (home) pages inside too many portals
Solution: One launchboard with relevant tools displayed with useful data-visualization.
This launchboard design was conceived in 2014 and shelved until 2017 when a product manager reminded me of this idea and wanted me to further expand on it delivering mockups to begin spec'ing out for implementation.
This screen appears immediately after login and consists of a series of interchangeable dashlets, complete with data visualization, as a whole, tells the customers' environment health and disaster recoverability story.
It also provides users a quick way to access any tool because each dashlet has a rocket icon that launches the tool the dashlet represents.
This design eliminates portal switching which was a key complaint from users not knowing which portal has which tools.
With this design, the portal became 100% unified by being a portal of tools.
The User Admin
Complaint: Too many disparate user admin tools across multiple portals.
Solution: Created a global user management tool that combined customer management with user management using a business card design presentation that had a flip response and details reveal.
The flip card action provided a means to store more useful data per customer and per user.
External users layout listed their company's profile card first with the users registered cards below.
A dropdown select search bar appears ahead of the company's profile card allowing users to live search their users
Clicking the folder icon on the card opens a right side panel of tabbed details allowing the user to make changes or additions.
This right-side panel side panel of tabbed details design pattern is picked up in the R2C SR App below.
The R2C SR App
Complaint: Need a view into the disaster recoverability health of customers servers/volumes.
Solution: Delivered a dynamic, data-rich, colorful, health monitoring tool with motion.
Recover to Cloud (R2C) Server Replication (SR) monitors the disaster recoverability health of the users production server and volume assets.
There are two main data points displayed –the CPO (Consistency Point Objective determines the recoverability health of the server hardware) and RPO (Recovery Point Objective determines the recoverability health of volumes), are being monitored.
The other data points provided are: storage used, bandwidth, and previous CPO and RPO for each server and volume.
When a user clicks any square object, D3js API visually assembles the assets that belong together in a hidden right-side panel of tabbed details unique to the selection.
Motion provides the user a sense of activity while leading the eye to the appropriate area of interest.
The app experience stays in one screen allowing the user to maintain focus.
The Server Update App
Complaint: Provide a better way for users to update server OS's to the latest versions in order to maintain recoverability compliance with Sungard's Gold Policy.
Solution: Created a 3-tabbed tool (servers, scheduled, history) with a 4-step scheduling/rollback wizard allowing users to easily schedule or rollback updates at their convenience.
Previously users would call in or email a ticket to Sungard customer support to trigger this event.
Often times the resulting headaches with over the phone or email generated tickets would be that Sungard's policy files would be out of date or very out of date with the users current OS.
Each week, the app scans the users environment comparing the latest vendor OS releases to the users OS's checking if they are current. If not, then an alert icon is placed next to the server in need of updating.
The user checkmarks the server(s) to trigger the scheduling interface.
Rollback is the reverse order of scheduling.
The Design System
The beginning of a living design system / language providing developers a means to scavenge for UI patterns defined by product and myself.
This was the start to the final piece in the portal unification project and was created for internal use globally.
Developers could check out the design system repo to retrieve code and assets relevant to their sprint projects.
Or, they could visit the PNGUX portal URL to scavenge or observe the interaction of the code which mirrored the development environment minus the user data.
The UI pattern library's framework is a customized version of Bootstrap 3 (adhering to corporate brand guidelines while extending to portal) which matched the engineering departments use of React-Bootstrap JS.
I maintained a healthy, collaborative partnership spirit with engineering, operations, product marketing, QA, UAT and external customers.
The Results
Users are very happy and now enjoy their one portal experience. Their new 'discontent' is that they want more features which is sometimes hard to keep up with demand. One of the successes from the creation of the customer portal is that Sungard didn't start out completely on board with the radical UX shift with the proposed portal above. It took interactive prototypes, several meetings, customer focus groups to really influence the overall UX outcome.
Read below some of the customer experience portal feedback from internal and external users.
The Portal Praise
Customer portal users expressing positive feedback and gratitude with the easy-to-use, simplified, contextualized, humanistic, unified user experience.
The Design Recap
An inside view into the six-year evolution of the user experience that leads to the final body of work displayed above.