SDC Application

Product Design and Style Guide

The Platform

The Amdocs Service Design and Create (SDC) solution automates and integrates the design, test, and launch process for multi-vendor NFV-based enterprise services.
SDC is a mutual application designed and developed by Amdocs and AT&T.

The Challenge

The task was to create a simple and clean interface for a complex multi-step system based on AT&T’s Style Guide. Later on, new UI components were designed and added.

Style Guide

SDC Storybook

This project aims to create unified UI styled-components for multiple development teams who work on the same web-based applications.
I was in charge of the design of the components on the React side.
The components library - https://onap-sdc.github.io/sdc-ui/

Onboarding overview

A Vendor Software Product (VSP) is the vendor software used by virtual functions.
A VSP is licensed for use through a Vendor License Model (VLM) between the vendor and the service provider.
The Onboarding process supports entering vendor information, the creation of a VLM,
and the building of a VSP topology.

Onboard Catalog

The Workspace includes those VLMs and VSPs that are in draft status, while the Onboard Catalog includes ones that have been submitted and certified.

VLM Overview

The VLM Overview page lists the vendor information and links to the entities assigned to the VLM.

VSP Overview

The VSP Overview page lists the vendor information, product details, and links to the different sections which describe the product topology.

Attachments Setup

The Attachments Setup page lists the files uploaded in the template ZIP file to the VSP to supply the resources needed for the product.

Versions Page

SDC supports versioning with the use of draft versions and certified versions.
These changes are shared and synced among the users by Collaboration.

Collaboration

Collaboration allows a VLM or VSP to be modified by multiple users in parallel and provides a method to synchronize the updates between them.

Previous
Previous

Navigation Redesign of the COVID-19 Dashboard | Wireframes and Design

Next
Next

AEE Portal | Product Design