Case Study
SSO App Refresh
Bringing legacy to life:
A modern makeover for every device
Overview
The Single Sign-On (SSO) app is a core part of Covisint’s cloud-based IAM suite, providing secure, centralized access across third-party ecosystems. By managing federated identity, tokens, and sessions, it enables seamless collaboration without the need for multiple logins.
Context
- My Role
- Front-end Developer
- Teams
- Architecture
- Engineering
- Product owners
- QA
- Timeline
- 2017–2018
- Accessibility (A11y)
- Responsive design
- Performance optimization
- Usability & testing
- CSS
- HTML
- JavaScript
- Sketch
- VS Code
The problem
From legacy code to limitless possibilities
When the app was originally built, the markup was based on an early version of HTML, with only minimal CSS support added later. This was back when it was common practice to nest tables for layout and use 1x1 pixel transparent GIFs for spacing—typical of pre-CSS web development standards.
From bottlenecks to fast-track deployments
The app is hosted in a multi-tenant environment which meant that whenever a customer requested a change to their login screen, that change needed to be coordinated with all customers hosted in the environment. This resulted in updates, no matter how small, taking several weeks to be deployed.
From constraints to creativity: unlock unlimited customization
Because of the outdated markup (HTML), custom styling was limited to swapping out the Covisint logo for the customer’s and minor font and color tweaks.
Research and discovery
The goal of this project refresh was to improve the problems identified above. We believed we could increase the amount of customization afforded to our customer. We believed we could decrease the amount of time needed to deploy customer changes and simplify the process. We knew that the code needed to be modernized and optimized.
With this in mind, I collaborated closely with the Solution Architech. He shared with me the product's architecture and what changes could be made. I shared with him what could be done with modern HTML and CSS and what I thought was possible.
Together, we made significant changes to the codebase, refactored the application, and re-wrote the stylesheets for existing customers.
Highlighted changes
As a first step toward modernizing the application, I refactored the markup using semantic HTML and aligned it with W3C Web Standards. Replacing deeply nested tables and eliminating unnecessary 1x1 pixel GIFs significantly reduced file size, resulting in noticeably faster page loads and a much cleaner codebase.
To simplify this process, the team moved each customer's style sheet from the SSO app to their individual document library within the content management system (CMS). This change allowed authorized users to upload, download, or delete the files directly from the browser at any time.
By decoupling the styles from the core code, we enabled nearly instant stylistic changes without needing a full code deployment, significantly speeding up the update process.
Refactoring and externalizing the style sheet opened up doors to customization like never before. With HTML5 and CSS3, so many new options beyond mere logo, font and color changes became possible in terms of custommization.
Before
Custom styling was extremely limited. The small handful of options that could be changed included:
Branding assets
(e.g., logo files and variants)
Color palette
(primary, secondary, accent)
Typography
(font families, weights, and sizes)
UI styling
(custom CSS or theme variables)
After
The new login screen was simple, responsive, and lightweight. It rendered well and quickly on all devices.
Each customer's login screen could now be styled to better match their branding guidelines like never before.
We didn't stop there
We took it a step further. The solution architect for the project confirmed we could inject HTML and JavaScript via internationalization (i18n) labels — locale-based text strings that change text based on the user's language preference, like "contraseña" for "password" on Spanish login screens.
By leveraging this, I injected DOM elements such as headers and footers using Javascript, enabling advanced customization without modifying the core markup. The following screens reuse the same HTML as the login screens above, with styling and behavior customized through the customer stylesheet and injected code.
If you're familiar with CSS Zen Garden, this might look familiar to you. If not, go check it out! Very cool stuff, I drew inspiration from this website and it's a great ilustration of the concepts of this particular solution.
Results and impact
Reduced onboarding time by 40% after consolidating complex multi-step workflows into a single, guided setup experience.
Users completed key tasks faster with fewer errors, and support requests dropped significantly—especially among first-time users.
Introduced real-time device health indicators and alert logs, leading to a 65% increase in proactive issue resolution.
Users reported higher confidence in system reliability, and NPS scores improved by 22 points over three months.
Implemented role-based dashboards for technicians, managers, and executives, which increased platform usage by 50% among non-technical roles.
Stakeholders accessed relevant insights faster, enabling quicker decisions and better alignment across teams.
