Private Corporate Cloud PrimeNG Components
SCOPE
Asset library
ROLE
UI Designer
DURATION
01/20 – 09/21
Overview
A company's private cloud network is migrating to a PrimeNG Angular framework for development. Custom page components must be redesigned and rebuilt in order to accommodate this migration, in keeping with company branding and accessibility standards.
Objective
Taking on a hybrid role of a UI designer/developer, establish a PrimeNG asset library which can be utilized by designers across teams to generate design materials for both existing and new pages, while also making sure that CSS styling is standardized.
Outcome
A fully branded and accessible PrimeNG asset library was created, with which designers can quickly generate wireframes, mockups, and interactive prototypes. In addition, CSS standards were established as part of this update.
This project was completed while I was employed at a previous company. Due to NDA, I have redacted colors, fonts, logos, graphics, and data and replaced the content.
The Result
I redesigned existing PrimeNG components and custom component designs made in the previous framework to include in the design asset library. As this was a hybrid role, I had the opportunity to work on developing some of these components that I also designed, focusing primarily on HTML and CSS styling.
Alongside this, I assisted other developers in regards to CSS compliance and standards. I was placed in charge of CSS and HTML styling of many new project pages, collaborating with development teams to ensure that the look and feel of new content was consistent.
The Components
Importance of Standardization
Since the Private Cloud did not previously have standardized design or a component library in place, many of the pages within the system comprised of vastly different styling and component look/feel. While functionality may have been retained, this inconsistency in appearance led to general confusion amongst users and user dissatisfaction.
As they had to acclimatize themselves to a new page appearance every time they sought to perform a specific task, it led to frustration. Thus, establishing standards within the design system by implementing PrimeNG, and a custom component library built using PrimeNG was paramount to alleviating such unease.
Retrospective
This hybrid role of UX designer/developer was refreshing and allowed me to gain unique perspectives from both design and technical standpoints. While I faced some challenges at the start since this was my first big task after getting hired, I was able to gain substantial knowledge about the software development process, as well as begin to explore user needs. This task would eventually act as my segue into UX design as a full-time role.
Working on this task especially piqued my interest in and fascination with design systems. While this project was on a smaller scale than conceptualizing and creating an entire design system, it gave me some experience with generating reusable and scalable components, which could be used across various teams of the Private Cloud sector. Upon working on this, I made a goal of working on a design system from the very onset.
