Issuu on Google+

Beatriz Vizcaino User Experience Designer www.beatryev.com beatryev@gmail.com


Moment, Amex


Serve Personas | Moment Design | Serve, American Express.

2011

Inspired by marketing research provided by our client, our internal team designed a series of personas that would help guide the project and help with the future vision of the product. Personas

Eva

Eric

Scott

Young millenial

Millenial

Young millenial

“My study group just celebrated finishing our midterms! Buying that round of drinks means Ramen for dinner tomorrow night :/ ”

“In an all day workshop. Anyone following the WWDC on Engadget? Highlights?”

“Sweet! My dormmate just got a 46” Samsung plasma for his graduation present. Anyone wanna buy my old tv?”

Age 20

Age 25

Age 17

Profession English Junior at

Profession Research assistant

Profession Recent grad / lifeguard

Location Boston, MA

Location Akron, OH

Location Berkeley, CA

Income $50k/year

Income allowance from parents

Relationship status Single

Relationship status Lives w/ girlfriend

Relationship status Single

Mobile device Samsung a777

Mobile device iPhone, iPad

Mobile device Android

UC Berkeley

Competitive Review Through Personas | 4.1 | October 19, 2011

4

Moment Design | Beatriz Vizcaino


Serve Personas | Moment Design | Serve, American Express.

2011

Eva’s Engagement Curve | Serve

“Wow, that wasn’t easy. I wish sign up was easier. What a headache! I blame Stephanie for all of this!”

5

Level of Engagement

4

3

2

Awareness

Eva gets an email from Serve saying that her friend Stephanie is requesting money from her.

PAIN POINT

Money Request Email Aside from being asked for money, Eva has never heard of Serve and she’s not sure what to do next.

PAIN POINT

Email Verification

PAIN POINT

Upon attempting to verify her email address, Eva must copy a verification code and find where to enter it.

Account Funding

“Where do I put my email verification token?”

“Do I need to add funds to my account before I pay? Can I just use my debit card?”

Eva is being asked to add funds to her account, she really just wants to link a funding source instead.

“I don’t want to add money, just let me pay Stephanie!”

“Not sure what Serve is. Is it that service Stephanie has been using?”

Makes Payment

“Two easy steps, sure I’ll sign up!”

She is able to accept the transaction and pay Stephanie.

PAIN POINT

Log in Again

1

*

Eva must log in again. She is prompted to add money to her account before verifying email, or seeing the money request from Stephanie. “I have to log in again? Aren’t I already logged in?”

“Finally I can pay Stephanie...”

PAIN POINT

Serve Card

Eva is prompted to look for her Serve Card in the mail. She never requested a card, and is only looking to pay Stephanie. “Look in my mail? What’s a Serve Card? Did I just sign up for a credit card? Uh oh” Calm Getting Frustrated Frustrated

Competitive Review Through Personas | 4.1 | October 18, 19, 2011

7

Moment Design | Beatriz Vizcaino


Principles Toolkit | Moment Design | Serve, American Express.

2011

Grounded in both quantitative and qualitative research, the design principles were created through the eyes of our personas and what they required in order to feel secure, engaged, and successful using the product. And because they were created for an internal audience, the language and iconography could be fun, memorable, and meaningful to those in the know.

Moment Design | Beatriz Vizcaino


Eames | Moment Design | Serve, American Express.

2011

Eames is a project focused on driving improvements in the user experience. It started as a proof of concept for an integrated agile team that will deliver and ship faster. For the past 14 months (26 Sprints total) the team has concentrated in short and long term improvements, from dashboard quick-hits to the redesign of the global navigation.

Moment Design | Beatriz Vizcaino


Registration Redesign | Moment Design | Serve, American Express.

2011

The registration redesign project had the intention to provide a guided experience to the user. As a concept and inspiration, our team thought about a friendly conversation happening between the user and the system. Everytime the user provides information the system would provide feedback as a message that orients the user and allow him to understand why certain things were being asked.

Moment Design | Beatriz Vizcaino


Registration Redesign | Moment Design | Serve, American Express.

2011

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Moment Design | Serve, American Express.

2012

The purpose of this project was to provide a better experience for the user when she lands to Serve.com and m.serve.com. Through several rounds of concepting, design and user testing the team designed three pages that replace their current landing page. These three pages are the “Springboard” (landing page), “My Transactions” page and “Detail” page.

Old Design

Responsive Redesign Extra Large and Small

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Nav Concepts

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Concept Extension $123.00

SERVE BRANDING

serve.com

$ 126.75

2

All Activity

ALL ACTIVITY

Send

Request

$10.75

Pending

$22

from Anne K.

Pending

Pending

$10.74 Sent

Add

from Anne K.

you added

REQUEST

Earn

$20 Yoga Class at Studio Anya

$ $

You have earned 50 points!

Expires in 3 days

SAVE

Raise

EARN

CONTENT

Sell

Raise money dolor sit amet, consect adipiscing elit.

Sell items dolor sit amet, consect adipiscing elit. Etiam in eleif.

$123.00

SERVE BRANDING SERVE BRANDING

Jobs

Legal/Privacy

Connect

Download

Tweet Facebook

Request iPhoneSend Android Windows

$123.00

SERVE BRANDING 2

All Activity

FAQs

Pending

$100

from Justin C.

Save

Contact Us

$200.25 Requested from Justin S.

SEND

About

2

2

All Activity

Refer a Friend

Add

Pending Pending Serve Virtual Enterprises, Inc. is a wholly-owned subsidiary of American Express Travel Related Services Company, Inc. Serve Service and Card are provided and issued by American Express Travel Related Services Company, Inc. 200 Vesey Street, New York, NY 10285. American Express Travel Related Services Company, Inc. is licensed to engage in the transfrom Anne K. from Justin S. mission of money on behalf of the public. All users of our online services subject to the Privacy Statement and agree to be bound by Terms of Service. Use of Serve Deals and Offers is subject to the Serve Deals and Offers Terms and Conditions.

$10.75

$22

$100 you added

Send

Request Pending

$10.75 from Anne K.

$22

Add Pending

from Justin S.

$100 you added

Š Copyright 2012 Serve Virtual Enterprises, Inc. All rights reserved. Important Links

Save $20 Yoga Class at Studio Anya

Expires in 3 days

Raise Raise money dolor sit amet, consect adipiscing elit.

Earn You have earned 50 points!

Sell Sell items dolor sit amet, consect adipiscing elit. Etiam in eleif.

Save $20 Yoga Class at Studio Anya

Expires in 3 days

Raise Raise money dolor sit amet, consect adipiscing elit.

Earn You have earned 50 points!

Sell Sell items dolor sit amet, consect adipiscing elit. Etiam in eleif.

Moment Design | Beatriz Vizcaino


Eames 10 | User Testing Analysis

Dashboard Redesign | User Testing Analysis

Eames 10 | User Testing Analysis | 1.0 | May 18, 2012

4

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Concept Refinement

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Transactions Framework When a concept direction was chosen the team started focusing on a framework that would allow the user to easily read and understand transactions within the pages. The framework was created by defining Transactions Framework relationships between transactions and mapping them to a specific nomenclature and templates.

Transactions Framework Transactions have to be understood from two different perspectives: The user’s and the system’s. The system processes the user’s action and as a result gets raw data, which needs to be converted in a transaction or set of transactions that reflect the user’s action. The transactions framework is a way of making the raw transactions data digestible to the user and provide proper feedback. The three main components of the transaction framework are: Relationships, Mapping & Nomenclature, and Templates.

User

From Eric’s perspective, he sends money to Tom. Since he’s set up a backup funding source, it is triggered to make up the difference.

System

The system generates four transactions. SVP2P_SEND

Send Money

SVCC_SEND_PER

Credit Card Send Money

SVCC_LOAD

Credit Card Load

SVCC_FEE_LOAD_PER

Credit Card Load Fee

Example Scenario

Eric sends Tom $25; he only has $20 in his account. His credit card is set up as his back up funding source. He clicks on the Sent to Tom to view the detail.

Transactions Framework 1. Mapping & Nomenclature 2. Relationships 3. Templates

UI

The framework makes sense of the raw data and provides context by displaying actions initiated by Eric and the system in an organized way.

Oct 11 Sent to Tom

- $25.00

Oct 11 Added from BofA+ fee

+5.00

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Transactions Framework, Relationships Transaction Relationships Transaction Relationships Connections that exist within the system presented in a way to make relevant connections for the user. Stand Alone A discrete user action resulting in a single transaction.

Collapsed A discrete user action resulting in two transactions of the same type with the same entity.

Linked A discrete user action resulting in a transaction with a fee.

Example:

Examples:

Examples:

Example:

Example:

User Action Eric sends money to Patrick.

User Action Eric sends $25 to Patrick. He only has $20 in his Serve account. $5 is pulled from his backup funding source and a fee is charged.

User Action Eric adds money from his credit card; a fee is charged.

User Action Eric sends $25 to Patrick. Hey only has $20 in his Serve account. $5 is pulled from his backup funding source and a fee is charged.

User Action Eric sends money to Patrick.

User Action Customer Service initiates a reversal of a transaction.

Eames 23 | Transactions Framework | 1.6 | November 30, 2012

Associated A discrete user action resulting in two transactions of different types.

Related Multiple discrete user actions with the same entity.

User Action Eric receives money from Patrick.

User Action Eric links an offer for Sushi Mama. He has dinner at Sushi Mama and pays with his Serve card. A week later his account is credited for the offer.

6

Moment Design | Beatriz Vizcaino


Transaction

(conditional)

[TransactionID]

[TransactionID]

Associated Transaction ID

Stand Alone Transaction

Collapsed Transaction

Dashboard Transactions MappingRedesign | Transactions Framework, Mapping [TransactionID]

Linked Fee

Not Presented to User

Transactions Mapping In order to present transactions to the user in real language, all transactions have been organized by user action (Money In and Money Out). This transaction mapping will determine the nomenclature used for a specific transaction.

Nomenclature Action

Context Provider

Context Provider

[TransactionID]

[TransactionID]

Stand Alone Transaction

Annotations Key

Collapsed Transaction (conditional)

[TransactionID]

Customer Service Only

Associated Transaction ID

Stand Alone Transaction

Backup Funding

Not Presented to User

[TransactionID]

Associated Transaction ID

Stand Alone Transaction

Collapsed Transaction [TransactionID]

Linked Fee

Not Presented to User

Legacy Not/Never In Use

[TransactionID]

Incorrect/Special Note (BB)

[TransactionID]

Collapsed Transaction (conditional)

Collapsed Transaction [TransactionID]

Linked Fee

Bluebird

Money In

Money Out

Purchase

Send Money

Receive

Money In Adjustments

Add Money

Direct Deposit

Credits

Offer Credits

Miscellaneous

Returns

Add Adjustments

512 Credit Card Personal Send

1129 Cash Load POS Seller Reversal (BB)

524 Credit Card Personal Receive PER

674 Debit Card Personal Send

Fee Adjustments

ATM Adjusments

695 B2P Fee Send 523 P2P Receive Money fee. 506 Credit Card Load Fee Personal Send

260 Receive Money

680 Cash Load Fee Green Dot

640 ATM cash withdrawal

514 Receive Money Purchase Fee.

241 ATM transaction.

484 Credit Card Load Fee

525 Receive Purchase

901 Credit Card Load Fee Direct Merchant

541 Subaccount Purchase

187 ACH Reversal Transaction

543 Subaccount Setup

245 ACH Transaction

521 Send Money Personal Fee

182 ATM Balance Inquiry

1098 Debit Card Load fee. 184 Lost or Stolen Card 697 FXIP Reversal 188 Over Draft Reversal

Transfer Adjustments

253 ACH Withdrawal 255 Check Withdrawal 915 Starter to Perm Fund Transfer Reversal (BB)

B2P Adjustments

FX Adjustments

691 B2P Send

699 Foreign Exchange

Fraud Adjusments

Charge Off Adjusments

308 Fraudulent debit load 305 SVFRAUD_ CREDIT 1122 Fraud (BB) 1128 Fraud - Lost Stolen (BB) 1126 Fraud - Non Funded (BB) 1124 Fraud Reloads (BB)

Purchase Adusments

382 Charge Off 1120 Overspend Collection (BB) 1116 Overspend Intl Under Threshold (BB) 1118 Clear Negative Balance (BB) 1114 Overspend Intl Auth (BB) 1112 Overspend Under Threshold (BB)

243 Cash back Merchant 1106 Negative Balance Chargeback (BB) 1110 Disputed Small Sale Chargeback (BB) 1108 Disputed Sale Chargeback (BB) 232 Purchase Adjustment

690 Bill My Phone Load 678 Cash Load Green Dot

504 Credit Card Personal Send PER

502 Credit Card Widget purchase PURCH 668 Debit Card Personal Send PER

483 Credit Card Load

664 Debit Card Load 1097 Debit Card Load

509

507 Credit Card Load PER

250 ACH/Bank 481 Credit Card Load

666 Debit Card Widget purchase PURCH

548 Credit Card Load POS

227 229

483 Credit Card Load

510

670 Debit Card Load POS

227 229

671

585 Credit Card Load Direct Merchant

581 582

672

902 Credit Card Load DM

675 Debit Card Load Direct Merchant

581 582

911 Direct Deposit Funding (BB)

Credit for Award Points

Credit for Promos

918 Zynga Points

564 Merchant Promotion

Credit Refund & Disputes

586 Dispute Direct Merchant 197 Dispute Any Purchase 205 Dispute ATM Transaction 1102 Purchase Fee Credit (BB)

In Store

900 Deals & offer

227 229

158 Miscellaneous Credit

Widget Sale

Online

583 Direct Merchant Purchase 234 Store Return

584 Direct Merchant Purchase 897 Purchased Deal

from B2P transasction

513 Receive Money Widget Sale 526 Purchase Receive

B2P Send

700 Foreign Exchange Transaction

In Store

692 B2P Transaction

698 FXIP Fee

694 AOL/Flip swap

259 Send Money

696 Business to Person Send Transactions

582 Direct Merchant Purchase

228 Recurring Purchase

229 Store purchase 670 548

227 Store Purchase 900

511 Credit Card Widget Sale

509 Credit Card Send PER

504

671 Debit Card Send PER

668

585 675

670 548 900

Deals Purchases

508 Purchase Widget

898 Online Deal Purchase 510 Credit Card Send PURCH

502

581 Direct Merchant Purchase

260 Reclaim From Subaccount

190 Stop Check Reversal.

1100 Cash Load POS MAN (BB)

Backup Funding

Stand Alone Transaction

Associated Transaction ID

Not/Never In Use Incorrect/Special Note Bluebird

[TransactionID]

Collapsed Transaction (conditional)

Withdraw

Stand Alone Fees

Money Out Adjustments

Offer Adjustments

Sub Account

192 Stamp

194 ACH Debit

239 Cash Withdrawal

251 ACH

259 Add to Sub Account

244 ATM Transaction

238 Casino Cash Withdrawal

899 Deals& Offer Credit

Promo Adjustments

Load Money Adjustments

679 Greendot cash load 563 Merchant Promotion Credit 561 Systematic Promo Credit 324 Promo Offset 264 Promotion Credit Reversal

252 ACH Load 248 ACH Reversal Transaction

677 Cash Load Green Dot 503 Credit Card Load PER 547 Credit Card Load POS 501 Credit Card Load Widget PURCH 482 Credit Card Load

1104 Good Faith Credit (BB)

Customer Service Only

905 Cash Load POS (BB)

Customer Service Only Backup Funding

Stand Alone Transaction

Associated Transaction ID

Backup Funding

Not Presented to User

Legacy Not/Never In Use Incorrect/Special Note (BB)

[TransactionID]

Collapsed Transaction (conditional)

[TransactionID]

Collapsed Transaction [TransactionID]

Linked Fee

Legacy

Bluebird

Not/Never In Use Incorrect/Special Note

Not Presented to User [TransactionID]

Collapsed Transaction [TransactionID]

Linked Fee

Eames 23 | Transactions Framework | 1.6 | November 30, 2012

254 Check

237 Cash Advance Manual

916 Starter to Perm Fund Transfer Receive (BB)

Money In

Transfer

ACH Transfer

At an ATM

By Check

26 International ATM withdrawal.

Legacy

(BB)

Bill Pay

Future Transaction

672 Debit Card Send 666 PURCH

908 Cash Reload (BB)

Customer Service Only

Phone/Mail

231 Mail/Phone Order Purchase 585 675

242 Cash Back Merchant Location

522 Credit Card Personal Send PER

515 Credit Card Purchase Receive Widget

673 Debit Card Widget Sale

Widget Purchases

Online

230 Manual Purchase /Card Swipe

256 Credit ACH load

186 Paper Statement Reversal

189 Check Withdrawal

Load Money as Backup for Purchase

Load Money as Backup for P2P

Load

Payment To

Miscellaneous Debits

Payment From

P2P Send

from P2P transaction

(BB)

Bluebird

667 Debit Card Load PER

1099 Cash Load POS MANUAL Reversal (BB)

Receive Money Adjustments

Send Money Adjustments

693 B2P Transaction

Future Transaction

Refund & Dispute Adjustments

907 Cash Load Return (BB)

211 Dispute Purchase Transaction Refund

910 Cash Reload Return (BB)

1107 Disputed Sale Chargeback Reversal (BB)

917 Starter to Perm Fund Transfer Receive Reversal (BB)

1109 Disputed Small Sale Chargeback Reversal (BB)

914 Starter to Perm Fund Transfer (BB)

Stand Alone Transaction 669 Debit Card Load POS

1130 Cash Load POS Seller (BB)

665 Debit Card Load Widget PURCH

909 Cash Reload Reversal (BB)

663 Debit Card Load

689 Bill My Phone transaction

Charge Off Adjustments

587 Dispute Direct Merchant 226 Dispute Cash Transaction Refund

906 Cash Load Reversal (BB)

903 Credit Card Load DM

1103 Good Faith Credit Reversal (BB)

1117 Clear Negative Balance Reversal (BB) 1119 Overspend Collection Reversal (BB)

Load Return Adjustments

Fraud Adjustments

Check Adjustments

307 Fraudulent Credit Load

505 Credit Card Load Return

306 DEBIT FRAUD TRANSACTION

676 Debit Card Load

1121 Fraud Reversal (BB)

1111 Overspend Under Threshold Reversal (BB)

1127 Fraud - Lost Stolen Reversal (BB)

1115 Overspend Intl Under Threshold Reversal (BB)

1125 Fraud - Non Funded Reversal (BB) 1123 Fraud Reloads Reversal (BB)

Associated Transaction ID

193 Check Debit

Direct Deposit Adjustments

Credit Adjustments

912 Direct Deposit Funding Reversal (BB)

1101 Purchase Fee Credit Reversal (BB)

Purchase Adjustments

1105 Negative Balance Chargeback Reversal (BB)

191 Balance Inquiry ATM

545 Miscellaneous Debit

181 ATM Balance Inquiry 183 Card Replacement 247 Overdraft 185 Paper Statement 249 Stop A Check 246 Check Withdrawals 542 Subaccount Purchase

Not Presented to User 544 Subaccount Setup

913 Balance Inquiry (BB)

904 Debit Card Load DM

[TransactionID]

Collapsed Transaction (conditional)

[TransactionID]

Collapsed Transaction [TransactionID]

Linked Fee

Money Out

16

Moment Design | Beatriz Vizcaino


Dashboard Redesign | Springboard, My Transactions and Detail Page Overview | Extra Large

Nav

Nav

Wallet/On-boarding

Filters

Nav

Active Transactions

Notifications

Summary View

Detail View

Completed Transactions

Active Transactions

Summary View Completed Transactions

Summary View Summary View Summary View

The Springboard Summary View for users The springboard is a place to take simple action on urgent account related notifications and active transactions and view 6 recently completed transactions. The transactions are shown in their summary view in the springboard. The springboard leads with a wallet area that provides orientation for the user and transitions from on-boarding steps to a simpler welcome message with last login and card image.

Eames | Final XD Documentation | 1.0 | January 15, 2013

Summary View Summary View

Associated Transactions

Summary View Summary View

Related Transactions

Summary View

Summary View

Summary View

Summary View

Summary View My Transactions My transactions page is a place for the user to Summary view all View transactions in reverse chronological order and quickly find specific transactions by using the filters. The pending section displays pending transactions (same as springboard) and the completed displays all completed transactions in reverse chronological order.

Detail Page The detail page is specific to each transaction and provides more information about a single transaction. Complex flows, such as change amount, take place in this page. Additionally, it shows associated or related transactions to the main transaction. The user can access the detail page from both the springboard and my transactions page by clicking the summary view content area.

6

Moment Design | Beatriz Vizcaino


Education


Learning Lounge | Strategy, Education. 2009 Learning Lounge is a web portal, for New Yorkers; it works as a broker/intermediate between people who want or need to learn about a subject and professionals and non-professionals who want to teach. Using a new developed platform the service offers a browsing system where students can find classes, lessons, tutoring and leisure studies which are made available to them in real time upon the instructor´s availability.

Learning Lounge | Beatriz Vizcaino


Friday Fever | Game Design, Education. 2010 Reward system for elementary kids where they can collect cards during classroom time every time they complete homework. The cards represent virtual cards that can later on be used in an online game as tools that will help win the game.

collaborators: Angela Huang

Friday Fever | Beatriz Vizcaino


Friday Fever | Process

Concepts

Wireframes

Sketches

Illustration

Card Design


Money Talks | Education, Service Design. 2010 Money Talks is a business world video game where high school students send text messages to decide the financial development of stories and characters. The goal of this project was to provide a financial learning tool that would be valuable in the midst of an economic recession. With this project we saw the opportunity to develop economic literacy in a moderated environment which at the time was something lacking in most schools.

Money Talks | Beatriz Vizcaino


Money Talks Hazard

-Server Down

-Server Down

-SMS Delay -No signal -SMS System Down

-Mail Failure -Customer Service Load

-Server Down

Evidence

-Website (Dashboard)

-Admin Site (Backend)

-Phone SMS Interaction

-Admin Package

-Print Material

Customer Actions

-Log-in -Read Story & Questions -Check In-game Stats

-Log-in -Check Student Progress -Check Schedule & Curriculum -Print Promo & Supplementary

-Recieve challenges & feedback text -Send answer text

-Recieve & read project packet -Setup system for school -Give feedback to Game Co.

-Print Poster, schedule, and curriculum

Line of Interaction

Front Stage Contact Actions

-Publish Stories, questions, and stats

-Materials Creation Wizard -Publish student stats -Customizable Schedule & curriculum

-Send questions & feedback text -Receive answer text

-Send software package -Customer (Schools) Reactions

-Materials Wizard -Curriculum Scheduler

-Financial Experts write stories -Developers create/push content

-Push content

-Write Shorten Text(SMS) Copy

-Write instructions -Make Recomendations according to school feedback

-Organbize curriculum & content

-Source info for curriculum -Create the story question schedule

-Develop materials Wizard -Develop accounts & stats system -Develop Schedule & Curriculum System

-Develop SMS System

Line of Visibility

Back Stage Contact Actions Line of Internal Interaction

Support Processes

Service Blueprint

Story

-Draft & test instructions Analyze customer feedback & systemize suggestions

-Develop Materials Wizard Develop Curriculum Scheduler

System Map


Health & Wellness


SlowEats |

iPad App, Sketching, Wireframes, Prototyping, Research. 2011

A tablet application that helps speed eaters slow down and savor food. It helps refine your palate, making you conscious of the flavors, aromas and textures in your meals.

When people slow down, and become mindful about what they’re eating, awareness and flavor can be celebrated.

Slow Eats | Beatriz Vizcaino


Slow Eats | Process

Slow Eats | Beatriz Vizcaino


Hydr8 |

Mobile App, Sketching, Wireframes, Prototyping, Research. 2010

Hydr8 is an interactive water bottle and iPhone app that monitors water intake and reminds users to refill in order to reach their daily water consumption goal. As part of the project, my group and I started the concept generation phase by creating concept diagrams in Omnigraffle. As a result of that activity we focused on wellness as the subject matter for the class. We continued to define our idea and the result was a water consumption tracking system that would encourage users to be more mindful about the amount of water they drink during the day. Methods such as, paper prototyping, screen casting, user research, persona creation, user scenario, and flash prototyping were used throughout the course. collaborators: Carmen Dukes, Colleen Miller, Derek Chan

|

an easier way to get 8 glasses a day

Hydr8 | Beatriz Vizcaino


Hydr8 | Process

Hydr8 | Beatriz Vizcaino


Subtrack | Transportation. 2009 Subtrack is a system composed of two elements, an iphone application and a website. The system is designed for a future NYC subway enabled with RFID tags on the metrocard and readers in the subway trains and stations. Each time the user enters a train or station her information is added to a database that is available through the subtrack application or website. The user will be able to access information such as the trains taken, visited stations, waiting times and times in transit.

Subtrack | Beatriz Vizcaino


Subtrack | Website and Process

initial wireframes

final wireframes

Subtrack | Beatriz Vizcaino


Chemotherapy Assisant | Summer Internship, Moment Design. 2010 The Chemotherapy Assistant is a mobile application that helps chemotherapy patients manage their new logistical requirements. Specifically, allowing users to access health information, view their overall schedule and appointments, contact their health care team instantly, log in symptoms and follow specific instructions included in their health program. Furthermore, a community aspect allows users to connect in real life with similar patients, and share suggestions and tips that are relevant to their needs.

Logging

Schedule

Care Team

Appointment Details - Map

Dashboard

Instructions

Chemotherapy Assistant | Beatriz Vizcaino


Others


Acumulus | Installation

2009

Acumulus is a large-scale installation of networked multi-touch displays in airports around the globe. By enabling travelers to compose and read short, anonymous messages to and from each other, it satisfies the inherently human interest in sharing stories with those around us, while simultaneously highlighting two technologies that have greatly shrunk the distance between people: air travel and the internet. Acumulus makes use of a number of near-future technologies in order to engage passersby and provide an enjoyable user experience for casual interaction in a public setting. The system uses an intelligent filtering system to avoid unwanted messages from being displayed in the screens. Multi-touch /Gestural Interfaces and Spatial/Image Recognition were some of the technologies considered in the ideation of the project.

tools: flash, illustrator, photoshop

| methods: sketching, prototyping, storyboard, scenarios | collaborators: Jeff Kirsch, Angela Huang Acumulus | Beatriz Vizcaino


Pop Box | Service Design, Public Spaces. 2010 Pop Box is an initiative to improve pick up and delivery networks in the city through the implementations of new pick-up points managed by local businesses, such as bodegas. The system is integrated through a web service for users to discover locations, pay for the service and check the status of their packages.

Pop Box | Beatriz Vizcaino


Wireframe Appendix


Serve Facebook App |

Login & Signup 2011

-/1.::6;;E*17/:81&/=119-90 :39

%')&33/

31)

-+24

*6:* 3,3

63*-0)

%')&33/

3+-2

*6:* 3,3

)6:)

)6:),%7-2863(9')(%2);%')&33/  %440-'%8-32*367)2(-2+%2(6)59)78-2+132)=





,)%440-'%8-32%003;74)340)8397))6:)837)2(366)59)78132)=83

-+24*36)6:)

%2=32);-8,%2)1%-0%((6)77(-6)'80=*631%')&33/,-7-7+6)%8*36+6394 +-*87364%=-2+%')&33/*6-)2(7&%'/-2.978%*);'0-'/7

)6:)

63*-0)

3+-2

)6:)-7%2)<8+)2)6%8-32(-+- 8%04%=1)28740%8*3618,%8,)047 =3936+%2->)=396132)=7)2( %2(6)')-:)*92(7%2(1%2%+) 4%=1)286)59)787?%00*631% 7-2+0)92-*-)(320-2)%''3928 3+-283"396)6:) '''3928 )6:)1%/)74%=-2+%2(&)-2+ 4%-(7-140) *6:* 28*6=396 *6:**1&.0&2)4&77;36)'*03;



06*&)=-&:*&2&((39283+2

31)

-+24



6&2).2,

)2(%2()59)7832)=



36*1.4791)30367.8&(3113)3

7)"396)8;36/

6)%8)%836)

36*1.4791)30367.8&1*87&,.88.7

36*1.4791)30367.8&1*8(32)7)



3-27



1%-0  %77;36(  36+38=396%77;36(

9831&8.(&00= .,21*.2 38&1*1'*6=*8-+24+36&2*; *6:*&((3928

7)=396%')&33/)8;36/83+)84%-(%2(4%=94

%2')0

 3;,%8-7)6:)

*6:*.7&2*<8,*2*6&8.32).,.8&04&=1*28740&8+3618-&8 -*047=3936,&2.>*=396132*=7*2)&2)6*(*.:*+92)7 &2)1&2&,*4&=1*286*59*787?&00+631&7.2,0*92.+.*) 320.2*&((3928 *6:*1&/*74&=.2,&2)'*.2,4&.)7.140*



*&62136*&8)6:)'31 

06)%(=%1)1&)6

387))-2+;,%8=39B6)033/-2+*36

)59)7832)=

  *6:* *4368 328&(88-.744 2,0.7-" 

36*1.4791)30367.8 &1*8(327*(8*896&).4.

 '398

 ):*68.7.2,

 6*&8*&&,*



3+2

     *:*034*67 &6**67 6.:&(= !*617 *04

3+2

)2(32)=

36*1.4791)30367.8 &1*8(327*(8*896&).4.

%2%+)%=1)287

36*1.4791)30367.8 &1*8(327*(8*896&).4.

*17/:81&/=119;;:B97:-010

&1=A1;;9?=: 7=;8->,=287=8%.;?.*,.+8849952,*=287*7-52<= 8/=1270<B8>,*7-8 &539(;2:=&1=A1 52,427087=12<+>==87@25558*-=1.%.;?.,869*0. 27*7.@@27-8@<207>9H8@   :39 52,427087=1.5274@255-2<95*B=1.58027989>9 @27-8@



  *6:* *4368 328&(88-.744 2,0.7-" 

 '398

 ):*68.7.2,

 6*&8*&&,*

     *:*034*67 &6**67 6.:&(= !*617 *04

:331059?:&1=A1//:@9?

 :39 52,427087=1.807+>==87@255-2<95*B=1. -*<1+8*;-5800.-27<=*=.

 *4-?5>&1=A1 .<<*0.-.<,;2+270@1*=%.;?.2<  &1=A1 /:87596 52,427087=1.5274@25558*-=1.%.;?.,8627*7.@ @27-8@

 

 Serve Facebook App | Beatriz Vizcaino


Serve Facebook App | Dashboard -/1.::6;;E->4.:-=0-90!1>>-31> %')&33/ *6:* 3,3

31)



)6:)

%=1)287-263+6)77

3+398

20-2/ ''3928





 



1-0=3()2 7)28=39132)=

1.0=@763+.0* .(896*



:-%)6:)

*=0&)=3;*=39+360&782.,-8@7).22*6*6*=39,3<3<31.0= %2')0

'')48

!3:.*;6*(*2886&27&(8.327238.+.(&8.327&2)1&2&,*=396&((39287,383 *6:*(31 

3)732)3*=396*6-)2(73;)=39

 )8%-(



 %=4



32)3*=396*6-)2(7%6)97-2+)6:) !%2883,)048,)1+)84%-(



)%623;



  *6:* *4368 328&(88-.744 2,0.7-" 



2:-8)6-)2(7

-(=39/23;=39'%2 '6)%8)%7836)32%')&33/





2:-8)6-)2(7

 '398

 ):*68.7.2,

 6*&8*&&,*

 $-D819?>59$=:3=1>> &12<<.,=287-2<95*B<*55;.:>.<=*7-<.7-=;*7<*,=287<=1*= ;.:>2;.-><.;*,=287/;86*,.+884*7-%.;?.,86  !1>>-31:@9? &12<@255-2<95*B=1.6.<<*0.=1.><.;2<87*7-=1.=8=*5 7>6+.;8/6.<<*0.<

 %1<@1>?-90&190!:91D &1.><.;,*7=*4.=@86*27*,=287<)1.7=1.><.;18?.;< 8?.;=1.*,=287=1.,858;8/=1.2,87*7-=.A=,1*70.<

,337)%*6-)2(



 :3:@? 52,427087=1.5808>=+>==87@2555808>==1.><.;/;8612< %.;?.*,,8>7=87*,.+884

 -9/17 /=1.><.;1*<+..7<.7=8;;.:>.<=.-687.B*7-1. ,*7,.5<=1.=;*7<*,=287@255+.6*;4.-*<-.,527.-&1. 6.<<*0.@255+.,5.*;.-

3(3=393;)%*6-)2(132)=

6)%8)%836)

(97596//:@9? 52,427087=12<+>==87@255-2<95*B=1.989>9@27-8@/8; '75274,,8>7=

 //1;? 52,427087=1.,,.9=+>==87@255<18@*<>,,.<< 6.<<*0.

,337)%*6-)2(

*2)32*= (32

->4.:-=0 :33109

 &/=:77 52,427087*;;8@<@25558*-=1.7.A=8;9;.?28><6.<<*0.

*59*7832*= (32

63*-0)

2011



     *:*034*67 &6**67 6.:&(= !*617 *04

 4::>1-2=5190 52,427087=1.188<.*/;2.7-+>==87@255-2<95*B=1. ,188<.*/;2.7-989>9@27-8@

=1-?1-&?:=1 )1.7=1.><.;1*<78=,;.*=.-*7B<=8;.<=12<*;.*@255 -2<95*B*727<=;>,=287*56.<<*0.*+8>=<=8;.<*7-*,*55=8 *,=287=85.*;768;.*+8>=<=8;.<

 1-=9:B.@??:9 52,427087=1..*;78@+>==87@25558*-=1.<=8;.27=;8 9*0.,*76*;4.=270,;.*=.=12<9*0.

9A5?1=5190> )1.7=1.><.;-8.<78=1*?.*7B/*,.+884/;2.7-<@18 1*?.=1.%.;?.*99=12<*;.*-2<95*B<*727<=;>,=287*5 6.<<*0.*7-*+>==87=827?2=./;2.7-<

 9A5?1=5190>.@??:9 52,427087=1.+>==87@255-2<95*B=1.27?2=./;2.7-<989>9 @27-8@

 



Serve Facebook App | Beatriz Vizcaino


Serve Facebook App |

Logged in - Dashboard 2011

-/1.::6;;E!D&?:=1-90=5190>(>593&1=A1

%')&33/ *6:* 3,3

31)

)6:)

20-2/ ''3928

 



 1-0=3()2 7)28=39132)=

1.0=@763+.0* .(896*

:-%)6:)

*=0&)=3;*=39+360&782.,-8@7).22*6*6*=39,3<3<31.0=

!D&?:=1 /=1.><.;1*<2=.6<87=1.%.;?.<=8;.=12<<.,=287 -2<95*B<=1.=1;..68<=;.,.7=2=.6<*--.-=8=1.<=8;.  )51B!D&?:=1 52,427087=1.(2.@ B%=8;.+>==87@25558*-=1.%=8;. 9*0.  =5190>&?:=1 /=1.><.;1*<*,.+884/;2.7-<@2=1=1.%.;?.*99=12< <.,=287@255-2<95*B=1;..;*7-86/;2.7-F<<=8;.<

'')48

%2')0

->4.:-=0&?:=1-90=5190>(>593&1=A1

$=:G71$5/?@=1 &12<*;.*-2<95*B<=1.%.;?.9;8G5.92,=>;.

3+398

%=1)287-263+6)77

63*-0)



!3:.*;6*(*2886&27&(8.327238.+.(&8.327&2)1&2&,*=396&((39287,383 *6:*(31

>=>;.%18>5-875B<18@/;2.7-<=1*=1*?.2=.6<87<=8;.<

 )8%-(

3)732)3*=396*6-)2(73;)=39

 )51B77=5190> 52,427087*/;2.7-@25558*-=1.9.;<87F<%.;?.<=8;.9*0.



*59*7832*= (32

 9A5?1-=5190 52,427087=1.5274@25558*-=1.7?2=.*/;2.7-989>9 @27-8@

,337)%*6-)2(

 %=4

3(3=393;)%*6-)2(132)=



*2)32*= (32

,337)%*6-)2(



=836)

63;2-)

 

33/-)

-7-8=836)

./*$&>3;7/.

-6(-)

 

 



6-)2(7B836)7

3-2&=*6

&6.77&!31*.

-); 006-)2(7B836)7



2:.8*&+6.*2)



  *6:* *4368 328&(88-.744 2,0.7-" 

 '398

 ):*68.7.2,

 

 6*&8*&&,*

     *:*034*67 &6**67 6.:&(= !*617 *04

Serve Facebook App | Beatriz

Vizcaino


Serve Facebook App |

Logged in - Dashboard 2011

-/1.::6;;E$-D819?>59$=:3=1>>&@//1>>!1>>-31-90":!1>>-31>

%')&33/ *6:* 3,3

31)

)6:)

20-2/ ''3928

%')&33/ *6:* 3,3

3+398

%=1)287-263+6)77

63*-0)

)6:)

'%"& )



1-0=3()2 7)28=39132)=

63*-0)

3+398



8B7%00+33(34%=1)287-2463+6)776-+,823;

& %

1.0=@763+.0* .(896*

20-2/ ''3928

%=1)287-263+6)77



"39B:)79'')77*900=%'')48)(  *6311-0=3()2

31)

 !3:.*;6*(*2886&27&(8.327238.+.(&8.327&2)1&2&,*=396&((39287,383 *6:*(31



:-%)6:)

 )8%-(

! #" '

3)732)3*=396*6-)2(73;)=39

*=0&)=3;*=39+360&782.,-8@7).22*6*6*=39,3<3<31.0=



*59*7832*= (32



!3:.*;6*(*2886&27&(8.327238.+.(&8.327&2)1&2&,*=396&((39287,383 *6:*(31

,337)%*6-)2(

3)732)3*=396*6-)2(73;)=39

)8%-(

 %=4

3(3=393;)%*6-)2(132)=



*59*7832*= (32



*2)32*= (32 ,337)%*6-)2(

,337)%*6-)2(

3(3=393;)%*6-)2(132)=

 %=4

=836)



*2)32*= (32

6-)2(7B836)7

,337)%*6-)2( 63;2-)

=836)

 

6-)2(7B836)7

63;2-)

33/-)

-6(-)

./*$&>3;7/.

3-2&=*6

&@//1>>!1>>-31 &12<6.<<*0.@255+.-2<95*B.-@1.7=1.><.; 1*<*,,.9.=.-*=;*7<*,=287=/*-.<8>=*/=.;  <.,87-<*7--2<95*B<=1.7.A=6.<<*0.

 

 

./*$&>3;7/.

-6(-)

&6.77&!31*.

3-2&=*6

&6.77&!31*.

 

-); 006-)2(7B836)7

-7-8=836)



 

 

 

*17/:81&/=119&@//1>>!1>>-31

33/-)

  *6:* *4368 328&(88-.744 2,0.7-" 

2:.8*&+6.*2)

 '398

 ):*68.7.2,

 6*&8*&&,*

     *:*034*67 &6**67 6.:&(= !*617 *04

->4.:-=0":$-D819?>

":$-D819?>59$=:3=1>> &12<6.<<*0.@255+.-2<95*B.-@1.7=1.;.*;.78 6.<<*0.</8;=1.><.;=8=*4.*,=28787 #?41='=-9>-/?5:9> &12<6.<<*0.,5*;2G.<=1*=<86.*,=287<7..-=8+. =*4.787%.;?.,86

Serve Facebook App | Beatriz Vizcaino


Serve Facebook App | -/1.::6;;E&?:=1

Logged in - Store 2011

%')&33/

31)

)6:)

*6:* 3,3

20-2/ ''3928

=8)17%2(:)287 

3+398

%'/83%7,&3%6(



63*-0)

&?:=1

-/6?:->4.:-=0 52,427087=1.*,4=8*<1+8*;-+>==87@25558*- =1.-*<1+8*;- !1>>-31 &12<,89B<18>5-+.;.?2<.-

 "39,%:)'6)%8)(-8)1736):)2878,%8%6)238-2=3967836) 0-'/8,)@%((-8)17):)287A0-2/%&3:)83:-);%2(%((8,)7)83=3967836)

=<18>5-.A95*27;.5*=287<129+.=@..72=.6.?.7=< ,;.*=.-87%.;?.,86*7-*,.+884%=8;.  00?18> A19?> 52,4270=12<+>==87@255-2<95*B=1.*--2=.6<.?.7=< 989>9@27-8@

'')48

33/-)

63;2-)

 

9=

-/)

9=

*43688-.7.8*1





;07

 

((8)17:)287

  *6:* *4368 328&(88-.744 2,0.7-" 



9=

-/)

*43688-.7.8*1

-/)

*43688-.7.8*1



 '398

 ):*68.7.2,

 

 6*&8*&&,*

     *:*034*67 &6**67 6.:&(= !*617 *04



Serve Facebook App | Beatriz Vizcaino


Serve Springboard - Transaction Behavior


Transaction Behavior | Transaction Summary 2012 Transaction Behavior Annotations | An Anatomy of a P2P Transaction Summary Transactions

The transaction summary appears on Springboard, All Transactions, and at the bottom of the transaction detail page. SHOW

All Activity

for

Last 90 Days

Search

GO

Transaction Status

Active

Sender/Recever Contact Info Further exploration required

Date

Pending JUL

27 1

+ $30.25

Payment from Rose rosebud@gmail.com

Expiration Info (conditional) Displayed on active transactions.

Expires in 7 days

Rose sent: “Hey here you go. Thanks for covering me last night.”

Decline

Actions (Variable). Reflects the possible actions a user can take on a transaction. The actions possible vary with the transaction status.

Amount with money in/money out designation

Negotiate

Accept

Message Area Includes: •

Number of messages/actions

Action taken.

Latest message (if entered)

Further exploration required

Complete

Eames | Transaction Behavior Annotations | 1.0 | August 22, 2012

4

Transaction Behavior | Beatriz Vizcaino


Transaction Behavior | Transaction Summary Transition Transaction Behavior | Springboard | Accept, Decline & Negotiate

2012

Nav

Nav

Nav

Nav

Nav

Wallet

Wallet

Wallet

Wallet

Wallet

Notifications Area

Notifications Area

Notifications Area

Notifications Area

Notifications Area

Transactions Transaction Summary: Original State

1. Springboard Transaction summary on the springboard presented with actions.

Transactions

Transactions

Taking an action on a transaction may reveal additional options (e.g. ability to add a message) and a confirmation action.

Eames | Transaction Behavior Annotations | 1.0 | August 22, 2012

Transactions

Transaction Summary: New State

Confirmation State with additional options

2. Confirmation (conditional)

Transactions

3. Transition Sequence

4. New State

5. Resolved State

Once the user submits, the transition sequence highlights the status change (and new amount if applicable) of the new state of the transaction.

The new state of the transaction is displayed on the springboard.

After displaying the new status of the transaction, the transaction is removed from the springboard.

6

Transaction Behavior | Beatriz Vizcaino


Notifications

View All Notifications»

Transaction Behavior | Transaction Summary Status - Accept Transactions 1. Original State

Accept Flow & Transitions 2012

View All Transactions »

$

Pending

1

+ $30.25

Payment from Rose

JUL

27

rosebud@gmail.com

1

Expires in 7 days

Rose

Decline

Negotiate

Rose sent money to Beth. Beth views the transaction as pending. She can decline, negotiate or accept. She selects accept, but doesn’t leave a message.

Accept

2. Confirmation State Transactions JUL

SHOW

27

Pending

+ $30.25

Payment from Rose rosebud@gmail.com

All Activity 1

Beth

Rose Sent: “Hey here you go. Thanks for covering me last night.”

for

Last 90 Days

Expires in 7 days

Search

GO

Rose Sent: “Hey here you go. Thanks for covering me last night.”

Active

Leave a Message (Optional)

Are you sure you want to accept? Are you sure you want to accept?

Go Back

Confirm

3. [Transition to new state]

Complete

4. New State Complete JUL

28 2

Payment from Rose rosebud@gmail.com

+ $30.25

1 2

1. On the new state status changes to complete. 2. The amount changes to the completed treatment.

You Accepted

Eames | Transaction Behavior Annotations | 1.0 | August 22, 2012

12

Transaction Behavior | Beatriz Vizcaino


Transaction Behavior | Message History Concepts Transaction Detail: Message History Concepts

2012

Transactions

Transactions

« All Transactions

« All Transactions

+ $35.00

Payment from Rose

JUL

28

rosebud@gmail.com

Expires in 7 days Negotiated

07/28/2012

Rose Said: Everyone else had an extra drink though... split the difference?

+ $35.00

07/28/2012

You Said: Your share was actually more, everyone paid $40.

+ $40.00

07/27/2012

Rose Said: Hey here you go. Thanks for covering me last night.

+ $30.00

Decline

Negotiate

Accept

Other Transactions with Rose

+ $35.00

Payment from Rose

JUL

28

rosebud@gmail.com

07/28/2012

Expires in 7 days Negotiated

Rose Said: Everyone else had an extra drink though... split the difference?

Decline

Negotiate

+ $35.00

Accept

07/28/2012

You Said: Your share was actually more, everyone paid $40.

+ $40.00

07/27/2012

Rose Said: Hey here you go. Thanks for covering me last night.

+ $30.00

Other Transactions with Rose

Concept 1

Concept 2

In this concept previous messages are presented below the latest message within the transaction box. Associated amounts are presented in-line with each message.

In this concept previous messages are presented below the transaction box. The latest message is presented within the transaction box. Associated amounts are presented in-line with each message.

Pro: Messages are grouped together to give the impression of a stream of messages, improving readability. Con: The actions that can be taken on a transaction get pushed lower down the page. This could be problematic on a mobile device. Also, since negotiated amounts are between the buttons and the current amount, it is unclear which amount is being acted upon. Additionally, when adding a message with action; it resolves to the top of the list and isn’t related to where it was entered.

Pro: Actions that can be taken on a transaction are given priority and its clear what amount is being accepted, negotiated or declined. Con: Since the messages are separated from the transaction box, it is difficult to see how they relate to the latest message.

Next Steps • Explore a refinement of Concept 2 in graphic design.

Eames | Transaction Behavior Annotations | 1.0 | August 22, 2012

23

Transaction Behavior | Beatriz Vizcaino


beatryev portfolio