Skyfable - Verktøy for å oppdage spill

Min rolle

UI/UX-designer

Klient

I/A

Verktøy

Figma

Industri

Gaming

Tjeneste

Web-/appdesign

Dato

Juni, 2025

Et nettsted for spilloppdagelse som foreslår hva du kan spille basert på brukerens lokale vær. Prosjektet fokuserer på å skape en enkel, engasjerende brukerflyt for å løse det vanlige problemet med overveldende mange valgmuligheter i store spillbiblioteker.

Kort sammendrag

Skyfable er et nettsted som lar spillere finne et spill å spille, basert på det lokale været.

Prosess

1. Research & inspirasjon

Jeg startet egentlig dette prosjektet med et ønske om å lage et humørbasert nettsted for å oppdage spill i stedet, men fant ut at det ble et for abstrakt konsept under idéutviklingen. Jeg sporet raskt av til noe som var mye mer gjennomførbart og målbart, som var den værbaserte løsningen i stedet.

I hovedsak ønsket jeg en opplevelse der nettstedet oppdager mitt lokale vær, og deretter anbefaler et spill for meg som er perfekt egnet for været, med en kort beskrivelse av hvorfor det passer.

Hvis jeg skulle lage dette produktet med en fungerende backend, ville dette fungert ved å hente informasjon fra Steams API angående spillets sjanger, tagger osv. - og deretter bruke AI til å konvertere denne informasjonen til en kort, lesbar tekst om hvorfor spillet er perfekt for dem og det nåværende været. For spillutvalget ville jeg hatt en intern database som knytter gitte værtyper til gitte spillsjangre, for å ha en pool av spill å velge mellom ved randomisering.

Jeg startet med å gjøre research på hva slags verktøy som allerede finnes, og selv om det ikke finnes noen som gjør akkurat det mitt gjør (noe som er bra), finnes det noen få som velger et spill helt tilfeldig, for eksempel basert på hva en spiller har i Steam-biblioteket sitt. Det finnes også lignende ideer for filmer og TV, men veldig lite der også.

Til slutt lagde jeg også en brukerreise (User Journey) for å forstå den ideelle sluttbrukeren min bedre, og prøve å forutse eventuelle smertepunkter – noe som gjorde at jeg kunne komme i forkant av problemene og finne gode løsninger tidlig i designprosessen.


2. Visuelt oppsett

Siden dette prosjektet hovedsakelig var for øving, ønsket jeg å jobbe med fargekombinasjoner jeg ikke var komfortabel med ennå, så jeg valgte et par ganske sterke farger. Jeg valgte å gå for en lun lillafarge som primærfarge for å skape en følelse av ro og avslapning, med en sterk gul farge som aksentfarge for å skape litt vennlighet og spenning.

For valg av skrifttype gikk jeg for en font som heter "Quicksand". Det er en veldig leken og myk font som virkelig matcher den vennlige og uformelle stemningen jeg var ute etter. Den hadde også flere skrifttykkelser (font weights), som jeg trengte for å skape et sterkt visuelt hierarki i designet.

Til slutt valgte jeg også å bruke noen stiliserte/animerte ressurser i designet, da jeg virkelig ønsket å underbygge den avslappede og morsomme stemningen. Jeg la dem til og med inn i formen av en sky med en maske, for å gjenspeile "vær"-temaet.


3. Planlegging av layout

Mine første undersøkelser fokuserte på en mer tradisjonell, produkttung landingsside. Etter å ha opprettet brukerreisen innså jeg imidlertid at brukerens primære mål var hastighet. Dette førte til at jeg gikk bort fra dette opprinnelige konseptet og beveget meg mot et mye mer direkte design med én enkelt handling, som fører brukeren raskere til resultatet.

Jeg ønsket en veldig minimalistisk layout, og jeg ønsket at brukeropplevelsen (UX) skulle være enkel. Først prøvde jeg å lage en produktbasert landingsside som virkelig forklarte produktet i detalj. Jeg innså imidlertid raskt at hovedverdien av produktet var å raskt få brukeren fra "Jeg vet ikke hva jeg skal spille" til "Dette ser kult ut", så jeg bestemte meg for å prøve å konvertere brukeren ved å rett og slett ha en god nok hero-seksjon og la det være hovedlandingssiden i seg selv.

Jeg planla også å inkludere en lasteskjerm. Det var faktisk veldig viktig fordi jeg virkelig ønsket å selge "magien" ved produktet. Ved å gi brukeren en lasteskjerm, fikk de tid til å se frem til resultatet, og også føle at det er en backend som virkelig jobber med å finne det optimale resultatet for dem.

Til slutt trengte jeg en resultatskjerm som viste spillet algoritmen valgte, sjangeren(e)/taggene spillet falt inn under, og også en kort beskrivelse av spillet som også reflekterte hvorfor spillet passet godt for akkurat denne dagen (værmessig).

Endelig design

1. Landingsside


2. Lasteside


3. Resultatside


Refleksjon

Fra å komme opp med et unikt konsept for spilloppdagelse til flere designiterasjoner, var dette et morsomt prosjekt og jeg lærte utrolig mye! Å jobbe med disse fargene var en stor utfordring, og helt ærlig er jeg ikke sikker på om jeg har landet helt på dem ennå, men jeg ønsket å utfordre meg selv og jeg fullførte det.

Her er hva jeg lærte under arbeidet med dette prosjektet:

  • Jeg lærte å lage og jobbe med brukerreiser (User Journeys) for UI/UX-prosjekter, da jeg tidligere bare hadde gjort dette for spill

  • Jeg jobbet med fargekombinasjoner med sterk kontrast som jeg vanligvis ikke bruker

  • Jeg så verdien av å holde ting enkelt når det kommer til den generelle brukeropplevelsen og reisen

  • Jeg fikk eksperimentere med maskering av illustrasjoner, noe jeg ikke har brukt særlig ofte frem til nå

  • Som alltid ble jeg også mer fortrolig med å utnytte grunnleggende designprinsipper som luft (whitespace), kontrast, typografi osv.

RELATERTE PROSJEKTER

Create a free website with Framer, the website builder loved by startups, designers and agencies.