Redesign Certifi­caat­pagina

UI Design & Front-end development

FranklinCovey Benelux
,
2022
HTML
CSS
Javascript
Miro
Adobe Photoshop

FranklinCovey Certificaatpagina

Stephen Covey’s The Seven Habits of Highly Effective People helpt veel mensen om hun leven in eigen handen te nemen. FranklinCovey zet deze gedachte voort door tools voor zelfontwikkeling aan te bieden die voortbouwen op het originele werk van Stephen Covey. Hierbij ligt veel nadruk op hun aanbod aan trainingen.

Situatie: FranklinCovey heeft een nieuwe huisstijl en website. Een aantal digitale uitingen heeft echter een heel andere codebase en is niet meegenomen het redesign, waaronder de pagina waarop deelnemers hun certificaat kunnen inzien. De pagina moet aangepast worden om bij de nieuwe huisstijl te passen. Dit biedt een kans om met een frisse blik te kijken naar de realisatie van dit design.


FranklinCovey Certificaatpagina

FranklinCovey Certificaatpagina

Stephen Covey’s The Seven Habits of Highly Effective People helpt veel mensen om hun leven in eigen handen te nemen. FranklinCovey zet deze gedachte voort door tools voor zelfontwikkeling aan te bieden die voortbouwen op het originele werk van Stephen Covey. Hierbij ligt veel nadruk op hun aanbod aan trainingen.

Situatie: FranklinCovey heeft een nieuwe huisstijl en website. Een aantal digitale uitingen heeft echter een heel andere codebase en is niet meegenomen het redesign, waaronder de pagina waarop deelnemers hun certificaat kunnen inzien. De pagina moet aangepast worden om bij de nieuwe huisstijl te passen. Dit biedt een kans om met een frisse blik te kijken naar de realisatie van dit design.


Nieuwe huisstijl

Hier zien we het oude en het nieuwe ontwerp voor het certificaat.

Beide middelen zijn aangeleverd door FranklinCovey Benelux.

Nieuwe huisstijl

Nieuwe huisstijl

Hier zien we het oude en het nieuwe ontwerp voor het certificaat.

Beide middelen zijn aangeleverd door FranklinCovey Benelux.

Bestaande certificaat-pagina

Op deze pagina kunnen mensen die de training hebben gevolgd, hun certificaat bekijken.

Zoals te zien is, is het ontwerp van de pagina verouderd en niet in lijn met het nieuwe design van het certificaat. 

Bestaande certificaat-pagina

Bestaande certificaat-pagina

Op deze pagina kunnen mensen die de training hebben gevolgd, hun certificaat bekijken.

Zoals te zien is, is het ontwerp van de pagina verouderd en niet in lijn met het nieuwe design van het certificaat. 

Proces

  • Interactiedoelen voor herontworpen pagina vaststellen
  • Evalueren van de bestaande pagina
  • Voorstel voor redesign
  • Responsive front-end design opleveren

Proces

Proces

  • Interactiedoelen voor herontworpen pagina vaststellen
  • Evalueren van de bestaande pagina
  • Voorstel voor redesign
  • Responsive front-end design opleveren

Interactie­doelen

De certificaat-pagina heeft te maken met twee verschillende soorten bezoekers: de deelnemer zelf en mensen in haar netwerk waarin zij haar certificaat deelt. Zij hebben ieder hun eigen scenario: de pagina moet voor beide scenario’s geschikt zijn.

Deelnemers komen op de pagina binnen via een geautomatiseerde e-mail. Het certificaat staat bij de mail in de bijlage en is te downloaden vanaf de pagina. 

De pagina biedt opties om het certificaat te delen, bijvoorbeeld op LinkedIn. Daar komen posts uit voort. Via deze posts komen mensen uit het netwerk op de pagina, om het certificaat te bekijken. Als ze geïnteresseerd zijn, kunnen deze bezoekers kijken naar het trainingsaanbod.

Interactie­doelen

Interactie­doelen

De certificaat-pagina heeft te maken met twee verschillende soorten bezoekers: de deelnemer zelf en mensen in haar netwerk waarin zij haar certificaat deelt. Zij hebben ieder hun eigen scenario: de pagina moet voor beide scenario’s geschikt zijn.

Deelnemers komen op de pagina binnen via een geautomatiseerde e-mail. Het certificaat staat bij de mail in de bijlage en is te downloaden vanaf de pagina. 

De pagina biedt opties om het certificaat te delen, bijvoorbeeld op LinkedIn. Daar komen posts uit voort. Via deze posts komen mensen uit het netwerk op de pagina, om het certificaat te bekijken. Als ze geïnteresseerd zijn, kunnen deze bezoekers kijken naar het trainingsaanbod.

Bestaande pagina

Zoals te zien is, staat de primaire actie (certificering toevoegen aan LinkedIn) op een andere plek dan de andere opties om het certificaat te delen met het netwerk. 

Deze share-opties zijn relevant voor één van de twee flows, daarom is het niet ideaal dat ze hier rechtsboven staan. Beide types bezoeker verwachten hier immers een hoofdnavigatie.

Onderin de pagina worden de verschillende trainingen gepromote. Dit valt echter weg en is gemakkelijk over het hoofd te zien, onder andere doordat het vormgegeven is alsof het om een lijst sponsoren of klanten gaat.

Bestaande pagina

Bestaande pagina

Zoals te zien is, staat de primaire actie (certificering toevoegen aan LinkedIn) op een andere plek dan de andere opties om het certificaat te delen met het netwerk. 

Deze share-opties zijn relevant voor één van de twee flows, daarom is het niet ideaal dat ze hier rechtsboven staan. Beide types bezoeker verwachten hier immers een hoofdnavigatie.

Onderin de pagina worden de verschillende trainingen gepromote. Dit valt echter weg en is gemakkelijk over het hoofd te zien, onder andere doordat het vormgegeven is alsof het om een lijst sponsoren of klanten gaat.

Redesign (voorstel)

Het voorgestelde redesign bevat de volgende elementen:

  • Géén hoofdnavigatie, omdat deze niet relevant is voor de scenario’s.
  • Een responsive variant op het herontworpen PDF-certificaat. Dit moet het eerste zijn wat bezoekers zien, maar mag niet leiden tot een “false floor”: men moet weten dat er meer is op de pagina.
  • Alle opties voor het delen op één plek, waarbij een kopje verduidelijkt voor welk scenario dit relevant is.
  • Promotie-elementen overgenomen van de herontworpen website.

Redesign (voorstel)

Redesign (voorstel)

Het voorgestelde redesign bevat de volgende elementen:

  • Géén hoofdnavigatie, omdat deze niet relevant is voor de scenario’s.
  • Een responsive variant op het herontworpen PDF-certificaat. Dit moet het eerste zijn wat bezoekers zien, maar mag niet leiden tot een “false floor”: men moet weten dat er meer is op de pagina.
  • Alle opties voor het delen op één plek, waarbij een kopje verduidelijkt voor welk scenario dit relevant is.
  • Promotie-elementen overgenomen van de herontworpen website.

Resultaat

Resultaat

Gerealiseerd in HTML, CSS en Javascript

Resultaat

Gerealiseerd in HTML, CSS en Javascript

Website

Website

Website

Gerelateerde projecten