ONLINECITY.IO — UI/UX design af platform-økosystemet bag moderne kommunikationsværktøjer
Projekt beskrivelse
Website
Præcisering af historie fortælling om platforme, brands og sammenhængen imellem dem samt modernisering af det visuelle udtryk. Mange forstod ikke, hvad ONLINECITY.IO var når de besøgte det, og hvordan det hængte sammen med deres øvrige platforme. En ny fortælling og visualisering med fokus de rette steder hjælper forståelsen på den besøgende bruger uanset deres formål.
Webdesign
Branding
Logo design
Animation
Rolle i projektet:
UI/UX designer / design lead
Team størrelse:
8 personer
Målgruppe:
Nye og potentielle kollegaer
samt kunder og samarbejdspartnere
Er du recruiter eller leder og søger en designer?
Jeg håber du finder projektet spændende – hvis du har nogle spørgsmål, så er du altid velkommen til at række ud og sende en besked til mig. Forhåbentlig får du en god forståelse af mine projekter og færdigheder igennem præsentationen her.
Figma variabler
Hos ONLINECITY.IO har designprocessen historisk været præget af ad hoc-beslutninger frem for en langsigtet og skalerbar tilgang for både designere og udviklere. I forbindelse med et overhaul af deres website valgte vi derfor at arbejde mere struktureret og detaljeorienteret ved at etablere et omfattende sæt af variabler. Dette sikrede en mere konsistent og strømlinet sammenhæng mellem design, udvikling og det endelige resultat.
Figma komponenter
Som en del af arbejdet med variabler udviklede vi også en række komponenter baseret på de eksisterende sider. Dette gør det muligt for designteamet effektivt at genbruge sektioner i fremtidige opgaver, hvilket sikrer konsistens og eliminerer løbende, mindre pixeljusteringer. Samtidig skaber det en klar reference for udviklerne, så elementerne kan implementeres korrekt og håndteres som globale komponenter eller tilsvarende løsninger.
Figma animationer
En central del af arbejdet var at skabe en mere dynamisk og engagerende brugeroplevelse frem for en statisk side. Dette blev understøttet af brugen af animationer, som blev prototypet i Figmas prototypeværktøj. Her udviklede vi simple, men effektive animationer til blandt andet sliders, sektioner og komponenter, der aktiveres ved load eller, når de træder ind i brugerens viewport.
Videoredigering og animationer
Et andet centralt fokusområde har været udviklingen og løbende optimeringen af video- og animationsindhold. Hos ONLINECITY.IO har der været et stærkt fokus på at producere årlige “årsafslutningsvideoer” til kunderne, som opsummerer performance og udvikling det seneste år. Derudover har virksomhedens platforme drevet YouTube-kanaler med produktguides, website-animationer og øvrigt visuelt indhold. Nedenfor ses et eksempel på en af disse årsvideoer, mens yderligere indhold kan findes på deres LinkedIn og websites (materiale fra slut 2019 til start 2026).
Gamle logo
Dette er virksomhedens tidligere logo, som har været en central del af deres visuelle identitet gennem mange år. Det ikoniske robotmotiv har spillet en vigtig rolle i deres brandhistorie og udvikling. I redesignprocessen var det derfor afgørende at videreføre dette element for at bevare genkendeligheden, samtidig med at det visuelle udtryk blev moderniseret. Målet var at skabe et mere tidssvarende design, der afspejler både nutidens og fremtidens marked samt positionerer virksomheden som et troværdigt og innovativt brand.
Logo idéer til et nyt og moderne logo
Det tidligere robotlogo har været anvendt som en fleksibel maskot med variationer i både positioner og visuelle udtryk, herunder ændringer i øjnene. I den fremtidige brandretning var det dog ikke intentionen at lade en maskot fylde for meget. Fokus blev derfor lagt på at forfine og redesigne selve robothovedet som det primære logoelement, samtidig med en optimering af typografi og visuel stil.
Der blev dog arbejdet med forskellige koncepter for, hvordan det nye robothoved kunne udvides funktionelt ved at afspejle følelser og states. Eksempler inkluderer variationer i øjenudtryk som hjerter, spørgsmålstegn og chat-indikatorer, hvilket bidrager til et mere dynamisk og levende visuelt udtryk.
Selvom robotmaskotten ikke var en central del af rebrandingen, blev der eksperimenteret med AI-genererede visualiseringer, hvor en robot baseret på det færdige logo indgår i forskellige scenarier. Et eksempel ses herunder, hvor robotten er placeret på en båd og kigger ud mod horisonten.
Færdige logo varianter
Her kan det færdige logo ses i forskellige farver.
Webdesign
ONLINECITY.IOs tidligere hjemmeside fremstod visuelt forældet og manglede en tydelig sammenhæng mellem farver, sektioner og det overordnede budskab. Der var uklarhed omkring sidens formål og funktion. Dog indeholdt den en række kreative animationer, hvor konceptet “City” blev udfoldet gennem en interaktiv, svævende by (desværre uden tilgængelig visuel reference).
I redesignprocessen blev der lagt vægt på at skabe en mere klar, struktureret og brugervenlig oplevelse. Den nye hjemmeside er designet til at kommunikere tydeligt, at der er tale om en informationsside frem for et produkt. Formålet er at præsentere koncernen, dens værdier og platforme samt at tiltrække potentielle medarbejdere. Sitet fungerer derfor ikke som en traditionel salgsside, men som et informativt og rekrutteringsorienteret touchpoint for både kandidater og samarbejdspartnere.
Lad os samarbejde om at
skabe noget betydningsfuldt!
Hvis du leder efter en designer som lytter, forstår og designer med hjertet – så tøv ikke
med at kontakte mig. Jeg er altid frisk på en snak og noget at drikke.
Lad os samarbejde om at
skabe noget betydningsfuldt!
Hvis du leder efter en designer som lytter, forstår og designer med hjertet – så tøv ikke med at kontakte mig. Jeg er altid frisk på en snak og noget at drikke.
ONLINECITY.IO — UI/UX design af platform økosystemet bag moderne kommunikationsværktøjer
Projekt beskrivelse
Website
Præcisering af historie fortælling om platforme, brands og sammenhængen imellem dem samt modernisering af det visuelle udtryk. Mange forstod ikke, hvad ONLINECITY.IO var når de besøgte det, og hvordan det hængte sammen med deres øvrige platforme. En ny fortælling og visualisering med fokus de rette steder hjælper forståelsen på den besøgende bruger uanset deres formål.
Webdesign
Branding
Logo design
Animation
Rolle i projektet:
UI/UX designer / design lead
Team størrelse:
8 personer
Målgruppe:
Nye og potentielle kollegaer
samt kunder og samarbejdspartnere
Er du recruiter eller leder og søger en designer?
Jeg håber du finder projektet spændende – hvis du har nogle spørgsmål, så er du altid velkommen til at række ud og sende en besked til mig. Forhåbentlig får du en god forståelse af mine projekter og færdigheder igennem præsentationen her.
Figma variabler
Hos ONLINECITY.IO har designprocessen historisk været præget af ad hoc-beslutninger frem for en langsigtet og skalerbar tilgang for både designere og udviklere. I forbindelse med et overhaul af deres website valgte vi derfor at arbejde mere struktureret og detaljeorienteret ved at etablere et omfattende sæt af variabler. Dette sikrede en mere konsistent og strømlinet sammenhæng mellem design, udvikling og det endelige resultat.
Figma komponenter
Som en del af arbejdet med variabler udviklede vi også en række komponenter baseret på de eksisterende sider. Dette gør det muligt for designteamet effektivt at genbruge sektioner i fremtidige opgaver, hvilket sikrer konsistens og eliminerer løbende, mindre pixeljusteringer. Samtidig skaber det en klar reference for udviklerne, så elementerne kan implementeres korrekt og håndteres som globale komponenter eller tilsvarende løsninger.
Figma animationer
En central del af arbejdet var at skabe en mere dynamisk og engagerende brugeroplevelse frem for en statisk side. Dette blev understøttet af brugen af animationer, som blev prototypet i Figmas prototypeværktøj. Her udviklede vi simple, men effektive animationer til blandt andet sliders, sektioner og komponenter, der aktiveres ved load eller, når de træder ind i brugerens viewport.
Videoredigering og animationer
Et andet centralt fokusområde har været udviklingen og løbende optimeringen af video- og animationsindhold. Hos ONLINECITY.IO har der været et stærkt fokus på at producere årlige “årsafslutningsvideoer” til kunderne, som opsummerer performance og udvikling det seneste år. Derudover har virksomhedens platforme drevet YouTube-kanaler med produktguides, website-animationer og øvrigt visuelt indhold. Nedenfor ses et eksempel på en af disse årsvideoer, mens yderligere indhold kan findes på deres LinkedIn og websites (materiale fra slut 2019 til start 2026).
Gamle logo
Dette er virksomhedens tidligere logo, som har været en central del af deres visuelle identitet gennem mange år. Det ikoniske robotmotiv har spillet en vigtig rolle i deres brandhistorie og udvikling. I redesignprocessen var det derfor afgørende at videreføre dette element for at bevare genkendeligheden, samtidig med at det visuelle udtryk blev moderniseret. Målet var at skabe et mere tidssvarende design, der afspejler både nutidens og fremtidens marked samt positionerer virksomheden som et troværdigt og innovativt brand.
Logo idéer til et nyt og moderne logo
Det tidligere robotlogo har været anvendt som en fleksibel maskot med variationer i både positioner og visuelle udtryk, herunder ændringer i øjnene. I den fremtidige brandretning var det dog ikke intentionen at lade en maskot fylde for meget. Fokus blev derfor lagt på at forfine og redesigne selve robothovedet som det primære logoelement, samtidig med en optimering af typografi og visuel stil.
Der blev dog arbejdet med forskellige koncepter for, hvordan det nye robothoved kunne udvides funktionelt ved at afspejle følelser og states. Eksempler inkluderer variationer i øjenudtryk som hjerter, spørgsmålstegn og chat-indikatorer, hvilket bidrager til et mere dynamisk og levende visuelt udtryk.
Selvom robotmaskotten ikke var en central del af rebrandingen, blev der eksperimenteret med AI-genererede visualiseringer, hvor en robot baseret på det færdige logo indgår i forskellige scenarier. Et eksempel ses herunder, hvor robotten er placeret på en båd og kigger ud mod horisonten.
Færdige logo varianter
Her kan det færdige logo ses i forskellige farver.
Webdesign
ONLINECITY.IOs tidligere hjemmeside fremstod visuelt forældet og manglede en tydelig sammenhæng mellem farver, sektioner og det overordnede budskab. Der var uklarhed omkring sidens formål og funktion. Dog indeholdt den en række kreative animationer, hvor konceptet “City” blev udfoldet gennem en interaktiv, svævende by (desværre uden tilgængelig visuel reference).
I redesignprocessen blev der lagt vægt på at skabe en mere klar, struktureret og brugervenlig oplevelse. Den nye hjemmeside er designet til at kommunikere tydeligt, at der er tale om en informationsside frem for et produkt. Formålet er at præsentere koncernen, dens værdier og platforme samt at tiltrække potentielle medarbejdere. Sitet fungerer derfor ikke som en traditionel salgsside, men som et informativt og rekrutteringsorienteret touchpoint for både kandidater og samarbejdspartnere.
Lad os samarbejde om at skabe noget betydningsfuldt!
Hvis du leder efter en designer som lytter, forstår og designer med hjertet – så tøv ikke med at kontakte mig. Jeg er altid frisk på en snak og noget at drikke.