A UI/UX Case Study:

Developing An Iconography System As Part of a Visual Design Language

When I joined the Texas Instruments Digital Experience team as a UI Designer, I was given the monumental task of standardizing iconography across TI.com. I surprised when I realized how much would be involved in this process, and how big of an impact this would have on the entire organization. I certainly never thought I would be writing a Case Study about this in the future.

There is so much involved in integrating a system which would be used as a core element in the pattern library and become part of the brands visual language.

In this Case Study, I will walk you through the journey of defining the organizations real needs; developing a plan; iterating on what the best approach would be; developing design guidelines, validation through testing; and promoting the usage and importance of standardized imagery.

Through this project, I learned that iconography plays a key role in a brands visual language, and contributes to a better user experience. I also learned that changing the mindset of an organization, which only recently adopted the concept of design thinking, was going to take time.

A Trusted Brand Since 1951

Texas Instruments is a brand that engineers trust for innovative products. As pioneers in the semiconductor industry, they design, manufacture and sell integrated circuits that advance technology across several different markets to engineers all over the world.

Focusing primarily on their B2B communication channels, their digital presence and online store which sells over 80,000 products, is managed by the Toronto Software Studio team which falls under the IT department.

The Problem: Miscommunication

For years, TI did not have an appreciation for good UX/UI. One-off solutioning was how the organization operated. TI.com was updated by many different marketers and stakeholders who had full discretion in promoting their products. Other than brand colors and fonts, there were no imagery standards in place to follow in the digital brand guidelines. Everyone had a different style preference and opinion on what imagery and style should be used to support their messages on their pages.

Since there was no common visual language shared, miscommunications happened everywhere. A shift in management occured and a design thinker was brought onboard to oversee TI.com. She saw many challenges with this and wanted to drive change.

Diving Deeper

Just before I joined TI, the enterprise decided to switch their CMS over to Adobe Experience Manager (AEM). Management wanted to enable stakeholders and engineering teams to author and update their content easily using templates and drag and drop components.

The Core UI team developed well-thought out templates, and many different components that a page would feature. They spent months in training sessions with the different marketing teams showing them how to use these components to build pages. This included best practices, helpful guidelines and strategies for Information Architecture.

It took several months to migrate the entire website over; which was done in multiple phases. Phase 2 involved migrating all of the imagery that appeared across TI.com over to AEM’s Digital Asset Management system (the DAM).

An ‘Epic’ JIRA Story: Iconography Standardization

I was assigned as the lead designer in developing an iconography system that would be scalable, reusable, and integrated into the TI digital pattern library named Polaris. The project was going to be extensive, and we would need buy-in from various business groups in order to invest the time and effort that would be involved in making this a priority for the organization. It was going to take multiple presentations, proof of concept and real data, pulled from user testing, to make this happen.

The Iconography Standardization Epic was broken down into several different tasks which would all take significant time and several sprints to complete. These tasks were done in 3 phases:

PHASE 1

• TI.com Iconography Audit

• Design Research (Current trends, etc)

• Competitor Research (Technology sector visual communication)
  

PHASE 2

• Style Exploration

• Defining a Style Direction

• Defining Use Case Scenarios / Creating Before and Afters

• Technical Consultations (Optimization & Integration)

• Developing Design Guidelines

• Customer Testing

PHASE 3

• Collaboration with Corporate Branding

• Presentations to the Organization

• Documentation & Training

• Integration to the Pattern Library

InVisioning a Plan

I started an InVision board brain dump, where I could sketch ideas, collect my findings, and define limitations. Through the use of the Digital Asset Manager, I was able to complete an Icon Audit, and showcase the wide variety of styles seen across TI.com— my favourite being the myriad of 3D gradient clipart ones. I sorted these into groups and showed examples of where they were being used.

I conducted competitor research on how other technology companies and semiconductor manufacturers integrate iconography as part of their digital experience, and put together some well done examples of how they achieve omni-channel cohesion.

My InVision board grew as I captured thoughts about why creating design standards and direction on something as small as an icon would benefit TI as an organization, starting with just the web space and then thinking about how it would grow from there. I showed images of these icons being used in their current state and then possible directions for a new state which would resonate with our customers.

Defining An Approach

From the audit and most common use-case scenarios, I came to the realization that Texas Instruments actually needed 2 separate types of icons:

PART 1: UI System Icons

We started with standardizing UI Iconography, as these were global elements that could be implemented quickly. UI or System icons represent universal objects, functions and utilities. They are very minimal in detail, appear small in size and are usually inline beside a text link.

Since TI’s “Power Designer” online application was utilizing Material Design Guidelines which also had system Icons, I proposed that we leverage Google’s successful Material Design Iconography System for all of our function based iconography. As a beautifully crafted icon system that is free for use in digital products everywhere, we felt that we didn’t need to recreate the wheel on these; and that this direction would be easy for designers at TI to implement. The plan was to completely replace all png and icon fonts with new scalable SVG icons. This ensured readability and clarity, even at small sizes.

I started with replacing all of the Global Navigation and Document Icons, which I was able to leverage some of these from the open source Material Icons library, and then create a couple new ones that were specific to TI. The downloadable template from Google made it simple to adhere to the grid, and produce effortlessly. and mocked up screenshots with these new icons.

For UI icons that appear beside a text link (mostly teal) I proposed that they inherit that font colour, instead of what was always red. This design decision connected the two together better, and reserved the red for purchase CTAs. Icons that are directly associated with ordering a product would be the TI red, as we wanted to give them the most importance, along with the larger Order Now red buttons.

If a new icon was needed, I created a step-by-step icon creation guide for designers to easily follow, along with specifications and a downloadable template. Once an icon was created, it would go through a Pattern Library Approval Process. Designers would work with the design lead in making sure the icon didn’t already exist; that it aligned with the design guidelines and that it accurately depicted the object or function. Finally, the icon would get approved and published as part of Polaris.

After completing many design reviews on the initial set of new icons, design guidelines and specification documentation, I worked with the Developers in publishing the UI Iconography system to the Pattern Library.

Part 2: Illustrative Icons

The second category of icons was much larger. Illustrative, or visual icons are used as supporting imagery to convey a core idea. They are designed with simplicity, and can be understood by a universal audience. Through my audit and the research I conducted, I realized that these icons needed to be broken down into 3 sub-groups for TI, all serving different purposes:

Generic: Representing an object or category, universally recognized & understood
Business: Representing a specific TI product or business category
Technical: Smaller component of a Schematic diagram, understood by engineers

When it came to developing a style, I took some time to research what was currently trending, and what styles of iconography were easier to digest. I also considered what our brand values would align best with, and what would be emotionally appropriate for our audience. We needed to find a direction that was attainable and not too far out, yet pushed the limits.

I thought about outlined vs solid icons, mixing outlines with filled areas, two-toned, and flat vs some depth. I wanted these icons to look nice, but not too decorative. I narrowed it down to a couple very simple approaches, 1 and 3 seen below. I thought that these would resonate better with our technical minded customers and compliment content rather than distract from it and steal too much focus.

I put together a couple samples with these two styles and then asked for feedback from designers on my team and the CBC team. I collected their thoughts about what approaches they thought would fit best with the TI brand. Finally I asked the engineers on our software development team on which style resonated better with them.

My Proposed Direction

I landed on a stylistic approach that was very simple. It is current. with UI trends, and a good fit for a tech company. Our illustrative iconography would take on the following features:

• Constructed primarily of outlines for a technical feel

• Some solid filled elements when smaller details are needed

• One consistent line weight

• Rounded stroke ends and corners for an approachable and friendly tone

• Flat perspective, no depth

• TI Charcoal Grey, single color

• Exported as SVG files

Recreating top used Icons

I started by recreating the common icon types that we needed on the site, and realized that illustrative icons were representative of wither a category or a concept. I illustrated this through the below examples to help the business gain a better understanding of these icons and how they were used.

Working with the each business team, I pulled examples of marketing pages from each sector that had high engagement, and then recreated icons seen on these pages. I mocked up samples of before and afters and how our new iconography would look.

ExplorATION OF coloUr

The next concern was colour. I thought about the problem of different business owners all having their own style and colour preference, and how they would want to continue to differentiate their product pages using colour.

I consulted with dev to see if we could be using SVG files instead of raster images, and found out that this was possible. Since pages were now being built using preset templates and components, I realized we had an opportunity to customize parameters and limit options of each AEM component in the Pattern Library. SVG icons would all be black, and we could then assign an icon the proper brand colour automatically with CSS depending on what component it was dropped into. That way we could have complete control over how icons appeared on a page, and there would be consistency across TI.com. Dev was able to provide a successful proof of concept. It was a win!

I decided that colour could be explored later on, and that defining the iconography itself was the primary goal. Using the pages provided by the stakeholders, I mocked up more use-case scenarios, and showed how they could work in the various template components.

Technical Icons

The last step was to explore the technical icons that were just as important to standardize. I collaborated with the Systems team that worked with our design tools and applications. The lead designer from that team was excited about this and mentioned that he had already put together a library of common elements that made up a schematic diagram.

All three Illustrative Icon types would share the same design style and specifications. I took a couple of the common schematic elements and applied the Illustrative icon style to them to see how this would work. The line style was perfect for these technical elements, however, the line weight needed to be reduced by a couple points so that more details could be legible where necessary. This was the only difference betwen Illustrative and Technical Icons which I made very clear in the design guidelines, and could be seen in the template.

Customer Testing

Now that we had approval on our direction from CBC and they were officially on board, we proceeded to testing the Illustrative Icons. We determined that we would collect customer feedback from two main methods - Qualitative Survey and Quantitative engagement data

Qualitative Customer Survey

We wanted to collect reactions and opinions on what customers would think of TI’s new iconography style. We crafted a short (5 minute) survey using Vision Critical that included multiple choice questions, as well as some short answer—hoping that customers would give us a little more insight.

These surveys were sent out to a small database of TI engineering customers. We showed them samples of the new iconography, as well as being used on the website. Questions were kept simple; asking if they found that the new icons did a good job in supported the messaging, and if they found them helpful in decision making.

We ran the survey for 2 weeks. It was key to keep most of the questions to multiple choice where they didn’t have to spend too much time on it, which also helped us automatically sort through data. Customers also had the option to provide their opinion in short answer fields. The survey was a success; most of the feedback was positive, and some responses were quite comprehensive.

Quantitative A/B Testing

As a data-driven company, TI has a dedicated team user testing team which uses a software application called “Evergage”. The measured impact on any design decision was needed in order to back up design decisions with a goal to becoming more user centric. A simple A/B test works by directing 50% of traffic to Test A, and 50% of traffic to Test B.

I worked with product owners and engineers to find out which pages had high engagement that I could mock up and set up for A/B Testing. Going into this collaboration, I felt like this project was hardly worth while in their eyes, but they did assure me that data is data and “no test is too small”. Their reco for this one was to swap out the images in test A manually for test B after a set duration, and then track engagement data manually. Evergage would then calculate "statistical significance" showing the winner.

For our first A/B test, the goal was to measure the impact and levels of engagement from swapping out complex imagery with our new iconography. This overview section on a sensing technology marketing page had 3 Overview Cards that displayed images of general concepts. Test (A) would show the current complex graphic imagery or (B) a set of our new illustrative icons.

Results for this test proved that icons did perform slightly better than the mixed media types...but not as well as we hoped. It was a positive outcome however, that swapping out these dated image types for our illustrative iconography was not going to have a negative impact on user engagement. 

The second A/B test was to simply compare colour, red icons vs dark grey. We were exploring the possibility of colourizing icons as red that would be placed in these specific “Featured Overview Cards”. We realized that with red icons were too vibrant; the eye goes directly to them first, and takes longer to digest the text below. Grey icons on the other hand appear secondary, and the eye can easily digest the text below quicker.

Knowing that stakeholders would probably want to use red to draw more attention, we wanted to wanted to see if the colour distracted customers from content or drew them closer. Our hypothesis was that the grey icons would have better engagement.

It was surprising to learn that engagement levels were very close to even and that colour didn’t have a negative or positive impact. The grey icons only performed slightly better, but it was nonetheless a win. This test provided us with that data that we needed to prove that brightly coloured icons did not necessarily improve engagement. We would have the ultimate decision on rolling out our new iconography system in TI’s secondary brand colour, charcoal grey.

Collaborating with Corporate Branding

Being a trusted tech company, depicting innovative technologies is important to inspire and win over customers. With many stakeholders in the organization having a “More is More” mentality, they loved to use complex photographic imagery, illustrations and even collages—so that multiple concepts could be crammed into one image.

We needed to collaborate with Corporate Branding. Once we had this team on board, obtaining approval from the other necessary business groups would be easier and we would able to proceed with implementation. I put together a robust presentation deck that they could shop around which walked them through the whole story:

• What is a Visual Design System and why do we need it

• The problem of having a disconnected visual language (how it hurts the brand and leads to a poor user experience)

• How this problem got to be so big and what has been the root cause

• Icon Audit (Current State): Walking through the many of examples currently used

• Icon Solution (New State): A New System & how it aligns with the TI Brand

• Benefits of using Iconography when appropriate / When to use vs other imagery type

• Outlining the 2 types: Before and Afters

• Examples of usage in omni-channel experiences

• Accessibility through Polaris Integration (Pattern Library)

• Design Guidelines for Designers & Approval Process workflow

• Customer Testing Plan

• Implementation Process & Timeline

The Corporate branding and Communications team responded extremely well to our entire initiative. They thought the direction we chose aligned well with the brand voice: clear, direct, professional and friendly. The team was blown away by the Icon ‘Soup’ Audit we presented. The head of CBC expressed that we should be standardizing all image types — starting with Illustration, then diagrams, and then finally putting guidelines in place for product photography, environmental and people.

Promoting Iconography to the Organization

The last phase of the project was to present our new iconography to the various groups across the organization, and train them on how they can begin to use it across their communication pieces. Together with the Corporate Branding team, we presented our standardization initiative and provided in-depth education across all visuals, as part of the newly updated Corporate Narrative.

We did general training on when to use iconography vs other image types. I encouraged business groups to use icons to convey a core idea to a universal audience quicker so that they could scan content faster; I also explained that they could continue to use high quality photographic imagery that depicted technologies where that would drive more engagement. This was outlined as part of our Do’s ands Dont’s in our imagery guidelines on Polaris.

Driving Home the Benefits of COHESION

The organization learned that we now have an cohesive iconography system in our toolkit, which could remove language barriers, and improve customer engagement. I explained the importance of reducing cognitive load and why images that were more complex such as collages were dated, took longer time to digest and added confusion or barriers to customers finding what they were looking for. Business groups were sold with the fact that we needed to reduce any pain points in a user journey that would deter them from moving down the purchase funnel.

I also gave more technical training on how the SVG icons were optimal for page load time, how they were scalable without loosing resolution, and a single icon could replace multiple assets in the DAM. With that statement, I presented an image showing 2 perfect examples of how one icon can replace many, and pages across TI.com can now begin to speak a common language.

We lastly encouraged marketers that campaigns could build off these visuals, while still continuing push the boundaries. We ensured the organization that these systems provided guidance for creative thinking, not for constricting it.

Pattern Library Integration

After multiple rounds of presentations and getting approval, our new iconography system was officially integrated as part of our imagery on Polaris. UI and Illustrative iconography each had a brief introduction, design and usage guidelines, and a downloadable template.

Icons were saved out as SVG’s and uploaded to the DAM library into a catergorized folders, along with corresponding meta-data. Designers could drag and drop them into an image component on a page, or download as stand alone files for other applications.

Once we had enough of the most commonly used icons published, we began to archive the the numerous old icons that represented these concepts and replace with our new icons. Our icons were now live across various pages on the site, and our asset library became lean. Pages were now optimized with faster load times, and they finally had a unified visual language.

Conclusion

Although the organization responded very positively to the whole standardizing initiative, changing habits using design thinking proved to be challenging. With time, real-world evidence through customer testing and improved metrics, the organization came to realize that they could work more efficiently and have a better connection with their customers.

Designers and marketers across all teams were excited about the new system which they could get started using in their current projects. It was a huge leap forward for TI in becoming more competitive and relevant in the current market, and well worth the investment.

A memorable user experience was now possible from any touch-point or interaction that a customer would have with the TI brand; and the organization could now focus more on innovation and future endeavours.