Design system

During my 3+ years as a Digital image designer (UX/UI) at TI, I co-owned visual imagery and was part of their in-house design system which followed a mix design governance approach of centralized and federated models.

Here are some of the key areas where I held responsibility, was accountable and actively contributed -

p.s. For ease of explanation, I'll use iconography as an example here.

Visual consistency

In a large company as TI, the presence of siloed teams working with disjoined communication was quite inevitable. An organization-wide design system and governance ensured visual consistency across products and departments.

As a visual and UX designer, I worked with various silo teams in educating them about the power of a design system and brought them onboard for a visual design revamp. I also lead the team to create a process (Jira workflow) to ensure TI iconography goes through proper reviews (UX/UI, Technical, Global) thus verifying consistency and quality.

I found that the common reasons for visual inconsistency in TI.com were -

Here are the before and after states of icon consistency -

UI audit

Creating a design system is easier than maintaining and sustaining it. I conducted extensive UI audits - researching, examining heat maps and highlighting use-case pages with significant inconsistencies, re-classifying existing visual elements in style/component libraries, and re-structuring assets in AEM DAM. This helped in maintaining sanity in the system.

Here are some of the key things I found for illustrative icons during my discovery and research -

Faster iterations

In a company which is large scale, geographically diverse and has taken over multiple other companies, the number of webpages are in hundreds and the number of screen iterations that need to be done are in thousands. Creating a brand new element is time consuming and using a placeholder doesn't make the look-and-feel authentic and makes it difficult to visualize screen. In a stakeholder meeting, this can cause more damage in communicating a design message than supporting it.

As a digital designer on the design system team, I created highly organized, up-to-date libraries of UI assets that could be easily used by fellow ux designers (in UXPin and design system microsite) and content authors ( in AEM). This helped reduce iteration time by providing designers and content authors with a ready-to-use library and ensured they were using updated assets.

Here is an screenshot from the 'action' based UI icon library. A few icons are labelled as deprecated (no longer in use and are replaced by a new one) so that designers don't end up using them

Enhanced visual language

I created iconography to enhance TI's visual language benefiting product identity, content identification, and helping users to navigate better through various product experiences.

Each illustrative and UI icon request is thoroughly analyzed and triaged. Design thinking and conceptualization is done and symbol options are created. These are then internally UX/UI reviewed to check for reusability and the ones which convey the messaging appropriately are chosen. Throughout the process, business/engineering teams are kept in the loop for feedback and Technical reviews for technical accuracy of symbols. The icon also undergoes a Global review where a team of global reviewers ensure that the symbol is culturally appropriate (isn't offensive in any culture worldwide)

Design system as an educational tool

Educating a team about a design system is as important as creating a design system. I wrote robust and easy-to-follow usage guidelines and best practices for visual imagery components (like iconography, product showcasing, banners, literature covers, third-party assets etc.). This helped in seamless on-boarding of new designers or individual contributors like digital marketing managers/page authors who are new to UI.

I also acted as a bridge between design and non-design teams (or anyone who could benefit) by routinely presenting to non-designers about 'why and how to use our design system. This brought people from various backgrounds come to the same page which further helped in making better business designs, while prioritizing UX/UI design.

Imagery in UX design system

As a co-owner of visual imagery under TI's design system umbrella, I helped in building an immersive experience for TI.com users by creating accurate, relevant, high-quality, technically credible digital image assets.

Besides iconography (illustrative + UI), here are the other areas of visual design that I was responsible for.

Visualization of product portfolio

Created interactive graphical visualization for product portals to easily visualize a portfolio and take the next step in selection. This improved navigation across expansive portfolio and helped users easily select a device which wasn't earlier possible as these diagrams were static, with chaotic information and didn't adhere to TI's visual standards

Product imagery

Defined product photography and illustration guidelines streamlining product photography, ensured technical accuracy. I co-managed the project of rendering more than 2000 TI products semiconductor chips which added value by improving technical credibility and visual appeal. It ensured product is showcased in its full potential. Unlike previous illustrations, these 3D illustrations were created using Autodesk Fusion 360 with front and back views, providing the user a better idea of its characteristics and features (no. of pins, material type etc.) thus facilitating better buying decisions.

Marketing imagery

Literature cover thumbnails

Developed a template to bring consistency in the visual representation of literature cover thumbnails. I conducted a UX/UI audit to understand the discrepancies and discovered that literature when generated by an oracle yoda database system would automatically populate the first page/image as the cover. These when showcased on TI.com lacked affordances meaning they were not able to indicate users that they are clickable PDFs. Some of them didn't comply by visual image specs of 3:4 (were wither in random sizes or a 4:3 ratio) and resulted in non-brand compliant, data heavy cover images which were not brand, design system compliant and caused confusion to users. To resolve this, I created a template with TI's platform bar and an area for image plus a shadow effect element for affordance so that the cover looks like a book cover that can be opened and viewed

Image specifications

I ensured that the design system elements/components were translated well in the AEM ecosystem as AEM components. I worked closely with developers and co-owners to understand technical limitations and explore possibilities. I sanity checked imagery for following correct template and aspect ratio which ensured right size appears at the right place on ti.com. This later helped in laying the foundation of AEM DAM Renditions of which I was a big part.

Adobe Experience Manager - Digital Asset Management (AEM DAM)

As a co-manager of AEM DAM UI assets, I made sure that digital assets are highly organized, each are contained in their well-defined locations , possess correct attributes like metadata, tags, titles etc., the right naming convention is followed, correct files are populated. This further improved content authors' page authoring experience by making it easier and faster to find the right image.

I ensured that the system elements/components were translated well in the AEM ecosystem. I worked closely with developers and co-owners to understand technical limitations and explore possibilities. This led to two successful projection - AEM DAM Renditions and Product Information Management (PIM). Besides this, I published assets in SAT/UAT environments and participated in User Acceptability Testing (UAT)