Greystone Mansion

Greystone Mansion & Gardens, a historic estate with grounds open to the public, is considered a “one of Beverly Hills’ hidden gems”. Despite its size and location, however, very few people know of its existence and it doesn’t have its own website. Its online presence is primarily located on the City of Beverly Hills website and the Greystone pages are out-of-date, confusing to navigate, and not reaching their target audience.

As a self-initiated project, I collaborated with two other designers to conduct extensive research and put together a proposed redesign of their website.
UX Researcher & Designer
http://www.beverlyhills.org/https://www.greystonemansion.org/
Research
Heuristic Evaluation
I first completed a heuristic evaluation of both the existing Greystone website and the site of a local competitor (The Huntington). These audits provided initial insights regarding the importance of concise and consolidated navigation, high quality (and quantity of) images, short page descriptions, and line lengths that make for comfortable reading.

Below are a few screenshots from the current Greystone Beverly Hills site that exhibit some of these issues.
User Interviews
For our interviews, we selected three people who had visited Greystone at least once but fit different segments of the target audience – someone who was planning a wedding, a worker in the film industry, and a retiree who loves architecture.

We asked participants a few general questions followed by more specific ones about their experience visiting Greystone and using the Greystone website. These interviews gave us important feedback for our redesign:
  • Public events at Greystone should be better publicized on the website
  • Highlighting Greystone’s landscape sustainability practices as well as the movies that were filmed there could increase interest among potential visitors
  • Website needs to work on mobile (will also help to reduce unnecessary content)
  • Website should give more information about (and photos of) Greystone’s architecture
  • Overall aesthetic of site is outdated; needs to look more modern
  • Reserving tickets is difficult; process needs to be optimized
Analysis
Personas & Experience Maps
Based on our interviews, we constructed personas that represented those same three audience segments. In addition to listing basic information like bios, devices used, and level of tech savvy, these personas also included more project-specific questions such as his or her previous experience and expectations of the venue and/or website.

Each persona was given a corresponding experience map, which illustrated their motives and actions before, during, and after engaging with the Greystone website. This helped to illustrate what features were missing – or would be nice to have – on the current website that would enhance each persona’s journey and overall experience.
User Flows
Lastly, we built out a user flow for each persona that gave us a better idea of how they would first engage with the redesigned website (entry point) as well as the steps they could take in order to meet their success criteria. We realized that our wedding planner, for instance, should have multiple opportunities throughout the site’s wedding pages to contact someone for more information.
Information Architecture
Content Inventory
A comprehensive content inventory of the entire Greystone website evaluated the accuracy, value, and level of quality of each page, which in turn determined our best next steps for the overall site. We learned that logos, PDFs, and images all needed to be higher resolution, some pages could be removed entirely, and other pages (like the homepage) were too long and list-like and would benefit from replacing the assortment of images with a single animated hero.
Feature Matrix
After noting what our personas needed to most effectively accomplish their tasks on the website, we compiled a list of these features – both missing and existing – to incorporate into the new site. Prioritization of the suggested features was determined by a rating of importance from 1-10 given to each persona and the client, based on how useful it was to them. The features with the highest totals – such as a virtual tour of the mansion, an interactive map of the grounds, and a Google map of the location – were considered most valuable, and therefore to be given priority in the site redesign.
Card Sort
As one of the highest priority issues on the current website was the confusing navigation and excessive menu items, conducting an open card sort was an essential part of optimizing the site’s information architecture. Utilizing a simple, easy-to-use tool like Trello for the card sorting ensured that our participants were able to perform the task without minimal technical issues (and could sort remotely if needed).

The card sorts revealed that the navigation menu could be compacted into about half as many menu items and many of the sub-pages could be combined.
Site Map
The proposed site map (pre-usability testing) was much more streamlined than the original. We greatly reduced the number of menu items and simplified their names, in addition to using the term “Events” to apply only to events that were open to the public versus “Rentals,” which referred to renting out the space for private events. Following the convention of other competing institutions, we also decided to use the term “Visit” to nest all visiting info, tours, and reservation information in a single place for easy access.
Design & Test
Wireframes & Usability Testing
The mobile and desktop wireframes we sketched out gave priority to images and greatly reduced the amount of overall text. Users can also access the information they need with much fewer clicks thanks to a consolidated dropdown navigation bar.

After testing our wireframes with potential users, we made a variety of updates to our screens and navigation based on the feedback we received. For instance, participants were unclear whether they should select “Events” or “Rentals” when asked to find more information about planning their own event at Greystone. Our solution was to change the “Events” category name to “Public Events” in order to clarify between private and public events.
Takeaways & Next Steps
As this project required collaborating remotely with other designers, we hit a few bumps in the beginning regarding how to best divvy up the work and the tools we used. We realized that while it was ideal for us to all be using the same tools, with the time restraints on this project (and varying degrees of experience) we oftentimes had to use whatever we were most familiar with. This allowed us to move quickly at the beginning, although it also meant an extra step at the end making sure all the final deliverables exhibited visual unity and consistency.

The majority of this project consisted of the upfront UX research – condensing the two separate Greystone websites and refining the information architecture into a simple and navigable site map. The next steps would therefore be to build out the mid- and high-fidelity wireframes for the rest of the key pages and testing these once more with users.