Responsive Design Pilot Apps.USA.gov & Apps.GobiernoUSA.gov 8/7/20151Office of Citizen Services and Innovative Technologies

Agenda Apps Galleries History Pilot Program Pros and Cons to Responsive Design Lessons Learned Future Plans Apps Galleries Before & After 8/7/2015Office of Citizen Services and Innovative Technologies2

USA.gov & GobiernoUSA.gov Apps Galleries Created to provide the public with government-related mobile solutions, allow simpler access to services and information, and provide new ways for citizen engagement. Part of our overall mobile strategy Apps in galleries are free and must use government data or provide a government service. 8/7/20153Office of Citizen Services and Innovative Technologies

USA.gov Apps Gallery Launched in July 2010 with 20 apps Now have over 115 apps: 73 iPhone, 35 Android, 14 iPad, 4 Blackberry, 46 mobile sites) Over 1.37 million visits 8/7/2015Office of Citizen Services and Innovative Technologies4

GobiernoUSA.gov Apps Gallery Launched in April apps (2 iPhone, 1 Android, 9 mobile sites) Over 66k visits 8/7/2015Office of Citizen Services and Innovative Technologies5

Pilot Program Research Met with key stakeholders in developing strategy Identified audience and content Studied responsive design on various public and state government sites and discussed pros and cons Talked with one of the developers of RI.gov, which is built in responsive design and is similar to USA.gov in terms of content and topics. Next, our contractor built a prototype and we tweaked it from there so that design and accessibility guidelines were met. 8/7/2015Office of Citizen Services and Innovative Technologies6

Redesign of Apps Galleries, April 2012 Launched April 13, 2012 Used Apps Gallery as a pilot in responsive design, which allows the site to respond to you and your device and display accordingly New design meets devices of today and in the future Added a rotating panel of 5 featured apps at the top (USA.gov only) 8/7/2015Office of Citizen Services and Innovative Technologies7

Redesign of Apps Galleries (cont’d) Based on user comments and s, we’ve added the ability to sort by newest app and category (USA.gov only) Added device detection, so if on an Android, only Android apps and mobile sites will display Added multiple screen shot images Added ratings that are pulled in from Android’s Google Play and Apple’s App Stores Foundation of the apps galleries was built on a REST API, other agencies can leverage it and use as needed 8/7/2015Office of Citizen Services and Innovative Technologies8

Design Team A team of both government employees and contractors worked on the design, including developers, accessibility specialists, graphic designers, content managers and usability specialists Majority of the design was done by Mobomo ( Used 320 and Up and HTML 5 Boilerplate 8/7/2015Office of Citizen Services and Innovative Technologies9

Pros to Responsive Design Responsive/Fluid design allows the site to respond to you and your device and display accordingly Meets devices of today and in the future Single version Less maintenance Sharing links works across all platforms and devices Future-ready Not just about device (narrow desktop use) Mobile first content strategy 8/7/2015Office of Citizen Services and Innovative Technologies10

Cons to Responsive Design Development time and resources Cross browser and device compatibility Loading times Different devices/ different objectives Not device specific 508 compliance Content is not necessarily mobile friendly Doesn’t work on older devices (still need a plain webpage) 8/7/2015Office of Citizen Services and Innovative Technologies11

Cost Savings Moving the apps galleries into our existing CMS saves time and money and helps us manage all of our products in one central place. Since we used responsive design, we have designed for current devices and any future devices. Lastly, since the foundation of the apps galleries was built on a REST API, other agencies can leverage it and use as needed. Using the API as the foundation, it’s a "build once, use many times" approach to offering government-wide services that save the government millions. 8/7/2015Office of Citizen Services and Innovative Technologies12

Lessons Learned Involve design earlier in the process Create design and accessibility guidelines so they can be used during the development process Mock deliverables of end cases should be used to ensure that the layout works for all case Started with design, perhaps should have worked on tech framework first Need to incorporate other factors such as load testing (JSON being cached) – Unique URL 8/7/2015Office of Citizen Services and Innovative Technologies13

Lessons Learned (cont’d) Pause and have monthly reviews of progress and decisions Should have more rigorous technical decision points (once a month) Should have a solid schedule for review In responsive design, should take the time to identify common elements for each resolution Agile makes it hard to predict the timeline 8/7/2015Office of Citizen Services and Innovative Technologies14

Future Plans User comments & feedback Mobile survey and metrics Adding a mobile app /mobile site submission form on HowTo.gov Focusing on m.USA.gov and m.GobiernoUSA.gov mobile sites to see if responsive design would work, which could then lead to potentially redesigning USA.gov and GobiernoUSA.gov in responsive design 8/7/2015Office of Citizen Services and Innovative Technologies15

Apps.USA.gov BEFORE 8/7/2015Office of Citizen Services and Innovative Technologies16

Apps.USA.gov AFTER 8/7/2015Office of Citizen Services and Innovative Technologies17

Apps.GobiernoUSA.gov BEFORE 8/7/2015Office of Citizen Services and Innovative Technologies18

Apps.GobiernoUSA.gov AFTER 8/7/2015Office of Citizen Services and Innovative Technologies19

Contacts apps.USA.gov Meghan Daly apps.GobiernoUSA.gov Laura Godfrey 8/7/2015Office of Citizen Services and Innovative Technologies20