RelationCity — UI/UX design af en omnichannel platform til moderne kundekommunikation
Projekt beskrivelse
Website
Platformen GatewayAPI kører på skinner, men det opleves ofte, at det for kompliceret for den almene person i en virksomhed. Derfor opstod RelationCity, som egentlig er i samarbejde med GatewayAPI men er langt mere brugervenligt, visuelt og indebære flere features, da den stræber efter at være en omnichannel marketingsplatform. Opgaven stod derfor på at starte et brand op fra bunden – finde ud af branding, logodesign, animationer, stil og tone for det hele. Jeg arbejde tæt sammen med en ekstern designer om projektet, hvor vi løftede den sammen.
Webdesign
Branding
Logo design
Animation
SoMe
Dashboard
Rolle i projektet:
UI/UX designer / design lead
Team størrelse:
8 personer
Målgruppe:
B2B kunder, B2C kunder, marketing team, teams uden udviklere eller teknisk kunnen
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 komponenter
RelationCity blev oprindeligt lanceret under en ustruktureret proces med forventninger, der var svære at indfri. Hjemmesiden blev designet i samarbejde med en ekstern designer, men har siden gennemgået en betydelig redesignproces for at bevæge sig i en ny visuel retning.
Selvom det løbende har været udfordrende at følge en fuldt konsistent proces, er der alligevel prioriteret tid til at udvikle et sæt genanvendelige komponenter, hvilket gør det muligt at arbejde mere effektivt og konsistent fremadrettet.
Branding, stil og tone – ved launch
Dette var det endelige design, da RelationCity blev lanceret. Målet var at skabe en animeret, legende, dynamisk og engagerende oplevelse, som ville appellere til marketingprofessionelle. Designet tog derfor udgangspunkt i organiske former, som kunne formes og kombineres på forskellige måder. Resultatet fungerede tilfredsstillende, og virksomheden var glade for det.
Efterhånden blev det dog tydeligt, at designet ikke helt levede op til de ønskede mål, og det visuelle udtryk fremstod til tider for overdrevet og mindre seriøst. Dette satte scenen for endnu et redesign af hjemmesiden.
Branding, stil og tone – efter et par år i marken
Efter en grundig analyse af markedet og best practice blev det tydeligt, at brugen af mennesker, visuelle real-life-eksempler og en minimalistisk designstrategi var den mest effektive tilgang.
Designet blev derfor udviklet med respekt for brandets oprindelige identitet og organiske formsprog, men med et mere simpelt og nedtonet udtryk. Dette skabte en mere balanceret og professionel visuel oplevelse, samtidig med at de tidligere legende elementer blev bevaret i mere subtil form.
Logo design - gamle midlertidige
Dette var det første logo, RelationCity anvendte. Det var oprindeligt ikke en del af designprocessen, men blev brugt som midlertidigt logo ved lanceringen for hurtigt at etablere virksomhedens tilstedeværelse på markedet. Som et midlertidigt element var det ikke et særligt gennemarbejdet eller brandfokuseret logo.
Logo design - nye stil
Efter en række designforslag og workshops blev RelationCitys endelige logo udviklet som vist nedenfor. Logoet kan anvendes i forskellige farver og gradients, men billedet viser den oprindelige version.
Designet har en organisk form, der elegant sammenkobler bogstaverne "O" og "C" som reference til "OC", forkortelsen for ONLINECITY.IO, koncernen bag RelationCity.
Webdesign – Ecommerce underside (sneakpeek)
Her er et sneakpeak af en underside som handler om Ecommerce. Den viser rigtig godt, hvordan vi har udforsket nye elementer, designs og grafikker men holdt os tro til brandet's oprindelse med de organiske former.
Animationer
RelationCitys design blev oprindeligt skabt med fokus på en legende og engagerende brugeroplevelse, hvilket resulterede i omfattende brug af animationer. Dette blev dog senere nedtonet, da det både var visuelt overvældende og tidskrævende at implementere.
Billedet herunder viser et eksempel på en hero-sektion, hvor grafikken er animeret for at illustrere en proces. Lignende animationer findes på mange af siderne og i udvalgte sektioner. For at opleve dem i deres fulde kontekst anbefales det at besøge hjemmesiden live.
Dashboard UI
RelationCity havde behov for et moderne og brugervenligt dashboard, der gør det nemt for kunderne at administrere deres platform. Udviklingen skete i tæt samarbejde med et udviklerteam, som havde valgt at basere løsningen på DashKit og Nuxt UI. Designet blev derfor udarbejdet inden for disse rammer, så dashboardets visuelle udtryk og funktionalitet harmonerer med både DashKit og Nuxt, samtidig med at det understøtter en intuitiv brugeroplevelse.
SoMe indhold
En væsentlig del af arbejdet hos ONLINECITY.IO har været produktion af SoMe-grafikker, videoindhold og Google Ads-materiale. I perioden 2019-2026 er der blevet udviklet et stort antal SoMe-posts på tværs af platformene.
Eksemplet herunder tager udgangspunkt i RelationCity, men samme tilgang og produktion har været gældende for alle virksomhedens platforme. For yderligere eksempler henvises til deres LinkedIn.
