NYC DOF | Portfolio

NYC DOF Website Redesign

Role: UX Designer, Usability Engineer | Website & Mobile App - 2023 | Figma, Adobe, Airtable | 10 weeks

The NYC Department of Finance (DOF) is an official government organization in charge of handling revenue in New York City. It collects property and business taxes, and parking violation fees, and offers payment plans and financial aid to New Yorkers.

About the Project

The NYC Department of Finance (DOF) has identified its outdated website as a high-priority project due to usability issues and inconsistent data. They hired an external vendor to conduct user research, and I was one of the two UX design interns brought on board to lead the website redesign.

As the sole designers at DOF, our mission was to craft a cutting-edge and user-centered website design that meets the diverse needs of the city's vast population.

As the first department updates its design, other city websites may follow suit promoting a unified and coherent user experience across the entire digital government landscape of New York City.

I aimed to elevate user experience while ensuring the highest standards of accessibility, data privacy, and inclusivity, aligning with the city's legal and ethical obligations.

Who did I collaborated with?

1.

To understand the scope of the project and its requirements. Also, to build a sitemap and manage the massive number of web pages.

2.

NYC Office of Technology and Innovation (OTI) is also a government agency that manages the city's digital strategy and design guidelines for all the city websites.

3.

To understand the technical constraints because the site was being developed on an existing framework. Also, to make sure the final product matched the design exactly.

4.

To rewrite the important content and to remove some outdated ones. Also, to ensure important information is clearly displayed without any legal violations.

5.

Since it is a high priority, agency leaders including the Commissioner and Director of Department of Finance are directly involved in the project.

Project Constraints

This ambitious project came with technical and content constraints.

1.

Throughout the design process, we made meticulous decisions, mindful of the legal and ethical implications .

2. All the city websites need to

which are set by the Office of Technology and Innovation (OTI). City websites must be consistent in design so it's easier for residents to use these services intuitively.

3.

into the design.

Capturing Insights from the Research Data

The product manager provided me with the extensive UX research data that was gathered over the last 6 months. I went through all the files to understand the existing:

information architecture
user flow
sitemap
behavior metrics such as page views, drop rate, number of active users, average time spent per session, user feedback, and so on
microsites
high traffic pages and most visisted links

There's more but these were the prominent factors that helped me get started with the project.

Having seen the site for the first time, I was able to analyze the design with a fresh perspective. We decided to change the site structure and page hierarchy altogether. This meant building a sitemap from scratch.

We created a sitemap of over 850 pages!

I know it sounds intimidating and trust me, it was! But it helped me understand the website in more depth.

Site Structure

As I mentioned earlier, we changed the page structures to solve navigational complexities. The older version had only one level of navigation that was categorized into Payments, Taxes, Fines, Benefits, Courts, and About pages.

We reconstructed the site which now consists of 2 levels of navigation for ease of understanding and to decrease the number of clicks users need to achieve their goal.

Revised Navigation Bar

As a result of the new hierarchy, we designed all the above-mentioned navigation pages based on a design system set for all the city websites. There are over 500 pages on this website, hence only the new pages were designed in the first phase and the rest were supposed to be developed based on the appropriate template archetypes designed for index, navigation, and information type of pages.

We created a style guide along with the senior designers from OTI to ensure all the updates, after the new site goes live, are consistent with the branding and aesthetic of the overall website. And also, to make it easier for users to find relevant information quickly in this dense library of web pages.

Now, I cannot show the entire project in detail since it's too long but let's move on to two of the most challenging problem statements I enjoyed solving.

Contact Us Page

This page was too complicated as it contained a large number of links stacked in an accordion. It becomes time-consuming for users to find a specific link here.

I tried different iterations to make it easily readable with no luck. Dividing the content into chunks of data did not help either, especially for the mobile screens where scrolling time increased every time I tried using a new layout.

Even copywriting did not help since all the links were crucial to be displayed on this page. Here are a few iterations I tried to solve this problem.

The new Contact Us Page...

Throughout the design process, I explored different solutions to enhance user experience. Solution 1 involved filter tags, which effectively shortened page length and streamlined link searching. However, this approach might not be intuitive for older users less familiar with modern tech.
Solutions 2 and 4 introduced dropdown menus and accordions, respectively. While functional, they compromised page aesthetics and readability due to clutter.
Solution 3 featured a modal sheet, aligning with user expectations from online shopping filters, yet, it didn't seamlessly integrate with the website's existing layout, proving less intuitive for non-tech users.

After analyzing all the iterations, I designed a prototype (final design) that caters to all age groups and adds visual interest. It ensures familiarity while breaking the monotony of text. Furthermore, the integration of a predictive search feature enhances user autonomy when searching for links. By combining these elements, the final design not only enhances readability and aesthetics but also offers an intuitive and efficient user experience.

We followed a mobile-first approach, acknowledging the complexities of accommodating ample content within mobile screens.

I chose filter tag for the desktop version. This decision stems from the advantage of presenting all options simultaneously, facilitating user decision-making. I focused on enhancing usability and minimizing reliance on the search feature. Filter tags help with user comprehension, providing an intuitive experience and affording users flexibility and efficiency with fewer clicks to make it simpler.

Mobile Global Navigation

As mentioned earlier, the website utilizes a two-level navigation bar. Typically, a hamburger menu is recommended for displaying the navigation pane on mobile screens. However, due to technical constraints, implementing a hamburger menu for both levels was not feasible.

Our solution was to include the top-level categories (Vehicles, Property, etc.) within the hamburger menu while accommodating the second-level items directly on the page. This posed challenges, considering various edge cases and technical intricacies. The previous version also fell short, with a top bar consuming excessive screen space and lacking complete information.