A history of Britain’s first refugees
The Huguenot Museum is a brand new museum in Rochester, Kent, UK dedicated to the history of the Huguenots – French Protestants who fled France in the 16th/17th centuries due to religious persecution.
The museum opened 13 May 2015.
Surface Impression invited me to look after the UX, UI and WordPress build for the site. There was a draft site map, a load of copy, an events schedule, some photos of the artefacts, educational packs, plans for a shop and a set of brand guidelines. Not a bad start. We didn’t have the luxury of time or money so after a quick briefing, I set to work developing a wireframe.
John H Falk devised a set of visitor profiles that describe five distinct types of museum visitor. Based on 20 years of research and presented in Identity and the Museum Visitor Experience (2009), Falk profiles identify five different groups of visitor according to their needs. UX gold-dust I do believe. To paraphrase (poorly) they break down like this
- Explorers – self-directed learners, curious, new things
- Facilitators – social reasons, cultural capital, sharing
- Experience seekers – bucket-listers, tourists
- Professional / Hobbyists – goal/object focussed
- Rechargers – ambience, peace, cafe
Having recently applied this research when developing the Brighton & Hove Museums website, you quickly identify that different museums have different profile weightings. For example, the Brighton Royal Pavilion attracts many more experience seekers than the Booth Museum of Natural History. The museum experience needs to satisfy these natural biases – the role of the website in the pre and post-museum experience is absolutely key.
If you find the Falk profiles interesting, you might like to read up on Values Modes™ by Cultural Dynamics as they also focus upon psychographic qualities of values, beliefs and motivations.
Website design approach
A public website like a museum needs especially to use plain language, provide clear sign-posting and promote accessibility in every way it can, not just by adding a few aria tags so you need to use every tool you can; unambiguous labels, strong visual hierarchy, clear calls to action, device independent navigation, colour schemes, larger default type, high contrast text etc.
We adopted an L-shaped navigation scheme to reveal the breadth of content in each section and encourage further exploration. A strong visual hierarchy exists in the section navigation with the most important details being at the top of the list. As we do not have many layers of content (there are two), we decided breadcrumbs were unnecessary however we provide clear signposting using section labels, colour coding and current page highlighting in the navigation scheme. All good basic stuff.
Responsive website design
Visually, the site has to reflect the brand identity but not detract from the content so we adopted a floral repeat that is used throughout the building. This sets up a good pre-visit expectation. To decrease the contrast and increase legibility we went with a duo-tone effect for page backgrounds, which is removed when viewed on mobile devices to decrease noise and bandwidth.
The site is fully responsive and adopts a percentage-based fluid layout. That means it will scale up or down to make best use of the available space.
There are three main breakpoints in the site which are based on ems rather than fixed device widths. This allows us to set breakpoints at critical points in the content. For small devices, we pack away the navigation into an off-canvas element using pushy.js but keep the telephone number exposed for visitors on the go who need assistance.
It took about three weeks to get the theme working smoothly.
iPad app design
Within the museum is an iPad running the Huguenot names app that allows visitors to browse and search Huguenot surnames and discover more about their genealogy.
Although it is a simple app, Huguenot names had it’s own particular set of constraints: the room had low-lighting so more contrast was required; the device can’t be moved closer to the user so font size needed to be increased; the expertise level needs to be biased towards the perpetual novice, it has to be super simple to access; the iPad is locked inside a bevelled frame so the safe tap area is slightly reduced.
After a period of inactivity, the screen stays on and we enter slide-show mode, slowly revealing content.
Visit the Huguenot Museum.