Innoviz

Role

Product designer

Timeline

May 2023 - August 2023

Team

AI Product Design Center

Overview

Innoviz 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.

My responsibility includes "Image Generation&Customization Function"

  1. Conducted operation analysis to categorize marketing visual content
  2. Developed wireframes and iterated based on feedback of usability test
  3. 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
Dependence on
external resources
Lack of agility to respond changing market

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

What marketing operations they have now?
HSBC Wealth App
In-Platform Operations
Channel Placement
What kinds of visual contents they usually use?

Website Hero Banners, Social Media Covers, Brochure Covers, Photo Backgrounds, Icons, Photo Portraits, Illustrations, Infographics, Product Mockups

What models we trained for visual contents?

Photo Portraits

Illustrations

3D Characters

3D Icon

Master Screens Wireframes - 1st version

Home Page
Image Generation Page
Image Inpiant Page
Image Outpaint Page
Canvas Editor Page
Image Modal

Usability Test 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 images through image2image function

  • Edit generated image to make it aligns brand guideline and ready to use

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

Master Screens Wireframes - 2nd version

Home Page
Modification

  1. Removed the "Image Creation" tab from the navigation bar.

  2. Introduced a popup window for selecting tags. Tags define the type of image users want to generate (e.g., sports, lifestyle, leisure)

Impact

  • Improve image generation quality and users understandings of models capabilities

Image Generation Page
Modifications

  1. Added a structure toggle for prompts, which dynamically adjusts an input field to provide tailored outlines based on the selected model and tag.

Impact

  • Reduces the learning curve for users writing prompts by offering guided structures, improving generating efficiency and user experience.

Image Modal
Modifications

  1. Centralize advanced editing options (e.g., Upscale, In/Out Paint, Canvas Editor) in one area

  2. Moved from a feed-centric homepage to a focused creation page, placing the image-generation workflow front and center

Impact

  • Minimize the learning curve, and encourage users to engage more deeply with the creation process.

Final Prototype

Due to NDA constraints, the images showcased in this prototype do not use any HSBC brand or visual assets. All visuals are purely for demonstration purposes.

"Browse home page, and choose a model to start generating images"
Based on design requirements to select tags
Write prompt and adjust parameters to generate images
Click to view generated image details
"Enter the canvas to make further edits to the image"

Select and adjust images from history, collections and assets

Users can also upload images from local folders to edit
Add hexagon to canvas, and drag to adjust layer
Select two layers and apply mask effect
“Browse and select an image on the homepage for inpaint or outpaint editing”
Use the brush to select the main subject and write prompts describing the changes
Select the image from generated results, or regenrate
Replace the one in the left-hand editing area
Set the outpaint width and click “Generate”
Preview and refine by regenerating or using inpaint

Style Guidline

Color
Default
Brand
Base
Shadow
Typography

Heading 1

Heading 2

Heading 3

Body

Button

Label

Medium

Medium

Medium

Regular

Semibold

Medium

Size: 26 px | Line Height: 30 px

Size: 22 px | Line Height: 26 px

Size: 20 px | Line Height: 22 px

Size: 16 px | Line Height: 22 px

Size: 14 px | Line Height: 20 px

Size: 12 px | Line Height: 18 px

Heading 1

Heading 2

Heading 3

Body

Button

Label