The Centre Of Archaeology at Staffordshire University had partnered with the Shakespeare Birthplace Trust to scan a number of artefacts from New Place, the home of William Shakespeare. They needed a website that would make these scans accessible and engaging to the general public on an extremely tight budget.
As the only designer and developer on the project, I needed to pitch an interface design that would put these scans front and centre of the user experience. Of equal importance was autonomy, ensuring that the content team could easy add, remove or alter scans as they required.
UX Design, Visual Design, Website Development, WordPress Integration.
Research and initial concepts
With the budget and timeframe that the project had been set and the small scope of content the website needed to accommodate, a detailed investigation of user behavior was deemed unnecessary. It was likewise determined that resources needed to focus on the design and development of the intended web system.
I focused my attention on websites that essentially work as 3D libraries. Both Quixel Megascans and Sketchfab accommodate a wide range of models and offer users different levels of interactivity. Since Sketchfab also enables users to create an account, upload 3D models and easily embed them in their own pages, this immediately answered the question of scan storage.
User journey and basic wireframes
I maintained a document of structural keynotes and considerations based on this initial investigation. These formed the basis of rough wireframes for each of the custom page templates I was going to create, themselves annotated with technical direction that would aid the following stages.
While this wasn’t to be a large website, I nevertheless produced a basic User Flow to contextualise where these pages would sit in the visitor’s experience.
High Fidelity Interface Mockups
Confident in the proposed structure, I produced a series of mockups using Adobe Photoshop. Although the client had no specific guidelines for the visual direction, I advised maintaining consistency with the tone, layout and typography of their other websites.
I opted for a neutral colourscheme that would allow the colour and shape of the scans to be the most striking visuals on the page. Iconography, buttons and padding were kept sharp, concise and simple to minimise the number of elements demanding the user’s attention.
Desktop and mobile previews of the artefact page
Framework development and design execution
The 3D artefacts scanned as part of this project are really what it’s all about. Straight from the home of William Shakespeare, these represent a completely unique, personal insight into the man’s life. When it came to the question of engaging the public with these objects, an image gallery with a few captions just wasn’t going to cut it.
We optimised and uploaded all the scans to SketchFab. I then optimised the interface to maximise their impact and ensure users weren’t forced into clicking minute parts of the screen. This is what makes the project special and we all agreed from the beginning that the user interface needed to put this content front and centre.
Results and discoveries
After the first six months following the site’s launch, users were discovered to be spending anywhere between one and three minutes on each individual artefacts page. The bounce rate was lower than 50% across all devices and averaging just under four pages per session.
It’s difficult to ascertain the success of the design without a longer sample period or behavioural data from comparative websites. That being said, feedback from users has been consistently positive to the point that expanding both the scope of the site and variety of exhibit types it supports is currently under discussion.