My design approach & redesigning local government websites

My design approach & redesigning local government websites

At the Code for America Summit this year, there was a great emphasis on redesigning state and local governments’ digital front door – their website.

My ‘quick and dirty’ design approach is as follows: discover, envision, create. Using an example of improving the design of a 311 site, I will walk you through the process.

Discover

First and foremost, it’s about discovery and understanding users’ needs. This phase can include a heuristic analysis. This can be quick and dirty but it allows you to have a baseline understanding of the website. The heart and soul of discovery is user and stakeholder interviews through qualitative research methods (e.g. ethnographic research). Developing personas and journey maps is the means to diagnosing and communicating user needs and behaviors.

As an example, I envisioned a future design for a 311 website for a local government in a 3ur afternoon. To start it off, I wanted to be intimately familiar with the current site – using Nielson Norma’s heuristic evaluation principles. I documented the immediate problems with the site – both UI and UX. I noted that the primary user goals were hidden (e.g. finding city services), call to actions were not prominently on the landing page, and there was a lack of visual hierarchy and consistency across devices.

Then, I thought through the potential users of 311 and mapped out users across 2 dominate variables. For example, residents include the vigilant neighbor – who is highly engaged in his community and usually has simple issues to report to 311. There would also be personas for business owners, and residents. I also designed a journey map for the vigilant neighbor for when he has to report a recurring theft and damage to a car on a residential street. 

Envision

This part of the design process includes defining the improved experience – the product vision and the strategy. This also can include more tactical activities, such as future-state journey mapping and task analysis to help you find the opportunities to improve and streamline the experience.

For me the product vision was easy. The 311 website should be citizens’ first choice to report non-emergency issues and complaints, check statuses, and find more information related to city services. This beautiful and functional website will empower users to be engaged stewards in building stronger communities.

The design tenets should be:

  • Efficient – the user completes their action quickly and effectively
  • Simple – the user can move through the site intuitively while feeling confident in their actions
  • Beautiful – the user is delighted by the experience on the website with a UI that can last technology change
  • Purposeful – the design of the site is intentional and consistent

The target group would be frequent users who are engaged in their community and business owners who are starting their business. The current website is difficult to navigate and deters citizens from engaging with city services. The improved product should be a responsive website, feasible to design and develop, and surpass its’ competitors in the market in functional design and usability. The site will align with the city government’s goals to be a more equitable city where all people can contribute to and share in the success and growth by facilitating their improved actions with the city.

One thing that this city did not have publicly available was the data. Qualitative information is always more powerful when coupled with quantitative data. If I was able to examine the data, I would want to know frequency usage metrics on the 311 website. In New York City, the largest 311 center with more than 28 million customer contacts in 2014, allowed for open data so everyone can analyze service requests from the city ranging from noise complaints to dangerous situations. Data will allow you not only to put the most prominent services on the home page, but also allow you to see where you can centralize services and cut out unnecessary steps for the user. 

Create

Lastly, it is critical to start designing a prototype and constantly testing it with users – from paper prototypes to high fidelity designs. The users will show you where to make changes.

My designs, using Sketch, included a landing page with a large search box as the primary call to action: ‘what can we help you with today?’. The second half of the page is large areas for the frequently accessed services – in grid format (e.g. submit a request, check status, make a payment, etc.)  At the bottom of the home page, there are categories of user types which will lead the user to customize services based on if they are a resident, business owner, or visitor.

Then, I moved to submitting a request, always keeping in mind my vigilant neighbor persona and journey map. I also designed a brand new profile section for frequent users – where they can find their report history and can easily check status. They can also have data from their neighborhood at their fingertips so they can easily have a pulse on their community.

 

What if you can't do it all?

Sometimes a complete overhaul of a website is not in the cards – whether it is because of time, money, and/ or skills.

Start with content. This can be as simple as the language on your website. Hemingway (http://www.hemingwayapp.com/) editor helps you simplify text and content into plain language. 

Other thoughts on best practices

At the Code for America Summit, multiple cities and states discussed how they have sarted to make changes to their mission critical IT. Here are some of the tips and tricks they highlighted:

  • Partner with the communications team
  • Gain leadership buy in so you have champions
  • Determine how to scale upfront in your strategy - especially when there are over thousands of websites
  • Reach out to the local community – feedback is not enough, it’s important to build with the local commmunity
  • Put the data team at the center of the digital strategy

User Research at Scale

Having a tactical plan to synthesize and analyze qualitative user research is not easy to find. User research at scale is one topic that is not widely written about in the blogs and books. A couple of our projects have fallen into this category at Deloitte Digital – almost to over hundreds of user interviews across different organizations for one product or platform.

It is critical to think through your repository first. How are you going to capture all the user research in one place? Will it be shared amongst your team? Broader stakeholders? Not only will your clients and customers ask to review this information down the line, but for your own analysis it’s easy to reference and use as your main source of truth to formulate personas and journey maps.

Steps to capturing user research:

1. Capturing interview findings and insights in Excel

Our team used Google Sheets to enter in all our findings from interviews, which enabled us to easily share our findings, export, run analyses on, and summarize. Other teams have used Trello as their shared canvas but for us, Excel worked and the entire team was already familiar with its capabilities.  

2. Coding it and theme it real-time

We coded each of the findings and key quotes so they could be easily filterable by process step, by type of insights, etc.  We also categorized each key quote / insight by the interviewee's organization, level, and then the insight by phase, process, category (e.g. pain point, behavior, needs, satisfaction point, workaround) and summarizing phrase, and other notes.

3. Analyzing it by numbers and themes

Be able to run calculations on the number of pain points, etc. was helpful in communicating our findings and the scale to which we heard feedback on each theme.

We used a separate brainstorming session to come up with themes we were hearing from our research. Throughout the project, we consistently referred back to these themes in presenting to stakeholders across the organization – pulling direct quotes from our Excel.

4. Creating a summary of all the findings for reporting out to clients, stakeholders, customers, etc.

One of the most important reasons for user research and personas is for stakeholders and clients to understand user needs, behaviors, and motivations – to receive their buy-in and their collective rationale for improving a product or service. Personas and journey maps are a way for these stakeholders to connect to the narrative of users and how they interact with the product and service – especially how new and improved designs will impact them.

5. Using it as reference throughout the design and development process for the product lifecycle

We always brought it back to our user research and personas, whether it was when we came up with our design tenets, when we were wireframing, or prototyping and iterating on the product. 

Independent Study of UX

My fav live and online courses, articles, websites, and books for learning and living UX and Product Management.

General Assembly

  • User Experience Bootcamp

  • Product Management 101 & Bootcamp

  • Mobile Development for Non-Developers

Coursera

  • Human-Computer Interaction: https://class.coursera.org/hci/lecture

Lynda.com

  • UX Design Principles

  • UX: User Personas

  • UX: Analyzing User Data

  • UX Prototyping

Books: 

UX Websites: 

  • UX Matters: http://www.uxmatters.com/

  • Smashing Magazine: http://www.smashingmagazine.com/

  • UX Booth: http://www.uxbooth.com/

  • UX Mastery: http://uxmastery.com

  • Nielsen Norman Group: http://www.nngroup.com

  • A List Apart: http://alistapart.com/blog

  • 52 Weeks of UX: http://52weeksofux.com/