Holmes Run Acres Website Refresh
UX Designer, Visual Designer, Information Architect, Researcher
brief
Holmes Run Acres (HRA) is a small, woodsy mid-century modern community in Falls Church, Virginia. Established in 1951, its modern architecture stood out from the typical colonial and ranch houses of the post-war building boom in Washington, DC. The Holmes Run Acres Civics Association (HRACA), responsible for maintaining the community website, sought a refresh, as the current site had not undergone significant updates since its creation in 2014.
Research Survey
Given the site's maintenance on a volunteer basis using the Weebly platform with a minimal budget, research was needed to prioritize essential updates. Utilizing the neighborhood email listserv, an initial survey garnered 87 responses. Key findings included:
1) 62% visited the site only a few times a year
2) 36% visited the site before moving to HRA
3) 50% accessed the site via mobile devices or tablets
4) 58% felt they couldn't find all the necessary information
1) 62% visited the site only a few times a year
2) 36% visited the site before moving to HRA
3) 50% accessed the site via mobile devices or tablets
4) 58% felt they couldn't find all the necessary information
LARRY
"The flight is at noon, so we need to get to the airport by 6am..."
Age: 67
Occupation: Retired
Status: Married
Location: Hilton Head Island, SC
Archetype: The Bucket List Cruiser
Age: 67
Occupation: Retired
Status: Married
Location: Hilton Head Island, SC
Archetype: The Bucket List Cruiser
Mobile-friendliness, more home photos, renovation help, and a section for neighborhood news and updates were highly requested.
tree testing
Due to the haphazard and piecemeal navigation structure of the original site, with ambiguous categories like "Resources" and miscellaneous items under "More...", users consistently found it difficult to locate information. To address this, I conducted market research on other neighborhood community sites and crafted a new IA from scratch.
I tested this new structure through four unmoderated iterative tree tests with 40 individuals (both HRA residents and the general public) using two different test platforms.
I tested this new structure through four unmoderated iterative tree tests with 40 individuals (both HRA residents and the general public) using two different test platforms.
Results were consistent across tests, with the new navigation outperforming the original in each task. Additional moderated Zoom interviews were conducted to confirm results and gather general feedback.
Design
The original home page included a slideshow with several poorly cropped and badly lit images, along with outdated shots of community events. The busy vintage map background confused users during testing, as they thought it was clickable. Responsiveness was inconsistent, with navigation working well but the slideshow not scaling properly:
I reached out to a local architect who had recently renovated homes in the neighborhood and arranged to use his photos for the site. This was crucial as the survey revealed several users had visited the page before moving to the neighborhood. A general goal of the HRACA was to prevent developers from replacing homes with "McMansions." Professional-quality photos would attract new residents who appreciate the unique architecture. Additionally, I sourced more photos from neighborhood photographers, both amateur and professional.
With a new hero image and slideshow in mind, along with implementing the new IA, I created quick responsive wireframes for the new home page. I also added a section with three graphical quick links to the most frequented pages based on survey responses and a requested News & Updates page:
With a new hero image and slideshow in mind, along with implementing the new IA, I created quick responsive wireframes for the new home page. I also added a section with three graphical quick links to the most frequented pages based on survey responses and a requested News & Updates page:
At this point, the wireframes, new features, and IA were all approved, so I moved forward with implementation, updating fonts and colors to match the new, clean, modern style:
When testing the site on a retina display, I noticed the new icons were blurry. So, I replaced them with SVG files hand-coded into the page and added some CSS hover animation since neither were natively supported by Weebly.
Upgrading the Weebly theme to a newer version fixed most responsive issues. I also reached out to additional neighborhood photographers who contributed several outstanding photos used in the new slideshow and throughout the site.
Upgrading the Weebly theme to a newer version fixed most responsive issues. I also reached out to additional neighborhood photographers who contributed several outstanding photos used in the new slideshow and throughout the site.
Once the home page was approved, I began addressing other pages. The original site had inconsistent headers, poorly cropped and heavily compressed images, random colors, and difficult-to-read text. Some examples below:
A general clean-up was completed to fix minor inconsistencies throughout the site. The first blog post went live, announcing newly scanned historical documents. Finally, I implemented a collection of Mid-Century Modern pattern headers for each section.
The HRA community, surrounded by nature, has many animal lovers. Although my proposal for a wildlife photo gallery initially lacked traction in the survey, I trusted my instincts and reached out for submissions. The response was overwhelming, and the new section was ultimately well-received by residents and the board.
"all I can say is WOW. I practically rubbed my eyes in disbelief. It's fabulous."
NExt...
Additional user and tree testing could refine the IA further, as changes were made after the initial testing round. Moving the site to a more robust platform might be considered, given Weebly's limitations. However, the HRACA board is currently satisfied with the system. The user survey indicated a fondness for analog formats, suggesting that certain assets, like the quarterly "Holmes Runner" magazine, should remain undigitized to preserve the community's vintage charm.
"Cale’s rework of our website took it to a new level: crisp, easy to navigate, elegantly simple, with a clear wink and warmth to its organization that captures the soul of this historic neighborhood."
