responsive design pilot apps.usa.gov & apps.gobiernousa.gov 8/7/20151office of citizen services...

20
Responsive Design Pilot Apps.USA.gov & Apps.GobiernoUSA.gov 06/23/22 1 Office of Citizen Services and Innovative Technologies

Upload: howard-wiggins

Post on 23-Dec-2015

220 views

Category:

Documents


0 download

TRANSCRIPT

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

Responsive Design Pilot

Apps.USA.gov &

Apps.GobiernoUSA.gov

04/19/23 1Office of Citizen Services and Innovative Technologies

Page 2: 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

04/19/23Office of Citizen Services and Innovative Technologies 2

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

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.

04/19/23 3Office of Citizen Services and Innovative Technologies

Page 4: Responsive Design Pilot Apps.USA.gov & Apps.GobiernoUSA.gov 8/7/20151Office 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

04/19/23Office of Citizen Services and Innovative Technologies 4

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

GobiernoUSA.gov Apps Gallery

• Launched in April 2011 • 11 apps (2 iPhone, 1 Android, 9 mobile sites)• Over 66k visits

04/19/23Office of Citizen Services and Innovative Technologies 5

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

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.

04/19/23Office of Citizen Services and Innovative Technologies 6

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

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)

04/19/23Office of Citizen Services and Innovative Technologies 7

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

Redesign of Apps Galleries (cont’d)

• Based on user comments and emails, 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

04/19/23Office of Citizen Services and Innovative Technologies 8

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

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 (www.mobomo.com)

• Used 320 and Up and HTML 5 Boilerplate04/19/23Office of Citizen Services and Innovative Technologies 9

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

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

04/19/23Office of Citizen Services and Innovative Technologies 10

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

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)

04/19/23Office of Citizen Services and Innovative Technologies 11

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

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.

04/19/23Office of Citizen Services and Innovative Technologies 12

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

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

04/19/23Office of Citizen Services and Innovative Technologies 13

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

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

04/19/23Office of Citizen Services and Innovative Technologies 14

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

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

04/19/23Office of Citizen Services and Innovative Technologies 15

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

Apps.USA.gov BEFORE

04/19/23Office of Citizen Services and Innovative Technologies 16

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

Apps.USA.gov AFTER

04/19/23Office of Citizen Services and Innovative Technologies 17

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

Apps.GobiernoUSA.gov BEFORE

04/19/23Office of Citizen Services and Innovative Technologies 18

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

Apps.GobiernoUSA.gov AFTER

04/19/23Office of Citizen Services and Innovative Technologies 19

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

Contacts

apps.USA.govMeghan DalyEmail: [email protected]

apps.GobiernoUSA.govLaura Godfrey Email: [email protected]

04/19/23Office of Citizen Services and Innovative Technologies 20