The team from Chaptr explain how they dug deep to create a site for a supplier of responsibly sourced coloured gemstones
(1) The redesigned gemfields.com is a rich, immersive web experience all about Gemfields, its projects and the gemstones it produces. (2) The site features a comprehensive encyclopaedia of rubies, amethysts and emeralds. (3) The site is video heavy with a lot of the visual design relying on looping background footage. This meant that the films were heavily optimised and compressed. (4) Intuitive and logical navigation was a big priority. (5) A complete history of the company is displayed as an interactive timeline, featuring key moments and images from 2005 until the present day. The timeline uses a horizontal slider for quick navigation between milestones. (6) The site was designed and built to work seamlessly across all devices and platforms.
Gemfields ( gemfields.com) is a leading supplier of responsibly sourced coloured gemstones, owning and operating some of the world’s finest gemstone deposits, and specialising in the production and marketing of emeralds and amethysts from Zambia, and rubies and pink sapphires from Mozambique.
The company needed to consolidate its existing web presence and improve the navigation and user journey, and called in Chaptr ( chaptr.studio) to build a more logically structured and intuitive site that would position Gemfields as pioneers of the marketing of precious gemstones, using trend-setting visual design and immersive web technology.
How did Chaptr get involved in this project?
KS: Chaptr was initially approached by the marketing team at Gemfields to work on a smaller, preliminary project before tendering for the redesign and development of the new site in its entirety. Following the successful completion of a microsite for the Autumn 2016 ‘Ruby Stories’ campaign, we were invited to pitch for the main project.
Talk us through some of the site’s design features…
ML: One of my favourite design challenges presented by the Gemfields site was to present quite scientific, specialised information about the makeup, geography and nature of precious gemstones in an engaging and playful way. We decided to create an interactive encyclopaedia of rubies, amethysts and emeralds to demonstrate Gemfields’ geological expertise. Features included a hover magnification of the gemstones’ texture, customised Google maps to illustrate the origins of each stone, and interactive sliders to present more technical mineralogical information, such as the Mohs scale of mineral hardness.
What did your UX process involve? What did you learn?
ML: Because the brief was heavily concerned with the consolidation of excessive content and the refinement of the site’s navigation and user journey, the UX process was comprehensive to say the least. We started the project with a lengthy card-sorting exercise at Gemfields HQ in Mayfair with the key stakeholders. An entire afternoon was spent moving physical cards around a boardroom table in order to really understand the organisation of content. This really was the only way we were able to understand what should go where. This was followed by wireframing, flat designs and prototyping. We decided to user test the prototype by conducting qualitative user interviews with a large cross section of the site’s prospective audience, as well as recording more quantitative behavioural data, such as heat maps and visitor recordings.
You use multiple video backdrops; how do you maintain performance?
JH: This was a big challenge for Chaptr’s development team, as the visual content is so fundamental to the design and experience of the site. We wanted to make gemfields.com as immersive as possible while ensuring great performance. First we spent a lot of time editing full-feature videos into shorter background visuals that loop gracefully and are of a suitable size to load with the page. Once all the visual assets were optimised as much as possible, and converted into MP4, WebM and Ogg formats, without compromising quality we decided to serve all the visual content using Amazon S3. Using Amazon S3 means that we’re delivering assets using a service that is optimised for object storage and delivery, and fully making use of AWS’ Cloudfront CDN to ensure optimal performance from anywhere in the world.
What technologies are running?
JH: The site is running on a completely bespoke WordPress theme. We chose WordPress as we knew we could be really flexible with the user experience of the administration of the site, which was a big priority for the Gemfields marketing team. We made use of John Polacek’s Scroll Magic jQuery plugin for the triggering of CSS animations, Google’s Maps API for interactive presentation of geographic information, and Maxmind’s GeoIP libraries for geo-targeting and delivery of region specific content.
Tell us about your testing process?
ML: There were various testing stages throughout the project, from usability to performance and crossbrowser compatibility. Luckily the site performed really well on most modern browsers, and we only had to use polyfills on a small number of browsers and devices. The biggest challenge was to suitably replace the auto-playing video backgrounds with relevant poster images for mobile devices. How long did the site take to make? KS: The entire process took ten months from commission to launch, with one full-time project manager, two designers and two developers. The site had to go through various rounds of sign off by multiple layers of management at Gemfields, and the process was split into pre and post user-testing phases.
Did you learn any useful lessons?
ML: I think the main thing we learnt was the importance of diversity of feedback. There were lots of varying tastes and expectations to please, and opening up the project at an intermediary stage for a truly inclusive review of the site was crucial to the success of the project. Strong creative direction, embracing the wisdom of the crowd, really improved the end result in this project.
Has the site been well received?
ML: We’re pleased to say the client is really happy with the new gemfields.
com, and it has been really well received by their industry and the wider design community. We have received a lot of recognition and engagement on social media and online design showcases since the launch, and look forward to it being enjoyed by a wider audience over the coming months.
1 2 3 4 5 6
Interactive maps We used the Google Maps API to customise interactive maps showing the geography of various mines and gemstones
Magnified hover A breakdown of the various qualities that make the ruby so desirable, featuring a magnified hover over a cut ruby