Zap Art

A generative AI platform developed for empowering HSBC marketing team to create visual content with greater speed and consistency

Introduction

Zapart is an AI-driven image generation platform developed for internal use at HSBC, designed to streamline visual content creation through advanced generative models. The platform enables users to produce customized, high-quality visuals for various marketing and branding needs, enhancing efficiency and creative flexibility within the organization.

Role

Product Designer

Teams

Timeline

May 2023 - August 2023

Frida N, Yvette M, Joshua H, Zuiqiang W, Steven J, Mori J, Tina H, HSBC Marketing Team

My responsibilities covered image generation and customization function

  • Conducted operation analysis to categorize marketing visual content

  • Developed wireframes and iterated based on feedback of usability test

  • Created final visual prototype that ready for developing

Background

HSBC's marketing department faced challenges in efficiently creating and managing visual content across diverse global markets. The existing manual content creation process was time-consuming, resource-intensive, and required significant coordination to ensure consistency with HSBC's brand guidelines and regulatory compliance.

⏳️

Time-Consuming Content Creation

💻

Lack of Agility to Respond Consistently Changing Market

🗣

Dependence on External Resources

Marketing Operation Analysis

Based on the analysis of marketing operations and the visual content they frequently use, I concluded that the following AI models would be optimal for addressing HSBC China’s visual content needs

HSBC China App

In-Platform Operations

Channel Placement

Generation AI Models

Design Requirements

After planning meetings with HSBC, the design requirements for the platform was finalized.

Image
Generation

Image Customization

Asset Management

Text-to-Image

Transform descriptive text prompts into high-quality visuals, quickly generate content for various marketing needs.

Image-to-Image

Transform existing visuals into enhanced or modified versions, adapting content to different contexts and campaign needs.

Background and Style Customization

Easily modify backgrounds and visual styles to align with different campaign themes and brand aesthetics.

Element Modification

Modify individual elements within an image, such as colors, sizes, and placements, to create multiple variations of a visual asset.

Visual Asset Library

Library of all generated visuals, with personalized collections, model-based classification, and advanced search features for easy retrieval and reuse.

First wireframes of image generation & customization

Home Page

Image Generation Page

Image Card

Canvas Page

Usability testing with HBSC marketing team

Conducted ten 1:1 interviews to test our working prototype with users and pinpoint any usability errors. We wanted to make sure our design was intuitive, efficient, and clean.

Participants

  • Marketing Managers

  • Digital Marketing Specialists

  • Compliance Officers

  • Content Creators

Tasks

  • Write a prompt to generate an image

  • Generate an image through image2image function

  • Edit generated image in canvas to make it align brand guidline

Iteration Takeaways

  1. Potential copyright risk in canvas editor because users may upload visual contents locally

  2. Unstable image quality due to unfamiliarity with generative AI and design tools

Final Prototype