The Great Hall landing page redesign

OVERVIEW

The landing page comprises of a navbar with the logo on the left (as is best practice) and navigation link on the right, plus a contact button. All the links and the button anchor to sections of the same page.

The header displays opening times, closing days and ticket prices for the Great Hall as soon as the user lands on the page. This is important considering the essential nature of the information for whoever was interested in visiting the site.

The second section informs visitors on upcoming events. Some of them are actual events that took place or will be taking place at the Great Hall, others are made up as a proof of concept.

The "Discover" section allows users to find out more about the history and heritage of the Hall. It includes an image gallery with descriptions of the main attractions, and then three boxes linking to the interactive pages of the website, respectively a Map of The Hall, a Model of the Old City and a section about Heraldry.

The second-to-last section contains more practical information for visitors, such as the address, accessibility information, instructions for school visits, guided tours or groups. On the right, a Google map allows users to better verify the location of the Hall.

The webpage ends with a contact form. The form would allow users to contact the staff of the Great Hall, but considering it isn't the official website, the "send message" button triggers an alert reminding users of the official website and contacts.

The footer includes links to all the areas and pages of the website, plus links to the social media profiles of the Great Hall.

The first interactive page on the website allows users to display a plan of the Hall and explore its content by hovering on red "diamonds". Each diamond correspond to one of attractions of the site. The informational popup provides an historical description.

Another interactive section includes a navigable 3D model of the old Winchester Castle. Visitors of the website can therefore understand how the area looked like before the Castle was destroyed, and were the Hall was located. Users can drag the model to turn it around, zoom in and out.

The Heraldry section was thought especially to involve younger audiences. Through a sort of gamified experience, instructions lead you in the process of creating a custom coat of arms for your family, according to your surname and family values.

Users are firstly asked to input their surname in a blank field. They can then see the base shield acquiring different colours according to the letters of their surname. After submitting the module, they are asked to select a quality that best applies to their family. The shield is then completed with the shape of an animal corresponding to that particular virtue.

Users can start over and create as many shields as they want.

USER RESEARCH

The foundation for my final major project was the quantitative and qualitative research conducted in my Research Proposal.

After identifying a target category of users through in-person surveys and observation, I set out to determine the needs and struggles of visitors to create relevant solutions.

The first step in this process was connecting with the users through empathy maps. "An Empathy Map consists of four quadrants. The four quadrants reflect four key traits, which the user demonstrated/possessed during the observation/research stage. The four quadrants refer to what the user: Said, Did, Thought, and Felt." (Dam, R. and Siang, T., 2019)

The empathy maps created were based on demographical information gathered through previous research and became the basis for four corresponding engaging personas.

Engaging personas are a sum of goal and role-based ones. In addition to them, they provide a fictional background and information about the user's feelings and mindset, increasing the perception of empathy. (Dam, R. and Siang, T., 2019).

"The purpose of the engaging perspective is to move from designers seeing the user as a stereotype with whom they are unable to identify and whose life they cannot envision, to designers actively involving themselves in the lives of the personas. The other persona perspectives are criticized for causing a risk of stereotypical descriptions by not looking at the whole person, but instead focusing only on behavior." - Lene Nielsen (Dam, R. and Siang, T., 2019)

My analysis of personas comprised of a description of the character’s job, personal life and feelings towards cultural heritage, especially in relation to England. Other than this, main frustrations and interests were outlined. The “Day in the life” section provides an overview of a typical day experienced by the persona, which proved very useful for the creation of user journeys, alongside the empathy maps.

Personas and user journeys were also helpful to narrow down the necessary content to include in the website. For instance, the Inês persona is a 32-year-old influencer and “travelholic”; as a consequence, she’s always thinking about her next trip and carefully planning her schedule ahead. It is plausible that Inês would benefit from a section on the website where the main attractions of the Great Hall are presented, and another one where she could explore future events and activities. On the other hand, the Lindsay persona is passionate about history and would appreciate cultural sections more, such as one with information about heraldry or with a map of the old Winchester Castle. Being a student with a tight budget, she would also need information about ticket prices and concessions.

After this preliminary analysis, a list of all the sections for the website was jotted down, forming a content inventory. In order to involve users throughout the information architecture stage, I resorted to a card sorting survey with closed categories. Ten participants, recruited through Prolific, were asked to sort cards describing discrete elements of the website into predetermined categories. To create the survey, I took advantage of the Optimal Workshop platform.

Results of the card sorting were the starting point for establishing the taxonomy of the website and creating a tree architecture diagram.

WIREFRAMING

Having defined the content to include and how it should be organised, it was time to consider how the website would look and feel as well. Starting from low-fidelity wireframes on paper, the visual structure and hierarchy of the website was defined. Pen sketches are a great starting point because they’re quick to draw and allow various iterations.

When the structure started to become detailed and rich of functionalities, I moved from paper to the screen. A more loyal wireframe was realised with the iPad app Procreate, allowing to draw directly on screen and making it a good transition from the first sketches.

Further iterations were realised on Sketch by including textual content, as well as making the structure more precise. Both desktop and mobile wireframes of the home page were built. It was not deemed necessary to sketch out the secondary interactive pages considering their layout would depend greatly on development and only include header, footer and a basic middle section.

VISUAL IDENTITY

Once the architecture of the website was final, the current identity of the official website was analysed to determine eventual changes that needed to be made.

The colour scheme was in line with the information boards inside the Great Hall, and therefore needed to be maintained. The only small change in this regard was using a lighter and more vibrant shade of yellow for the palette to improve legibility against the dark blue background.

The claim “where history and legend meet” was kept unaltered but removed from the logo, as it didn’t add useful information about the subject of the website. Instead, a reference to the location of the Great Hall was added to the logo with the tagline “Winchester”.

The logo was also partially changed; the pictogram of the crown was maintained because it referred to the usage of the Great Hall as a royal residence, but the wordmark was changed to another font. In fact, the typeface in use didn’t reflect the medieval roots of the Hall and made it appear anachronistic.

Other elements that needed to be designed were the map of the hall and the customisable coats of arms. The former was traced from an available plan of the Great Hall with Adobe Illustrator, then coloured according to the new palette scheme.

The base shield for all the coats of arms was traced directly from the ones pictured on the stained windows, but left with white tinctures and an empty crown. Twenty-six coloured overlays were then created and assigned to each letter in the alphabet. When the user types their surname letter by letter, the overlays are superimposed on the blank shield and form a unique coat of arms.

3D MODELING

The 3D model of the old Winchester Castle was based on the chalk one exposed inside the Great Hall. Only the main area enclosed in the walls was modeled, as the houses and trees surrounding it were not essential to understand the main structure of the old area.

Producing this model was probably the hardest challenge I had to face for my final major project. Although I was able to build 3D models with Autodesk Maya, this particular one needed to be exported in .glb format to be uploaded online through the Three.js library. As the Maya plug-ins I found to do exactly this didn’t work, I resorted to creating the model in Blender, a software I’d never used before. The reasons for choosing this program were that:
1. It is one of the few pieces of open-source 3D software on the market;
2. It is known to be extremely easy to learn for beginners.

Considering the time I had available, I followed a tutorial series that would give me an overview of the main controls. The shapes I had to build were fairly basic, more often than not an addition or subtraction of cubes, cones and cylinders (for which I could use Boolean functions).

I started by tracing a picture of the chalk model I had taken during one of my visits, to familiarise with the structure of the buildings. The first model I created was the one of the Great Hall, starting from really simple extrusions of triangles and slowly adding details with Extrude or Boolean Addition.

The only exception to this procedure was the terrain, for which I took advantage of the Sculpt mode in Blender.

In regards to textures, I decided to avoid complex ones in order to create the lightest possible model to upload online. I used a solid colour texture for both the base and roughness parameters of the material, as I wanted the model to look smooth and opaque. The model was exported to .glb format directly through Blender; the new version does not require plug-ins for this function, so the export was very straightforward and way simpler than it would have been on Maya.

WEB DEVELOPMENT

The website was developed in HTML, CSS, Javascript and Bootstrap. I didn’t find any particular challenge in the implementation of the latter library, as I’d become acquainted with it though the previous projects of my MA. Most of the components needed for my interface were already available as preset classes and just needed to be styled with CSS.

For the embedded Google map, I used the GMAP3 Javascript library (Demonte, 2019) to more easily center it on the Great Hall address and decide on parameters such as zoom percentage. In order for it to work, I also had to link my Google Maps Javascript API in the head section of the document and allow its use on the corresponding domain from the Google Cloud Platform.

Regarding the section with the interactive plan of the hall, I generated a map area through HTML5 and defined the clickable shapes with x and y coordinates. I then triggered an action “onmouseover” with Javascript, allowing hidden cards with picture and text to appear by changing the display CSS attribute to “block” (from “none”).

The heraldry section was coded with vanilla Javascript by showing and hiding elements according to certain triggers, similarly to how I did for the map. Each one of the twenty-six overlays previously created was assigned a particular ID and z-index, to determine if an image should be put on top or underneath the others. By typing a letter in the input box, the corresponding image appears on top of the base shield. After the surname is complete, the user can submit it and choose a characteristic that best applies to his family. Once one of these virtues is chosen, another overlay with a suitable animal shape is put on top of the shield, which is finally complete.

Finally, the 3D model was embedded thanks to the Three.js library by following the guide on the official website. To make it “explorable” and not static, I used the existing “OrbitControls.js” file, also available from the official website and hosted on GitHub. The Javascript file allowed me to add many interactions to the viewport of the model, such as zooming, panning, rotating.

The Value of ICTs in Cultural Heritage: redesigning the Great Hall website