Alan Natale
Goal:
Produce DARE feature film
microsite to coincide with
Theatrical release.
Solution:
I worked with Stakeholders to
design everything from site
objectives to visual design. I also
coordinated social media, SEO
and provided analytics. Once
the film ran its theatrical course,
I redesigned aspects for home
video release.
Goal:
Produce THE OTHER MAN
feature film microsite to coincide
with Theatrical release.
Solution:
I worked with Stakeholders to
design everything from site
objectives to visual design. I also
created motion posters and
additional web ad support.
Web Design:
Microsites, email Blasts, Flash
Alan Natale
Goal:
Coordinate a benefit video
festival and create a compelling
email blast to promote.
Solution:
I created an email blast to
announce the benefit video
competition, built out a vimeo.
com group to establish the
infra-structure and produced an HD
video invitation as well.
Goal:
Produce THE ELECTRIC
MIST feature film microsite as
a FLASH interactive to coincide
with Theatrical release.
Solution:
I worked with Stakeholders to
design everything from site
objectives to visual design.
CATEGORY (L1)
Health Plan
PURPOSE (L2) Bills and Statements
TYPE OF DOCUMENT (L4) Hospital Bills
SUB-PURPOSE (L3) Annual Plan Information SUB-PURPOSE (L3)
My Bills
PURPOSE (L2) Coverage: Renewals
L1-Category- Health plan documents
L2-Plan Type
L3- Purpose
L4: Type of Document
L5: SubType of Document
TYPE OF DOCUMENT (L4) Physician Bills SUB-PURPOSE (L3) Kaiser Permanente’s Payments TYPE OF DOCUMENT (L4) Explanation of Benefits (Medical)TYPE OF DOCUMENT (L4) Medicare Explanation of Benefits (Part D)
PDF ATTRIBUTE
Physician Bills [transaction#A].PDF and other attributes
PDF ATTRIBUTE
Physician Bills [transaction#B].PDF and other attributes
PDF ATTRIBUTE
Hospital Bills [transaction#A].PDF and other attributes
PDF ATTRIBUTE
Hospital Bills [transaction#B].PDF and other attributes
PDF ATTRIBUTE Latest Document Explanation of Benefits[approval #######] .PDF and other attributes
PDF ATTRIBUTE Latest Document
Explanation of Benefits (Part D) [approval #######] .PDF and other attributes TYPE OF DOCUMENT (L4)
Current Kit
Kit ATTRIBUTE--Section
Annual Notice of Change and other attributes PDF ATTRIBUTE
Letter [approval #######] .PDF and other attributes
PDF ATTRIBUTE
Evidence of Coverage [approval #######] .PDF and other attributes
Kit ATTRIBUTE--Section Evidence of Coverage and other attributes
PDF ATTRIBUTE
Pharmacy Directory[approval #######] .PDF and other attributes
Kit ATTRIBUTE--Section Pharmacy Directory and other attributes
© Kaiser Permanente 2011 | Proprietary and Confidential – for internal use only.
eServices Revenue Cycle
Annotated wireframes
My account
My health manager
Health & wellness
Health plans & services
Locate our services
My medical
record
image
Welcome, [Sign-on Name] |
Sign out
utility navigation utility navigation utility navigation
Search
Pharmacy
center
Appointment
center
My message
center
My plans and
coverage
My
Doctor
My health manager
■
My plan and coverage
●
New to Kaiser Permanente?
●
Learn about my plan
●
Eligibility and benefits
●
My account
●
View premium bill
●
Estimates
●
Out of pocket summary
●
Order a replacement ID card
Related links
Use my plan
Documents and downloads
Additional services
●
In vitro fertilization services
●
Optical services
●
Laser vision care
●
Cosmetic services
●
Hearing services
●
Medical weight management
program
Link 1
Link 2
Link 3
---●
My documents
●
Document delivery preferences
●
Forms and publications
Change document delivery preferences
Below you will find a list of your accounts, along with account status and your
balance and amount due.
To pay a bill, select the “Make payment” link.
To see your billing history and past payments, click the guarantor account
number.
Account type
Bill status
Manage my payment method(s)
Hospital billing Physician billing
Past due
Current$510.00
Balance
$60.00
$450.00
MY ACCOUNTThis gives the User view of accounts (Guarantor and accounts overseen by the Guarantor), types of outstanding bills, amounts and a link to pay bills.
1. Link to delivery preference page.
2. Specified “Guarantor account” instead of just “Account” until further clarification of nomenclature. Links to Account Details page.
3. User may access previously entered account(s) by clicking on the Manage my payment(s) link which takes the User to the Payment Methods – Account(s) on file page. User may view, change default, add or delete payment methods.
In the event the User does not have any stored account information, this link will instead be: Add a payment method. Clicking on the Add a payment method link will take the User to the Payment Methods – No Account(s) on file page and may enter an account.
4. Make payment links to Account Payment page. 5. Space for additional text/disclaimer.
Note:
Proxy feature has been removed from this page. Edge case of two Guarantor Accounts.
It is possible (regional) that there may only be Physician Billing or Hospital Billing as well as both types of billing displayed.
Account summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim nunc,
porttitor at sodales sit amet, scelerisque molestie mi.
Billing type
Total payment:
Account Details
My health manager
Health & wellness
Health plans & services
Locate our services
My medical
record
image
Welcome, [Sign-on Name] |
Sign out
utility navigation utility navigation utility navigation
Search
Pharmacy
center
Appointment
center
My message
center
My plans and
coverage
My
Doctor
My health manager
■
My plan and coverage
●
New to Kaiser Permanente?
●
Learn about my plan
●
Eligibility and benefits
●
My account
●
View premium bill
●
Estimates
●
Out of pocket summary
●
Order a replacement ID card
Related links
Use my plan
Documents and downloads
Additional services
●
In vitro fertilization services
●
Optical services
●
Laser vision care
●
Cosmetic services
●
Hearing services
●
Medical weight management
program
Link 1
Link 2
Link 3
---●
My documents
●
Document delivery preferences
●
Forms and publications
If you have questions about a bill or payment, please call [information to come].
ACCOUNT DETAILS
This gives the User view of one particular account, amount due, link to pay bill, Hospital and/ or Physician billing history viewable up to two years prior and payment history up to two years prior. Billing and payment history are offered on the same page for the user to review and compare information with ease. Note- this page is off the payment flow however offers a Make payment button and return to My account link to return to the pay flow.
1. Depending on User’s region there may only be Physician Billing, only Hospital Billing or a combination of both.
If the User has both Physician Billing AND Hospital Billing, respective tabs will convey balance, billing history and past payments – sorted by date.
If the User has only one type of billing (ie. Physician Billing) then the page will only display that type of billing – no tabs.
2. View bill links to .pdf file of bill. Use the Download Support Design Pattern http://svn.kp.org/ cgi-bin/viewvc.cgi/tags/crux_deliverables/design_patterns/download_support_r3/
?root=platformui.
(note: the pattern may have negative accessibility consequences).
3. Make payment button, clicking button will take User to Account payment page. Return to my account links to the My account page.
ACCOUNT INFORMATION
Guarantor account:
#111111111
PHYSICIAN BILLING
Balance as of 11/18/2011:
$450.00
HOSPITAL BILLING
Balance as of 11/18/2011:
$60.00
Select “View bill” to see details of that bill. You can also change the date range of the
bills you want to see. (You can view bills up from two years before today’s date.
BILLING HISTORY
Bill date
08/18/2011
08/1/2011
Bill amount
Minimum due
Due date
Action
07/21/2011
$100.00
$240.00
$110.00
$50.00
$50.00
$50.00
11/18/2011
10/1/2011
9/21/2011
View bill
View bill
View bill
PAST PAYMENTS
Date
02/18/2011
01/25/2011
Description
Reference number
Payment amount
11/10/2010
Online payment
CSR assisted
1111222333
$100.00
$200.00
$130.00
Online payment
1114879343
1194509334
XX/XX/XXXX
TO
XX/XX/XXXX
Date Range
XX/XX/XXXX
TO
XX/XX/XXXX
Date Range
Past payment information is listed below. You can also change the date range of the
payments you want to see. (You can view payments from up to two years before
today’s date).
Make Payment
Return to my account
© Kaiser Permanente 2011 | Proprietary and Confidential – for internal use only.
eServices Revenue Cycle
Annotated wireframes
Account Payment
My health manager
Health & wellness
Health plans & services
Locate our services
My medical
record
image
Welcome, [Sign-on Name] |
Sign out
utility navigation utility navigation utility navigation
Search
Pharmacy
center
Appointment
center
My message
center
My plans and
coverage
My
Doctor
My health manager
■
My plan and coverage
●
New to Kaiser Permanente?
●
Learn about my plan
●
Eligibility and benefits
●
My account
●
View premium bill
●
Estimates
●
Out of pocket summary
●
Order a replacement ID card
Related links
Use my plan
Documents and downloads
Additional services
●
In vitro fertilization services
●
Optical services
●
Laser vision care
●
Cosmetic services
●
Hearing services
●
Medical weight management
program
Link 1
Link 2
Link 3
---●
My documents
●
Document delivery preferences
●
Forms and publications
Continue>
Cancel
To make a payment, enter the amount under “Payment amount” and then select
“Continue.” For details about an account, click the guarantor account number.
ACCOUNT PAYMENT
This gives the User the choice to add in payment amounts, see the total, choose a method of previously entered payment methods to pay bill, the ability to add another different payment method and to continue on to pay bill.
1. Guarantor Account number links to the Account Details page.
2. If the User has previously entered payment options, the N-item drop-down list allows the User to choose from entered payment options. Use the Drop-down Input pattern http:// svn.kp.org/cgi-bin/viewvc.cgi/tags/crux_deliverables/design_patterns/dropdown_input/ ?root=platformui.
3. “Add or change payment method” - User is taken to the Payment Methods page (Previous Entries) to enter new accounts or edit previously entered accounts.
4. Continue button takes the User to the Review Your Payment page. 5. Cancel link takes User back to previous page.
6. If User has never entered payment options:
The drop-down pattern (when User has payment method entries) will not exist rather, User will see “the “Add a payment method” link which will take them to the “Payment Methods” (No Previous Entries) page. Cancel link takes User back to previous page.
Account type
Bill status
Guarantor account
#111111111
JONES, CHRIS
Hospital billing Physician billingPast due
Current$60.00
$450.00
$510.00
Total amount dueBalance due
Payment amount
$510.00
Total payment
Billing type
60.00
450.00
How would you like to pay?
(You can review your payment before it’s final.)
Add or change payment method
Add a payment method
Cancel
Chris CHECKING
$
$
!
Don’t use your browser’s back button. It will cancel this process.
Payment method – add account
My health manager
Health & wellness
Health plans & services
Locate our services
My medical
record
image
Welcome, [Sign-on Name] |
Sign out
utility navigation utility navigation utility navigation
Search
Pharmacy
center
Appointment
center
My message
center
My plans and
coverage
My
Doctor
My health manager
■
My plan and coverage
●
New to Kaiser Permanente?
●
Learn about my plan
●
Eligibility and benefits
●
My account
●
View premium bill
●
Estimates
●
Out of pocket summary
●
Order a replacement ID card
Related links
Use my plan
Documents and downloads
Additional services
●
In vitro fertilization services
●
Optical services
●
Laser vision care
●
Cosmetic services
●
Hearing services
●
Medical weight management
program
Link 1
Link 2
Link 3
---●
My documents
●
Document delivery preferences
●
Forms and publications
CONTINUE
Back
Cancel
Enter a new checking, savings or credit card acount:
CHECKING ACCOUNT
PAYMENT METHOD – NO PREVIOUS ENTRIES – CHECKING ACCOUNT EXAMPLE
This gives the User ability to add a checking, savings, credit card or debit card account. Progressive reveals convey requisite entry fields.
1. User selects the “Credit or Debit Card” by radio button which triggers a progressive reveal of requisite fields of information for User to populate.
2. “what’s this?” offers contextual help, TBD graphic indicating to where to find CVN number on credit cards.
3. User is given the option to NICKNAME this method of payment for convenience/ease of reference.
4. Check box offer User choices to save this payment method and to use the account for payment as default once requisite information has been successfully entered.
5. User does not need to store this account information*; if User does not select “Save card…” and “Make this my…” but then clicks the ”Continue” call to action button - User may pay bill with account information entered as a one-time method.
Continue button links to “Review your payment” page.
SAVINGS ACCOUNT
CREDIT OR DEBIT CARD
Make this my default payment method.
!
Don’t use your browser’s back button. It will cancel this process.
Choose a card type:
Visa
Nickname for this card (optional):
Card number:
Expiration Date
Save this card for future use on this site.
/
(mm/yyyy)
Security Code
[what’s this?]
Enter a new card:
Name (as appears on the card):
*In the event that the User would like to NOT save the credit card (ie. User is applying a particular payment method only once and not wanting the method to be saved in the system), they would choose NOT to select check box “Make this my default payment method” nor select check box “Save this card for future use on this site” and can apply the card with the call-to-action button “Continue.”
Edge case scenario - should the User want to enter a credit card outside of a bill payment scenario (ie. The User wants to simply enter payment method for future use)? There is no path from primary or secondary nav for the User to accomplish this directly. Flow would involve the User navigating past the “My Account” page “Make Payment” link then to the “Account Payment” page and click on the “Add or change payment method” link. Once at the “Payment Method” page (either previous entries or no previous entries) may then choose a payment method (checking, savings, credit card), enter the requisite fields, select check box “Save this card for future use on this site” and apply the card with the call-to-action button “Use this payment method.” The User will be taken to the “Account Payment” page where they may use the cancel link to end the flow.s
WIREFRAMES
Project: Marketplace Maps
Client:
American Public Media
Marketplace.org
Alan Natale
alanNdesign.com
323-253-5300
Notes:
UX Design
Project Example: Marketplace Maps
for American Public Media (NPR)
Problem:
The problem presented by the Web Producer pertained to a copious
amount of sortable data which needed to be selectable and connected to
static and dynamic map visuals.
Process:
Meetings with the Web Producer and Developers to gather information:
• Discuss who (personas) would be typical Marketplace Maps users.
• Explore how Marketplace Maps pages will relate informationally and
visually to other Marketplace.org sub-sites.
• Determine central information (the maps) and discuss how that
infor-mation will be presented visually (static images, flash aniinfor-mation).
• Visual design and functioning of navigational elements, drill-down
but-tons, graphs, information grids and Ad placement considerations.
• Create wireframes from my meeting notes, sketches and notes offered
by the Web Producer and Developers.
• Obtain enough actual information to use for wireframes and visual
design from the Research/Copywriter.
Solution:
I factored together the information, created wireframes as an initial
ex-ploration of the User Experience and laid a foundation for visual design.
• Studied the Marketplace.org’s existing sub-sites for visual
commonali-ties, visual language and information architecture.
• Created wireframes which I then shared back and forth with the Web
Producer to discuss and hone further.
• Visual Design with Photoshop. Constructed a detailed visual mock-up
harmonious with existing Marketplace.org sub-sites and the financial
sensibilities of Marketplace.org Users.
Please read on to see:
• 2 example of wireframes
• The visual design, page mock-up
Project: Marketplace Maps
Client:
American Public Media
Marketplace.org
Alan Natale
alanNdesign.com
323-253-5300
Notes:
Marketplace Maps: ECONOMY
Default Map Page “Map” Landing
Header
Ad Hot Spots on hover: color change from cream to light blue. Once User clicks X to close out Welcome pop-up default (U.S.A.) map is revealed. Navigate to other mapsFooter
State State State State State State State California State State State State State State State State State California State State State State State State State State State California State State State State State State State State State California State StateAd
Headline Stack
Headline Headline Headline Headline Headline Headline Headline Headline Headline Map DescriptionState NameÅ UnemployÅ Job PayÅ ForclosuresÅ
10 rows display with scroll bar on side “fold”
CALIFORNIA
11% UNEMPLOYMENTLorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lor-em ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text. loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text.
0 1 2 3 2
1
Country U.S.A Region Economy More Canada
Mexico England
WIREFRAMES
Project: Marketplace Maps
Client:
American Public Media
Marketplace.org
Alan Natale
alanNdesign.com
323-253-5300
Notes:
State Page
Marketplace Maps: ECONOMY
Header
Ad
CALIFORNIA 11% UNEMPLOYMENT
Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, tem-plate text, sample text, dummy copy text, Latin sample text.HTML dummy text, Lorem ipsum dummy text, fi ller text or copy fi lling text, and many other names Lorem
ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem
ipsum text, Latin dummy text. Template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, fi ller text or copy fi lling text, and many other names
Pie Chart or Bar Graph Here.
Footer
State State State State State State State California State State State State State State State State State California State State State State State State State State State California State State State State State State State State State California State StateAd
Headline Stack
Headline Headline Headline Headline Headline Headline Headline Headline Headline State NameÅ UnemployÅ Job PayÅ ForclosuresÅ10 rows display with scroll bar on side “fold” 0 1 2 3 2 1
Country U.S.A Region Economy More Canada
Mexico England
Asia Å Level Å Maps Å Navigate
