Presented by: Dave Wilson, SunPass

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

81 views


Presented by: Dave Wilson, SunPass

Web
-
enabled mobile phone growth


There were
302 million
wireless subscriber
connections in the US in December 2010.


In 2011 over
85%
of new handsets will be able to
access the mobile web.


25%
of mobile web subscribers in the US are
mobile
-
only.



In North America 3G handset penetration was
38%

in 2009, and is projected to be
74%

in 2014.


There are
65 million
text
-

and web
-
enabled
phones in the US.

statistics from mobithinking.com and cellsigns.com


Terminology


Mobile application vs. mobile web application

o
A
mobile application
is a "rich client"

o
A
mobile web application
is a web application
optimized for mobile devices


Desktop vs. Mobile

o
A
desktop site
is a traditional website

o
A
mobile site

is optimized for small screens and
low bandwidth


SunPass.com 12 years
old


Originally released as
an outsourced
ColdFusion site


Brought in
-
house and
rewritten in Java in
August 2010 as an
exact duplicate of the
ColdFusion site


History and Motivation (Part I)


Updated in December
2010 with a new look
and feel, including
Wizards for complex
account operations


Used external web
design firm because
there were no in
-
house design
resources


History and Motivation (Part II)

History and Motivation (Part III)


SunPass.com access logs show

255,640,407
hits for March 2011


SunPass.com had
49,516

credit card
transactions
totalling

$8,129,472
for March
2011


The tollbyplate.com violation document
payment website handles an additional
$500,000
per month


Based on the size of the mobile market and the
activity on the SunPass website, management
decided they wanted a mobile website.

Mobile Design Principles


We are not mobile experts


Covered in
Firtman’s

Programming the Mobile
Web
and at Code Camp seminar


Three types of mobile device: Web,


medium, and dumb phone


Simplicity


Progressive enhancement


Device detection so users are routed to correct
version of site

Requirements


Mapped every flow
before start of work


Selected subset of
desktop functionality


Initial mockups on paper


Next step was simple
HTML mockups

Add
/
Update Credit Card
CC Confirm
Screen
Info validated
Success Screen
Requirements (cont’d)


Next we developed
headers and footers


At the final signoff
meeting we presented
complete site mocked
up with clickable static
pages

Experimenting with graphics


Once functionality was
approved, we called in a
design firm


Resulting pages looked
great but weren’t quite
right for mobile


Header too large


Extraneous graphics


No space for
header/footer navigation

Requirements Complete


Actually got to follow the ideal
requirements/development process



Or did we??

Scheduling


Three options


Based on the mockups


Management chose the
middle option


Oh yeah


plus the
mobile document
payment site

Scheduling Formula:



S x P




= S


M



S
= Schedule Length


P

= Developer Padding


M

= Management Truncation

Design


Decided to use existing structure:


Struts2 and Tiles framework


SunToll web service framework



HTML/web service strategy for security and
reuse

Tiers

Development Tools


Eclipse, JBoss, Solaris


Tiles


Subversion (this was huge


for team development)


WURFL (not Danny
Wuerffel
!)






WURFL


WURFL is an XML configuration file with data
on many mobile devices


W
ireless
U
niversal
R
esource
F
ile


Checks User
-
Agent tag against 4000
-
entry
database to determine device capabilities


Device information includes screen size,
pointer type, JavaScript support, OS


Java API provides access to the WURFL data

Surprise! (
¡
Que

lastima
!)


Additional
requirements for
Spanish


Use of text tags and
resource bundles for
i18n


Piggybacked on
existing Spanish
initiative for
outsourced translation

Resource Bundle

creditCardEnterNew.pleaseMessage
=
\

Please enter your credit card information.<
br
/>
\

All fields must be completed.<
br
/>
\

Your credit card information will be securely <
br
/>
\

stored so you will not need

to reenter it for <
br
/>
\

future transactions.


creditCardEnterNew.name=Name:

creditCardEnterNew.cardType
=Card Type:

creditCardEnterNew.cardNumber
=Card Number:

creditCardEnterNew.expDate
=Exp. Date:

creditCardEnterNew.cvv2Code=CVV2 Code:

creditCardEnterNew.billingZipCode
=Billing Zip Code:

creditCardEnterNew.submit
=Submit

creditCardEnterNew.cancel
=Cancel



creditCardEnterNewConfirm.cardNumber
=Card Number:

creditCardEnterNewConfirm.expDate
=Exp. Date:

creditCardEnterNewConfirm.name=Name:

creditCardEnterNewConfirm.cardType
=Card Type:

creditCardEnterNewConfirm.cardNumber
=Card Number:

creditCardEnterNewConfirm.expDate
=Exp. Date:

creditCardEnterNewConfirm.cvv2Code=CVV2 Code:

creditCardEnterNewConfirm.billingZipCode
=Billing Zip Code:

creditCardEnterNewConfirm.submit
=Submit

creditCardEnterNewConfirm.modify
=Modify

creditCardEnterNewConfirm.cancel
=Cancel


creditCardUpdate.pleaseMessage
=
\

Please enter your credit card information. <
br
/>
\

All fields must be completed.<
br
/>
\

Your credit card information will be securely <
br
/>
\

stored so you will not need

to reenter it for <
br
/>
\

future transactions.



creditCardUpdate.useCreditCardOnFile
=Use Current Credit Card on File

creditCardUpdate.creditCard
=Credit Card :







creditCardUpdate.expDate
=Exp Date:







creditCardUpdate.newExpDate
=New Exp. Date:

creditCardEnterNew.pleaseMessage
=
\

Ingrese

la
información

de
su

tarjeta
.
\

Debe

completar

todos

los
espacios
.
\

La
información

se
mantendrá

segura

y
almacenada

\

así

que

no
necesitará

reingresarla

para

\

operaciones

futuras
.

creditCardEnterNew.name=
Nombre
:

creditCardEnterNew.cardType
=
Tipo

Tarjeta
:

creditCardEnterNew.cardNumber
=
Tarjeta

#:

creditCardEnterNew.expDate
=
Fecha

Exp.:

creditCardEnterNew.cvv2Code=CVV2:

creditCardEnterNew.billingZipCode
=
Código

Postal:

creditCardEnterNew.submit
=
Enviar

creditCardEnterNew.cancel
=
Cancelar



creditCardEnterNewConfirm.cardNumber
=
Tarjeta

#:

creditCardEnterNewConfirm.expDate
=
Fecha

Exp.:

creditCardEnterNewConfirm.name=
Nombre
:

creditCardEnterNewConfirm.cardType
=
Tipo

Tarjeta
:

creditCardEnterNewConfirm.cardNumber
=
Tarjeta

#:

creditCardEnterNewConfirm.expDate
=
Fecha

Exp.:

creditCardEnterNewConfirm.cvv2Code=CVV2:

creditCardEnterNewConfirm.billingZipCode
=
Código

Postal:

creditCardEnterNewConfirm.submit
=
Enviar

creditCardEnterNewConfirm.modify
=
Modificar

creditCardEnterNewConfirm.cancel
=
Cancelar



creditCardUpdate.pleaseMessage
=
\

Ingrese

la
información

de
su

tarjeta
.
\

Debe

completar

todos

los
espacios
.
\

La
información

se
mantendrá

segura

y
almacenada

\

así

que

no
necesitará

reingresarla

para

\

operaciones

futuras
.

creditCardUpdate.useCreditCardOnFile
=Use
tarjeta

almacenada

creditCardUpdate.creditCard
=
Tarjeta
:

creditCardUpdate.expDate
=Exp.:







creditCardUpdate.newExpDate
=
Fecha

nueva
:

creditCardUpdate.useNewCreditCard
=Use
nueva

tarjeta

de
crédito

Mobile Testing


No emulators (except Android)


Firefox plus User Agent Header add
-
on


No
crowdsourcing


Firewall exposure for physical devices


HP Quality Center with traditional test cases, cycles


Adapted many existing test cases from desktop site


Testing overlapped development, three cycles


Native Spanish speakers from the call center to do the
Spanish QA in a focus
-
group format

Deployment


Soft launch


Enterprise configuration


Web statistics (User
-
Agent)


So easy a Labrador could do it (almost)!

Enterprise Environment Configuration

Summary

Successful launch!


A major factor in our success was:


High availability of the development
environment to the business users during the
development process, with frequent updates
and lots of opportunity for feedback

The final product

Use the browser on
your phone to
navigate to:

www.sunpass.com

or

www.tollbyplate.com


Questions?

¿
Preguntas
?