Ürün Tasarımcısı

Ripe

Tazeyken ye.

Buzdolabına hafıza kazandıran bir iPhone uygulaması. Bir ürünü, fişi ya da tarih etiketini tarat; Ripe listeyi tutar, önce neyi tüketmen gerektiğini söyler ve çöpe gitmeden ona bir tarif bulur.

Ripe yazısı ve dört durum pill’inin yanında, koyu bir rafın üstünde dik duran iki telefonda buzdolabı özeti ve ürün detayı

Genel Bakış

Attığımız yemeğin çoğu alındığında bozuk değildi. Buzdolabının arkasında, dün açtığımız poşetin ardında, okunamayacak kadar küçük basılmış bir tarihle bozuldu. Bunu çözmeye çalışan uygulamalar genelde her ürünü elle girmeni istiyor ve ilk haftadan sonra kimse bunu sürdürmüyor. Ripe işe kameradan başlıyor. Bir barkod, bir fiş ya da basılı bir tarih yetiyor; gerisini o hatırlıyor: dolapta ne var, önce ne bozulur, bu akşam tam olarak bunlarla ne pişirebilirsin.

Rol
Ürün Tasarımı, UX/UI
Kapsam
iOS için ekranlar
Araçlar
Figma

Problem ve yaklaşım

Buzdolabı uygulamaları neden bırakılır

Sıradan buzdolabı takipçisi, daha sevimli bir yazı tipiyle yazılmış bir tablo. Eve on iki şeyle geliyorsun, uygulama on iki isim ve on iki tarih istiyor, ikinci alışverişte bırakıyorsun. Liste bayatlıyor, hatırlatmalar çoktan yediğin yiyecekler için çalıyor ve uygulama hiç açmadığın bir klasörde sessizce yerini alıyor.

Diğer hata trafik ışığı. Kırmızı, sarı ve yeşil bir uyarı sistemi gibi duruyor; uygulamayı açmak azar işitmek gibi geliyor. İnsanlar buzdolabından not almak istemiyor. Ne pişireceklerini bilmek istiyorlar.

Tek döngü, dört durum

Ripe’ta her şey tek bir döngüye hizmet ediyor: tarat, onayla, hatırla, pişir. Yiyecek eklemek bir kamera ve bir dokunuş. Kamera barkodu, bütün fişi ya da basılı son tüketim tarihini okuyor; ne anladığını kontrol ediyorsun ve ürün tarihiyle birlikte dolaba giriyor. O andan sonra uygulama her şeyi dört durumdan birine koyuyor: bugün bitiyor, yakında bitiyor, taze, süresi geçmiş. Sabahları ilk ikisi için hatırlatıyor.

Hatırlatma uyarıda kalmıyor. Doğrudan, bitmeye yakın malzemelerini en çok kullanan tariflere götürüyor; böylece “ıspanak bozuluyor” cümlesinin cevabı bir angarya değil, bir akşam yemeği oluyor. Haftalık özet döngüyü tek bir sayıyla kapatıyor: aldığının ne kadarını gerçekten yedin.

Dört ilke kartı: renk değil derinlik, tek vurgu, önce sayılar, sessiz kalan cam
Her ekranın arkasındaki dört ilke.

Tasarım sistemi

Palet bir gösterge panelinden değil, mutfak tezgâhından geliyor: krem, taupe, ceviz ve espresso, tek bir karamel vurguyla. Kartlar ince bir parlama çizgisi ve sıcak bir gölgeyle beyaz cam. Ekranda saf beyaz ya da saf siyah yok; yiyecek fotoğrafları bu yüzden üstünde doğal duruyor.

Renkler

Altı ton ve hiç trafik ışığı yok. Aciliyeti derinlik taşıyor: bugün bitiyor dolu bir espresso pill, yakında bitiyor sıcak bir karamel tonu, taze sessiz, süresi geçmiş ise silik bir çerçeve. Tek bir etiket okumadan rafın durumunu görebiliyorsun.

Altı renk örneği, krem, cam, karamel, ceviz, taupe ve espresso, ve derinlikle gösterilen dört durum pill’i

Tipografi

Thin’den Semibold’a SF Pro. İlk ihtiyacın olan sayı, kalan gün, dolaptaki ürün, yenen yüzde, mutfağın öbür ucundan okunacak boyutta Thin ile yazılı. Başlıklar Light, gövde metni Regular, alt başlıklar geniş aralıklı küçük büyük harf Semibold.

Büyük sayı, başlık, bölüm, ad, gövde ve alt başlık boyutlarıyla SF Pro örneği

İkonlar

Lucide, 24 piksel, iki piksel çizgi, yuvarlak uçlar, espressoya boyanmış. Yiyecek ikonları kategorileri, çizgi ikonlar aksiyonları taşıyor; aynı ikon bir ürünü tarama sayfasından envantere ve tarif listesine kadar takip ediyor.

Ripe’ta kullanılan Lucide ikon seti, krem kutularda

Komponentler

Durum pill’leri, filtre chip’leri, üç ağırlıkta buton, ikon butonlar ve anahtarlar, ürün satırları, alan satırları, iki widget kutusu, tarif kartı ve ortasında yükselen artısıyla kavisli sekme çubuğu. Her biri bir kez kuruldu ve her ekranda tekrar ediyor; bir ürün nerede karşına çıksa aynı görünüyor.

Komponent sayfası: durum pill’leri, chip’ler, butonlar, ikon butonlar, anahtarlar, ürün satırları, alan satırları, widget kutuları, tarif kartı ve sekme çubuğu

Grid ve boşluk

20 puan kenar boşluklu 390 puanlık bir tuval ve 12 puanlık bir olukla iki kutuya bölünen tek bir 350 puanlık sütun. Boşluklar 8 puanlık bir ritimde ilerliyor, köşe yarıçapları ikon kutularında 12’den kartlarda 26’ya ve sekme çubuğunda 34’e çıkıyor. Cam tarifi de yazılı; sistemin tamamı tek bir sayfadan yeniden kurulabiliyor.

390 puanlık tuvalde yerleşim ızgarası, boşluk ölçeği, köşe yarıçapları, yazı boyutları ve cam tarifi

Ekranlar

Onboarding

Bir fotoğraf, bir söz ve bir gerçek kart. Uygulama daha bir şey istemeden, son tüketim tarihi ve Yakında bitiyor pill’iyle bir süt kutusu gösteriyor; Başla’ya dokunmadan Ripe’ın ne yaptığını biliyorsun.

Market fotoğrafı, yüzen ürün kartı ve Başla butonuyla Ripe onboarding ekranı

Buzdolabı özeti

Ana ekran önemli olan sayıyla açılıyor, dolapta kaç ürün var. Sonra dikkat gereken şeyler için iki kutu: koyu kutuda bugün biten üç ürün, açık kutuda yakında biten altı ürün. Tazelik çubuğu bütün dolabı tek bir çizgide gösteriyor; Önce tüket listesi de elini uzatacağın üç ürünü sıralıyor.

Ürün sayısı, iki widget kutusu, tazelik çubuğu ve Önce tüket listesiyle Ripe buzdolabı özeti

Tarama

Tek kamera ekranı, üç mod: Ürün, Fiş ve Tarih etiketi. Köşe işaretleri ürünü nereye tutacağını gösteriyor, okurken ince bir çizgi geçiyor ve barkod tanındığı anda adı ve onay işaretiyle koyu bir cam kart beliriyor; tarih o sırada hâlâ okunuyor.

Kamera vizörü, üç mod pill’i ve algılanan ürün kartıyla Ripe tarama ekranı

Bilgileri onayla

Fotoğraf üstte kalıyor, altından kameranın anladıklarıyla bir sayfa yükseliyor: ad, son tüketim tarihi, saklama yeri, adet ve hatırlatma. Her satır dokunulabilir; yanlış bir tarih doldurulacak bir form değil, tek dokunuşluk bir düzeltme.

Ürün fotoğrafının üstünde tarih, saklama, adet ve hatırlatma satırlarıyla Ripe onay sayfası

Envanter

Dolaptaki her şey duruma göre gruplanmış. Üstteki filtre chip’leri sayılarını taşıyor, alttaki gruplar da harekete geçmen gereken sırada gidiyor: bugün bitiyor, yakında bitiyor, taze, süresi geçmiş. Her yerde aynı ürün satırı: bir fotoğraf, bir ad, bir adet ve bir pill.

Filtre chip’leriyle bugün bitiyor, yakında bitiyor ve süresi geçmiş gruplarına ayrılmış Ripe envanteri

Ürün detayı

Ürün fotoğrafı ekranın üstünü alıyor, sonra tek bir sayı: iki gün kaldı. Satın aldığın günden son tüketim gününe uzanan bir zaman çizgisinde bugün işaretli; hesap yapmadan nerede olduğunu görüyorsun.

Kalan gün sayısı, zaman çizgisi ve hızlı aksiyonlarla Ripe ürün detayı ekranı

Hatırlatmalar

Sabah özeti tek bir koyu kart: bugün tüketilmesi gereken üç ürün fotoğraflarıyla sıralı, altında iki buton, Tarif bul ve Ertele. Onun altında program: günlük özet, tarihten iki gün önce bir dürtme ve isteğe bağlı haftalık özet.

Sabah özeti kartı ve hatırlatma programıyla Ripe hatırlatmalar ekranı

Tarif önerileri

Tarifler ekranı bir arama kutusuyla değil bir cümleyle açılıyor: bitmek üzere olanlarla pişir. Öne çıkan tarif bitmeye yakın üç malzemenin üçünü de kullanıyor ve bunu fotoğrafın üstünde söylüyor. Altında, ikisini kullananlar için daha küçük kartlar.

Öne çıkan tarif ve iki küçük tarif kartıyla Ripe tarif önerileri ekranı

Tarif detayı

Tam genişlikte bir fotoğraf, süre, porsiyon ve zorluk chip olarak, sonra asıl önemli kısım: dolabınla karşılaştırılmış malzeme listesi. Ispanak, yoğurt ve süt tarihiyle birlikte işaretli; un ve zeytinyağı kiler malzemesi olarak bekliyor.

Dolapla karşılaştırılmış malzeme listesiyle Ripe tarif detayı ekranı

Haftalık özet

Hafta için tek sayı: aldığının yüzde 86’sı yenmiş. Bir sütun grafiği günlere göre israfı gösteriyor, ağır gün espresso renginde; iki kutuda biriken para ve atılan ürün sayısı, kısa bir listede de sürekli tekrar edenler.

Yenen yüzde, sütun grafiği, iki kutu ve en çok israf listesiyle Ripe haftalık özeti

Dolaba eklendi

Sakin bir onay: büyük bir tik, tarihi ve durumuyla ürün kartı ve üç küçük sayı: dolaptaki ürün, bugün tüketilecek, tarif fikri. Ana buton Bir tane daha tarat, çünkü kimse eve tek bir şeyle gelmiyor.

Büyük tik, ürün kartı ve üç sayıyla Ripe dolaba eklendi onayı

Fiş sonuçları

Bir fiş, okunan yedi satır, altısı yiyecek. Her ürüne bir fotoğraf, bir ad ve dokunup değiştirebileceğin tahmini bir son tüketim tarihi; kâğıt havlu yiyecek değil diye tanınıyor ve işaretsiz kalıyor. Tek buton altısını ekliyor.

Tahmini tarihleriyle altı yiyecek ürününü listeleyen Ripe fiş sonuçları ekranı

Sonuç

Ripe bir konsept projesi. Fotoğraflar Unsplash’ten, ürünler ve tarihler uydurma, herhangi bir markayla ilgisi yok. Denemek istediğim şey şuydu: bir buzdolabı uygulaması dırdırcı bir tablo yerine sıcak bir mutfak aleti gibi hissettirebilir mi, ve trafik ışığının yerini tek başına derinlik alabilir mi.