Boston.gov
Create logged-in environment and application forms for citizen service
Background
Boston.gov wants to bring all services available 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. At this time, they want to start by moving the systems to request, pay, and manage of citizen certificates (birth, marriage, or death) to fully online.
The challenge
The idea they have is that every citizen will eventually be able to log in, and view or request any services that they need. Fully online. Fully self-service
The outcome
A responsive platform that is reliable and makes it easier for citizen to find information and application.
log-in environment that simplifies application processes and manages activities related to government interaction.
Role
UI/UX designer responsible for user research, strategy, UI design, prototyping, visual design, usability testing, and branding within a Lean UX framework.
Process
Define
Task Flows
User Flows
Persona
Site Map
Research
Competitive Analysis
Primary Research
Synthesize User Personas
Design
Wireframes
Low-fidelity Prototypes
Brand Style Guide
Logo Design
User Interface Design
Refine
Usability Test
Usability Test Findings
Iterations & Next Steps
Research
In order to gather insights on the subject, I have conducted two rounds of research. A competitor analysis to better understanding of the governments and government online service landscape and, 1:1 interviews which helped me to identify citizens’ needs, pain points, requirements and to identify opportunity areas to design against.
Competitive analysis
The competitive analysis was conducted to get a better understanding already existing platforms, including both direct and indirect competitors, and to identify key features and requirement.
Summary of findings
I researched other govermental websites and websites that organizes massive individual data how they manage documents and profiles. I learned that they offer users various ways to solve problems , such as video training and one-on-one consultation for users, and use simple steps and infographics.
1:1 Interview
Research setup
Interviewers were conducted with 3 participants between 30 to 60 years old. All the participants were selected base on their interest and involvement in the topic. They have already experienced in the past and they are interested in doing it again in the future. This gave me insights on what pain points they have encountered and what tool and information they needed in progress.
Findings overview
Goals
To complete stress-free online procedure to receive requested documents
To be able to navigate platform smoothly to achieve user’s goal.
To be able to receive documents a user needs fast and safely.
Pain points
● Frequent errors and slow loading time.
● Hard to get immediate help to follow instructions.
● Not be able to navigate thoroughly among different certificates to receive.
● Unnecessary steps and input space to fill up is confusing.
Needs
● Features that help users’ navigation.
● Approach various ways to resolve user’s difficulty online.
● Simple and efficient procedures to approve user’s identity
Opportunities
● Figure out ways to be a simple and uncluttered space on the page.
● Use contents or commutation tools as ways to bring instructions to user can follow.
● Features that help users to search documents that they need.
Define
From the research phase, I was able to gather insights which were synthesized into a persona that will later be used as a basis to design against. Then. I created a storyboard based on the persona to identify possible user scenarios.
Design
Once I identified the main requirements and needs to meet the user’s needs and expectations, I started sketching the pages that I would need to have and map out flows and sitemap.
Sitemap and Flows
After completing persona, I visualized what I learned about how users will navigate the site, how to utilize content to support them, what language they use to identify things.
Task flow
User flow
Wireframes
The sketches helped me to explore different ideas and start defining the page structure and hierarchy of the elements within the pages. After several iterations, the sketches were translated into wireframes for both desktop and mobile.
Style guide and branding
After having defined flows and page structure, I went through a few iterations to define a design language and visual direction for the website.
I wanted to create a design style that represent Boston city government modern and reliable and supportive to its ctizens.
UI Kit
Final outcome
Beyond the placeholders in low-fidelity wireframes which may seem to be abstract to understand the product, I included actual content, typefaces, colors, image dimensions, and branding elements in high fidelity wireframes as close as ready to use.
Homepage desktop, tablet, mobile
dashboard page
order page
Refine
Within this phase I have created prototype to test with consumers and gather inputs for improvement. The participants were given the task of finding menu to order business license. In order to order documents online they need to sign in and go to the dashboard page and follow the order steps and confirm with timeline graph that shows document’s statues.
Usability Testing
3 participants were asked to walk through the prototype. I asked each participant to complete ordering a document through the steps according to the information in the scenario with a few steps I provided. I observed each and took notes as they navigated the site and ask questions after they finished.
Test Finding
All participants completed their tasks. They like simple color, non-clutter design, organizing layout. 2 participants find the link to business license from navigation bar and 1 found in from card sections. They all were frustrated with text size. 1 participant said she was distracted by icons to read texts. Also all of them perceived a gaze bar above the order page clickable buttons to move back and forth pages and hard time to understand clearly about the timeline feature.
Takeaway
Through findings from user testing, I need to improve a couple of problems such as increasing text size and more detailed functions on the dashboard page, specially timeline graph with more tools to help users to understand easier.