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 a need to demonstrate the capabilities of ULM (eventually rebranded Amdocs DIM), a digital identity and user entitlements product, that mostly existed in the back-end. The team was assisting Sales by iterating on an IoT demo and re-branding it for potential customers to help better showcase what ULM could do, but it was difficult to work with.

We saw an opportunity to develop a product that would not only support Sales, but also deliver 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 Designer

Company

UXP Systems (acquired by Amdocs)

Industry

Identity & Access Management

Year

2019–2023

Contributions

Product Design
Design System

Design System

We decided to leverage Material UI-React because of its theming system and its breadth of component options. We sought to strike the right balance between making the product highly customizable so that customers could reflect their brand and personalize the product, while also developing a system where theming would be a fast process.

While we worked, I detailed component usage, anatomy, behaviour, and specifications, and documented design patterns as they emerged. We also built a system where customers could change the default language on the Identity App and add localization via a dictionary file.

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.

Product Design

A key component of the product was something we called Core Processes – a series of workflows and APIs that encapsulated common use cases. Customers' engineering teams could integrate Core Processes into their own UI to enable product functionality.

I worked closely with out engineering team to get an in-depth understanding these Processes and identify the steps with user-facing components to build, which led to creating a series of detailed user flows. These user flows also served as documentation of labels and identifiers for analytics and localization.

Using the user flows as a guide, I designed the Identity App to be highly configurable to cover all use cases, while simultaneously continuing to develop the theme system and overall design system.

Onboarding & Authentication

Customers could configure the UI to have a combined point-of-entry for both onboarding and authentication, or a separate point-of-entry. When separated, onboarding and authentication could be configured to be a single step or mutltiple steps. Onboarding was especially configurable as customers could choose from a number of identifer-related options and customize the content and number of steps. In the first version, the product only supported authentication with password and social connections, with multi-factor authentication and passwordless features coming in later releases.

Onboarding & Authentication

Customers could configure the UI to have a combined point-of-entry for both onboarding and authentication, or a separate point-of-entry. When separated, onboarding and authentication could be configured to be a single step or mutltiple steps. Onboarding was especially configurable as customers could choose from a number of identifer-related options and customize the content and number of steps. In the first version, the product only supported authentication with password and social connections, with multi-factor authentication and passwordless features coming in later releases.

Onboarding & Authentication

Customers could configure the UI to have a combined point-of-entry for both onboarding and authentication, or a separate point-of-entry. When separated, onboarding and authentication could be configured to be a single step or mutltiple steps. Onboarding was especially configurable as customers could choose from a number of identifer-related options and customize the content and number of steps. In the first version, the product only supported authentication with password and social connections, with multi-factor authentication and passwordless features coming in later releases.

Onboarding & Authentication

Customers could configure the UI to have a combined point-of-entry for both onboarding and authentication, or a separate point-of-entry. When separated, onboarding and authentication could be configured to be a single step or mutltiple steps. Onboarding was especially configurable as customers could choose from a number of identifer-related options and customize the content and number of steps. In the first version, the product only supported authentication with password and social connections, with multi-factor authentication and passwordless features coming in later releases.

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 identity, and is adapted to suit various configurations and a variety of enabled or disabled features.

User management

This area allows authenticated users to manage different aspects of their identity, and is adapted to suit various configurations and a variety of enabled or disabled features.

User management

This area allows authenticated users to manage different aspects of their identity, and is adapted to suit various configurations and a variety of enabled or disabled features.

User management

This area allows authenticated users to manage different aspects of their identity, and is adapted to suit various configurations and a variety of enabled or disabled features.

Profile (dark theme, desktop).
Profile (dark theme, desktop).

User management area - Profile landing page (desktop, dark 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

Customers could customize the style of their Identity App and manage themes in the Amdocs DIM Admin.

Customizing the Identity App

Customers could customize the style of their Identity App and manage themes in the Amdocs DIM Admin.

Customizing the Identity App

Customers could customize the style of their Identity App and manage themes in the Amdocs DIM Admin.

Customizing the Identity App

Customers could customize the style of their Identity App and manage themes in 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).

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