Veneer is a comprehensive design system, built to ensure cohesion across all HP products. It was created as a solid set of building blocks that allows designers and engineers to create high-quality experiences. HP strives to make each new design system update consistent as well as memorable. Veneer 3 builds on these values and adds precision, while also focusing on accessibility. My role in this project, was to facilitate the transition from Veneer 2 to Veneer 3. This included understanding the design guidelines of Veneer 3 to enable a seamless design experience.

Role: UI Designer, Visual Designer

Client: HP | TechPulse

Timeline: 4+ Months

Understanding Veneer

As I began this project, I needed to first understand the Veneer design language. I met with the visual and interaction designers on my team to gain knowledge of how they had built all of the components and how they were used. HP has an amazing design component library to reference and it serves as a great way to start building screens.

As with any good design system, Veneer leans into accessibility by providing two densities to work with. The main difference between the two are button sizes and how condensed the information is. The TechPulse portal displays a high amount of content and therefore utilizes high density to maintain user accessibility.

Standard Density

High Density

Goals

In order to familiarize myself with Veneer 3, I researched the design principles that were used to create this design system. Leveraging what was already in place would help me create the unique visual identity. Veneer 3 stands on four pillars:

Consistent

Memorable

Precise

User Centered

TechPulse

I then met with other members of my team – project managers and designers, to understand TechPulse as a product. If I wanted to create designs that were user friendly, I needed to see how they worked in context. I made sure to explore the portal myself and witness the user journey. Below are some screens of what the screens looked like before skinning with Veneer 3.

Dashboard View

A main screen on TechPulse is the dashboard, which shows the user various infographics for users to quickly view. Part of the transition to Veneer 3 was improving the look and feel of the data visualizations to be both cohesive and accessible. We then made card components that could be swapped around to create the grid layout. This shows a solid before and after of Veneer 2 to Veneer 3; it is cleaner and simplified for the user to more easily understand the data.

Consistency

As I began, it was important to think about consistency. We want the users’ experiences to be consistent throughout TechPulse, as well as any other HP products they might be interacting with. This means that when looking at a table, it should present in the same fashion on each screen it appears on.  

When designing a screen for a Report Viewer, the challenge became the side bar. I referenced two different components to achieve the design and alignment that I needed. The issue then became aligning the previous table side bar with the new version I had created. The team concluded that it was appropriate to update the design. These are small tweaks being made, but they add up to create a seamless experience.