RPAD Property Management Website Redesign

OVERVIEW

The team at the Real Property Assessment Division (RPAD) identified two major issues with their website: it was difficult to navigate, even for employees, and it generated frequent calls from residents struggling to file property taxes or locate essential information. To address this, I collaborated with my design lead, software engineers, and project manager to significantly improve the user experience, making it easier for both staff and the public to access and file property tax information online.

‍

You can view this project live at www.realpropertyhonolulu.com.

‍

PROBLEM

Users call the RPAD office often, stating that they cannot find information about their specific property tax situations on the site. The RPAD employees want to create a site that exists as a virtual hub, and that can be updated with dates and information easily while making it easier on users to understand and navigate. Users were also getting lost by clicking into pages on the site, and did not know how to find the information they needed.

‍

SOLUTION

Our solution was to create a home page that acted as a hub for frequent uses on the site, including form and fee submission dates, frequently downloaded resources, FAQ, buttons for popular reasons users visit the site, an elevated search system, and other resources. We also simplified the page categories to contain nested information in a tab navigation system to help guide users to their desired resources with less confusion and clicks.

‍

INITIAL INTERVIEWS

For this project, RPAD did not approve of conducting user testing on the citizens of Honolulu. Our team pivoted to curating user interviews with a sample size of the employees at our company (who live in Honolulu and pay property taxes) and with the team at RPAD. After this initial interview process, we also created a content audit, restructuring the website navigation based on the findings in our research to solve the main issues their customers were facing.

Findings:

• Lack of accessible  tax forms: Users struggled to locate the correct forms needed to file property taxes online, leading to confusion and delays.

• Overly nested navigation: Important information was buried within multiple layers of pages and links, making the site difficult to navigate.

• Unclear filing deadlines: Due dates for specific property tax filings were hard to find or missing altogether, causing missed deadlines and user frustration.

• Issues with 508 compliance: Upon inspection of the site, our team noticed significant accessibility barriers—such as low-contrast text and non-compliant color usage—that failed to meet 508 standards.

‍

CURRENT IA

While conducting the initial interview process, we also performed a comprehensive content audit to document the existing site infrastructure. This involved mapping out the full navigation structure, identifying redundant or outdated pages, and tracking how content was organized across the site. This research helped us understand how users were currently interacting with the website and informed our strategy for restructuring the navigation and content hierarchy.

‍

‍

DESIGN SOLUTIONS

Based on our findings, we implemented design solutions to address these issues, including:

• Centralized internal pages: Create easily navigated internal pages with side navigation and download buttons for specific forms available online.

• Simplify site structure: Simplify navigation by removing unnecessary content and organizing into clear, intuitive categories.

• Structure the homepage as a central hub: Transform the homepage by featuring direct access to key resources, FAQ, and an at-a-glance clickable filing calendar.

• Reimagine website colors: Improve low-contrast text and non-compliant color usage, ensuring accessibility standards and 508 compliance.

‍

RESTRUCTURING THE IA

After documenting the original site infrastructure, our team began iterating on a new site map based on user interview feedback. Through multiple rounds of revisions and client input, we landed on the fourth version that grouped related content under clear category pages. We also introduced a side navigation system for internal pages using tabs and accordions, making the site more intuitive and significantly easier to navigate.

‍

‍

INITIAL WIREFRAMES

While restructuring the information architecture, we began sketching early concepts for the internal pages in a FigJam file, which we shared with RPAD for feedback and alignment. Our first designs for the internal pages incorporated valuable feedback and focused on improving usability by:

• Clear structure: Based layouts on the updated information architecture to ensure a consistent and organized design.‍
• Simplified navigation: Used side menus and accordions to reduce clutter and make browsing straightforward.‍
• Accessibility and responsiveness: Prioritized compliance and responsive design for a seamless experience across all devices.

‍

‍

WIREFRAME RESEARCH

RPAD’s feedback, highlighted in red, provided valuable insights on prioritizing key information. This took several rounds of revisions addressing legal requirements and incorporating RPAD’s preferences while adhering to user best practices.

‍

‍

HOMEPAGE INITIAL WIREFRAMES

For the homepage design, the client provided a rough concept centered around using it as a hub for commonly accessed resources. Building on their initial vision and insights from user research, I used Figma to translate the idea into a more intuitive and user-friendly wireframe.

‍

‍

HOMEPAGE

In the initial wireframes, we focused on usability and accessibility by incorporating the following elements:

• Quick access to key resources: Prioritized forms, deadlines, and essential services to make the homepage a functional starting point for all users.

• Prominent search bar: Positioned for easy visibility to support fast, intuitive navigation across the site.

• High-placement calendar modal: Ensured important filing deadlines were clearly visible near the top of the page.

• Rotating carousel for updates: Designed a section to highlight policy or form changes, making them easy to spot and regularly updated.

• 508 compliance checks: Reviewed color contrast and text visibility, especially for light backgrounds, to maintain accessibility standards.

‍

‍

HI-FI WIREFRAMES

To ensure a consistent and accessible experience across all devices, I designed responsive wireframes for desktop, tablet, and mobile in Figma. Key design considerations included:

• Optimized layouts for different breakpoints: Ensure smooth transitions between devices.

• Consistent navigation patterns: Tailoring for smaller screens without sacrificing functionality.

• Scalable UI components: Adapting seamlessly across resolutions.

• Prioritizing content: Keeping the most important information easily accessible on all devices.

‍

‍

UI TOOLKIT

I also built a UI library using RPAD’s brand colors and continuously updated it as new components and styles were developed. To meet 508 compliance while preserving RPAD’s white logo, I used their dark blue brand color for the navigation bar and footer designs, ensuring both accessibility and brand consistency.

‍

‍

DEVELOPMENT HAND-OFF

With each new version, I added arrows directly on the designs to help the development team quickly visualize changes, and documented all updates in a dedicated changelog within the Figma file. I ensured clear and effective communication with the development team by:

• Organizing artboards in Figma: Using clear labels and consistent naming conventions for easy navigation.

• Created supporting documentation (such as a changelog):  Outlining responsive behavior, functionality, and accessibility considerations.

• Collaborating closely with developers: Answering questions, clarify interactions, and ensure the final implementation aligned with the design vision.

‍

‍

CHALLENGES AND TRADEOFFS

• Limited access to end users: We weren't able to speak directly with the citizens using the RPAD website, which meant relying heavily on internal feedback from the RPAD team to understand user pain points and behaviors.

• Short turnaround time: The project had a tight timeline, which required quick decision-making, fast iterations, and limited time for extensive usability testing.

• Balancing legal requirements with usability: Certain content and structure had to remain in place due to legal or procedural constraints, which sometimes conflicted with user-centered design best practices.

• Designing for a legacy system: We had to ensure our designs could be implemented within the technical limitations of an older backend system, which required constant communication with developers to find feasible solutions.

‍

NEXT STEPS

• Interviews with RPAD employees to determine how often users are calling for navigation help after the design is live.

• Adding interactive tooltips to help new users understand key features.

• Research on refining the way users download/upload/file forms