Sejr & Davidsen | Rasmus Pedersen

Introduktion

01

Klienten

Sejr & Davidsens Dyrepension og -internat i Nordjylland tilbyder professionel pasning af hunde og katte. Ejeren Merete Sejr erdyrlæge, og partner Jesper Davidsen som er veterinærsygeplejerske. De fokuserer på dyrevelfærd og tilbyder rådgivning samt træning. Derudover har de en butik med specialprodukter til kæledyr.

Min rolle

Mit team fik til opgave at udvikle en online platform, der skal støtte dyreejere og dyreadoptanter med information og services i forbindelse med pasning og adoption af kæledyr. Platformen skal fungere som et værktøj til at skabe tryghed og forbindelser mellem dyreejere, eksperter samt dyrene. Min rolle i projektet var at anvende forskellige metoder til at designe og kode den bedste brugeroplevelse for platformen, dette skulle gøres ved hjælp af wordpress custom theme og PHP.

Problemet

Sejr & Davidsen har ikke i øjeblikket en hjemmeside, hvilket skaber udfordringer for både dyreejere og dyreadoptanter, der søger information og services. Uden en online platform er det svært for potentielle kunder at finde oplysninger om dyrepensionen, adoptionsmuligheder og træningstjenester. Dette kan resultere i tabte muligheder for adoption af dyr samt manglende synlighed af deres tilbud. En hjemmeside ville fungere som en platform hvor dyreejere kan booke pasning, finde ressourcer og finde informationer om tilgængelige dyr til adoption.

Research

02

Content sitemap

Ud fra et affinity diagram lavede vi et content sitemap, her skrev vi alle vores ideer til de forkellige sider ned. De sider vi besluttede os for at kode er forsiden, dyrearkiv, adopteringsside, pensionside og siden for hver enkelte hund. Nedenunder ses et udkast af vores content sitemap!

Personaer

I forbindelse med dette projekt skulle vi ikke gennemføre interviews eller skabe personas, da det allerede var gjort. Dette gjorde det muligt for os at fokusere på at analysere de eksisterende data og anvende dem i vores designproces. At have færdige personas at arbejde med sparede tid og gav os en god forståelse af målgruppens behov.

Alder: 68

Køn: Mand

Job: Pensioneret

Status: Single/skilt

Bopæl: Brønderslev

Jørgen

Mål: Adoptere en yngre hund, der har de rigtige egenskaber,

Motivation: Funktionel motivation, går på jagt, aktivt udendørsmenneske

Jørgen er en pensioneret ingeniør, der bor i en villa i Brønderslev. Han lever et aktivt liv med interesse for litteratur og politik, og rejser ofte. Jørgen har en 10-årig engelsk pointer, Winston, som han tager med på jagt og lange ture. Han ønsker at adoptere en yngre hund med de rette egenskaber, men er realistisk om udfordringerne ved at finde en internathund, der passer til hans behov.

Alder:23

Køn: Mand+Kvinde

Job: Studie, egendomsmægler

Status: Samlevende

Bopæl: Aalborg

Katrine og Mikkel

Mål: Finde god hundepension, så de trygt kan efterlade Charly i kompetente, kærlige hænder

Motivation: Hunden som en del af familien, hundens egenskaber og ydre

Katrine er normalt den, der organiserer alle deres weekendture med Mikkel, og derfor er hun meget opmærksom på, at praktiske oplysninger som åbningstider og lokationer skal være let tilgængelige. Hun kan blive frustreret, hvis der er for mange unødvendige informationer, der gør det svært for hende at finde det, hun har brug for. Det er vigtigt for hende at kunne planlægge tingene effektivt, så hun kan få mest muligt ud af deres tid sammen, især med deres hund, Charly, som altid er en del af deres eventyr.

Alder: 40'erne

Køn: Kvinde+Mand

Job: Rejsemontør, Sundshedsassistent

Status: Gift

Bopæl: Aalborg

Søren og Eva

Mål: Blive afklarede om, hvilken hund der passer til deres familie og føle tryghed i købs- eller adoptionsprocessen

Motivation: Hunden som mål til at lære børnene ansvar og omsorg, og hunden som selskabs- og vagthund.

Søren skal tage beslutningen om, hvilken hund familien skal have. Med Evas nye arbejdstider og Søren som rejsemontør, ser han hunden som en mulighed for at give Laura og Rasmus selskab. Men han bliver hurtigt overvældet af de mange overvejelser. Hvad nu hvis de ender med en hund, der er mere udfordrende end forventet? Diskussionerne om hundestørrelse og Evas ønske om at adoptere en hund kræver klare og let tilgængelige oplysninger, så de kan føle sig trygge i beslutningsprocessen.

Design

03

Wireframes

Efter skitsering begyndte vi at lave wireframes for at få en overordnet ide om hvordan designet skulle se ud. Efter vi har lavet disse wireframes kan vi beynde på HIFI mockups, og færdiggøre designet.

Forside

Dyrearkiv

Enkeltdyr

Kode realisering

04

Wordpress custom tema

Denne hjemmeside skulle realiseres vha af wordpress custom tema og php. Fordelen ved at lave siden på denne måde er at man kan brugerdefinere et tema 100% efter ens krav til siden. En af fordelene ved at bruge wordpress tema og php er man kan bruge template filer som archive/single sider. Hvilket betyder man ikke skal oprette sider til hver eneste underside man har.

            
  function custom_post_types(){
      //enkelt hund card
      register_post_type('hund', array(
          'show_in_rest' => true,
          'supports' => array('title', 'thumbnail', 'editor', 'custom-fields'),
          'public' => true,
          'has_archive' => true,
          'rewrite' => array('slug' => 'hunde'),
          'labels' => array(
              'name' => 'Hunde',
              'add_new_item' => 'Tilføj Ny Hund',
              'edit_item' => 'Rediger Hund',
              'all_items' => 'Alle Hunde',
              'singular_name' => 'Hund'
          ),
          'menu_icon' => 'dashicons-pets'
      ));
  
  }
  add_action('init', 'custom_post_types');
  add_theme_support('post-thumbnails');

Opret custom post types

Vi oprettede de custom post types som vi havde brug for. I vores tilfælde lavede vi kun for hunde og blogs, men hvis vi skulle have udbygget en komplet side ville vi også have oprettet flere. Denne kode viser hvordan man opretter en custom post type, går ind i php, laver en function og bruger register_post_type. Herinde kan man ændre på en helt masse parametre som vil ændre post typen i wordpress backend.

ACF

Nu kunne vi ved hjælp af ACF wordpress plugin oprette Advanced Custom fields, hvor vi kunne opsætte hvilket indhold vi ville vise til hver custom post type. Et eksempel kan ses her, for field type hund. Her oprettede vi alle de labels som den enkelte hund skal have.

            
 function sejrdavidsen_files() { 
  wp_enqueue_script('sejrdavidsen_js', get_theme_file_uri('/assets/js/script.js'), NULL, '1.0', true);
  wp_enqueue_script('swiper_js', get_theme_file_uri('/assets/js/swiper.js'));
            
  //function som kalder stylesheet
  wp_enqueue_style('serdavidsen_main_styles', get_theme_file_uri('/assets/css/main_style.css'));
            
  //henter font - Barlow
  wp_enqueue_style('font', '//fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200');
            
  //loader font awsome iconer
  wp_enqueue_style('font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
            
  add_action('wp_enqueue_scripts', 'sejrdavidsen_files');
            
  function custom_editor_dyr_title( $title, $post ) {
    if( 'hund' === $post->post_type ) {
    $title = 'Navn på dyret';}
    return $title;
            }
  add_filter( 'enter_title_here', 'custom_editor_dyr_title', 10, 2 );

Functions.php

I dette eksempel definerer vi funktionen sejrdavidsen_files(). wp_enqueue_script() til at tilføje JavaScript filer og wp_enqueue_style() til at inkludere CSS filer og fonts, som feks Barlow/Font Awesome. Disse scripts og stylesheets vises når wp_enqueue_scripts aktiveres. Derudover har vi en funktion custom_editor_dyr_title(), som ændrer titlen for opslag af posttypen “hund” til “Navn på dyret” i editoren.

The Loop

Nu kan vi ved hjælp af “The Loop” i WordPress dynamisk hente og vise indhold for vores brugerdefinerede post type hunde. Her er et eksempel på hvordan vi gør det fungerer. Her tjekker vi med $hunde->have_posts(), om der er hundeindlæg tilgængelige. Så starter vi et loop, der bruger $hunde->the_post() til at opdatere data. Indholdet vises i en div, hvor vi henter billedet med get_the_post_thumbnail_url() og viser hundens navn med the_title(). Udover det vises info om hunden, såsom race, alder og køn, hentes vha ACF. Hvis ingen indlæg findes, vises en meddelelse. Til slut kalder vi wp_reset_postdata()

          
<?php
if ($hunde->have_posts()) {
    while ($hunde->have_posts()) {
        $hunde->the_post(); ?>
        <div class="singularAnimalCardArchive">
            <img src="<?php echo get_the_post_thumbnail_url(null, 'large'); ?>" class="singularAnimalCardArchiveImg" />
            <div class="animalInfoCardArchive">
                <h3><?php the_title(); ?></h3>
                <div class="animalInfoMeta">
                    <div class="iconText">
                        <i class="fa-solid fa-paw"></i>
                        <p><?php echo (get_the_terms($hunde->ID, 'race')[0]->name); ?></p>
                    </div>
                    <div class="iconText">
                        <i class="fas fa-birthday-cake"></i>
                        <p><?php the_field('alder'); ?></p>
                    </div>
                    <div class="iconText">
                        <i class="fa-solid fa-venus-mars"></i>
                        <p><?php the_field('kon'); ?></p>
                    </div>
                </div>
                <a class="animalInfoCardGridButton" href="<?php the_permalink(); ?>">LÆS MERE</a>
            </div>
        </div>
    <?php }
} else {
    echo '<p>No results found.</p>';
}
wp_reset_postdata();
?>

Endelige Produkt

05

Arkiv over alle dyr

Brugere kan nemt filtrere mellem hunde og katte for at finde det kæledyr der passer bedst deres behov. Disse dynamiske oplysninger opdateres automatisk gennem wordpress, hvilket gør det nemmere at have med store mængder af data. På denne måde kan man oprette nærmest uendeligt antal dyr.

Swiper med dyr/blogs

Swiper funktionen giver brugerne en hurtig og lækker måde at udforske dyr og blogs på. Med et swipe kan de se billeder og læse indlæg om dyrepleje og træning, dette virker på mobil og desktop!

Enkel dyr side

Den enkle dyreside giver brugere mulighed for at læse detaljer om hvert dyr og lære om alle de detaljer man har brug for når man skal adoptere hund. Derudover er der en kalender, hvor brugerne nemt kan booke et møde med hunden, hvilket gør det nemt at planlægge besøg.

Reflektion

06

Hvad har jeg lært?

Jeg har lært en masse igennem dette projekt, især hvad angår wordpress custom temaer og PHP. Jeg har tidligere arbejdet med wordpress API vha JavaScript, dog må jeg konstatere at det er en del lettere at arbejde med PHP, og man støder generelt på mindre problemer. Jeg kunne helt klart finde på at udvikle med PHP igen.