Meta Pro Team

Art Direction, UX/UI, Wireframe, Prototype, Motion, Illustration & Branding

Role: Art direction, UX/UI, Prototyping, Wireframe, Motion, Branding, Illustration
Program: Figma, After Effects, Illustrator, Photoshop
Duration: 4 months 2022
Deliverables: Webpage, Brand Guideline, Motion Ad

‍

‍

OVERVIEW

Our team worked on re-brand of Meta Pro Team, including new branding key visuals, program toolkit, motion guideline, iconography, Awareness landing page and social marketing ads. The goal of this project is to improve brand awareness and simplify the way our users engage with Meta through the sales and support services we provide. We started from define our goal, research, generate solutions, build representations for a range of ideas, getting feedback, and lastly put the vision into effect.

‍

IMPACT*

4x Page views
3x Visitors
3x Clicks
4x Sign up
160% Search interest

‍
PROCESS

Target audience

Advertisers, Creators, Commerce Partners

‍

Goal

As Facebook changed to Meta, our program needed a refresh on the visuals to align with Meta new branding.

‍

Solution

To set up the visual tone of this new branding, we decided to start with Program Visual Guideline, a comprehensive tool kit to define what Meta Pro Team is, which we use as a foundation to build up landing page, email signature, and motion ads.

‍

‍

‍

CHALLENGES

‍

User journey

At the time of developing landing page wireframe, the linking strategy was not clear to the users as the CTA buttons were linked to different sections within the page. For instance, on the footer, originally the strategy was to have one CTA linked back to "Meet the Meta Pro Team" section. However, from the user perspective, by the time they reached to the bottom of this page, they would have a preference on which Meta Pro was the right fit to them.

Solution

Therefore, I purposed the idea of having a dedicate CTA for each type of Meta Pro provides the users a way to proceed with next step–sign up a call. I prototyped the concept to present to leadership team and got supported for execution. Six months after launch, the results indicate that the CTAs are the second most engaged click on the page.

‍

UX

Most users have their cursor on the right hand side of the screen, therefore, having content expand on the right side of the module is a seamless solution

‍

Illustration

We used illustration to bring in an artist’s touch to reflect the people that use Meta technologies and programs in an authentic and culturally relevant way. However, because of the tight deadline, we did not have time to hire an illustrator for this project.

Solution

I step in to build up three illustrations following Meta guideline and enhance the message by adding motion in After Effects. See my illustration process on the last video below.