Uppgift

Namn: Johanna Dahlsjö Nyström

Notering:
Efter att uppgiften skapades har jag vidareutvecklat webbutiken med mer realistiska produktbilder, finjusterade produktbeskrivningar och implementerat HTML-format för att förbättra presentationen i WooCommerce. De screenshots som visas är från den tidigare versionen, men strukturen, funktionerna och designkonceptet är desamma.

1.Webbplatsens domän och namn

Min webbplats heter JDNyström, vilket är mitt personliga varumärke och modekoncept. Namnet är byggt på mitt efternamn och fungerar som en direkt koppling till ett skandinaviskt , minimalistiskt och exklusivt varumärke.

Jag valde att ha en egen domän för att skapa en professionell och trovärdig identitet online. ”JDNyström” används även som monogram och logotyp (JDN), vilket stärker varumärkesigenkänningen över alla plattformar.

( se bild på logan )

2.Val av tema

Jag använder temat Botiga som bas, då det ör modernt, responsivt och anpassningsbart för e-handel inom fashion. Jag valde Botiga för att det är minimalistiskt men ändå flexibelt. Det går att skräddarsy designen så att den känns ”editorial” och clean, vilket passar JDNyströms estetik.

Jag har justerat färgpaletten till varumärkets ton-bland annat bakgrundsfärgen #F2F1EE, som ger en mjuk beige ton med exklusiv känsla

( se bild på startsidan dör den ljusa tonen används )

3.Produkter som lyfts fram

På startsidan har jag valt att lyfta fram bodysuit , blazer och en jumpsuit, eftersom dessa produkter utgör kärnan i kollektionen. Produkten Freja Bodysuit är i fokus- det är en ikonisk design som symboliserar varumärkets ” Refined Scandinavan Minimalism ”. Jag har skapat variationer för färg och storlek, samt lagt till färg-swatches ( små färgkluttar ) för att göra användarupplevelsen mer visuell. Valet att lyfta fram just dessa produkter är strategiskt: de representerar både stil, kvalitet och den ” modern muse ” målgruppen.

(se bild på Freja Bodysuit i olika färger )

4.Webbplatsens meny, struktur och navigering

Jag har byggt upp en logisk, minimalistisk meny :

• Home ( startsida )
• Shop – med underkategorier : Bodysuits, Blazer, Jumpsuits, Pants, Shorts/Skirt etc
• Contact

Strukturen är skapad för att vara intuitiv, där kunden snabbt hittar vad den söker utan distraktioner. Jag har även en ren footer men ” quick links ” och ” about ”, som ger enkel tillgång till viktiga sidor sm Shipping Policy, Terms & Conditions och Integritetspolicy. Tanken är att upplevelsen ska kännas lika lyxig som enkel- ”less but better ”

( se bilder på menyerna + footer )

5.Statiska undersidor

Jag har skapat följande statiska undersidor:

• Contact – ett kontaktformulär via WPForms för kundförfrågningar
• Shipping Policy – beskriver leveranstid, internationell frakt från Colombia och leveransvillkor
• Return Policy – information om returer och villkor
• Terms & Conditions ( Köpvillkor ) – förklarar köpeprocess, betalning och ansvarsfriskrivning
• Integritetspolicy – anpassad och omskriven version för jdnystrom.se med personlig ton

Jag valde att inkludera frakt från Colombia eftersom det är där produkterna faktiskt produceras och skickas från, vilket ger sidan trovärdighet och internationell känsla.

( se bilder på policies i footern )

6.Kontaktformulär och deras syfte

Jag har lagt till ett kontaktformulär via WPForms på sidan Contact. Formuläret används för kundfrågor, samarbeten och pressförfrågningar – precis som ett riktigt modevarumärke hade haft. Det innehåller fält för namn, e-post, meddelande och ämne, vilket gör det lätt för besökare att snabbt komma i kontakt. Syftet är att skapa en professionell men personlig kontaktpunkt, där kommunikationen känns tillgänglig men fortfarande exklusiv.

( se bild på Contact-sidan med formuläret )

7.Länkar och Sociala Medier

Jag har valt att visa kontaktuppgifterna bredvid formuläret istället för att använda klickbara e-post / telefonlänkar. Detta var ett medvetet designval för att hålla en ren och estetisk layout, vilket passar JDNyströms visuella identitet. Längst ner på sidan finns även en Instagram-ikon som är länkad till varumärkets konto- ett viktigt steg för att bygga community. För ett modevarumärke är det ofta via Instagram kontakten börjar, så detta känns mer relevant än en klassisk ” ring oss ”-lösning.

( se bild på Instagram-ikonen nere i hörnet )

8.Shortcodes

Jag har använt shortcodes för att lägga in dynamiskt innehåll, tex WooCommerce-element. för utvalda produkter. Under arbetets gång testade jag även att visa produkter på startsidan via shortcodes, men valde till slut att ha en mer ren designlösning som harmonisera med varumärkets minimalistiska estetik. Det blev för ” mycket ” på startsidan om shortcodes skulle också finnas.

( bild på hur det såg ut med shortcode / utan shortcode)

9.Webbplatsens footer

Footern är minimalistisk, ren och inspirerande av nordisk design. Jag valde att dela upp den i två tydliga sektioner

• Quick Links ( Home, Shop )
• About ( Shipping policy, Terms & Conditions, Return Policy, Integritetspolicy)

Syftet är att hålla strukturen lättnavigerad men elegant. Jag har valt att använda en ljus-beige bakgrund ( #edeae6) med enkel svart text- det speglar varumärkets estetik: lugn, lyx, modern, minimalism. Längst ner finns @ 2025 JDNystrom- vilket ger sidan en färdig, professionell helhetskänsla.

10.Tydlighet om att sidan är en demobutik

Jag har tydliggjort att webbplatsen är en demobutik genom att:

• skriva ut att det är en testversion för utbildningssyfte
• använda låtsasprodukter och priser i euro som inte motsvarar verklig försäljning
• samt inte aktiverat riktiga betalningslösningar.

Syftet är att visa hur en professionell e-handel skulle fungera utan att något faktiskt går att köpa.

11. WooCommerce och produkter

Jag har arbetat med WooCommerce som huvudverktyg för att bygga upp butikens struktur och produktflöde. Butiken innehåller flera kategorier som Women, Men, Accessories – där varje produkt har sin egna produktsida med pris, bildgalleri, kort beskrivning samt möjlighet att lägga till i kundvagn. Jag har även använt WooCommerce för att skapa ett tydligt produktflöde mellan startsida – produkt – checkout. För att tydliggöra att detta är en demobutik har jag aktiverat en informationsbanner med texten ” This is a demo store for testing purposes” vilket syns längst ned på sidan. Detta ger en realistisk köpupplevelse utan att det går att handla ” på riktigt ”

( bild på banner )

12. Vilka produkttyper har du arbetat med och varför?

Jag har främst arbetat med variabla produkter, eftersom det är mest grundläggande och tydliga formatet för demonstrera WooCommerce – funktionerna. Exempel : Plagg som balzers, bodysuits och trousers ligger som separata produkter med egna bilder, pris och beskrivningar. Jag valde variabla produkt för att snabbt kunna lägga till flera artiklar, visa hur lagerhantering fungerar och samtidigt hålla sidan lättnavigerad för användaren.

13. Visa på exempel på designdelar som du anpassat med hjälp av Elementor

Jag har inte använt Elementor i mitt arbete eftersom jag upplevde att det inte gav det resultatet jag ville ha för min design. I stället har jag fortsatt att jobba direkt i temars egna anpassningsverktyg ovh via header builder och CSS-justeringar för att få full kontroll över layout och stil.

Exempel på designdelar jag har anpassat ;

• Header och logotypens placering: Jag har justerat logotypen manuellt för att få en mer balanserad layout.
• Färger och typografi: Jag har valt en minimalistisk färgskala ( svart, vitt och beige ) samt ett modernt typsnitt som passar varumärket.
• CTA-knappar : Jag har anpassat text och stil på knappar som ” shop Collection ” och ” Få min kod ” för att matcha helhetsdesignen

Genom att arbeta direkt i temats inbyggda verktyg fick jag en mer stabil och enhetlig design, vilket passade bättre för JDNyströms visuella identitet.

( bild på hur det såg ut med elementor samt utan )

14. Vilka tillägg har du använt och varför?

Jag har använt mig av dessa tillägg :

• WooCommerce – basen för hela webbsidan och produktstrukturen.
• MailPoet – används för nyhetsbrevsformuläret och popupen med 30 % välkomstrabatt.
• WPForms – för kontaktformulär och smidigare hantering av användardata.
• Variation Swatches for WooCommerce – för att lägga till små färgmarkeringar under kläderna, så kunder kan se olika färgval direkt.
• Popup-maker – används till knappen “Join the List”, där besökaren kan skriva in sin e-postadress.

Dessa tillägg valdes för att kombinera design, funktionalitet och prestanda på ett användarvänligt och visuellt tilltalande sätt.

( Bild på pop-up )

15. Vilka andra åtgärden har du vidtagit för att skapa en snygg, inspirerande och effektiv webbplats

Jag har försökt bygga en webbplats som känns både modern och inspirerande, men samtidigt enkel att använda. Jag har lagt mycket fokus på helhetskänslan och varumärkesidentiteten, där färger, typsnitt och bilder hänger ihop för att skapa en ren och minimalistisk look.
Målet har varit att spegla den skandinaviska stilen – stilren, ljus och exklusiv.

För att göra sidan mer interaktiv och engagerande har jag lagt till en knapp för “Join The List”, som öppnar ett popup-formulär för nyhetsbrev. Jag ville skapa något som kändes mer levande än en statisk sektion.

Jag har även anpassat strukturen så att navigeringen är tydlig, och användaren enkelt hittar till shopdelen.
Dessutom har jag optimerat sidan för mobil och surfplatta, så att den fungerar och ser bra ut oavsett enhet.

16. Validera din egna webbplats utifrån de kriterier som lyfts fram i föreläsningsmaterialet. 

a. Peka på tre delar som du tycker att du tycker att du gjort riktigt bra. 

Design och helhetsintryck:
Jag är nöjd med stilen på sidan – den känns ren, harmonisk och lyxig utan att bli rörig. Jag har lyckats skapa en tydlig identitet som speglar varumärket och ger rätt känsla direkt när man kommer in på sidan.

Struktur och flöde: Jag tycker att uppbyggnaden är tydlig. Användaren förstår snabbt vad sidan handlar om och vart man ska klicka vidare, till exempel via knappen “Shop Collection”.

Interaktivitet och funktion: Jag gillar att sidan inte bara är statisk, utan har små funktioner som popupen med nyhetsbrevet. Det ger liv åt sidan och gör att besökaren kan interagera med varumärket direkt.

b. Peka på tre delar som du inte är lika nöjd med eller tycker att du hade behövt arbeta vidare med. 

Elementor och layouten: Jag är faktiskt väldigt missnöjd med att jag inte fick Elementor att fungera ordentligt. Jag tycker inte riktigt att min webbplats ser ut som en “riktig hemsida” just nu, och det beror på att jag inte kunnat använda Elementor som jag ville. Jag har försökt flera gånger, men det har inte fungerat som tänkt, och jag förstår inte varför.
Jag hade velat kunna bygga upp sidan mer visuellt – med sektioner och layout som känns mer professionella. Kanske är det också valet av bakgrundsfärg som gör att sidan ser lite platt eller “fake” ut – något jag gärna vill justera framöver.

Designen på popupen (“Join The List”): Jag hade velat få ett snyggare och mer enhetligt utseende på e-postformuläret som visas när man klickar på “Join The List”. Jag försökte flera gånger men fick inte till layouten som jag ville, så det är något jag vill förbättra framöver.

Innehåll och storytelling: Jag skulle vilja utveckla texterna mer, med korta, inspirerande beskrivningar som berättar mer om varumärket och produkterna. Just nu ligger fokus mest på designen, men jag vill stärka innehållet så helheten blir mer levande.

Sammanfattning

Under arbetets gång har jag lärt mig mycket om hur WooCommerce fungerar i praktiken – särskilt när det gäller variabla produkter, attribut och designoptimering.

En av de största förbättringarna jag gjort i efterhand är att uppdatera produktbilderna till mer realistiska och enhetliga renderingar, för att skapa ett mer trovärdigt helhetsintryck. Jag har även lagt in formaterade HTML-beskrivningar på varje produkt för att lyfta presentationen och göra texten mer strukturerad.

En annan sak jag utvecklat är förståelsen för hur små detaljer – som knappfärg, spacing och bildstorlek – påverkar användarupplevelsen. Jag har försökt skapa en balans mellan estetik och funktionalitet, så att sidan känns både inspirerande och lätt att navigera.

Om jag hade haft mer tid hade jag velat testa fler tillägg för marknadsföring (t.ex. automatiska e-postflöden via MailPoet) och lägga till en lookbook-sektion för att visa kompletta outfits.

Sammanfattningsvis känner jag att jag lyckats skapa en webbplats som speglar en tydlig varumärkesidentitet och som visar på min förståelse för både e-handel, användarvänlighet och digital design.