Identity App

A set of customizable IAM user experiences

Identity App project hero.
Identity App project hero.

When I joined UXP Systems, the company had recently built a digital identity and user entitlements product called User Lifeycle Management (or ULM), and wanted to better demonstrate its capabilities. The Innovation team was supporting Sales by iterating on an IoT demo and re-branding it for prospective customers to help showcase ULM, but it was difficult to work with.

We saw an opportunity to develop a product that would not only help the Sales team and make ULM more tangible, but also deliver more value for customers, and so we devised the Identity App: an out-of-the-box set of onboarding, authentication, and user management experiences that could be easily branded.

Role

Sole/Lead Designer

Company

UXP Systems (acquired by Amdocs)

Industry

Identity & Access Management

Year

2018–2023

Contributions

Product Design
Design System

Research

I started by diving deep into the to get an in-depth understanding and identify areas with end-user-facing components to build, I also uncovered technical constraints and some UX issues I worked with Product and Engineering to improve.

Performing competitive analysis showed that we could differentiate ourselves by capturing the entire lifecycle of the user, and by making our product more customizable.

Product Design

We built the early version of the Identity App while simultaneously designing and developing customer projects, avoiding building bespoke solutions by identifying points for configuration, and using an integration layer for customer-specific business logic. Later, ULM SaaS was created, and with a new momentum to make the Identity App completely self-serve, we continued to grow the Identity App and refine our processes, making developing new features more efficient.

I then crafted a set of design principles to help guide our decision-making:

Modular
Responsive to different combinations of back-end configurations and settings in a way that won't overwhelm users.

Modular
Responsive to different combinations of back-end configurations and settings in a way that won't overwhelm users.

Modular
Responsive to different combinations of back-end configurations and settings in a way that won't overwhelm users.

Modular
Responsive to different combinations of back-end configurations and settings in a way that won't overwhelm users.

Modular
Responsive to different combinations of back-end configurations and settings in a way that won't overwhelm users.

Speed over specification
Enable customers to apply their brands quickly using fewer configurations that have a large impact

Speed over specification
Enable customers to apply their brands quickly using fewer configurations that have a large impact

Speed over specification
Enable customers to apply their brands quickly using fewer configurations that have a large impact

Speed over specification
Enable customers to apply their brands quickly using fewer configurations that have a large impact

Speed over specification
Enable customers to apply their brands quickly using fewer configurations that have a large impact

Flexible & adaptable
Accommodating to the elements that make up different brands, showcasing what makes them unique.

Flexible & adaptable
Accommodating to the elements that make up different brands, showcasing what makes them unique.

Flexible & adaptable
Accommodating to the elements that make up different brands, showcasing what makes them unique.

Flexible & adaptable
Accommodating to the elements that make up different brands, showcasing what makes them unique.

Flexible & adaptable
Accommodating to the elements that make up different brands, showcasing what makes them unique.

Onboarding & Authentication

Customers had the choice of a combined point-of-entry for onboarding and authentication, or separate login and signup flows, and when separated, could take place in a single step or mulltiple steps. These pages could be more customized with layout and background options.

These flows adapted to features like single sign-on, identifier verification, MFA, social login, and more.

Onboarding & Authentication

Customers had the choice of a combined point-of-entry for onboarding and authentication, or separate login and signup flows, and when separated, could take place in a single step or mulltiple steps. These pages could be more customized with layout and background options.

These flows adapted to features like single sign-on, identifier verification, MFA, social login, and more.

Onboarding & Authentication

Customers had the choice of a combined point-of-entry for onboarding and authentication, or separate login and signup flows, and when separated, could take place in a single step or mulltiple steps. These pages could be more customized with layout and background options.

These flows adapted to features like single sign-on, identifier verification, MFA, social login, and more.

Onboarding & Authentication

Customers had the choice of a combined point-of-entry for onboarding and authentication, or separate login and signup flows, and when separated, could take place in a single step or mulltiple steps. These pages could be more customized with layout and background options.

These flows adapted to features like single sign-on, identifier verification, MFA, social login, and more.

Onboarding & Authentication

Customers had the choice of a combined point-of-entry for onboarding and authentication, or separate login and signup flows, and when separated, could take place in a single step or mulltiple steps. These pages could be more customized with layout and background options.

These flows adapted to features like single sign-on, identifier verification, MFA, social login, and more.

Combined point-of-entry flow – onboarding with mobile number and password demonstration (desktop, light theme)

Combined Flow (light theme, desktop).
Combined Flow (light theme, desktop).

Combined point-of-entry for onboarding and authentication (desktop, light theme).

Combined Flow (light theme, mobile).
Combined Flow (light theme, mobile).

Combined point-of-entry for onboarding and authentication (mobile, light theme).

Create and Account (light theme, desktop).
Create and Account (light theme, desktop).

Separate point-of-entry for onboarding and authentication, Create an Account page (desktop, light theme).

Log In (dark theme, desktop).
Log In (dark theme, desktop).

Separate point-of-entry for onboarding and authentication, Log In page (desktop, dark theme).

Various Flow screens (dark theme, desktop).
Various Flow screens (dark theme, desktop).

Various "Flow" screen designs (desktop, dark theme).

Various Flow screens (light theme, mobile).
Various Flow screens (light theme, mobile).

Various "Flow" screen designs (mobile, light theme).

User management

This area allows authenticated users to manage different aspects of their digital identity.

User management

This area allows authenticated users to manage different aspects of their digital identity.

User management

This area allows authenticated users to manage different aspects of their digital identity.

User management

This area allows authenticated users to manage different aspects of their digital identity.

User management

This area allows authenticated users to manage different aspects of their digital identity.

User management – Add Email flow demonstration (desktop, light theme)

Security (light theme, desktop).
Security (light theme, desktop).

User management area - Security & Login page (desktop, light theme).

Various User Management screends (light theme, desktop).
Various User Management screends (light theme, desktop).

User management area - various desktop screen designs (light theme).

Customizing the Identity App

I created designs for customers to be able to configure the settings, customize the style, and manage the theme of the Identity App from the Amdocs DIM Admin.

Customizing the Identity App

I created designs for customers to be able to configure the settings, customize the style, and manage the theme of the Identity App from the Amdocs DIM Admin.

Customizing the Identity App

I created designs for customers to be able to configure the settings, customize the style, and manage the theme of the Identity App from the Amdocs DIM Admin.

Customizing the Identity App

I created designs for customers to be able to configure the settings, customize the style, and manage the theme of the Identity App from the Amdocs DIM Admin.

Customizing the Identity App

I created designs for customers to be able to configure the settings, customize the style, and manage the theme of the Identity App from the Amdocs DIM Admin.

Amdocs DIM Admin - Branding > Identity App page.
Amdocs DIM Admin - Branding > Identity App page.

Identity App page located at Branding > Identity App in the Amdocs DIM Admin.

Preview - desktop resolution.
Preview - desktop resolution.

Identity App Preview in the Amdocs DIM Admin - component sidebar collapsed (desktop resolutions, light theme).

Preview - sidebar expanded - mobile resolution.
Preview - sidebar expanded - mobile resolution.

Identity App Preview in the Amdocs DIM Admin (mobile resolutions, light theme).

Design System

We leveraged Material UI-React because of its theming system and breadth of component options. Its text contrast features would also help to minimize legibility errors when customers were. In some instances, we modified aspects of Material-UI or built on top of it to suit our needs, like by creating more robust Top Header and Notification components, and by creating a design pattern for destructive actions that utilized a Danger colour added to themes.

The design system featured page templates, components, and design patterns, designed to work with themes.

Flow page template.
Flow page template.

Flow page template – unauthenticated users.

Flow page template.
Flow page template.

Manage page template – authenticated users.

Text Fields components.
Text Fields components.

Text field style variants (also available for Select component).

Elevation.
Elevation.

Elevation level in Themes.

Header component.
Header component.

Top header component.

Toast and Inline Notification components.
Toast and Inline Notification components.

Toast and inline notification component.

Credits

Amin E

 - Product Manager
Enan H

 - Product Manager
Slava L - Dev Lead
Doowon L - Engineer
Herman S - Engineer
Ivan P - Engineer
Pushpinder V - Engineer
Sean C - Engineer
Riddhi P - Engineer
Tyler A - Engineer