Logimark

Byrå

Webbson

Roll

UX-Designer, Art Director, Webbutvecklare

Färdigställd

2025

Brief

Logimark var redo för att satsa på sin digitala närvaro då de kände att sin nuvarande identitet kändes lite platt och anonym. Företaget ville bevara sina värderingar i varumärket, men kände att det var dags för att byta outfit. I och med att Logimarks hemsida både är den plats där de får flest besökare, men även är den plats som nya kunder får sin första kontakt, så börjar moderniseringen av varumärket med hemsidan.

Under vårat första möte fick vi kännedom kring att det även fanns en del önskemål kring att möta Googles krav på teknisk SEO, men även att den nya hemsidan ska kännas mer levande genom animeringar.

Under förstudie-fasen lade vi mycket tid kring uttrycket, vilket även reflekterades över till strategier för att fånga upp målgruppen som är mycket bred inom den tillverkande industrin.

Vi diskuterade varumärkets värderingar och kom fram till att de vill framstå som ett kreativt och tryggt företag med expertis inom märkning. De ville gå bort från den traditionella företagande känslan som vid vissa fall kan kännas stolpig och stel.

Vid första mötet kikade vi även på endel inspirationsmaterial vilket låg till grund för den interna moodboarden för det nya varumärket.

Process

Designfasen
Under designfasens tidiga skede växte en ny grafisk identitet fram, där typsnitt och kulörer som påminde om deras företag och tidigare värderingar fick lyftas, men samtidigt moderniseras för att få en ny känsla över företaget.

Primärfärgen fick en mörkare ton som gav ifrån sig en kvalitetsäker känsla, och den vita kulören fick en något varmare och begie ton för att bidra med värme och peronlighet, smatidigt som den fungerar bra som en kontrasterande färg mot produktbilderna som har en helvit bakgrundsfärg. Paletten utökades även med fler nyanser som kompletterar resterande grafiska profilen, men något utstickande var den nya komplementfärgen som går i den varma tonen mot en färgstark orange nyans. Detta för att komplettera den lite mer dova primärfärgen, men även för att användas till call to actions som knappar för att dra användarens uppmärksamhet.

Typsnittet gick från ett tungt till ett lätt, för att följa trenderna inom industri och teknik branschen, vilket var en av insikterna som vi kom fram till efter vår egna omvärldsanalys samt inspirationsmaterial från kunden.

Ett tydligt grafiskt element som redan vid ett tidigt stadie tog form, var just märkningarna bakom slagkraftiga och viktiga ord. Med ett tunt typsnitt kunde en ifylld markering bakom en bokstav skapa ett intressant element som drar användarens öga mot ett viktigt ord för att belysa budkapet, och samtidigt skapa en rödtråd som identitet kunde förhålla sig till. Märkningen bakom ordet är även en referens till företagets verksamhet inom märkning, så som etiketter.

Efter att typografin samt kulörpaletten var satt, växte ett formspråk fram, där vi vågade gå ifrån det hårda och kantiga uttrycket mot ett något mer avrundat, men fortfarande boxigt uttryck. Sektioner fick möjlighet att bilda intressanta rutnät och inramningar för att gruppera innehåll för en bättre användarupplevelse och enklare särskiljning, som samtidigt väcker ett visuellt intresse.

Hemsidans design
Efter att den nya grafiska identiteten var satt, så var det dags för att designa upp hela hemsidan. Startsidan tog form där vi ville lyfta en heldel viktiga uspar för besökaren som gör att dom sticker ut i branschen, samtidigt som vi ville visa upp intressant information som befintliga kunder vill ta del av.

Efter 9 designrevisioner togs 20+ unika designade sidor fram till hemsidan i Figma som skulle produceras. Utöver de unika sidorna skapade vi även ett designbibliotek för att ha ett lager med unika layouter som gick att kombinera för att skapa nya sidor vid behov, vilket visade sig vara ett mycket effektivt arbetssätt, samt behövligt när vi väl kom in i utvecklingen, där fler sidor behövde designas efter designfasen var färdig.

Utveckling
Hemsidan är byggd med WordPress som CMS och innehåller en handfull av posttyper. Till bloggfunktioner har posttyper för Case, Kunskapsbank och Nyheter skapats. Utöver detta kan även Logimark lägga upp nya lediga tjänster via en posttyp, samt uppdatera listan med medarbetare via en egen posttyp som även är filtreringsbar. Om inte det vore nog, så innehåller även hemsidan en hierarkisk posttyp för alla produkterna som består av 15st huvudkategorier, där dessa även har ett flertal underkategorier för att sedan komma till produkterna under varje kategori. Som man hör, är det en stor hemsida, som kräver mycket dynamisk data, för att göra redigering och hantering smidigt, men även för att information ska kunna visas på flera sidor.

Produkternas posttyp går i tre led där användarna kan navigera nedåt för att hitta den produkt eller jämföra produkter inom samma underkategori. På varje huvudkategorisida, visas även alla underkategorier i en sorterad lista, där alla produkter får visas under sina respektive underkategorier. Detta åstadkom vi genom att skapa loopar som förstår vilken ens förälder i posttypens hierarki är.

För att underlätta redigering för kunden, tog vi fram mallar för kategorier, underkategorier och produkter, där vi byggde upp system backend med olika typer av ACF fält för att kunden lätt skulle kunna fylla i informationen som passade för den unika produkten på de olika sektionerna. Utmaningen var att det framkom att olika sidor behöver visa olika typer av information, vilket led till att vi behövde skapa flera sektioner som kunde förekomma på olika produkter, men samtidigt hålla en snygg layout och struktur genom sidan. För att inte alla dessa sektioner skulle synas på produkter som inte utnyttjar alla sektioner, skapades conditions där sektioner inte syntes ifall informationen inte var ifylld.

Eftersom vissa produkters sidor därmed kunde bli mycket långa togs det fram en sidmeny för produkterna, som då navigerar upp och ner på sidan genom skrollning. Ett liknande problem uppkom när vissa kunskapsartiklar blev för långa. För att underlätta detta skapade vi då även en sidmeny för dessa, men den här gången skapade vi en javascript funktion som automatiskt hämtar alla H2 taggar och visar dom i en lista som sedan blir klickbar och länkar till automatiskt skapade id;n för att navigera upp och ner på sidan.

Resultat

Resultatet av hela projektet blev en ny grafisk identitet till Logimark som verkligen speglar kvalitén som dom bidrar med till branschen, samt den nya riktningen och ambitionerna som företaget vill gå mot. Med en avancerad hemsida kan kunden enkelt redigera och underhålla hemsidan genom posttyper och system byggda med ACF. Som grädden på moset så skapade vi även endel effekter som händer på scroll genom GSAP för att göra upplevelsen mer intressant. Allt det här kommer tillsist ner till den faktiska användaren och besökaren som får navigera på en sida där information är tydligt strukturerat och bidrar med funktioner för att lätt hitta produkter dom är intresserade av, jämföra produkter, samt funktioner för att göra långa sidor lättare att hantera.