Kerry Young Portfolio

1 | P a g e

Kerry Young

User Experience Specialist / Interaction Designer

(201) 857-3482

[email protected]

linkedin/in/kerryyoung1

mailto:[email protected]

Kerry Young | (201) 857-3482 | [email protected] | linkedin.com/in/kerryyoung1/

Western Union Online Money Transfer Service

Project: New Online Money Transfer service My role was to work with the product manager to create the interaction design for a

new online money transfer service for Western Union. The new service was priced

competitively, allowed customers to send from their bank account with the

expectation that the transfer be complete in about 2 days. Perfect for customers without time sensitive

needs.

To offer this service Western Union partnered with a third-party ACH solution provider. As part of the

money transfer the third-party service is called so the user can add a bank account and verify ownership.

There are two verification options:

Instant: Verify ownership of a bank account by providing their online banking credentials

(assuming their bank allowed for online access)

Delayed: Allow two small deposits be made in their bank account and to verify the amounts (a

process that could take up to 3 days).

The product manager had a couple concern - would the Western Union customer be comfortable with

providing their online banking credentials and if not, would they be patient enough to wait a 3-day time

frame to verify their account and then another 2 days for the transfer to be complete.

To minimize the cost and time to launch the product manager made two decisions.

Western Union would use the ACH vendor’s “out of the box” solution that launched the bank

management module in a modal window that could be inserted into a customer’s existing

product. The solution allowed for co-branding assets, but did not allow flexibility within the

flow.

The design needed to heavily leverage the existing credit card money transfer interaction (and

codebase).




Interaction Flow




Page Designs

Money Transfer Options

BEFORE The original Money Transfer Options page displayed Speed, but not Price. For the new service Price was a primary selling point. The comparison table was text heavy.

AFTER Using progressive disclosure the new page initially shows 2 selections and on submit a table of service options is displayed with Speed of Service and Price highlighted. The user experience was supported by using icons, scannable text and bold headings the user to make scanning and comparison easier.




Add Bank page

BEFORE n/a

AFTER Add Bank page. This page informs the user about the process of adding a bank account and sending money with Western Union. Earlier designs did not have this page and the users reported feeling confused about the integration of the bank account management within the Western Union money transfer.




Money Transfer Payment page

BEFORE Screen capture not available.

AFTER Money Transfer Payment page was modified to display bank account information instead of credit card information. We also added two other features:

1) Estimated delivery 2) A way for the user to switch to a faster service

(additional fee applied).



Client Discovery Workshop Findings Presentation

Client Presentation: Discovery Workshop Findings This client had recently launched an end-to-end service solution to the marketplace – a groundbreaking

offering. The portal would be used by the newly assembled Operations Group (Operations, Customer

Service and Quality Assurance) to ensure operational excellence.

By the time of our involvement, this project had been on-again/off-again for 9 months with different

stakeholders taking up the initiative. Our first step was to meet the stakeholders and re-establish the

vision. We also needed sort through all of the requirements with the stakeholders, match them to

current needs, respectfully eliminate those that no longer made sense (did not add value) and to

suggest new features based on our current understanding of the needs (discovered value).

We conducted a Discovery Workshop with executive stakeholders, subject matter experts/team

managers, and representative end users. We used sticky notes sessions, talk out-loud walkthroughs and

observed actual users at work (snacks, laughs and prizes were also involved).




End User Values

Figure 1 Client Presentation: Discovery Workshop Findings

The user interviews made it evident that the

“formal” team goals (shown in Figure 1)were

universally embraced, but that personally each team

member valued the following*:

The opportunity to be involved on the ground

floor with their company’s new service

offering (entrepreneurial and determined)

Distinguishing their operational service within

the company

Establishing standard operating procedures in

preparation for team growth

* shared with client as talking points

The values let us understand the user’s expectations

for the final product and informed the design

regarding information prominence, efficient work

flow and flexibility (to allow for team growth).

Figure 2 Client Presentation: Discover Workshop Findings - High-level Needs Mapped to Solution

High-level Needs (Vision) We established three high-level business needs and

mapped the solution to those needs. Establishing

goals and describing how the solution will meet those

needs is a key to ensuring the solution is on target

and is an essential communication tool with clients.

Throughout the project we return to these high-level

needs as a reminder of the vision and to help with

planning, design and feature inclusion.

My approach is to trace the goals/requirements to

the solution and continue to trace as lower-level

details become available.







Figure 3 Client Presentation: Discover Workshop Findings - User Profiles

Focusing on unique User Types There were 3 unique user groups each performing

different tasks and having access to different

applications.

Describing “A Good Day” shared insight about the

user and provided the technical team (Application

Architects and Developers) a connection to the users

– after all everyone loves a good day at work.

Connecting the dots During workshop we do a lot of listening. Compiling what we heard into key points and connecting to the high-

level design validates the direction and demonstrates that we are in step with the client.




Using Scenarios* I rely on scenarios at various points in the project -

varying the complexity and quantity to suit the need

(socializing design, usability testing, and

communicating design to developers).

In this presentation I was sharing “sketches” of the

portal solution and using the Scenarios as a backdrop.

I also validate the scenario at a high-level.

*I am a fan of scenarios.




Sketches Using Axure RP it is easy to render the design with a “sketchy” appearance. The appearance communicates to

the client that we are early in the design stage and that change is possible (and encouraged).

More Sketches



Portal Widget Design

Widget Functionality: Simple Clipping This document was used to communicate the concept of the clipping utility to the lead developer.

Together we improved on the interaction as he contributed technical knowledge and differences in

browser behavior. At one point it became feature heavy and we pulled back admitting to each other

that we were over-engineering what was meant to be a simple utility.

Description The user needs to be able to collect information from several applications when creating a new ticket. This application allows the user to create a collection of text content. Note: The users of this enterprise application are trained, experts who use the system for most of their working day. We can assume that once trained these features will be second nature. Interaction To create a new Clipping:

A. User enters text manually and clicks on button to add content from text field to the clippings listing;

B. Or user pastes text from the Windows clipboard into the entry field. When pasting with CTRL-V the system automatically adds the clipping to the current listing (See “Action: User Adds Clipping” section)

Elements 1. Entry field – no max length, all characters

allowed 2. Button to add content to the buffer 3. Error message

Default State Clippings panel has a single field that accepts text entry. Validation

1) No character validation for entered text. 2) Validate for buffer size – “You cannot add

clippings until you clear some current clippings.”



Portal Widget Design

Add a Clipping

Description Show a list of content added to Clippings. Interaction

A. User enters text manually or pastes text from the Windows clipboard into the entry (#1, #2)

B. User copies content from ‘Current Clipping’ by clicking on clipboard icon (#7)

C. User deletes clipping by clicking on delete icon (#6)

Elements 1. Entry field – no max length, all characters

allowed 2. Button to add content to the buffer 3. ‘Current Clippings’ heading (Clipping Buffer) 4. ‘Clear All link’ – clears all clippings from the

Current Clippings area. 5. Clipping content (content pasted by user from

Windows clipboard) 6. Clear clipping button - removes a clipping

from the Current Clippings area. 7. Put on Windows Clipboard button – adds the

selected clipping to the Windows clipboard. Validation

1) No character validation for entered text. 2) Validate for buffer size – “You cannot add

clippings until you clear some current clippings.”



Enterprise Content Management System environment

Diagram: Enterprise Content Management system My role was User Experience Architect. I was responsible for defining the Authoring workflow in

SharePoint 2010 for one of content repositories. This diagram helped the team understand the

complete environment and where each content repository fit in. .



Western Union gold!card Rewards: Self-service Site

Project: Western Union Rewards program self-service site As the interaction designer I worked with the product

manager and operations manager to create a self-service

site to reduce customer service cost and improve

satisfaction with the redemption process. The self-service

site allows reward program members the ability to view

points, see offers and redeem points for prizes. Working on

a budget that allowed for 1-2 months of

design/development time we leveraged the existing reward

system. The current system was employee-facing, we

created an interaction design based on the existing

customer service process. A web presentation layer was

created using the new global brand campaign and resource

files to “translate” content into consumer-friendly

language.

The existing system did not have any functionality to show future rewards based on point projection.

Since the product manager and I wanted this feature we created a static table showing all reward levels

and sample rewards.



Western Union gold!card Rewards: Self-service Site

Annotations

1) Prominent display of the number of available points

2) “redeem points NOW or save for BIGGER rewards” This key incentive is part of the script that was previous handled by a customer service representative. Since the future rewards could not come from the backend system we managed it with content.

3) List of rewards from the backend system, the reward names from the system had “codes” embedded in them and we created a “consumer-friendly” translation file.

4) Static display of suggested future rewards.

1

2

4

3



Fire Department of New York (FDNY) Foundation

Volunteer Project: Fire Department of New York (FDNY)Foundation This project was a Taproot Foundation project. The goal of the project was to create a single site where

the Foundation could raise funds, improve donor information and communicate important fire safety

information. As the information architect I consolidated 2 websites into one and reduced redundant

content to create clear pathways for visitors to learn about the Foundation, make donations and

increase awareness of fire safety. It was a nice project and the Foundation staff were amazing to work

with.

Sample Work Products This diagram helped us stay focused on the primary goals and map the content.

Home page wireframe







Site Map



Detail Specification Sample – Western Union Online Money Transfer

Detailed Specification Sample **EXCERPT FROM MONEY TRANSFER 3-DAY SERVICE FUNCTIONAL SPEC**

Money Transfer Options page (MT OPTIONS)

This page allows the customer to review the service options and fees for the selected corridor and make

a selection.

Pre-condition: The user must be authenticated before accessing the Money Transfer Options (MT

OPTIONS) page.

PAGE STATES




On load State

1

2

3

5

4




User selects “Sending Money To” country

The user selects the country where they are sending money to. The system will display the correct

currency selectors and disclaimers based on this selection.

Currency Selection

United States

When sending to the US the currency rate and exchange disclaimers should not be shown. The currency

selector will be populated with USD only.

Multiple Currencies

When sending to a country with multiple




6

7




System displays service/fee results

8

9 10 11 12 13 14 15

14a

8a




Updating the country or amount

When the user changes either the country (onchange) or amount (onkeyup) the system should:

1) Hide the service results table.

2) Change the button label text to “update fees and services” and

3) The user will need to click on “update fees and services” to get new results.




Behavior of “fees and services” button

The “fees and services” button has the following states:

“show fees and services” – default state – ready for user to show initial fees

“update fees and services” – user has changed the country or amount and needs to refresh the page to see the new fee table.

Disabled – the button is disabled when the fee table is displayed unless the user changes the country or amount then the system displays the “update fees and services”. After the system displays the updated results the “update fees and services” button will become disabled. The user can update the amount and country again.




Help flyout

This illustrates how the help flyout should be implemented. Flyout help should be positioned on the

page so that it does not cause the page to scroll.

18




Elements

Footnote Element Name Description

1 Money Transfer Options page title Apply style

2 Personal limits statement

Display personal limits and link to

‘Transaction Limits’ in user’s My Profile

section. The personal limit is their

maximum limit and is not specific to

any service, receiver destination or

aggregate limits.

3 Country select list

Same as US production list of countries.

4 Chat

New style





5 Fraud – NAAG statement

Hide after service results are displayed.

6 Amount and currency selector Currency is based on the selected

country. The currency options are USD

and any currency valid for the

receiver’s country. Valid currencies are

sent by the host system. If USD is the

only currency the select list should be

displayed with USD as the only option.

7 Currency Rate and Currency Disclaimer Display the rate and disclaimer when a

country supports multiple currencies.

8a Show/Update fees and services button





8 Country and amount summary statement

If the user chooses a currency other

than USD the system will display the

selected currency. For example if the

user chooses 200.50 PHP the system

will display

“Select a service for sending 200.50

PHP to Philippines. “ Use the currency

code selected by the user.

On the MT Options page we will echo

back the entry and on MT Services and

MT Payment the system displays the

converted amounts for the user.

On the services page the system will

display a currency exchange statement

and in some countries require the user

to fix the payout of USD or local

currency. (Fixed on send)





8a “fees and services” button The “fees and services” button has the

following states:

“show fees and services” – default state – ready for user to show initial fees

“update fees and services” – user has changed the country or amount and needs to refresh the page to see the new fee table.

Disabled – the button is disabled when the fee table is displayed unless the user changes the country or amount then the system displays the “update fees and services”. After the system displays the updated results the “update fees and services” button will become disabled. The user can update the amount and country again.

9 Service table header

10 Date Available in Receiver’s local date Delivery Date for all the Delivery

Services will be sent from the HOST.

11 Pay with Show Pay With [credit/debit or bank

account] icons and label.

12 Pay out Display the methods that are available

to the user for picking up the money.

13 Price Display the fee for the service based on

the corridor and amount.

14 Select Call to action button. User clicks one of

the service Select buttons to start a

transaction.





14a Send amount is greater than service allows. When the send amount exceeds the

limits for the service the system will

display a message and a link to a static

help message with the general limits

for the service.

15 Information. Implement flyout help

Fields

Table 1 – Money Transfer Options Page: Fields

Ref.# Label Req? Type Values Default Tab Order

2.2.2.1 Sending

money to

Y SelectList Countries Select a Country 1

Amount Y TextField 2

[Currency

code]:no label

Y SelectList USD and if there

are other valid

currencies for the

receiver’s country.

USD 3

Business Logic and Error Messages – Basic flow

Table 1 – Business Rules and Error Messages

Scenario: BAS1 Send Money

Ref.#

The customer’s maximum personal transaction limit is displayed and a link to their Transaction Limits

page in My Profile.

The personal limit at the top of the page will display the maximum limit without accounting for service, receiver country or aggregate limits.

A link to the My Profile Transaction Limits page will be displayed.

If the user enters an amount greater than the maximum personal limit the system will display




Scenario: BAS1 Send Money

Ref.#

an error.

If the user enters an amount greater than the aggregate, receiver’s country or the service limit the error will be displayed on submit of the Receiver page for the selected service. (same as in production)

The system displays the country selection list and the user chooses a country.

The system displays the amount field and available currencies.

The user enters and amount and continues

The system hides the Fraud statement, disables the “show fees and services” button and displays the

services

The system should check to see if ACH is allowed for the selected receiver’s country.

If the customer has returned to MT Options from the Add Bank by “Choose a Different Service” or the

browser’s back button the system should pre-populate the page with the user’s previous country,

amount, currency and services.

If country, amount and currency are passed to the MT Options page the page will prepopulate and

load the service results page.

Ref# Condition Error Message

Send amount entered exceeds the

maximum personal transaction limit.

System will display a field level error on the Amount

field. “The payment amount you entered is greater than

the maximum allowed: US $xxxx.xx If you would like to

send more please visit a Western Union Agent location

or call 1-800-CALL CASH.”

If the amount is greater than the service, receiver’s

country or aggregate limit the error will be displayed as

it is currently done in production – on the services

Receiver page.



Chef Startup Concept Sketches

Project: Concept for Personal Chef services

Sample of sketches and interaction design concept work











Documents

Kerry Young Portfolio