Kort beskrivning om oss:
Miira skapades för dem som vill känna mer än de vill visa.
Vi designar kläder som rör sig mellan konst och självuttryck – där varje detalj har en mening.
Våra kollektioner är små, personliga och skapade med omtanke.
Allt vi gör handlar om känsla, närvaro och karaktär.
Det här är inte bara mode.
Det är ett sätt att vara – stillsamt, självsäkert och oemotståndligt fängslande.
Typsnitt: Lora (klassik)
Standard BOLD 700 (Edge och cool)
Klädstil: Med sitt material och mixen tillsammans av plaggen, Ger en mystisk och sensuell / kaxig look. För dig som vill sticka ut.
Varumärkets namn: Ska kännas intimt och vänskapligt. Det är enkelt och mjukt.
1. Webbplatsens domän och namn:
Mitt klädvarumärke heter Miira och domänen Miira.se.
2. Vad har du för tema på din webbplats och vad behöver normalt övervägas vid val av tema? Om du inte använt dig av rekommenderat tema, motivera ditt val.
Jag använde först temat Storefront i början av projektet, men efter ett tag kände jag att layouten inte passade den stil jag ville ha på min webbplats. När vi sedan började arbeta med Elementor bytte jag till temat Blocksy, eftersom jag tyckte att det hade en snyggare och mer passande layout.
När man väljer ett tema bör man överväga vilket syfte webbplatsen har. I mitt fall handlade det om att skapa en webbshop, och därför var det viktigt att välja ett tema som fungerar bra med e-handelsverktyg och är kompatibelt med WordPress och Elementor.
3. Framhävande av produkter och USP:ar Normalt sett lyfts utvalda produkter (bästsäljare eller kanske de med bäst marginal) eller kategorier fram på startsidan. Där brukar även finnas USP:ar och en säljande beskrivning av företaget/verksamheten. Hur har du gjort och varför? Förtydliga gärna med skärmdumpar.
På min hemsida visas bästsäljande produkter på startsidan. Jag såg att detta redan fanns som en del av layouten i mitt tema. I början förstod jag inte riktigt hur funktionen fungerade, men sedan märkte jag att ju mer jag själv besökte min webbplats via webbläsaren, desto oftare dök de produkter jag klickat på upp i den här kategorin.
Jag valde att behålla den här layouten eftersom jag tycker att det är en smart säljteknik. Den ger intrycket av att sidan är populär och att produkterna säljer bra, vilket kan locka fler besökare att handla.
Längst ner på min layout har jag även en sektion med extra information och en personlig säljstrategi, det vill säga en USP (Unique Selling Point). Jag valde att erbjuda 10 % rabatt på första köpet, och där finns en knapp som leder vidare till ett kontaktformulär där besökaren kan registrera sig.
Den delen var dock lite svår att skapa. Jag försökte bygga ett kontaktformulär som liknade ett mer personligt registreringsformulär med adress och personnummer, men hittade ingen passande funktion i WPForms. Därför skrev jag i stället att man ska ange “Write membership in the subject” för att bli listad som medlem.
Detta är den del av min webbplats som jag själv tycker blev mindre lyckad och som jag vill förbättra framöver. I övrigt är jag faktiskt väldigt nöjd med resultatet.
4. Webbplatsens meny, struktur och navigering.
Hur har du lagt upp webbplatsens meny, struktur och navigering?
Se till att dessa följer en logisk struktur och beskriv hur du lagt upp dessa delar.
Jag ville att min webbplats skulle ha en enkel och tydlig struktur. Ju enklare, desto bättre — jag ville undvika att det skulle se rörigt eller ”kladdigt” ut. Därför byggde jag menyn utifrån hur jag själv hade uppskattat den som konsument.
Jag valde att ha få kategorier i headern, eftersom det ger ett renare och mer stilrent intryck. Menyn består av följande delar:
Home – för att användaren enkelt ska kunna återvända till startsidan.
Kategorier (hovra) – här kan man välja “Shop All” eller filtrera efter den kategori man söker, till exempel “Tops”.
Accessories – för att bredda utbudet och ge sidan en känsla av variation, inte bara kläder.
About Us – så att besökare snabbt kan läsa mer om företaget och vad det står för.
Sign In – för att användaren enkelt ska kunna logga in eller komma i kontakt med företaget.
Mitt mål var att skapa en logisk, användarvänlig och estetiskt tilltalande navigering, som gör det lätt för besökaren att hitta det de söker utan att känna sig överväldigad.
5. Statiska undersidor och val av villkor
Det ska finnas statiska undersidor på webbplatsen som tydligt beskriver ”Om oss”, ”Kontakt”, samt de leverans- och köpvilkor som gäller. Även frakt och returer bör beröras i samband med detta. Beskriv här även varför du valt just de villkor som du valt.
Jag har valt att hålla även dessa sidor enkla och stilrena, med ett klassiskt typsnitt och en ren layout utan för många valmöjligheter. Strukturen består av tre huvudsidor: Shop, Villkor/Returer och Contact. Layouten är uppbyggd i tre rader som går tydligt nedåt, vilket gör det lätt för besökaren att navigera.
På sidan About Us har jag valt att ha kort och tydlig text. Layouten är bred och luftig eftersom jag tycker att man inte orkar läsa långa texter när man snabbt vill få en uppfattning om företaget. Jag har också lagt till en knapp både i företagsbeskrivningen och längre ner bland inspirerande bilder – en “Shop All”-knapp. Det var en spontan idé jag fick, men den fungerar som en strategisk säljteknik som väcker nyfikenhet och gör det enkelt för besökaren att gå direkt till butikens utbud.
Mina undersidor och valda villkor
General Info: En kort beskrivning av plaggen, för att kunden snabbt ska förstå vad som erbjuds.
Orders: Här förklaras tydligt hur orderprocessen går till, så att kunden vet vad som händer efter köp.
Pricing and Payment: Jag beskriver att priserna visas i rätt valuta och att skatt ingår. Jag nämner även att betalningsprocessen är säker, vilket skapar trygghet.
Shipping and Delivery: Jag förklarar att vi levererar internationellt och anger en uppskattad leveranstid. Dock påpekar jag att leveranstiden kan variera beroende på avstånd från vår studioadress i Stockholm.
Returer och Återköp: Eftersom vi säljer unika plagg i begränsad upplaga och inte är ett stort företag, har vi strikta returvillkor. Retur ska ske inom 14 dagar från leverans och endast av giltiga skäl.
Privacy: Här tydliggör jag att vi värnar om kundens integritet och personuppgifter. Det är viktigt för att skapa förtroende och trygghet hos konsumenterna.
Jag har även skapat en egen sida som mer detaljerat beskriver returer, leverans och återköp, så att kunden tydligt kan se hur hela processen går till. På den sidan finns även kontaktinformation upprepad flera gånger, för att förstärka känslan av god service och tillgänglighet.
Contact Us-sidan
Denna sida är mycket tydlig och lättnavigerad. E-postadress och telefonnummer syns direkt. Temat innehöll redan en karta, och jag valde att behålla den men uppdaterade adressen till vår studio i Stockholm – det ger ett seriöst och professionellt intryck.
Dessutom finns ett vänligt och välkomnande kontaktformulär med texten “We’d Love To Hear From You!”, där kunder enkelt kan skriva till oss med frågor eller synpunkter.
6. Kontaktformulär på webbplatsen
Vilka kontaktformulär har du på webbplatsen och vad har de för syften? Det ska finnas minst ett kontaktformulär på webbplatsen.
Besökare kan navigera till kontaktformuläret på flera olika sätt. Ett sätt är via min säljstrategi på startsidan, där man kan klicka på erbjudandet “10% off first purchase”. Den länken leder direkt till kontaktformuläret.
Formuläret finns även under fliken “Sign Up” i sidans header, samt i footern under fliken “Contact Us”.
Syftet med kontaktformuläret är att ge besökaren möjlighet att enkelt kontakta oss, oavsett om det gäller frågor, registrering eller medlemskap. Det gör kommunikationen smidig och tillgänglig, och bidrar till en mer personlig och serviceinriktad kundupplevelse.
7. Klickbara mail- och telefonlänkar
Visa på att det finns klickbara mail- och telefonlänkar på din webbplats.
Ja, det finns klickbara mail- och telefonlänkar på min webbplats, på tre olika ställen 😊
8. Användning av shortcodes
I vilket sammanhang har du använt dig av shortcodes? Det ska finnas minst ett användande av shortcode på webbplatsen.
Jag har använt shortcodes i Elementor för att styra hur många bildkolumner layouten skulle visa på sidan. Det hjälpte mig att få ett mer kontrollerat och anpassat utseende på bildsektionerna.
Jag har även använt shortcodes i samband med en synlig popup-visning (eftersom detta är en demo shop). Det gjorde jag genom att gå in på Utseende → Anpassa → Extra CSS, där jag lade in koden för att aktivera popup-funktionen.
Syftet med detta var att testa funktionalitet och design, samt att skapa en mer interaktiv och professionell känsla på sidan.
9. Webbplatsens footer
Hur har du utformat webbplatsens footer och varför?
Jag har valt att ha en klassisk och enkel layout i footern, med tydlig navigering där allt viktigt finns samlat på ett ställe.
I footern finns information om villkor, kontakt och en sammanfattning av shopalternativen. Jag valde att ta med just dessa delar eftersom det gör det enkelt för besökaren att hitta den information de söker, utan att behöva leta runt på sidan.
Som konsument vill man ha snabb och tydlig åtkomst till viktiga länkar, och därför tyckte jag att det var bäst att samla allt detta i footern. Det ger ett rent, logiskt och användarvänligt intryck, vilket var mitt mål med utformningen.
10. Tydlighet kring att webbplatsen är en demobutik
Vilka åtgärder har du vidtagit för att det tydligt ska framgå att detta är en demobutik och att det faktiskt inte går att handla ”på riktigt”?
Jag har gått in under Utseende → Anpassa → Extra CSS och lagt in egen kod för att skapa en tydlig markering som visar att sidan är en demobutik.
Jag valde att låta denna text alltid vara synlig på sidan, så att det direkt framgår för besökaren att det inte går att handla på riktigt. Färgen jag använde var gul, eftersom den passade bra ihop med sidans övriga design och färgtema. Dessutom ger den en mjuk och lekfull känsla, vilket stämmer överens med den stil jag ville förmedla.
11. Arbete med WooCommerce
I vilken utsträckning och hur har du arbetat med WooCommerce på webbplatsen?
Det ska finnas produkter i någon form att köpa på webbplatsen. Produkterna ska vara minst tio till antalet och antalet kategorier minst tre. Beskriv vad du gjort och hur du gått tillväga. Undantag till detta kan finnas om det främst är tjänster som erbjuds, stäm av med Daniel om så är fallet.
Jag har lagt in alla mina produkter via WooCommerce-sektionen i WordPress och samtidigt taggat dem i rätt kategori.
Mitt mål var att mitt företag skulle kännas unikt, exklusivt och personligt, därför har jag valt att lägga upp fyra plagg per kategori. På så sätt får webbplatsen en mer intim och “limited edition”-känsla, istället för att kännas som en massproducerad butik.
Jag har även arbetat med att strukturera produkterna tydligt i WooCommerce, så att de är enkla att hitta och filtrera för kunden, samtidigt som sidan behåller ett rent och stilrent uttryck som passar varumärkets stil.
12. Produkttyper på webbplatsen
Vilka produkttyper har du arbetat med och varför? Här handlar det alltså om enkel, grupperad, variabel, nedladdningsbar etc. Visa på exempel.
Eftersom jag säljer plagg och vill att fler konsumenter ska kunna köpa, har jag valt att använda variabla produkter.
Det betyder att varje produkt finns i flera storlekar, från XS till XL, så att kunden enkelt kan välja den storlek som passar bäst. Denna produktform passade mitt upplägg bäst eftersom den gör sidan mer användarvänlig och ger en mer realistisk shoppingupplevelse, även om det är en demobutik.
Bild ovan.
13. Visa på exempel på designdelar som du anpassat med hjälp av Elementor.
14. Använda tillägg (plugins)
Vilka tillägg har du använt och varför? Komplett lista önskas.
Här är en lista över de tillägg jag har använt på min webbplats, samt en kort beskrivning av deras syfte:
WPForms – Har jag använt som mall för mitt kontaktformulär. Det är enkelt att använda och fungerar bra för att skapa tydliga formulär.
Contact Form 7 – Jag laddade ner detta tillägg men har inte använt det aktivt på webbplatsen.
Elementor – Ett fantastiskt tillägg som jag använt mest. Jag gillar verkligen alla verktyg och designmöjligheter det erbjuder.
Blocksy Companion – Härifrån valde jag mitt tema (Blocksy) och använde tillägget för att kunna anpassa designen.
Akismet Anti-Spam – Används för att skydda webbplatsen mot spam och oönskade kommentarer.
Ally – Web Accessibility & Usability – Jag är inte helt säker på när det laddades ner, men tror att det antingen följde med från början eller installerades automatiskt med temat Blocksy. Det bidrar till bättre tillgänglighet och användarvänlighet.
Classic Editor – Ett redigeringsprogram för WordPress som vi lade till i början av kursen efter vägledning.
Imagify – Används för att förbättra och optimera bilder så att filstorleken blir mindre utan att förlora kvalitet.
15. Åtgärder för att skapa en snygg, inspirerande och effektiv webbplats
Vilka andra åtgärder har du vidtagit för att skapa en snygg, inspirerande och effektiv webbplats som på bästa sätt levererar utifrån din affärsidé?
Jag har främst arbetat med WordPress Dashboard och Elementor som redigeringsprogram, samt WooCommerce för att lägga in och redigera produkter.
Med hjälp av dessa verktyg har jag fokuserat på att skapa en ren och stilren design som passar min affärsidé – att erbjuda unika och exklusiva plagg i en begränsad upplaga. Jag har lagt stor vikt vid layout, färgval och enkel navigering, för att ge webbplatsen en modern och inspirerande känsla som speglar varumärket.
Syftet har hela tiden varit att skapa en användarvänlig och visuellt tilltalande webbplats, där besökaren snabbt förstår konceptet och lätt kan hitta det den söker.
(bilder allt ovan)
16. Egen validering av webbplatsen
Validera din egen webbplats utifrån de kriterier som lyfts fram i föreläsningsmaterialet.
a. Tre delar jag tycker att jag gjort riktigt bra
Min enkla och tydliga header
Jag är väldigt nöjd med headern eftersom den innehåller allt man förväntar sig av en kläd-ehandel. Det finns tydliga kategorival, vilket gör det lätt för kunden att snabbt navigera till det de söker.Valet av typsnitt och designkänsla
Jag gillar verkligen mina typsnitt. Den klassiska, kursiva loggan tillsammans med headern ger ett hemtrevligt och bekvämt intryck. Samtidigt har jag valt ett bold, edgy typsnitt i mitten av headern och på “Collection”-delen, vilket passar bra med företagets affärsidé och stil – kläder med en unik edge och attityd.Tydliga leverans- och retursidor
På sidorna för leveransvillkor och returer har jag skapat en text som är lätt att läsa och förstå. Kunden kan enkelt navigera mellan olika frågor och funderingar genom tydliga länkar och flikar i footern, vilket ger en bra struktur och användarupplevelse.
b. Tre delar jag inte är lika nöjd med eller vill arbeta vidare på
Medlemskapsknappen på startsidan
Det jag helst hade velat förbättra är knappen på startsidan som leder till medlemsregistrering. Jag hade gärna skapat ett mer professionellt formulär där man kunde fylla i t.ex. hemadress, personnummer och få tillgång till en e-kupong eller rabattkod.Knapptiteln vid produkterna
En detalj jag inte fick till är texten “Välj alternativ” som visas på produkterna. Det syftar egentligen på att välja storlek, men jag hade hellre velat att det stod “Lägg i varukorg” för att göra köpupplevelsen tydligare och mer direkt.Avsaknaden av en videopresentation på startsidan
Jag hade också velat lägga till en kort video med musik på startsidan. Det hade gjort upplevelsen mer levande, inspirerande och professionell, och passat perfekt med butikens stil och känsla.
Till Daniel,
Här vill jag bara avsluta med att säga Tack för allt du lärt ut i både innehåll och teknik mässigt.
Jag har lärt mig mycket. Det har varit både roligt och lärorikt.
🙏
