The Barrow Mansion
The Barrow Mansion is a historic site in Jersey City. This greek revival style mansion was built in the 1840's and has been home to wealthy families and a YMCA. Today, it functions as historic site, community space, and private event venue. I set out to re-design the mansion's website in order to help them attract new patrons.
Deliverables
Heuristic Evaluation | Competitive and Comparative Analysis | Competitive Matrix | Card Sort | Mock up 
Research
Heuristic Analysis

I chose to start this project with a heuristic evaluation. There were obvious aesthetic issues with the website - a heuristic analysis allowed me to go deeper and explore systemic flaws in the website.

Heuristic Standard: Visibility of System Status

1. The clicked or active state of the top navigation is not easily discernible from the inactive state.

System status ann.png

Recommendations

 

Create an indicator which will convey the users current page. Revise the page names in the top navigation and the drop downs to accurately describe the pages. Remove the quick links.

Heuristic Standard: Match between system and the real world

1. The language used in the drop down menus in the top navigation does not accurately represent the pages that they are connected to. The picture gallery is under the home page? Under History, Archives leads to a long history on the Barrow Mansion, and Jersey City is just map that is mostly illegible. 

2. The Quick links section duplicates information in the top navigation.  

Match et al.png

Recommendations

 

Revise the page names in the top navigation and the drop downs to accurately describe the pages. Remove the quick links.

Heuristic Standard: Consistency and Standards

1. Pictures and links throughout the site take users to external websites without warning. In addition, the new site opens in the same browser.

 

Pictures do not clearly communicate that they are links to another site or page. Every picture on the site is not a link. There is no consistency with regard to pictures and links.

Consistency et al.png

Recommendations

 

All links should open in a new browser tab. This is standard best practice for web design. Pictures should not link to another website without clearly indicating that it is a link to a website.

 

Develop and implement consistent design standard throughout the website. This will make it easier for users to navigate and recognize the information on the site.

Heuristic Standard: Aesthetic and Minimalist Design

1. There is quite a bit of unnecessary information on the site. This drowns out information that users might be looking for. Further the font is small and the passages are verbose. Topics are also repetitive. Specifically, there are many sections discussing the history of the mansion.

Aesthetic ann..png

Recommendation

 

Reduce the amount of copy on the website and increase the font size. The information should be streamlined so that users can get the most value from the information.

Competitive Matrix

The competitive matrix helped the Barrow Mansion understand who else was in their competitive space. The companies below serve the same community and provide services which are the same or similar to the Barrow Mansion. This is particularly helpful as the organization works to develop their brand and mission.

_Barrow Mansion - Competitive Matrix.jpg
Element Analysis

The element analysis continues to paint a picture of the Barrow Mansion's competitive landscape. For this analysis, I focused on local businesses that were competing for the same customers and grants as the Barrow Mansion. White Eagle Hall is the comparator - it's a commercial concert venue at a historic location in Jersey City. Most of it's revenue comes from concerts, though it does host smaller events such as weddings.

_Barrow Mansion - Element Analysis 2.jpg
_Barrow Mansion - Element analysis 1.jpg
Design
Current website - Home Page
Screen Shot 2019-03-13 at 10.54.21 PM.pn
Redesigned Homepage
Barrow Mannsion Homepage (Hi-Fi).png

Key Features

1. The navigation was enhanced by adding a bar to highlight which page the user is currently on.

2. White space was added to the overall page design  to provide a cleaner aesthetic . 

 

3. The font was changed and made larger to improve readability. 

 

4. The information was placed in a linear pattern to better communicate the mission and purpose of the mansion.

Current website - History Page
Screen Shot 2019-03-13 at 10.55.34 PM.pn
Redesigned History Page

The current history page is cluttered with pictures and the story is long and meandering.

 

For the new history page, I focused on aesthetics, readability, and re-formatting the Mansion's story so that it is linear and clearer.

History Hi-Fi.png