Pantry
Háztartásod, szinkronban.
Közös háztartás-kezelő app pároknak és kis háztartásoknak — arra tervezve, hogy megragadja a láthatatlan koordinációt, amin a valódi otthonok futnak.
Projekt áttekintés
Mi az a Pantry?
A Pantry egy közös háztartás-kezelő app, amit pároknak és kis háztartásoknak terveztem. Egyesít egy élő, közös bevásárlólistát, egy kamra-követőt lejárati értesítésekkel, ismétlődő tételek ciklusait, és egy mentett tételek könyvtárát fotókkal és bolti jegyzetekkel.
Ez a projekt a portfólióm mobil app hiányát tölti be. Egy valódi frusztrációból indult — és ez minden tervezési döntést könnyebben indokolhatóvá tett.
A probléma
A bevásárló appok megoldják a listát. A háztartást nem.
A közös háztartások láthatatlan koordináción futnak. Ki vette a tejet? Mikor bontottuk ki ezt a joghurtot? Megint elfogyott a tisztítószer. Tudnál hozni zabpelyhet — de a jó zabpelyhet?
Ez a koordináció jelenleg WhatsApp üzenetekben, post-itekben és "azt hittem, tudtad" mondatokban él. Töredezett, elfelejthető és frusztráló.
A legtöbb bevásárló app egyéni feladatként kezeli a vásárlást, opcionális megosztással. Három dolgot hagynak ki:
01
Élelmiszerpazarlás
A dolgok megromlanak, mert senki nem követi, mikor bontották ki őket vagy meddig állnak el.
02
Ritmusos tételek
Tisztítószer, sampon, vitaminok. Olyan kellékek, amik kiszámítható ciklusban fogynak el, de soha nem kerülnek vissza a listára, amíg már nincs.
03
Közös tudás
Melyik márka, melyik méret, melyik polc. Ez a tudás egy ember fejében él, és minden alkalommal elveszik.
A Pantry egyetlen ötlet köré épül: a háztartás egy csapat, és a konyha az a hely, ahol ez a csapat dolgozik.
A felhasználók
Sophia és Joe. Valódi probléma, fiktív nevek.
Sophia
A tervező
A bevásárlás nagy részét fejben elintézi, mielőtt egyáltalán elindulna otthonról. Tudja, melyik zabpelyhet akarja, hol van a boltban, és nagyjából mikor fog elfogyni. A probléma az, hogy ezt a tudást kihozza a fejéből és egy közös rendszerbe tegye, amit Joe valóban tud használni.
Joe
A végrehajtó
Szívesen vásárol, főz és pótol — de csak ha az információ tiszta és vizuális. Nem akar SMS-ezni "melyik zabpelyhet?" a bolt közepén állva. Megnyitja az appot és egyszerűen tudni akarja.
Közös céljaik
- Ne vegyenek olyat, amiből már van
- Ne fogyjon ki észrevétlenül semmi
- Ne legyenek többé "melyikre gondoltál?" üzenetek
- Csökkenjen az élelmiszerpazarlás gondolkodás nélkül
Folyamat
Hogyan dolgoztam.
Ez a projekt brief-first megközelítést követett — megírtam a teljes projekt briefet, definiáltam a felhasználót, feltérképeztem a problémát, és minden képernyőt felvázoltam, mielőtt megnyitottam a Figmát. Ez a sorrend számít. Azt jelentette, hogy minden tervezési döntésnek volt indoka, mielőtt layouttá vált volna.
Brief és probléma definíció
Először írásban definiáltam a felhasználót, a problémát, az alapfunkciókat és a tervezési célokat. Nincsenek wireframe-ek, nincs Figma — csak tisztaság.
Felhasználói folyamatok feltérképezése
4 alap felhasználói folyamatot térképeztem fel, mielőtt egyetlen képernyőt is terveztem volna. Mindegyik folyamat egy konkrét forgatókönyvet követ — tétel hozzáadása, vásárlás rögzítése, ismétlődő tétel beállítása, kamra ellenőrzése. A folyamatok megmutatták, mely képernyők elengedhetetlenek és melyek csak jó-ha-van.
Design rendszer Figmában (Claude Designnal)
Megépítettem a teljes design rendszert, mielőtt egyetlen képernyő frame-hez is hozzányúltam volna. A színeket, tipográfiát, térközöket és minden komponenst először újrafelhasználható Figma komponensként építettem fel. A Claude Designt a design rendszer építésének felgyorsítására használtam, majd minden döntést manuálisan finomítottam Figmában.
Képernyőtervezés Figmában
Mind a 16 képernyőt a design rendszer komponenseivel terveztem. Auto Layout végig. Minden réteg elnevezve. Az első naptól handoff-ready.
Kódolt prototípus
Egy működő prototípust építettem HTML, CSS és JavaScript használatával — keretrendszerek nélkül. Minden kódot VS Code-ban írtam, Gittel verziókövetve, GitHub Pagesen deployolva.
Design rendszer
Még mielőtt egyetlen képernyő is megszületett volna.
Közel-fekete háttér (nem tiszta fekete) párosítva egy meleg homokarany accenttel. Az accent a gyertyafény színe, nem egy értesítési badge-é — otthonos, nem éles. A státusz színek tompítottak, így az UI nyugodt marad, még akkor is, ha az adatok nem.
A Fraunces volt az a tipográfiai döntés, ami az egészet inkább meleggé tette, mint hideggé. DM Sans-szal párosítva az UI-hoz és DM Mono-val az adatokhoz, a rendszer prémium, de megközelíthető érzetet kelt.
Hátterek
Accent és státusz
Tipográfia
Fraunces — meleg, átgondolt serif
DM Sans — tiszta UI címkék és törzsszöveg
DM Mono — időbélyegek és adatok
Megépített komponensek
Bottom navigation · Lista sor (kipipálva + kipipálatlan) · Mentett tétel kártya · Kamra tétel sor visszaszámláló badge-dzsel · Input mező (alap, focus, error) · Gombok (primary, secondary, destructive) · Bottom sheet shell · Értesítés kártya · Avatar jelenlét indikátorral · Visszaszámláló badge (zöld, sárga, piros) · Ismétlődő tétel kártya · Tag/badge rendszer.
Felhasználói folyamat
Négy folyamat. Minden képernyő indokolva.
Mielőtt bármilyen UI-t terveztem volna, négy alap felhasználói folyamatot térképeztem fel. Ezek a folyamatok határozták meg, mely képernyők létezzenek, mit kell tartalmazniuk, és milyen legyen a navigációs struktúra. Semmit nem terveztem, ami nem szolgált egy ilyen folyamatot.
1. folyamat — Tétel hozzáadása a bevásárlólistához
Sophia megnyitja az appot → bevásárlólista → + gomb → mentett tételek között keres → megtalálja a zabpelyhet → koppintással hozzáadja → a tétel azonnal megjelenik Joe listáján.
2. folyamat — Vásárlás rögzítése és lejárat beállítása
Joe hazaér a boltból → kamra-követő → "vásárlás rögzítése" → kiválasztja a tételt → beállítja a vásárlás dátumát és a felhasználási időt → menti → az app ütemezi az értesítést.
3. folyamat — Ismétlődő tétel beállítása
Sophia észreveszi, hogy a tisztítószer fogytán van → ismétlődő tételek → + gomb → beállítja a terméket és 4 hetes ciklust → menti → az app 4 hét múlva automatikusan hozzáadja.
4. folyamat — Lejáró kamra tételek ellenőrzése
Joe kap egy értesítést → kamra-követő → látja, hogy a joghurt holnap lejár → ellenőrzi a bevásárlólistát → még nincs rajta → hozzáadja.
Folyamatábra
↕ Görgesd, hogy felfedezd
Kulcs képernyők
Négy képernyő. Mindegyik valami konkrétat old meg.
01. képernyő
Kezdőlap — a háztartás központja
Lista előnézet, kamra figyelmeztetések, közelgő ismétlődő tételek — sürgősségi sorrendben. Ha valami lejárófélben van, az az első, amit látsz. A jelenlét indikátor mutatja, hogy a partnered épp vásárol-e. A kezdőlap három kérdést válaszol meg öt másodpercen belül: mire van szükségünk, mi fog megromlani, mi következik.
02. képernyő
Tétel részletek — a hős képernyő
Ez az a funkció, ami megkülönbözteti a Pantryt. A bolti jegyzet — "Harmadik polc, bal oldal, az ablak mellett. Kérd melegen, ha 16 óra után vagy ott" — megragadja a közös háztartási tudást, ami jelenleg WhatsApp üzenetekben él, és három nap múlva eltűnik. Nagy fotó, kategória badge, bolti jegyzet vizuálisan elkülönített kártyában, általános jegyzetek alatta. Minden, amit Sophia tud erről a tételről, három másodperc alatt elérhető Joe-nak.
03. képernyő
Kamra-követő — nyugodt sürgősség
Az összes naplózott tétel visszaszámláló badge-ekkel — zöld, sárga, piros. Alapból a leghamarabb lejáró szerint rendezve. A szín mindent kommunikál, mielőtt egyetlen szót is olvasnál. A státusz színek tompítottak — az UI nyugodt marad, még akkor is, ha az adatok nem. Egy halk értesítés tételenként, nem napi riasztás.
04. képernyő
Bevásárlólista — közös, élő, őszinte
A kipipált tételek áthúzva továbbra is láthatók maradnak, amíg a session nem törlődik. Egy közös bevásárláson, ha az egyik ember kipipál valamit, miközben a másik még felé sétál, az zavart okoz. Ha a kipipált tételek láthatóak maradnak a session törléséig, az megoldja ezt — egy apró részlet, ami közvetlenül a valódi felhasználási eset feltérképezéséből származott.
Prototípus
Figmában tervezve. HTML/CSS/JS-ben építve.
A prototípus egy kódolt frontend — nem Figma click-through. Az összes képernyő vanilla HTML és CSS-ben épült, az interakciók JavaScripttel kezelve. Nincsenek frameworkök. Gittel verziókövetve, GitHub Pagesen deployolva.
Miért kódolva, nem Figma prototípusként
Egy kódolt prototípus megmutat valamit, amit egy Figma fájl soha nem tud — hogy a design valóban működik a böngészőben, hogy a térközök helyesen tartanak valódi pixelsűrűségen, hogy az interakciók jól érzetődnek, ha valódi ujjakkal használod. Emellett közvetlenül demonstrálja a frontend tudást a design tudás mellett.
Reflexió
Mit tanultam. Mi következik.
A bolti jegyzet volt a felismerés, ami mindent feloldott.
Eredetileg a Pantry csak egy okosabb bevásárlólista volt. A bolti jegyzet funkció egy valódi pillanatból jött — egy részletes hangüzenet küldéséből arról, hogy pontosan melyik terméket vegye meg és hol találja. Ez az információ megérdemelte, hogy állandóan a termékben éljen, ne tűnjön el egy chatben. Ahogy ez a funkció létrejött, az egész terméknek értelme lett. A közös háztartási tudásról kezdett szólni, nem csak a közös listákról.
Brief először, Figma utána.
A teljes projekt brief megírása a Figma megnyitása előtt tisztaságot kényszerített ki a kreativitás előtt. Minden képernyőnek volt indoka létezni, mielőtt layouttá vált volna. Mostanra így kezdek minden projektet.
A sötét és meleg nehezebb, mint amilyennek tűnik.
Egy sötét UI-t inkább otthonosnak, mint klinikainak megalkotni több iterációt igényelt, mint vártam. Az accent szín több verzión ment keresztül. A korai iterációk fintech appnak tűntek. A Fraunces volt az a tipográfiai döntés, ami végül helyén tette — a melegség legalább annyira jön a betűválasztásból, mint a színekből.
Claude Design mint folyamat eszköz.
A Claude Design használata a design rendszer építésének felgyorsítására valóban hasznos volt — generált egy erős kiindulópontot, amit aztán Figmában finomítottam, igazítottam és magamévá tettem. Ez egy eszköz, nem a döntések helyettesítője. Minden szín, minden betűválasztás, minden komponens döntést igényelt. Csak azt jelentette, hogy ezt a döntést a megfelelő dolgokra tudtam fordítani gyorsabban.
Hogyan néz ki a 2. fázis.
Recept javaslatok a kamra tartalma alapján — a funkció, amit mindenki először kérdez, ami pontosan azért nincs az v1-ben. Még: vonalkódolvasás gyorsabb tételnaplózáshoz, és okos felhasználási idő becslés kategóriánként, hogy ne kelljen minden alkalommal manuálisan beállítani.
Mit változtatna egy valódi ügyfél.
Egy valódi Sophia és Joe-nak olyan véleményei lennének, amikhez nincs hozzáférésem. Lehet, hogy nem érdekelnék őket az ismétlődő tételek. Lehet, hogy a kezdőlapot túl sűrűnek találnák. Ez egy design hipotézis, nem validált termék. A következő lépés a használhatósági tesztelés valódi párokkal — és arra számítok, hogy a feltételezéseim legalább fele érdekes módon téved.