Design Systems Archives - GM Creative https://gmcreative.design/portfolio-category/design-systems/ GM Creative Mon, 25 Mar 2024 21:51:29 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 196635901 Citi CDS https://gmcreative.design/portfolio/citi-cds/ Wed, 11 Aug 2021 01:03:00 +0000 https://gmcreative.design/?post_type=liquid-portfolio&p=9398 Winter is coming

The post Citi CDS appeared first on GM Creative.

]]>

Citi CDS

A design system which creates a consistent experience across iOS, Android and web.

Scroll

Project Brief

Citi’s atomic component library extends across multiple digital platforms—iOS, Android, and Web. It serves as a crucial resource for experience designers and engineering teams, empowering them to create both new and existing product flows efficiently and cohesively.

Client

Citbank

Role

UI Designer

Date

2019

Challenge

The existing design system lacked refinement and updates as the product and tools evolved. Our core design language relied more on design rules than on completed templates or pages.

Design Process

Research

The core factors that played a in the research process:

  • What product teams owned which features?
  • Understand the current work flows of our engineering partners on the various platforms.
  • Review the internal integration process from sketch to code
  • Pain points for current designers and engineers
  • Current testing environments/apps being used by engineers?
  • InVision Design System Manager tool for design system documentation and story book integration

Design Process

The first step in the inventory process was to gather the most frequently used flows from the current design files across different teams. This enabled us to better understand how to restructure our design system effectively. These foundational elements needed to be redesigned using Sketch.

After redesigning the initial flows and comparing them, we observed inconsistencies with brand colors, spacing, font styles, and font weights across the various flows.

Theming

The concept of theming played a crucial role in the foundational process. This ensured that our system was not only accessible but also catered to all three segment groups within Citibank (Blue, Priority, and Gold), while also supporting both dark and light modes.

Sharing

Utilizing InVision Design System Manager (DSM) as a cloud-based solution enabled us to upload Sketch files to DSM and synchronize changes seamlessly. Additionally, DSM managed documentation and maintained version history efficiently.

Results

— Redefined Atomic component library

— Theming solution

— Component organization

— Documentation and story book integration via DSM

— Naming conventions

Share on

Previous Citi ID

The post Citi CDS appeared first on GM Creative.

]]> 9398 Developer Hub https://gmcreative.design/portfolio/developer-hub/ Fri, 30 Jul 2021 03:21:55 +0000 https://gmcreative.design/?post_type=liquid-portfolio&p=9141 The post Developer Hub appeared first on GM Creative.

]]>

Developer Hub

Scroll

Project Brief

In 2016, Citi Bank launched a global API developer portal. Allowing developers to rapidly build applications leveraging the various API’s. The main objective of this redesign was a user-centric experience focused on providing particular user groups with the information necessary to learn more about the offering and overall capabilities of the API’s

Citi has teamed up with several leading companies, including Mastercard, Virgin Money, and Wonder. Earlier this year in the U.S., Citi’s Pay with Points API started providing Citi ThankYou® Rewards members with an eligible Citi credit card the option to use points to cover all or part of their purchases with a statement credit when using their card to make purchases on BestBuy.com and in the Wonder App.

Client

Citbank

Role

UI Designer

Date

2018

Design Challenge

The original website was built to meet basic business requirements and lacked a user-centric design and educational approach. It also featured a limited number of reusable design system components.

Previous homepage design 2016*

Project Goals

Take advantage of the experiential-learning opportunities built into many programs. You can work in labs on and off

REFINE USER
EXPERIENCE

EDUCATE VISITORS ON API OFFERINGS

CREATE/DEFINE USER PERSONAS

ESTABLISH A DESIGN SYSTEM

User Research

Evaluated The Current Experience

The initial step was an audit of the current experience. We reviewed click heat maps, web analytics and support tickets. These helped us make informed product and design decisions.

CLICK HEAT MAPS

WEBSITE ANALYTICS

SUPPORT TICKETS

Persona Development

Established User Personas

Based on the data collected and reviewed we took a further look into the types of users visiting the site. This gave us a better understanding on how to structure the information and overall experience.

Building products using the API and reviewing documentation.

Understand the API offerings and how they reacted to product needs.

Focused on use cases and data to make informed product decisions.

Design Process

Wire framing & Validation

Our learnings from the previous steps and combined them into a homepage wire that featured paths for each user group while also fulfilling business goals and requirements.

Design Process

Design System Audit

After reviewing the existing design system, I discovered the following items needed to be addressed:

  • Type Ramp
  • Brand Colors
  • Grid System
  • Spacing Rules
  • Icon Set

Design Process

Engineering Requirements

After completing both the wireframe validation and an audit of the current design system, our next goal was to understand the key requirements from our engineering team.

  • Drupal CMS Integration
  • Breakpoints & Grid System
  • Typography Scaling
  • Color Variables
  • Animations
  • Hand Off Process

Design Process

The Design System

When initiating the high fidelity designs, the goal was to create a set of reusable components which featured an editorial and modern design aesthetic while maintaining a strong brand presence within Citi’s product portfolio.

Key Metrics

514 Citi customers TESTED via Cspace

49%

Are at least
somewhat interested

29%

Are uninterested

70%

At least are potential customers

Share on

Previous Starter Kit Next Bravo Swimwear

The post Developer Hub appeared first on GM Creative.

]]> 9141