1 Presented by: Dave Wilson, SunPass

2 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

3 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

4 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)

5 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)

6 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

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

8 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

9 Requirements Mapped every flow before start of work Selected subset of desktop functionality Initial mockups on paper Next step was simple HTML mockups

10 Requirements (cont’d) Next we developed headers and footers At the final signoff meeting we presented complete site mocked up with clickable static pages

11 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

12 Requirements Complete Actually got to follow the ideal requirements/development process Or did we??

13 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

14 Design Decided to use existing structure: Struts2 and Tiles framework SunToll web service framework HTML/web service strategy for security and reuse

15 Tiers

16 Development Tools Eclipse, JBoss, Solaris Tiles Subversion (this was huge for team development) WURFL (not Danny Wuerffel!)

17 WURFL WURFL is an XML configuration file with data on many mobile devices Wireless Universal Resource File 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

18 Surprise! (¡Que lastima!) Additional requirements for Spanish Use of text tags and resource bundles for i18n Piggybacked on existing Spanish initiative for outsourced translation

19 Resource Bundle creditCardEnterNew.pleaseMessage=\ Please enter your credit card information. \ All fields must be completed. \ Your credit card information will be securely \ stored so you will not needto reenter it for \ 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. \ All fields must be completed. \ Your credit card information will be securely \ stored so you will not needto reenter it for \ 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

20 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

21 Deployment Soft launch Enterprise configuration Web statistics (User-Agent) So easy a Labrador could do it (almost)!

22 Enterprise Environment Configuration

23 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

24 The final product Use the browser on your phone to navigate to: www.sunpass.com or www.tollbyplate.com

25 Questions? ¿ Preguntas?