The team from Chaptr ex­plain how they dug deep to cre­ate a site for a sup­plier of re­spon­si­bly sourced coloured gem­stones

net magazine - - SHOWCASE -

Close up

(1) The re­designed gem­ is a rich, im­mer­sive web ex­pe­ri­ence all about Gem­fields, its projects and the gem­stones it pro­duces. (2) The site fea­tures a com­pre­hen­sive en­cy­clopae­dia of ru­bies, amethysts and emer­alds. (3) The site is video heavy with a lot of the vis­ual de­sign re­ly­ing on loop­ing back­ground footage. This meant that the films were heav­ily op­ti­mised and com­pressed. (4) In­tu­itive and log­i­cal nav­i­ga­tion was a big pri­or­ity. (5) A com­plete his­tory of the com­pany is dis­played as an in­ter­ac­tive time­line, fea­tur­ing key mo­ments and im­ages from 2005 un­til the present day. The time­line uses a hor­i­zon­tal slider for quick nav­i­ga­tion be­tween mile­stones. (6) The site was de­signed and built to work seam­lessly across all de­vices and plat­forms.

Gem­fields ( gem­ is a lead­ing sup­plier of re­spon­si­bly sourced coloured gem­stones, own­ing and op­er­at­ing some of the world’s finest gem­stone de­posits, and spe­cial­is­ing in the pro­duc­tion and marketing of emer­alds and amethysts from Zam­bia, and ru­bies and pink sap­phires from Mozam­bique.

The com­pany needed to con­sol­i­date its ex­ist­ing web pres­ence and im­prove the nav­i­ga­tion and user jour­ney, and called in Chaptr ( chaptr.stu­dio) to build a more log­i­cally struc­tured and in­tu­itive site that would po­si­tion Gem­fields as pi­o­neers of the marketing of pre­cious gem­stones, us­ing trend-set­ting vis­ual de­sign and im­mer­sive web tech­nol­ogy.

How did Chaptr get in­volved in this project?

KS: Chaptr was ini­tially ap­proached by the marketing team at Gem­fields to work on a smaller, pre­lim­i­nary project be­fore ten­der­ing for the re­design and de­vel­op­ment of the new site in its en­tirety. Fol­low­ing the suc­cess­ful com­ple­tion of a mi­crosite for the Au­tumn 2016 ‘Ruby Sto­ries’ campaign, we were in­vited to pitch for the main project.

Talk us through some of the site’s de­sign fea­tures…

ML: One of my favourite de­sign chal­lenges pre­sented by the Gem­fields site was to present quite sci­en­tific, spe­cialised in­for­ma­tion about the makeup, ge­og­ra­phy and na­ture of pre­cious gem­stones in an en­gag­ing and play­ful way. We de­cided to cre­ate an in­ter­ac­tive en­cy­clopae­dia of ru­bies, amethysts and emer­alds to demon­strate Gem­fields’ ge­o­log­i­cal ex­per­tise. Fea­tures in­cluded a hover mag­ni­fi­ca­tion of the gem­stones’ tex­ture, cus­tomised Google maps to il­lus­trate the ori­gins of each stone, and in­ter­ac­tive slid­ers to present more tech­ni­cal min­er­alog­i­cal in­for­ma­tion, such as the Mohs scale of min­eral hard­ness.

What did your UX process in­volve? What did you learn?

ML: Be­cause the brief was heav­ily con­cerned with the con­sol­i­da­tion of ex­ces­sive con­tent and the re­fine­ment of the site’s nav­i­ga­tion and user jour­ney, the UX process was com­pre­hen­sive to say the least. We started the project with a lengthy card-sort­ing ex­er­cise at Gem­fields HQ in May­fair with the key stake­hold­ers. An en­tire af­ter­noon was spent mov­ing phys­i­cal cards around a board­room ta­ble in or­der to re­ally un­der­stand the or­gan­i­sa­tion of con­tent. This re­ally was the only way we were able to un­der­stand what should go where. This was fol­lowed by wire­fram­ing, flat de­signs and pro­to­typ­ing. We de­cided to user test the pro­to­type by con­duct­ing qual­i­ta­tive user in­ter­views with a large cross sec­tion of the site’s prospec­tive au­di­ence, as well as record­ing more quan­ti­ta­tive be­havioural data, such as heat maps and vis­i­tor record­ings.

You use mul­ti­ple video back­drops; how do you main­tain per­for­mance?

JH: This was a big chal­lenge for Chaptr’s de­vel­op­ment team, as the vis­ual con­tent is so fun­da­men­tal to the de­sign and ex­pe­ri­ence of the site. We wanted to make gem­ as im­mer­sive as pos­si­ble while en­sur­ing great per­for­mance. First we spent a lot of time edit­ing full-fea­ture videos into shorter back­ground vi­su­als that loop grace­fully and are of a suitable size to load with the page. Once all the vis­ual as­sets were op­ti­mised as much as pos­si­ble, and con­verted into MP4, WebM and Ogg for­mats, with­out com­pro­mis­ing qual­ity we de­cided to serve all the vis­ual con­tent us­ing Ama­zon S3. Us­ing Ama­zon S3 means that we’re de­liv­er­ing as­sets us­ing a ser­vice that is op­ti­mised for ob­ject stor­age and de­liv­ery, and fully mak­ing use of AWS’ Cloud­front CDN to en­sure op­ti­mal per­for­mance from any­where in the world.

What tech­nolo­gies are run­ning?

JH: The site is run­ning on a com­pletely be­spoke Word­Press theme. We chose Word­Press as we knew we could be re­ally flex­i­ble with the user ex­pe­ri­ence of the ad­min­is­tra­tion of the site, which was a big pri­or­ity for the Gem­fields marketing team. We made use of John Po­lacek’s Scroll Magic jQuery plugin for the trig­ger­ing of CSS an­i­ma­tions, Google’s Maps API for in­ter­ac­tive pre­sen­ta­tion of geo­graphic in­for­ma­tion, and Max­mind’s GeoIP li­braries for geo-tar­get­ing and de­liv­ery of re­gion spe­cific con­tent.

Tell us about your test­ing process?

ML: There were var­i­ous test­ing stages through­out the project, from us­abil­ity to per­for­mance and cross­browser com­pat­i­bil­ity. Luck­ily the site per­formed re­ally well on most mod­ern browsers, and we only had to use poly­fills on a small num­ber of browsers and de­vices. The big­gest chal­lenge was to suit­ably re­place the auto-play­ing video back­grounds with rel­e­vant poster im­ages for mo­bile de­vices. How long did the site take to make? KS: The en­tire process took ten months from com­mis­sion to launch, with one full-time project man­ager, two de­sign­ers and two de­vel­op­ers. The site had to go through var­i­ous rounds of sign off by mul­ti­ple lay­ers of man­age­ment at Gem­fields, and the process was split into pre and post user-test­ing phases.

Did you learn any use­ful lessons?

ML: I think the main thing we learnt was the im­por­tance of di­ver­sity of feed­back. There were lots of vary­ing tastes and ex­pec­ta­tions to please, and open­ing up the project at an in­ter­me­di­ary stage for a truly in­clu­sive review of the site was cru­cial to the suc­cess of the project. Strong cre­ative direction, em­brac­ing the wis­dom of the crowd, re­ally im­proved the end re­sult in this project.

Has the site been well re­ceived?

ML: We’re pleased to say the client is re­ally happy with the new gem­fields.

com, and it has been re­ally well re­ceived by their in­dus­try and the wider de­sign com­mu­nity. We have re­ceived a lot of recog­ni­tion and en­gage­ment on so­cial me­dia and on­line de­sign show­cases since the launch, and look for­ward to it be­ing en­joyed by a wider au­di­ence over the com­ing months.

1 2 3 4 5 6

In­ter­ac­tive maps We used the Google Maps API to cus­tomise in­ter­ac­tive maps show­ing the ge­og­ra­phy of var­i­ous mines and gem­stones

Mag­ni­fied hover A break­down of the var­i­ous qual­i­ties that make the ruby so de­sir­able, fea­tur­ing a mag­ni­fied hover over a cut ruby

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.