City of Boston

Boston.gov was totally redesigned by IDEO to be more modern and citizen-centric. Boston.gov want to offer all services online to citizens. They already have some very basic ones, but they want to provide citizens with their own logged-in environment where they can see everything related to their governmental interactions. 

new FEATURE INTEGRATION

My Role: UX / UI Designer


TASK

Design the process of requesting a birth, marriage, or death certificate through a responsive website. Design the logged-in environment for viewing. 

4 week (80 hours) design sprint.

Research, Define, Design, Test were all allocated a week with a human centered design approach to reduce risk and uncertainty. 

APPROACH

 
interacting-with-iphone-6-screen.jpg

RESEARCH

Secondary research revealed the motivations of the original re-design and the local demographic of the City of Boston.   

 

Availability ≠ accessibility 

Common on many government websites, there is a wealth of information and services, but it is not always easy to access. The average American reads at a seventh or eighth-grade level and even the best readers may have trouble understanding government-speak. With this in mind, the redesign aims to induce a more conversational tone and act like a helpful human; welcoming and highly useful.  

A site audit also offered insight into the UI elements used to create a clear informative responsive website. 

Fueled with a broader understanding of the City of Boston and the redesign, 1-1 interviews were conducted to empathize with users wishing to engage with a government service. The underlying issue across all interviews was that of trust;

  • Trust that the information displayed was correct

  • Trust in the process, due to the lack of visibility

  • That personal information was secure, especially online

A visual representation of this research was to create through provisional personas (secondary research), primary persona and a journey map. 

  Based on secondary research a number of personas were created reflecting their goals and frustrations

Based on secondary research a number of personas were created reflecting their goals and frustrations

  A primary persona was created from the empathy research, which informed a journey map of applying for a certificate.

A primary persona was created from the empathy research, which informed a journey map of applying for a certificate.


DEFINE

Focusing on the new feature, business and user goals were defined, helping to solidify what was important. While I do not have access to the client and their data, I estimated the percentage increase of traffic to the site and new account creation. 

business-goals-v2.jpg
 

Further definition came with a site map, task and user flow. This allowed for both an overview of how it would sit within the existing product and more on a micro level, the steps to create a human centric flow.

  Site map with the integration of the new features (in red) .

Site map with the integration of the new features (in red).

  Task flow demonstrating the steps to completion of ordering a certificate online.

Task flow demonstrating the steps to completion of ordering a certificate online.


DESIGN

 

With the importance of keeping the visual language consistent with what had already been created, a visual UI kit was assembled as a reference point. Pencil sketches moved into mid fidelity wireframes.

To reduce the cognitive load, the form was broken into pages, reducing the number of tasks per page. Clear page titles and the inclusion of a progress bar, allow the user to see clearly where they are in the process without the burden of remembering. 

 

 Left: Current form for download on Boston.gov. Right: Proposed online form in keeping with the existing UI.

Left: Current form for download on Boston.gov. Right: Proposed online form in keeping with the existing UI.

 
  Birth Certificate online form flow including online ID verification

Birth Certificate online form flow including online ID verification


Un-moderated usability testing was conducted using maze.design. This enabled me to reach a large number of users quickly but had it’s downfalls. What I learned from the experience is that this tool is more suited to shorter tasks. Having an involved task and multiple screens, the participants rarely left any comments and there were a number of opportunities missed if I had performed the testing in person.

What the limited results revealed, was that success of guiding the user through the form reflected in the low mis-click rate. Unfortunately, users still found trust of sharing personal data online a large issue.

TEST

maze.design_2.png

With a large demographic of users, it would be important to test with a wider group within the Boston community. While it was interesting viewing the data online through un-moderated testing, this would be more suitable to less detailed tasks. In this instance, in person usability testing would have revealed more opportunities through conversation, unfiltered thoughts and observations.

Applying this layout across multiple applications would also uncover new opportunities before rolling out a template for forms across the whole of the City of Boston website. 

Once released, it would be important to monitor the metrics to see if the goals are met; tracking online application completion, account creations and feedback through the customer service and the registry office. 

CONCLUSION + NEXT STEPS

macbook-air-at-coffee.jpg