Moral Me
Egy filozofikus terméknek olyan dizájn dukál, ami ugyanolyan mélyen gondolkodik.
Projekt áttekintés
A koncepció valóban eredeti. A weboldal nem tartott vele lépést.
A Moral Me egy gamifikált közösségi platform, ami a karakterfejlődésre épül. Az értelmes párbeszédet és az erényes döntéseket jutalmazza — nem a követőszámot.
Anélkül terveztem újra a kezdőlapot, hogy bárki kérte volna. Három irány, mindegyik más stratégiai megfontolással. Hideg üzenetben elküldtem az alapítónak. Még aznap válaszolt.
Előtte
Utána
Háttér és célok
A design igazítása a termék mélységéhez.
A Moral Me szövegei élesek. A "Where content creation becomes character formation" erős mondat. De a körülötte lévő dizájn más történetet mesélt — világoskék gradiensek, lebegő mockupok, általános SaaS layout. Úgy nézett ki, mint bármelyik másik app landing oldal 2021-ből.
A mélyebb probléma: Kane írásai filozofikusak, szándékosak, érzelmileg intelligensek. A dizájn ezt a hangot egyáltalán nem tükrözte.
Mit tűztem ki magam elé
- A vizuális nyelv összehangolása a termék mélységével
- Azonnali érzelmi bizalom megteremtése — ez a platform sebezhetőséget kér a felhasználóitól
- Hogy a gamifikáció kiérdemeltnek érződjön, ne felszínesnek
- A meglévő brand elemek (logó, narancs accent) tisztelete, miközben minden mást emelünk
- Három irány leszállítása, hogy az alapító valódi kreatív választást kapjon
Megkötések
- Nincs brief — magamnak kellett írnom egyet
- A meglévő Framer oldal struktúra mint referencia
- Egy erős brand asset: a narancs a logóban
Kutatás és inspiráció
A Moral Me-nek mélységet, biztonságot és növekedést kell sugároznia.
Mielőtt megnyitottam volna a Figmát, gondosan elolvastam mindent az oldalon. A küldetést, a funkciókat, a szövegeket. A Moral Me nem próbál Instagram lenni. Inkább egy személyes fejlődési eszköz, közösségi mechanikákkal felépítve.
Akiket megpróbál vonzani, azok reflektív, értékvezérelt emberek. Megértettnek kell érezniük magukat, mielőtt regisztrálnak.
Az egyetlen brand asset, amit érdemes megtartani: a narancs a logóban. Meleg, emberi, megkülönböztető. Mindhárom irányt köré építettem — előtérbe hoztam a hideg kék helyett, ami az eredetit dominálta.
Legközelebbi referenciák
- Duolingo — célzatos gamifikáció, nem trükkös
- Headspace — melegség és bizalom wellness kontextusban
- Are.na — intellektuális mélység, minimális zaj
- Medium — írás-fókuszú, az ötletek a teljesítmény fölött
Előtte
UX tervezés és információs architektúra
Mielőtt bármit újraterveztem volna, auditáltam a meglévő oldalt.
Amit találtam
- Nincs tiszta hierarchia — a hero, funkciók, küldetés és CTA mind ugyanolyan súllyal versenyeznek
- "PositiveFeed" még mindig a footerben — a régi brand név, identitászavart okozva
- Szöveghibák a funkciók szakaszban — gépelési hibák, inkonzisztens nagybetűhasználat
- Kontraszt problémák — világosszürke szöveg fehéren végig
- Gamifikációs metrikák nyersen — számok kontextus nélkül arról, mit jelentenek
- A robot Ami értesítés sima szövegben emojival — nem professzionális első benyomás
Átstrukturált oldalfolyamat
Az eredetinek nem volt narratív íve. Egybe szerveztem át — minden szakasz kiérdemli a következőt.
Hero — Mi ez? Miért fontos? Egy CTA.
Küldetés — Az érzelmi mag egy mondatban
Hogyan működik — Gamifikáció egyszerűen elmagyarázva
Funkciók — Amit valójában kapsz
Metrikák — Bizonyíték, hogy a rendszer működik
Várólista CTA — Alacsony súrlódás, magas szándék
Vizuális design
Három irány. Mindegyik más stratégiai pozíció.
01. verzió
Tisztaság először
Sötét háttér, narancs accent, tiszta fehér tipográfia. Maximális kontraszt. Editorial layout. A hero a legerősebb sorukkal vezet, nagyban tálalva sötét háttérrel. A narancs pontosan egy helyen használva: a CTA gombon. A legjobb az intellektuálisan komoly korai elfogadóknak.
02. verzió
Evolúciós
Megtartja a meglévő videós herót és gradient struktúrát. Mindent mást javít. Szorosabb hierarchia. Javított szöveg. Erősebb kontraszt. A legkisebb súrlódás a meglévő közösségi tagoknak. A leggyorsabban megépíthető.
03. verzió
Brand vezérelt
A logóból veszi a narancsot, és az egész oldal érzelmi alapjává teszi. Meleg sötét háttér, gazdag és textúrált. Legközvetlenebbül a wellness és személyes növekedés irányába dől.
Mindhárom közös design alapelvei
Mélység a díszítés helyett
Semmi díszítő, ami nem hordoz jelentést.
Melegség a hideg tech helyett
Narancs, lekerekített, de nem buborékos.
Kiérdemelt metrikák
Gamifikációs számok narratívával bemutatva, nem nyers kijelzőkként.
Egy elsődleges CTA
Mindig látható, soha nincs eltemetve.
Mozgás és interakció
Minden animáció érződjön légzésnek, ne pattogásnak.
Ez vizuális koncepció volt, nem kódolt prototípus. De az interakciós szándékot minden layout döntésnél átgondoltam.
- Hero belépés — lassú fade enyhe felfelé sodródással. Az ütemnek átgondoltnak kell érződnie.
- Metrika számlálók — felfelé számláló animáció görgetésnél. A számok így kiérdemeltnek érződnek, nem statikusnak.
- CTA hover — finom meleg ragyogás, nem lapos színváltás. Megerősíti a brand melegségét.
- Funkció kártyák — finom emelkedés hovernél. Könnyű és felfedező, nem mechanikus.
Fejlesztés és platform
A problémák teljesen design és szöveg jellegűek voltak — nem infrastruktúra.
A "PositiveFeed" footer szöveg egy elfelejtett sablonmaradvány volt egy korábbi brand iterációból. Könnyű elnézni. Könnyű javítani. Az a fajta részlet, ami észrevétlenül erodálja a bizalmat.
Mindhárom irány megépíthető. Az 1. verzió leginkább egy átgondolt betűpárosításból profitálna — Playfair Display a display címsorokhoz, Inter a törzsszöveghez. Filozofikus találkozik a funkcionálissal. Illik a termék hangjához.
Mit tanultam
Mélységre tervezni más megkötés.
A legtöbb UX munka arról szól, hogy egyszerűbbé tegyük a dolgokat. A Moral Me-nek erre is szüksége volt — de súlyosnak is kellett éreznie magát. A súrlódás eltávolítása véletlenül eltávolíthatja a jelentést. Ez a feszültség alakította minden döntést.
Kulcs felismerések
- A saját brief megírása élesíti a gondolkodást. Ügyfél nélkül magadnak kell megválaszolnod a nehéz kérdést: mire van valójában szüksége ennek a terméknek most?
- Érzelemmel vezess, aztán logikával. Az érzelmi bizalom a funkció magyarázat előtt — ez lett minden layout döntés szűrője.
- Három opció jobb, mint egy. Egy megoldás azt mondja, megtaláltad a választ. Három azt mondja, több szögből megértetted a problémát.
Amit finomítanék
- Felhasználói interjúk a célközönséggel az irány véglegesítése előtt
- Megfelelő mobile-first átfutás mindhárom verzión
- A metrika animációk prototipizálása, hogy lássuk: a gamifikáció értelmesnek érződik-e
Eredmény
Az alapító még aznap válaszolt.
Ez egy kéretlen koncepció. Az alapítót tájékoztattam, és pozitívan reagált.
- Design probléma azonosítása anélkül, hogy kérték volna
- Stratégiai gondolkodás három különálló irányon át, mindegyik tiszta indoklással
- Brand összehangolás — egy alapító hangjának olvasása és vizuális lefordítása
- UX audit a felszíni esztétikán túl
- A magabiztosság, hogy valódi munkával keressek meg embereket, nem pitch-csel