I'm an UI/UX Designer based in NYC
Creative Preview.png

UX Project: Creative Preview

UX Project: Redesign Creative Preview Experience

 
 

role: ui/ux LEAD designer

TOOL: SKETCH, INVISION

Creative Preview is a M size 2-4 week design project. This project is a redesign of the ads preview experience in T1 platform.

For current workflow in T1, user has to create an ad creative for each supply source. For example, one creative for Facebook News feed ads, one for Facebook right hand side ads, one for Instagram, video and so on. The pain point is too much manual work has to be done repeatedly and it’s easy to cause mistakes.

So we introduced the idea of component based creative creation experience. One creative running cross all the supply sources. User use one image and fill out the fields in the form to meet the requirements for each supply source. Once upload the form, T1 will resize the image automatically to fit different supply source.

For supporting the whole experience, we need to redesign the whole creative preview experience. 

Design Process Summary

  1. Product Manager holds a kick off meeting with UX Designer to business requirements
  2. UX Designer hosts user research to find user types and pain points
  3. UX Designer brainstorm on different ideas and validate designs with internal users
  4. Product Manager presents their early design ideas during the UI planning meeting to get feedback on technical feasibility 
  5. UX Designer works on lo-fidelity mockups
  6. UX Designer schedules users for user testing I
  7. Product Manager and UX Designer sync up on designs and questions for the user tests
  8. UX Designer conducts user testing 
  9. Product Manager and UX Designer run a design session to discuss feedback findings and unresolved design decisions 
  10. UX Designer works on prototypes for user testing II and writes questions, schedules and runs the user test
  11. UX Designer to write up and discuss findings with Product Manager and finalize the designs
  12. Product Manager to present findings during UI planning meeting
  13. UX Designer uploads design deliverables in the ticket
  14. Product Manager to finalize product requirements and attends poker planning to triage ticket into a sprint 

Kick-off Meeting

The product requirements:

  • User needs to preview the creative through all the supply source
  • User needs to know if they met the component base requirements of the targeted supply source 
  • If the requirements are not being met, user needs to know what assets are missing without referring to the Knowledge Base
  • User wants to have the ability to add/remove/edit components in UI

Design Brain Storm

My initial thought is slip the screen into three parts. One for toggling through different supply sources, one for creative preview, one for the components.

I sketched out different layouts and ran the ideas with a few internal users. 

IMG_4592.JPG
  • #1: User can click through the dropdown to select the supply source 
  • #2: User can click on the icon to select supply source
  • #3: User can click through the dropdown to select the supply source and can see all the supply source through the icons
  • #4: User can click through the list to preview the supply source 

5 out of 5 users prefer #4 because it exposes all the supply sources at once and user can directly click on what he/she wants to preview. Dropdown hides the option and icon is not the best way to present non-action items. For design point of view, it will add a lot of design work if we use icons to identify different supply sources, we will have to design different icons for Facebook Newsfeed, Facebook Right Hand Side, Facebook Messager etc..

Low-Fidelity Mockups with Sketch

Since we have UI components in Sketch file, it is easier for me to use Sketch to quickly create mockups.

 1. The screen splits to 3 sections: Supply Sources with eligibility indicator; Image preview; Components 

1. The screen splits to 3 sections: Supply Sources with eligibility indicator; Image preview; Components 

 2. If the creative is not eligible to run on the supply source, instead of a image preview, it will show what components are missing.

2. If the creative is not eligible to run on the supply source, instead of a image preview, it will show what components are missing.

the Discuss with Product Manager about the user testing questions and set up user tests

The main purpose of this test is to let users understand component-based creative creation idea, figuring out if user understand the supply eligibility, and what action he/she will take after finding out the creative is not eligible for some supply sources.

Introduction: Product manager introduce the new workflow: component-based creative creation

Show Creative Preview Screen

Q1: Please take a few mins to look at the screen and tell me which supply source the creative can not run on?

Observe: Does user understand what supply eligibility means? Does “✔”or “X” clearly indicate what's eligible to run and what's not?

Show Creative not eligible screen

Q2: What would you do after you see the message? 

Observe: What other supporting message do user need to take action?

We set up with 5 users, 3 of them upload creatives on daily basis and new to the component-based creative concept; 2 of them manage creatives on daily basis and familiar with the new concept. 

Summary

5 out of 5 users understand supply eligibility.

5 out of 5 users point out which supply sources are not eligible immediately.

5 out of 5 users understand what action to take after seeing the message. 

3 out of 5 users want to see the full component list and point out which component is missing.

2 out of 5 users point out that they want to see the supply source split by display and video rather than mix them into one list.

UX Designer discussed with Product Manager about the user feedback

I audited the full list of supply sources and made a table of how we can categorize them.

SupplySource.png

Design changes after the meeting: 

  • Keep the component list for ineligible creative
  • Add display and video radio button to control which channel the supply source is running on
  • Use a real creative in the mockup

V1: Show the components only related to this specific supply source

1_FacebookNewsfeed_ImageDesktop.png
2_FacebookNewsfeed_ImageMobile.png
5_Instagram.png
0_FacebookNewsfeed_missingcomponents.png

V2: Show all the components that they fill in the form

1_FacebookNewsfeed_ImageDesktop.png
3_FacebookNewsfeed_VideoMobile.png
21_FacebookNewsfeed_missingcomponents.png

Second round of the user test

Main purpose is to understand if user wants to see all the component listed or only the related ones.

Q1: Do you want to see all the components listed? Or the components related to this specific supply source?

Q2: If you fill out all the components, do you want to know which components are required for the specific supply source?

Q3: For some of the supply source, there is desktop and mobile version. How do you want to see the creatives present? 

Show V1 & V2  

Q4: Which one do you like better? Why? 

We set up with 3 users. 1 user came from the last session. 

Summary

  • 3 out of 3 users like V1 because they only want to see related components
  • 3 out of 3 users wants to have inline edit ability on the component list
  • 3 out of 3 users like how it presents on V1 of desktop and mobile version
  • 3 out of 3 users knows what action to take after finding out what components are missing for some supply source

Overall,  users are happy with the experience.