UI Design at G-P
UI Design at G-P
UI Design at G-P
CHALLENGE 01
Designing solutions that worked for Marketing, Engineering and Product Design
CHALLENGE 01
Designing solutions that worked for Marketing, Engineering and Product Design
CHALLENGE 01
Designing solutions that worked for Marketing, Engineering and Product Design
CHALLENGE 02
Working with the design team to establish system processes that scaled
CHALLENGE 02
Working with the design team to establish system processes that scaled
CHALLENGE 02
Working with the design team to establish system processes that scaled
CHALLENGE 03
Managing two workstreams. Iterative improvements and a strategic approach
CHALLENGE 03
Managing two workstreams. Iterative improvements and a strategic approach
CHALLENGE 03
Managing two workstreams. Iterative improvements and a strategic approach

Problem

G-P's platform had seen substantial updates and a significant brand refresh since its initial launch. However, there was a critical gap: no clear visual strategy or design principles were in place for the platform. As the next phase of our brand evolution approached, it was evident that we needed to align with the marketing team and develop a strategy to visually update G-P, ensuring consistent brand representation throughout the platform and website.

G-P's platform had seen substantial updates and a significant brand refresh since its initial launch. However, there was a critical gap: no clear visual strategy or design principles were in place for the platform. As the next phase of our brand evolution approached, it was evident that we needed to align with the marketing team and develop a strategy to visually update G-P, ensuring consistent brand representation throughout the platform and website.

STAKEHOLDER 01
The Product Design Team, needing more flexibility from the design system.
STAKEHOLDER 01
The Product Design Team, needing more flexibility from the design system.
STAKEHOLDER 01
The Product Design Team, needing more flexibility from the design system.
STAKEHOLDER 02
Engineering teams needing more consistency from the design team.
STAKEHOLDER 02
Engineering teams needing more consistency from the design team.
STAKEHOLDER 02
Engineering teams needing more consistency from the design team.
STAKEHOLDER 03
The brand marketing team who needed the platform to complement the brand.
STAKEHOLDER 03
The brand marketing team who needed the platform to complement the brand.
STAKEHOLDER 03
The brand marketing team who needed the platform to complement the brand.
STAKEHOLDER 04
The product team who needed faster development of features.
STAKEHOLDER 04
The product team who needed faster development of features.
STAKEHOLDER 04
The product team who needed faster development of features.

Team

I worked with the design system team to establish a set of design principles and guidelines for our product design teams.

My primary focus was the visual strategy, which I worked on with the support of the UI Design team. We collaborated closely with the Product Marketing team to figure out how to integrate the brand identity into the platform.

Later on, the UI Shell team joined in, initially making small adjustments to basic components to align them with the new brand. They played a more significant role as we embarked on the larger task of updating the overall visual design of the G-P platform in line with our strategy. This collaborative effort allowed us to transform our vision into a cohesive and practical design.

I worked with the design system team to establish a set of design principles and guidelines for our product design teams.

My primary focus was the visual strategy, which I worked on with the support of the UI Design team. We collaborated closely with the Product Marketing team to figure out how to integrate the brand identity into the platform.

Later on, the UI Shell team joined in, initially making small adjustments to basic components to align them with the new brand. They played a more significant role as we embarked on the larger task of updating the overall visual design of the G-P platform in line with our strategy. This collaborative effort allowed us to transform our vision into a cohesive and practical design.

Strategy

As mentioned, I worked with the Product Design Team to collaboratively formulated core design principles. I then crafted a draft of clear and easily digestible principles to provide a solid foundation for our visual guidelines.


Together with the design systems team and the team manager, we refined these principles to reflect a cohesive view of design at G-P. We then presented these to our leadership team and got approval to start implementing.


Using these principles as the guide, I created comprehensive visual guidelines that would shape the future design of the platform. This iterative process ensured that our strategy was well-grounded and aligned with our broader objectives.

Together Agency

The brand team and The Together Design Agency teamed up to refresh the G-P brand and website. We looked to their work as a guide for our own updates.

Their vision for the platform was particularly effective, and I saw its potential as an approach that would receive brand approval but not force the platform team to adopt all marketing brand guidelines without question.

By using their concepts as a foundation for our visual designs, we not only created a consistent brand experience that allowed the platform to look and function effectively, but also strengthened our relationship with the brand team through this collaborative approach.

Implementation

With limited resources, we had to update our design system gradually. We started with simple changes to buttons, borders, and colors to match the brand. Then we worked on a long-term visual strategy based on best practices, while also refining individual components and patterns weekly. This way, we could balance speed and quality in our design updates.

I analyzed UI and accessibility standards, aligning them with user needs. Armed with this research, I revamped key screens on our platform to adhere to these standards. This became a guiding ‘North Star’ for the design team. While the initial templates weren’t flawless—prioritizing typography, shadows, animation, and color—they served as inspiration and a general direction.

Outcomes

Although the implementation of our visual strategy is an ongoing, long-term effort, we've transitioned from a product lacking clear visual direction to one that now follows a well-defined path. This approach has proven effective for the Brand, Product, and Engineering teams, ensuring alignment and a clear direction for our future work.

G-P Dashboards before the UI strategy was implemented.

G-P Dashboards before the UI strategy was implemented.

The new modular dashboard in development and planning. We chose a modular approach to offer siloed design teams more flexibility when designing dashboards for their projects.

The new modular dashboard in development and planning. We chose a modular approach to offer siloed design teams more flexibility when designing dashboards for their projects.

Overlay designs before new UI strategy.

Overlay designs before new UI strategy.

The new overlay design, bringing consistency across teams using the component.

The new overlay design, bringing consistency across teams using the component.

The new table component in development and planning

The new table component in development and planning