Design

Code.gov gets a U.S. Web Design System refresh

Screenshot of Code.gov

Code.gov — the platform that makes it easier to find open source code developed by the U.S. Government — announced updates that includes aesthetics aligned with the U.S. Web Design System and better adherence to accessibility standards.

We are thrilled to begin this new chapter of innovation and creativity with you. Our new approach to a definitive online presence provides Code.gov with a differentiated visual identity system to complement updated content and streamlined user resources. By no means, though, does this mean that this website is “done” and will not change. We have said before that “Technology is always in a state of flux…” and we believe in always improving our platform in order to provide a better experience for you. We will continue to review and update key elements of our website as the Internet evolves. This redesign is part of “America’s Code” so that we can offers everyone a chance to fulfill a civic duty on a digital platform, one line of code at a time.

Read more about the updates on the Code.gov blog.

Part 2: Re-imagining the California DMV website

It’s been a week since I published my thoughts on re-imagining the California Department of Motor Vehicles website. During that time, the issues I had with not receiving my REAL ID were resolved and the process inspired me to think and prototype a little more on the first iteration.

My personal user experience

Through the entire process — experiencing mail, field office, online, phone (with three different departments) and social media interactions — I’ve gained a more holistic insight into how others most likely interact with DMV.

General observations:

  • Phone: My interactions with all three operators were pleasant and succinct. The hold times were long. The practice of informing callers that all operators are busy and to call back at a later time is a customer support fail. The auto call-back feature used by the main line is something that should be incorporated across all departments.
  • Social: I was pleasantly surprised by the Twitter follow-up and, in hindsight, I wish I would have pursued this route just to see how effective the support there is.

Prototype update

I made some minor updates to the prototype, including the homepage, beta bar and initial concept for a tertiary page.

Homepage

Homepage

I made the call-to-action links more app/kiosk-like. As mentioned in my previous post, this aesthetic would force a more pithy approach on the content front.

Beta bar

Beta bar

I added a ‘beta bar’ explaining to users that this is a prototype with a link to details as well as the official DMV website. It’s ubiquitous without causing too much aesthetic distraction.

Tertiary page

Tertiary page

A new tertiary page mock-up includes an accordion approach to content, allowing for a larger amount of content to be included on a page without causing it to be overwhelming or having more additional pages than neccessary.

I created an issue to consolidate REAL ID content from the official DMV website onto this page at a future date. This will serve as an example of how content on the current site can be better consolidated and presented, as there are several documents and pages that could easily merge into just one.

DMV digital innovation ideas

Go beta

Having a public beta that starts small, iterates based on user activity, research and feedback, is now the status quo, and is the safest approach to launching a new website, particularly one with large-scale reach.

The U.S. Department of Veterans Affairs did this with va.gov. Previously, va.gov was the flagship website for VA, and vets.gov became a public beta, leveraging an open and agile approach to development. Vets.gov is now VA’s flagship website.

If VA, one of the largest federal government agencies can do this, so can California DMV.

Open the data

California DMV provides some data around offline user experience in the form of wait times. While it’s not in an extensible format, it is interesting and helpful, and the fact that the agency is publishing any is encouraging.

Having access to website traffic would be incredibly insightful in helping to conceptualize more on the prototype.

DMV could easily do this through a tool like Google Data Studio. This would take a few hours to stand up and provideto make a public dashboard of this information. Some examples of using Data Studio to display Google Analytics are here, here, here and here.

An alternative would be to publish this information, and the wait time data, in open formats at data.ca.gov.

Code DMV

It would be inspiring to see the state host an open space, civic-focused Code DMV event that incorporated user testing and rapid prototyping to help build a beta DMV website.

An event like this would go a long way in showing that DMV is embracing a culture of open, proactively working with the community to re-imagine how it can better serve the residents of California. It would also align with the state’s new Code California initiative, “an open collaboration between agencies, industry technology partners and civic technologists working to code a more innovative, collaborative and effective government that best serves the people of California.”

Collaborate

If you have ideas or want to build on the prototype, add your issues or comments in the GitHub repository or fork it and contribute back.

Re-imagining the California DMV website

Re-imagining the California DMV website

I recently visited my local California Department of Motor Vehicles field office to renew my driver license and, because I scheduled an appointment ahead of time, my experience wasn’t the nightmare it’s traditionally made out to be.

However, the designer in me couldn’t help but think about how the entire DMV process could be re-designed, both offline and online.

I’m still waiting to receive my new REAL ID license, so I went to the DMV website to learn how I could find the status. While there, I realized there is a huge opportunity to re-imagine its user experience, so I spent a few hours designing a prototype.

Goals

The key goals of DMV digital should be to:

  • Increase website traffic where users can self-serve
  • Increase kiosk traffic where users can self-serve
  • Decrease field office visits (because of the successful implementation of the above two bullets)

Campaign

I came up with an “Online. Not in line.” slogan, which I incorporated into the homepage to better help socialize the web and kiosks options.

There’s significant creative opportunities around a campaign like this to drive people to self-service or be more proactive using the website and kiosks to be better prepared before making a field office visit.

Analysis

Without getting too detailed in a critique of the current DMV website, there are two areas that should be of primary focus:

  • Content: The content should be significantly consolidated, edited and made more concise. Much of it is redundant, wordy and extraneous.
  • User interface: The aesthetic is clearly dated, but the use of graphics in certain instances is unnecessary. A clean, simple text-based approach with a more app/kiosk feel would make the experience feel less intimidating and cumbersome.

What I did

I created prototypes of the home and secondary pages, focusing on simplicity and an app/kiosk user interface.

Prototypes:

Tools I used

Feedback

It’s doubtful I’ll continue working on this, but would love to hear feedback or perhaps start a conversation around how the DMV website could be re-imagined to better serve the people of California.

Thank you

I want to take this opportunity to thank everyone who works at DMV, especially those of you on the front lines in the field offices.

Decades of bureaucracy coupled with the reach and role the agency has on every Californian has created a Herculean, thankless challenge for everyone who works there. While we all know it could be made better, you’re the ones in the trenches.

As a proud California resident, I hope you challenge status quo thinking and re-imagine how DMV can be re-designed — offline and online — and become a positive conduit for state pride — internally and externally — and for how public service should work.

Thank you for serving California.

California releases state government website standards

Web Standards and Design System for California Government

Source: webstandards.ca.gov

The California Department of Technology has published unified design standards and accompanying resources for official state government websites.

As part of this initiative, a new website, webstandards.ca.gov, will serve as the foundation for “standards, code, functionality, implementation guidelines and best practices for Agencies/state entities to implement this policy,” according to the technology letter announcing the standards.

More from the announcement:

As state government continues to expand access to online services, websites are an essential tool to interact with the public and deliver information to the people of California. The Website Standards policy ensures standardization and adoption of best practices to strengthen the security, usability, accessibility and quality of State of California websites. This policy will foster a consistent look and feel, and a common navigational framework across government, helping visitors recognize they are accessing official State of California information. This policy also promotes reasonable steps to design and develop websites that are accessible to people with disabilities and supports the adoption of usability principles that adhere to California’s usability standards for website development.

Visit webstandards.ca.gov to learn more.

Rethinking personas in government

National Archives Digital Personas

Source: U.S. National Archives

Personas are an important tool used in human-centered design to help a service provider better understand the needs of the intended users.

Rather than basing service design on whimsical assumptions, personas aim to keep the focus on specific user types and their respective needs so that their particular tasks or problems can be effectively addressed and resolved in the context of real people needs.

Personas can and should be developed for any government service used by the public, from digital to in-person experiences, whether it’s an information-oriented website or application process. They are a fundamental component of human-centered public service design.

As 18F explains when describing the importance of personas, they “ground design in reality by forcing us to consider the goals, behaviors, and pain points of the people affected by our design decisions. Unlike marketing personas based on demographics or marketability, design personas describe how someone accomplishes goals.”

According to Usability.gov, effective personas:

  • Represent a major user group for your website
  • Express and focus on the major needs and expectations of the most important user groups
  • Give a clear picture of the user’s expectations and how they’re likely to use the site
  • Aid in uncovering universal features and functionality
  • Describe real people with backgrounds, goals, and values

Also from Usability.gov, benefits of personas include:

  • Stakeholders and leaders evaluate new site feature ideas
  • Information architects develop informed wireframes, interface behaviors, and labeling
  • Designers create the overall look and feel of the website
  • System engineers/developers decide which approaches to take based on user behaviors
  • Copy writers ensure site content is written to the appropriate audiences

Government agencies including the U.S. Department of Veterans Affairs, U.S. National Archives and Records Administration, the Government of New Zealand and others rely on personas as part of an increasingly growing human-centered public service design movement.

Sara Wachter-Boettcher’s must-read book, “Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech,” brought to light for me the unintended consequenses of traditional aspects of personas — photo, gender, age, hometown — how these can cause bias or confusion for service designers, and why they should be eliminated from the practice, particularly within the public sector.

In “Technically Wrong,” Wachter-Boettcher shares an anecdote of working with a client, and how the persona process they went through caused her to rethink these traditional components. At one point, one person suggested the CEO persona, a “fortyish black woman,” wasn’t realistic in their particular industry, while another person had a problem with one that described a “divorced black woman in a low-level job.”

Wachter-Boettcher writes:

But what they missed — because, I recognize now, our personas encouraged them to miss it — was that demographics weren’t the point. Differing motivations and challenges were the real drivers behind what these people wanted and how they interacted with the organization.

We thought adding photos, genders, ages, and hometowns would give our personas a more realistic feel. And they did–just not the way we intended. Rather than helping folks connect with these people, the personas encouraged the team to assume that demographic information drove motivations–that, say, young women tended to be highly engaged, so they should produce content targeted at young women.

Thankfully, our clients’ disagreement over the right way to present race turned into a rethinking of our whole approach. Pretty soon, we’d removed all the stock photos and replaced them with icons of people working–giving presentations, sitting nose-deep in research materials, that sort of thing.

I haven’t attached a photo to a persona since.

Sunlight Foundation led an excercise in open data personas with several cities and released an open data user personas spreadsheet in May. One of the participating cities, Downey, Calif., adopted an approach similar to Wachter-Boettcher’s (though still retaining age, hometown) that focused less on demographics, but more on user type and task.

Example:

Resident problem-solving (low-medium community impact, medium-high data skills): This person has a personal goal that they want to achieve, whether it’s improving the local ecological environment or getting a bike lane built in their neighborhood. They generally have a small-scale project or goal in mind, but they need information to make their case.

Effective use of personas must be taken seriously when designing truly inclusive public services. As more government leaders adopt human-centered practices into public sector design thinking processes, it’s important to hold deep focus on the intended objective of the end user.

Ultimately, practices such as empathy mapping, quantitative data reviews and engaging with real users are critical, however, simple elimination of traditional demographic indicators while creating personas could go a long way towards government best serving the public at large.

Government comics

Government Issue: Comics for the People, 1940s-2000s

I serendipitously discovered “Government Issue: Comics for the People, 1940s-2000s” at the local library, and it’s a great compilation and dissertation on how government has used comics to better communicate with the general public.

Published in 2011, “Government Issue” highlights comics on topics ranging from military recruitment to employment, public health and safety to parks and recreation. Some were developed originally by the respective federal and local governments, while others were done in collaboration with popular comic publishers.

For public communications and engagement enthusiasts, “Government Issue” is a great coffee table book and perhaps point of inspiration for government leaders to re-think how to better communicate with constituents.

As author Richard Graham writes in the introduction:

“Official government comics reached their intended audiences by a variety of means, and the intended audience was the American people: comics as civics lessons. The government understood that comics, as a form of popular culture, have the capacity to simplify even the most crucial civic issues and shape public opinion.”

Government Issue” is available at Amazon.

Kickstarter campaign for city design method cards

Photo: Andy Boenau, Speakeasy Media

Photo: Andy Boenau, Speakeasy Media

GreaterPlaces is holding a fundraiser for city design method cards and a mobile app that “brings all aspects of city design together in one resource designed for everyone.”

The campaign is asking for $38,000 in support.

Video pitch:

Q&A with GreaterPlaces co-founder Lisa Nisenson:

Why cards instead of a book?

Cards are portable bursts of information that can be stacked, organized, and grouped in many ways to tell a story (especially important for placemaking) by anyone involved in the design process. A book’s order of fixed chapters is set by the writers and editors.

Also, decks of cards are easily updatable (think: expansion packs), can spark conversations, and change the dynamics of engagement – instead of a lecture or slideshow, cards invite one-on-one interactions and conversations.

What are the decks?

We are planning 12-15 decks in the Kickstarter run (though we can add as many as we need to the app). We will cover the basics like City Design 101, Street Design and Economic Development as well as cutting edge topics like Civic Technology, Resilience and Green Infrastructure. Send ideas to @CityDesignCards you’d like to see.

Besides being cards, how is this really different than existing tools?

The short answer is outreach and technology! The Method Cards provide an opportunity for meeting people where they are on the learning curve, letting people take deeper dives into information at their own pace, and easily share their findings. The topics being included are not only fed into the mobile app but incorporate the myriad types of civic technology emerging but not yet efficiently harnessed. The tech is not for tech’s sake, but rather how it fits in to present, link and organize material.

Who is your audience?

Everyone involved in shaping communities: professionals (planning, engineering, architecture, economic development, etc.), elected officials, citizen leaders, non-profits, academia, philanthropic groups, writers, and more.

How is this financially sustainable?

This is a marketplace (advertising) for small and medium priced firms – for far less than print/digital/trade show packages that are thousands of dollars. We have worked with dozens of firms to shape this new platform for branding, storytelling, and marketing.

Over time, we are looking at emerging technology for cities like virtual reality, the Internet of Things and useful data sets our small consulting business – offering custom card decks as a way to help cities plan and govern using tech with a personal touch.

Support the campaign.

Insights from federal digital design leaders

U.S. Digital Service

Ethan Marcotte and Karen McGrane have been on a roll lately featuring federal government design leaders on their Responsive Web Design Podcast.

The first episode, with U.S. Digital Service Designer Mollie Ruskin and Lead Front End Designer Julia Elman sharing insights into their design process and prototyping tools (OmniGraffle, Sketch, GitHub) and building the U.S. Web Design Standards, has excellent insights for those focused on this aspect of the civic experience.

Favorite quote from Mollie:

“I think that one thing that you have to just come to terms with in doing a project like this is that there are so many moving pieces and it’s a lot to keep track of all at the same time, and just to sort of like take a meditative, reasoned approach to that because it can be a daunting amount. I had been given that advice before I started, and it was about halfway through that I felt the zen of all of the pieces moving and realized that that was part of the beauty of doing this work, is that by us taking on this complex important problem, we were going to be making it easier for others moving forward. So, I would just encourage a can-do attitude and plow through those times where you feel like you’re building seventeen things all at once, because you will be.”

RWD has also featured designers from Vets.gov, Consumer Financial Protection Bureau and the U.S. Department of State.

9 reasons why Vets.gov is the future of federal government websites

Source: Vets.gov

Source: Vets.gov

The U.S. Department of Veterans Affairs released a beta version of Vets.gov, and it’s the future of federal government digital development.

Here’s why:

Service-focused

Gone are the carousels, clunky blocks of information and seemingly self-serving updates on what the agency secretary is doing.

Instead, the user interface is focused on its core customer needs. There are limited graphics and calls to action, and the homepage especially shows discipline and confidence in its restraint, focusing on two user stories and popular, behavior-driven “Quick Links.”

Beta

This says it all:

“This site is a work in progress. We’re designing in the open.”

Secretary Robert McDonald explains why the agency is designing in beta. More on VA’s approach to beta and development methodology.

HTTPS

18F initiated HTTPS by default late last year, and this is important because it offers visitors the guarantee of a secure and private connection.

You can read more about HTTPS and why it’s important for government to adopt here, here, here, here and here.

No navigation

This is a bold and welcome move. No navigation menu and a focus on search and strong footer links shows confidence in design that emphasizes page-specific information with simple options to locate more or start from the beginning.

Digital Analytics Program

The General Services Adminstration’s Digital Analytics Program is an important effort to provide visibility into federal web traffic, and Vets.gov is participating in the program, as should every federal agency.

Active feedback

In the bottom right corner, there’s a feedback mechanism that allows users to give input on various aspects of the website.

“When you post an idea to our feedback forum, others will be able to subscribe to it and make comments,” says the site.

Having an open forum such as this allows users to see what’s been submitted and provides more transparency into the feedback. Most sites use a contact form which leaves the user wondering when and if it will ever be addressed.

Playbook

The Vets.gov playbook provides all aspects of the team — editorial, design, development — with guidance to build a unified website based on core principles and processes.

Open source

The website has its own GitHub repo where you can download, fork, issue a pull request or add feedback. From the playbook, it appears it’s using Foundation and U.S. Web Design Standards for front-end development, both of which are open source.

Easter egg

Hidden in the comments of the source code is the Abraham Lincoln quote, “To care for him who shall have borne the battle and for his widow, and his orphan.” While this is mostly interesting to me and anyone else who might be looking at the code, it’s an important, constant reminder to everyone working on this project why and who they’re building it for.

Congratulations to the team working on this. While the GitHub contributor list (go Danny Chapman!) is short, I’m sure there are many others behind it, and they should be proud they’re taking a bold step and setting the standard for how federal websites should be built.

USDS publishes design standards for federal government websites

U.S. Web Design Standards

U.S. Web Design Standards

The U.S. Digital Service has soft-launched new U.S. Web Design Standards to “create consistency and beautiful user experiences across U.S. federal government websites.”

The standards, similar to popular design frameworks like Bootstrap and Foundation, include a style guide and downloadable code assets aimed at creating a unified, mobile-friendly citizen experience and making it easier for developers to deploy across all government websites.

With the new standards comes a slight modification to play three of the U.S. Digital Services Playbook (“Make it simple and intuitive”) from “Create or use an existing, simple, and flexible design style guide for the service” to “Use a simple and flexible design style guide for the service. Use the U.S. Web Design Standards as a default.”

Work on the standards began earlier this year with the pattern library and, as I’ve mentioned before, the federal government could realize millions of dollars in savings by simply re-purposing a unified framework instead of re-inventing the design wheel. Much like what Bootstrap and Foundation have done to exponentially expedite development and go-to-market launches for countless startups and their products, so too could the U.S. Web Design Standards for federal government digital services.

Update from 18F: