Design system

Role
UX/UI Designer
For
Texas Instruments
Type
UX/UI, Design system management

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 -

  • Inconsistencies across market websites and microsites.
  • Conflicting guidelines and direction.
  • Presence of duplicate elements.
  • Pressure for agile solutions without discovery and research.

  • I was glad to be part of a design system who could invest the time to address these issues and contribute to a better user experience.

    One of the areas where I lead the effort was the help.ti.com site. It was quite fragmented as the silo team created their own icons which weren't brand and design system compliant.


    Here are the before and after states of icon consistency -

    help.ti.com (before)

    help.ti.com (after)

    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 -

  • Presence of duplicate icons; same symbol in different forms
  • Usage of deprecated icons in webpages
  • Content authors using varied sizes
  • Presence of contrasting styles in the same ecosystem (icon fill and icon outline styles)
  • Discrepancy between AEM asset archive and Design system library
  • Outdates styling still being used (dual colors, outdated shapes)
  • Increased iteration time for screen due to lack of fundability and reusability
  • UI audit discovery/research stage - example of inconsistent icons on TI.com

    screenshot of flagged issues during UI audit documentation

    icon refinement examples - ensuring consistency of shape, stroke, fill/unfill and upgrade of device shapes

    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

    UI icon library - screenshot

    Illustrative icon library - screenshot

    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)

    open envelope illustrative icon to support text content for sign me up

    package icon on product picture overlay to indicate that the user is going to view the package as a whole

    Tune UI icon to indicate that the products the user is going to view next are customizable

    Tune UI icon later helped in acting as a bullet in the product info architecture

    technical icons supporting technical content

    file-link icon created by reusing link and file icons for a literature PDF use-case to Indicate the user that the content is a 'direct-link'

    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
  • Product imagery - photography and illustration
  • Literature - cover and thumbnails
  • Brand elements - TI and Third-party logos
  • Banners - Homepage banners, value propositions, hero banners
  • Marketing imagery - product application, e-commerce showcase
  • Data visualization - infographics, charts, diagrams, technical illustrations
  • Imagery specifications - sizes, templates, renditions, naming conventions


  • 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

    Interactive graphical visualization for product portals to easily visualize a portfolio and take the next step in selection.


    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.

    Improved 3D illustrations of chip shots with front and back perspectives

    3D chip in a product page adding value to parameters

    Rendering of hipshot in progress in Autodesk Fusion 360

    before (2D) and after (3D) of chipshot illustrations


    Marketing imagery


    Aircraft in night mode - marketing image for avionics


    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

    Before - literature cover thumbnails (2nd row) in varied sizes, didn't follow 3:4 aspect ratio and lacked brand elements

    After - created a template to streamline literature cover thumbnail imagery ensuring visual consistency, improving affordances


    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.

    AEM Renditions tab - UAT testing


    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)

    Syntax for each asset type along with examples