City of Boston

new FEATURE INTEGRATION

My Role: UX / UI Designer


CONTEXT

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. 

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 design sprint; research, define, design, test and iterate. 

APPROACH


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, their is wealth of information and services but it is not always easy to access. The average American reads at a seventh or eighth-grad 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 greatest pain point was that of trust. Trust that the information displayed was correct. Trust in the process, due to the lack of visibility. Lack of trust 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. 

Provisional personas wide.png
persona+journeymap-2.png
 

Act as a helpful human.

Equal parts warm and official.

Help people navigate their portion of the system.


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 Goals001.png
 

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.

task flow: basic form.png

DESIGN

 

With the importance of keeping 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. 

 

mobile_straight.png
final_desktop-01.png

Unmoderated usability testing was conducted using maze.design. While received as an overall success, an affinity map assisted in identifying and prioritizing the insights. While guiding the users to next form field was a success with low mis-click rate, the majority of users still found trust a large issue. Trust of sharing personal data and the security of that data online. 

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, this would benefit from in person usability testing to uncover some more of the subtle reactions and stream of thought. 

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, I would monitor the metrics to see if the goals are met; tracking online application completion, account creations and feedback through the customer service and registry office. 

CONCLUSION + NEXT STEPS