client
Holmes Run Acres Civic Association
category
Digital Experiences
date
2020
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. When the first homes were built there in 1951, the modern architecture was a radical departure from the typical colonial and ranch houses that dominated the post-war building boom in the Washington, DC area. The Holmes Run Acres Civics Association (HRACA), the organization that maintains the community website, was looking for a refresh, as the current site had not had any significant updates since first being built in 2014.
Research Survey
As the site was maintained on a volunteer basis using the Weebly platform with a minimal budget, research was needed to prioritize only the essential updates. I had access to the neighborhood email listserv, an active and opinionated group, in order to conduct an initial survey, which garnered 87 responses. Key findings included:
1) 62% only visited the site a few times a year
2) 36% visited the site before moving to HRA
3) 50% visited the site on a mobile device or tablet
4) 58% did not feel they were able to find all the information they needed
1) 62% only visited the site a few times a year
2) 36% visited the site before moving to HRA
3) 50% visited the site on a mobile device or tablet
4) 58% did not feel they were able to find all the information they needed
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
The site was only partially responsive, so unsurprisingly when asked for general comments and features, mobile-friendliness was high on the list. Additionally, users wanted to see more photos of homes, get help with renovations, and have a place for general neighborhood news and updates.
tree testing
Due to the haphazard and piecemeal navigation structure of the original site with ambiguous categories such as "Resources" and grouping a number of miscellaneous items under "More...", along with the consistent feedback from users that information was difficult to find, as well as doing some market research on other neighborhood community sites, I began to craft a new IA from scratch. I proceeded to test 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 over both tests, with the new navigation outperforming the original on each task. Additional moderated Zoom interviews were conducted to confirm results and get general feedback.
Design
The original home page included a slideshow of photos with a number of poorly cropped and badly lit images along with some high-quality shots that were of outdated community events not relevant to the general public. It did not do the neighborhood justice. The page also utilized a vintage map as a background image, which in other contexts may have worked, but felt out of place here and in user testing actually confused someone who thought some of the map text was clickable. Responsiveness was inconsistent, with some items like the navigation working well, but others like the slideshow not scaling properly:
I reached out to a local architect who had done some recent renovations in the neighborhood and successfully pitched a win-win if we could use his photos for the site. This was important to me as the survey revealed a number of users had visited the page before moving to the neighborhood, and a general goal of the HRACA was to prevent developers from knocking down homes to replace them with "McMansions", thus having professional quality photos on the site would be a way to attract new residents that would appreciate the unique architecture. I also checked with a few neighborhood photographers, both amateur and professional, for additional photos.
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 two of 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 two of 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, along with updated 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 things Weebly natively supported.
Upgrading the Weebly theme to a newer version fixed most of the responsive issues. I also reached out to additional photographers in the neighborhood who contributed a number of great photos that I used in the new and improved slideshow as well as throughout the rest of the site:
Upgrading the Weebly theme to a newer version fixed most of the responsive issues. I also reached out to additional photographers in the neighborhood who contributed a number of great photos that I used in the new and improved slideshow as well as throughout the rest of the site:
Once the home page was approved I began tackling other pages. The original site utilized a strange array of 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 small inconsistencies throughout the site and the first blog post went live, announcing the addition of some newly scanned historical documents. Finally, I implemented a collection of Mid-Century Modern pattern headers for each section:
As the HRA community is surrounded by nature there is an abundance of local wildlife and a seemingly large number of animal lovers on the listserv. Oddly though, my proposal of a wildlife photo gallery addition to the site did not gain a lot of traction on the initial survey. I went with my gut and reached out for submissions, receiving dozens of incredible shots. As predicted, the residents and board ended up loving the this new section.
"all I can say is WOW. I practically rubbed my eyes in disbelief. It's fabulous."
NExt...
Additional user and tree testing could be completed to further refine the IA as some additional changes were made after the initial round of testing. Second, a case could be made to move the site to a more robust platform as Weebly has quite a lot of limitations, but at this time the HRACA board is happy with the results and feels more comfortable making updates on the system they already know. Finally, the user survey showed that there is still a love of analog by many members of the neighborhood, so we also may want to avoid digitizing certain assets, such as the quarterly "Holmes Runner" magazine, in order to keep that vintage dream alive.
"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."
