Citizens Connect Redesign

UX Strategy | Information Architecture & Wireframes | User Testing

Citizens Connect mock-up

Overview | Challenge

Rethinking a complicated, jumbled city services website

Citizens Connect was a portal on the City of Boston’s website that enabled people to learn information about city services, report an issue or request a service. (As of 2018 it has been rebranded BOS:311). While the mobile app was fairly well-designed and straightforward, the 2014 version of the website was a giant mess of links under various broad categories – it was essentially a site map of everything on the website. In collaboration with two colleagues, Erica Horowitz and Hamy Pham, I redesigned the site back in 2014.

Role

UX Design & Research

My responsibilities were to sketch, wireframe and conduct user testing using clickable wireframes I created. Hamy Pham designed the style guide for the site and Erica Horowitz coded the responsive prototype.

Process

Steps to reorganizing and redesigning the site

  • Understand the complexity of the current site by completing a task that appeared to one of the main reason residents and non-resident use the site -- pay a parking ticket.
  • Assess the current IA by first understanding the major actions that a user takes on the website.
  • Reorganize current website into 4 main action categories
  • : report, request, pay and learn/comprehend.
  • Based on the IA analysis, develop three main templates/wireframes that would meet the needs of the majority of the new site's pages.
  • On the homepage develop a space that would point to popular items organized by new IA actions that users could take immediate action on, like paying a parking ticket or reporting a broken streetlight.
  • I sketched and designed clickable wireframes in Invision and then conducted user testing by presenting scenarios to users and asking them to complete a task, like requesting a bulk item pick up or searching for information on resident parking.
  • Based on learnings from user testing, I redesigned the top action section to make it stand out more. I also redesigned the sub-heading links section on the information page template to draw users' eyes to that section.
  • Develop clear, straightforward style guide and code final prototype

Result

The final product is a proof-of-concept prototype website and we're pretty proud of it! The site structure is clear and is based on central user goals and tasks. Information is clearly laid out and top actions are also easy to find. Most importantly, users have 3 easy ways to find information : via a search bar, in the top actions section or in the redesigned Services and Information section.

Design Artifacts from UX Design Process

The Multitude of Ways to Pay a Parking Ticket on Citizens Connect

I designed the graphic below to outline all the ways we found to pay a parking ticket on Citizens Connect.

flowchart of all the ways to pay a parking ticket

Design Artifacts from UX Design Process

Action Grouping for New Information Architecture

We reorganized information on the existing Citizens Connect into 4 main actions. The groupings below served as the basis for the new IA for the redesigned website.

Information architecture content organized into categories
Information architecture content organized into categories

Design Artifacts from UX Design Process

Wireframes for Citizens Connect

See all the wireframes in the clickable prototype

selected wireframes from the project

Citizens Connect: Before and After

Current website as of 2014 (left) and redesigned prototype (right). The new site structure is clear and is based on central user goals and tasks. Information is clearly laid out and top actions are also easy to find. Most importantly, users have 3 easy ways to find information: via a search bar, in the top actions section or in the redesigned Services & Information section. See the prototype here.

before and after images of the site and prototype