Kullanıcının istediği ürünü seçip(yalnızca 1 adet ürün) bu ürün ile ilgili teklif alabileceği ve geçmiş tekliflerini görebileceği bir arayüz yapılması isteniyor.
Kullanıcıya sistemdeki ürünler yukarıdaki tasarımdaki gibi gösterilecek. İlgili ürünleri okumak için "products.json" dosyası kullanılacak. Bu dosya içerisindeki ürünler okunup tasarımdaki yerine yerleştirilecek. Bu işlem yapılırken products'ın sequence özelliğine göre sıralama yapılıp, kartlar bu sıraya göre kullanıcıya gösterilecek. Kullanıcı aynı anda tüm ürünleri göremeyeceği için ürünlerin gösterileceği component y ekseninde scrollable olmalı.
Kullanıcı ürünü seçtiğinde ilgili kartın rengi değişecek ve kartın sağ üstünde tik simgesi gözükecek.
Ürün seçiminden sonra kullanıcı mail adresini ve teklifle ilgili not girerek "Teklif İste" butonuna basacak.
Not: Ürün seçilmeden, mail adresi doğru bir şekilde doldurulmadan kullanıcı teklif alamayacak. Dolayısıyla "Teklif İste" butonuna tıkladığında kullanıcıya ilgili alanlar için uyarı verilecek.
Kullanıcı "Teklif İste" butonuna bastığında gerekli tüm alanlar doldurulmuş ise kullanıcıya yukarıdaki tasarımdaki gibi popup gösterilecek.
Kullanıcı tekliflerini istediği zaman "Teklifleri Görüntüle" butonuna bastığında görüntüleyebilecek. Burada görüntülenecek teklifler "offers.json" dosyası içerisindeki teklifler olacak. Görüntülenecek tekliflerin sıralaması, en yakın tarihli teklif en üstte yer alacak şekilde tarihe göre olacak.
Tekliflerin görüntüleneceği kartlar ilk örnekteki gibi(Midi Doğum Paketi - Beklemede) kapalı(collapse) bir şekilde yer alacak. Kullanıcı karta tıkladığında kart aşağıya doğru açılacak ve 2. örnekteki(Midi Doğum Paketi - Onaylandı) gibi gözükecek.
Yapılan bu tasarımlar kendi yorumunuza göre mobil cihazlar için de uyarlanmalı. Bu kısımda esnek davranabilirsiniz ancak önemli olanın kullanıcı deneyimi olduğunu unutmayalım.