VANESSA CHEUNGUI/UX DESIGNER PORTFOLIO2017

Please see my CV attached with this portfolio for my complete professional experience in chronological order.

WHO IS VANESSA CHEUNG?TAKE AN OVERVIEW OF HER BREAKDOWN:

MARKETING DESIGN 90%

USER INTERFACE (UI) DESIGN 90%

USER EXPERIENCE (UX) DESIGN 80%

RESPONSIVE DESIGN 85%

GRAPHIC DESIGN 90%

FRONTEND WEB DEVELOPMENT 90%

� RESPONSIVE HTML EMAIL PROGRAMMINGNoble Desktop� GRAPHIC DESIGN

Fashion Institue of Technology

THE EVIDENCES

Enhance the UI/UX of our internal product, Pulse, to increase customer engagement and user education. Design an internal portal for our administrators to efficiently build courses.

Work alongside with the marketing team to assist with choosing the right platform to host our campaigns.

Client-facing interaction with our international client, Standard Life, for a series of end-to-end products — setting project goals, creating site maps, exploring UX/UI design, and exporting post-production files.

Lead marketing designer to create, build, and ensure our campaigns are engaging and educating.

Design engaging and user-centric content to help company achieve strategic goals. Strategically optimize designs based on data analysis to drive stronger performance and conversion rates.

Responsible for designing and building responsive emails and landing pages across five brands.

Responsible for designing marketing campaigns, banners, print advertisements, wireframes, and websites; worked with high profile vendors such as The Real Deal and New York Times.

Provide assistance to web developers with post production work and front-end web development.

� GRAPHIC DESIGNERTeam5 (3 years)

�PHOTO RETOUCHERGotham Photo Company �

GRAPHIC WEB DESIGNERSelf-employed

�GRAPHIC DESIGNERBloomberg�

WEB DESIGNERLittleMissMatched

� MARKETING DESIGNEREveryday Health (2-3 years)

�VISUAL DESIGNERSHIFT

UI/UX DESIGNERNew York Stock Exchange (2 years)� UI/UX DESIGNER

True Office Learning (Current)

FULLTIME EXPERIENCES

FREELANCE EXPERIENCES

TRUE OFFICE LEARNINGPULSE OPTIMIZATION CARD FLIP

� UI/UX DESIGNER

2017

DEFAULT

HOVER

INCORRECT

CORRECT

EMPTY SLOT

FILLIN SLOT

Pulse is an online compliance training application that is used by vast amounts of companies including T-Mobile, Coca-Cola, and BP. We provide a fun and engaging platform for employee training — such as one of our activities below, Card Flip.

Collaborating with Instructional Designers (IDs), they identified a series of problems when writing courses: • HUD — Score and Navigation takes up a lot of space • Not enough room for longer questions • Copy on cards can be lengthier • Attempts remaining is not clear (2 Xs in the middle) • Overall use of space can be better

THE PROBLEM

CARDS COLOR LEGEND

PROPOSED SOLUTIONSAfter meeting with the IDs, the conclusion was as follows: • HUD — Only keep Course Materials and Score • Add Scenario Title into the slide • Label “Attempts Remaining”

DESIGN PROPOSITIONUsing a new grid, and by removing the fill-in card slots, we opened up a lot of space to work with. Here are some things to point out in the new layouts: • Increased question space to 1/3 of page • Increased card space to 2/3 of page • Bigger (and taller) cards to allow for more copy • New labels: Number of Cards & Attempts Remaining • HUD — reduced to Course Materials and Score only • Score is simplified to a star

Preserving the original style of the card style, while making some modifications, such as moving answer choice letter and correct or incorrect to the top, followed by answer or feedback copy. Upon choosing an answer card, the card will shift down to indicate it has been selected.

Using the stroke style from one of our new activities to show a clear differentiation from selected and non-selected cards. Upon choosing an answer card, the card will shift down and reveal whether the answer is correct or incorrect, and then turnover to provide feedback.

There is a dilemma on which design to move foward with, and so the verdict will be based on a round of AB testing.

I personally prefer Design #2 — ask me why.

DESIGN #1 DESIGN #2

SHIFT, on behalf of Sinclair, is creating a series of collaterals from posters to letter-sized printouts. For this series, I was responsible for designing four persona posters, and two sets of 2-page letter-sized infographics.

SHIFTINFOGRAPHICS

� VISUAL DESIGNER

2017

Data is provided in a word document in tables and/or in long paragraphs, with little to no guidance of how the data shhanould be separated or grouped.

INFOGRAPHIC CHALLENGE

INFOGRAPHIC DESIGN PROPOSITIONDisecting the data by grouping and assigning unique graphic elements to each set of different variables. Reuse of same elements, and modified when needed, for ease of comparision between the same variables from two different group of survey audiences.

Here is an example of how elements are used across separate documents:

• #1 and #3 is reused• #2 is modified and reused• #4 is newly added

SET 2 PAGE #1 SET 2 PAGE #2

This project posed to be a longer project than expected due to the following:

• A substantial amount of copy = inability to add visual elements

• Breaking away from layout presented along with content

PERSONAS CHALLENGE

One of the major changes to this design process was changing the original poster orientation from horizontal to vertical, which opened the canvas up for design. We were then able to create sections, enhance the readibility and flow, as well as add design elements to help break up copy better. Once the design was settled, an additional color was added to differentiate the personas.

PERSONAS DESIGN PROPOSITION

THE PROFILE

TERTIARYELEMENTS

SECONDARYELEMENT

PRIMARYELEMENTS

“THE FLOW”

TRANSFORMATION

4

3

2

1

2

3 1

The other set of designs for infogrpahics is created with a set of

completely different elements.Ask me about the other set or better yet,

my favorite infographic.

The personas took 13 revisions before we arrived at this final one.

Ask me for the process or the whole set.

NEW YORK STOCK EXCHANGESTANDARD LIFE OPEN AMAfter employers setup new employee accounts, Open AM is the next steps for employees to gain access to their payroll and retirement accounts with Standard Life.

UI/UX DESIGNER

2016

The audience for this platform is typically older, therefore instructions must be detailed, specific, and clear to reduce the amount of calls to Standard Life’s call center.

THE PROBLEM

PROPOSED SOLUTIONSAfter meeting with the Open AM team, we created a sitemap of the whole journey and required pages. In addition, we outlined some of the design criterias: • Use Angular JS styleguide as a base • Use of steps to guide the users through the journey • Set expectations: an overview of the overall journey

DESIGN PROPOSITIONUtilizing the Angular JS styleguide as a base, design how the login, registration, and forgotten password screens functions and displays. Start off with an overview to set user expectations of what the overall journey will be. The overview will include the number of steps, and with each step, a unique illustration that will be reused throughout the journey as reference and an indication of where the user is in the journey.

For the final screen, we allowed users to “Skip this step” with considerations that some users may not move foward due to: 1) Additional charges to mobile service 2) Do not trust or own a mobile device

This design was approved and sent out for development. We asssisted the dev team in post-production work, such as

image optimization and creating spec sheets.

On Hover: • Action button is clickable• Button visually remains the same• Dotted line around diagram/table

As you scroll through the report, the action buttons appears parallel to the diagram and table.

NEW YORK STOCK EXCHANGESTANDARD LIFE HILDASAY PREVIEW REPORTHildasay Preview Report is a platform for account managers to generate portfolio reports for their clients. They are also allowed to add comments and/or copy tables, charts, and data into Word or Excel.

UI/UX DESIGNER

2016

The report pulls in all the data per client’s entire portfolio. This allows account managers to easily export a complete report whenever they need. However, brokers sometimes do not want to include all the data, but Standard Life do not support this feature. Thus, we need to create a platform where they can copy these data into a temporary cache and paste them into a Word or Excel file to create customized reports externally.

THE PROBLEM

PROPOSED SOLUTIONSAfter meeting with the client, we narrowed down an approach to start with: • Reserve an area for all actions • Specific and clear labeling for action buttons • Navigation bar to exit and/or export report

DESIGN PROPOSITIONSplitting the page into four main sections (see right): 1) Static Headers: Labeling of left rail and content area 2) Left Rail Actions: To be parallel/following content 3) Content Area: Actual report 4) Static Bottom Navigation: Quick access to exit

and/or to generate the report

CONTENTAREA

LEFT RAILACTIONS

STATIC BOTTOM NAVIGATION

STATIC HEADERS

4

1

2 3

STATE CHANGES

On Click: • Action button is not clickable• Confirmation of copied content• Solid line around diagram/table

This was one of the fastest turnaround projects we designed for Standard Life — they loved the simplicity & ease of use.

NEW YORK STOCK EXCHANGESTANDARD LIFE WORKPLACE HUBWorkplace Hub is a dedicated portal for employers to assign administrators to manage their workplace pension scheme. This is a complete journey from setting up the admin account to having it up and running.

UI/UX DESIGNER

2015

There is a lot of details and steps to setup an account. We need to take into consideration how these settings will be setup and displayed. With such a large amount of information, we also need to make clear, what the next steps are for the admin in order to manage the account correctly and efficiently.

THE PROBLEM PROPOSED SOLUTIONSAfter meeting with the Standard Life team, and creating a sitemap of the entire journey, we have highlighted a few important key elements: • Clear indication of what the next steps are • Overview of the Scheme Configuration journey • Clear summary of selected configurations • Sample of steps for a specific pay period

DESIGN PROPOSITIONBy introducing the dashboard upon login, we can then direct admins to the “To-do List” to inform them that all next steps will be instructed in this section.

The most interesting part of this project is how to display to the user what their selected configurations are:

After completing the Configuration Scheme, we can see the next steps for the next pay period(s), what the admin needs to configure next, and how many days until the next item is due.

Since we have introduced icons in the “To-do List”, we thought instead of just making a ledger of the configuration settings, why not make it more visual? However, both designs have their own pros and cons: • Design #1 — another copy heavy page to read

through, but is more compact • Design #2 — visually more appealing and digestable,

but is a much longer page

Provide a static legend at the top of the Configuration Scheme to provide an overview as well as allow the admin to know how far along the journey they are in.

NEXTSTEPS

DESIGN #1

DESIGN #2

What a sense of accomplishment when this project was done!

EVERYDAY HEALTHMAYO CLINIC DIET LANDING PAGE REDESIGNA few months after launching the Mayo Clinic Diet, analytics revealed a surprisngly stunted performance on their landing page. This presented a huge challenge for the marketing team, and a complete redesign of the Mayo Clinic Diet landing page was required.

� MARKETING DESIGNER

2015

The launch of the Mayo Clinic Diet campaign was huge. Based on analytics, users were clicking through our ads to arrive at our landing page, but were not signing up! In general people are sensitive about revealing their age, height, and weight; the landing page does not provide enough information to the user on what they are getting if they do sign up. This meant we were unable to capture email, which prevented us from sending more information about our product and actually sign up.

THE PROBLEM

PROPOSED SOLUTIONSAfter doing a lot of research for how the market and industry is tackling this problem, we concluded: • Only to ask for email address to get started • Let them know “How It Works” to start losing weight • Teasers of what they will get when they sign up

▲ Direct & Compact — highlighting the 3 steps to get started, and using icons to breakdown everything that you will get upon signing up.

► Visual & Detailed — giving a lot space and attention to each section of what you will get, as well as the use of icons and hi-res photographs, especially of our recipes.

DESIGN PROPOSITIONAfter many rounds of designs, finalized two completely different set of landing pages for AB testing:

DESIGN #1 DESIGN #2

The outcome was as expected, the winner is: Design #1!Cropping does not do it justice — ask me for the full version.

TALKTO@VANESSACHEUNG.COM347.286.8318