Bethany Hunter | UX Portfolio

Project Overview

The DC Chapter of the American Institute of Architects (AIA|DC) sought to transform their digital presence with a full redesign and rebuild of AIADC.com. The primary goal was to establish the site as the go-to resource for architecture in Washington, DC while elevating AIA|DC’s profile as a thought leader within the broader design community. The redesign aimed to improve user engagement, accessibility, and responsiveness, as well as streamline navigation, content management, and functionality.

The project focused on enhancing the user experience for both members and the general public, expanding AIA|DC’s reach, improving fundraising capabilities, and modernizing the overall look and feel of the website. Additionally, the site required optimization for mobile devices, enhanced search functionality, and updated security protocols.

My Contributions

In this project, I led the UX/UI design efforts, from initial discovery through wireframing and final visual design. I conducted thorough research to understand the needs of AIA|DC’s diverse audiences and translated those insights into a streamlined, intuitive site architecture. I crafted wireframes that addressed key pain points such as navigation bloat and a lack of mobile responsiveness, ensuring a user-friendly experience across devices. I also designed the final visual look and feel, creating a modern aesthetic that aligned with AIA|DC’s mission while highlighting its role as a thought leader in the DC design community. Through an iterative design process, I worked closely with stakeholders to ensure the new design improved user engagement, enhanced content accessibility, and supported the organization’s goals of increased traffic, broader reach, and enhanced fundraising capabilities.

The Challenge

AIA|DC's existing website had grown organically over time and struggled to engage its diverse audience effectively. With outdated design, bloated navigation, and limited mobile functionality, it no longer met the organization's strategic and operational needs. The site needed a complete overhaul to become a dynamic communication platform that could serve architects, the design community, and the general public alike.

The project also presented several technical challenges, including the need to upgrade from an outdated version of Drupal, resolve ongoing server issues, and integrate Google Analytics to track user engagement and site performance.

AIA|DC Sample User Flows

Discovery & Strategy

The first phase involved deep discovery sessions with AIA|DC stakeholders to better understand the needs of their various audience segments. We identified key pain points, refined the website’s target audience hierarchy, and set strategic goals for the redesign. During this phase, we also gathered input on preferred aesthetic directions and content requirements, setting the foundation for the new information architecture and visual design.

Key focus areas included:

Consolidating four separate entities under AIA|DC’s navigation (AIA|DC, DAC, WAF, and their magazine -- Architecture|DC) to streamline user experience.
Ensuring that both architects and the general public could easily find relevant content and resources.
Creating a modern, responsive design to improve access across all devices.

Information Architecture & Wireframing

Based on the discovery phase, I restructured the site’s architecture to prioritize usability and clarity. This included creating a site flow diagram to map out the user journey for both members and non-members. The new navigation was designed to minimize cognitive load, reducing the number of menus and presenting users with a clear path to their desired content. I developed wireframes for key pages, including:

Homepage: A storefront showcasing DC architecture, promoting content, and engaging the public with clear calls to action.
Calendar: A redesigned calendar feature allowing members to sync events with their own devices and view upcoming events by category.
Resource Pages: Organized to serve subgroups like students, families, and industry professionals, each with relevant content and resources.

AIA|DC Wireframe Samples

AIA|DC Sample Style Exploration

Visual Design

Once wireframes were approved, I moved into the visual design phase, crafting a contemporary aesthetic that aligned with AIA|DC’s goals of showcasing the architectural beauty of Washington, DC. The design used open space, modern typography, and large, impactful images to create a sense of sophistication and approachability.

The visual design also reflected AIA|DC’s mission, weaving narratives of their thought leadership and community contributions throughout the site. I created design elements that allowed the organization to highlight initiatives and promote fundraising efforts more effectively.

Key design elements:

Responsive Layouts: Ensured the site was optimized for mobile, tablet, and desktop, with layouts that adjusted dynamically based on screen size.
Color & Typography: A minimalist, modern color palette was chosen to emphasize readability and contrast, while typography was upgraded to enhance visual appeal and accessibility.
Content Prioritization: Clear visual hierarchies were established to guide users through the site, focusing on high-value content and resources.

AIA|DC Website Designs

AIA|DC Website Components Documentation

User Testing & Iteration

I conducted user testing with a sample of AIA|DC members and non-members to gather feedback on the new design and functionality. Insights from these sessions informed refinements to the wireframes and visual designs, ensuring that the final product met the needs of its diverse audience.

Development & Launch

The development team was involved throughout the entire process, and as we got closer to launch I collaborated closely to ensure a smooth implementation. The new website was launched with full mobile responsiveness, streamlined navigation, and enhanced security. Google Analytics was integrated to provide ongoing insights into user engagement and site performance.

Results & Impact

The redesigned AIA|DC website successfully transformed the organization’s digital presence, achieving several key outcomes:

Increased User Engagement: The new, intuitive design led to a significant increase in user interaction across both member and non-member audiences.
Expanded Reach: By optimizing the site for mobile devices and enhancing search engine visibility, AIA|DC broadened its reach within the DC community and beyond.
Improved Fundraising Capability: The streamlined design and clear calls to action enabled AIA|DC to better promote fundraising initiatives, resulting in increased contributions.
Simplified Content Management: With the updated Drupal system, AIA|DC staff could now manage content more efficiently, reducing administrative burden and allowing for more frequent updates.
Elevated Brand Identity: The modern, visually impactful design helped position AIA|DC as a leader in the architecture and design community, reinforcing their role as a thought leader in Washington DC.

This project not only met the strategic goals set forth at the beginning but also provided AIA|DC with a scalable, user-friendly digital platform to support their growth and outreach for years to come.

Architecting Washington, DC