Rádi dostáváme dopisy vděčných kupců, kteří vyřešili své problémy pomocí našich šablon pro Figmu.
Nedávno přišel další dopis od nedávného klienta – nezávislého designéra z Indie, Narendra Ram. S pomocí naší sady uživatelského rozhraní Material-X dosáhl vysoce kvalitního a profesionálního redesignu osobního účtu online obchodu GTrendz.
Proč byla tato investice dobrá? Jaké jsou výhody velryb uživatelského rozhraní? Je to jednoduché – sady jako Material-X umožňují návrhářům, vývojářům a celým společnostem vytvářet v krátké době pohodlné, užitečné a vizuálně poutavé návrhy aplikací a webových stránek. Výsledkem je, že nemusíte trávit čas kreslení komponent, protože již máte sadu uživatelského rozhraní, která vám umožňuje vytvářet a vyvíjet skvělé návrhy z hotových.
Narendra pracuje jako nezávislý designér od roku 2020. Má zkušenosti jako programátor, rád také píše texty, s kamarádem má dokonce vlastní internetovou společnost, která se specializuje na tvorbu webových produktů. Ale jeho hlavní vášní je design. Realizuje se jako návrhář full-stacku a rád vytváří oba grafické prvky a prodává je online, stejně jako nezávislý designér UX/UI.
Podrobnosti projektu
Projekt na kterém se podílel Narendra, webová platforma e-commerce platformy GTrendz od mnoha dodavatelů. Je to největší online obchod s obuví a doplňky v Indii.
Domovská stránka a stránky produktů vypadaly dobře, ale na palubní desce prodejce bylo spousta přání. Design uživatelského rozhraní postrádal estetiku a použitelnost. Požadavkem zákazníka je, aby uživatelské rozhraní osobního účtu bylo pohodlnější, moderní, harmonické a intuitivní.
„Práce na existujícím projektu, když zdědíte něčí práci, není snadná věc. Redesign vyžaduje od návrháře odpovědnost, znalosti, výzkum a analýzu,“ sdílí Narendra své dojmy.
Fáze UX
Hlavním problémem uživatelů bylo, že na panelu prodejce nebyl dostatek volného místa, osobní účet byl přetížen různými prvky. Narendra potřebovala přidat více prostoru do panelů a učinit design elegantnějším a použitelnějším.
Po shromáždění zpětné vazby od uživatelů/prodejců GTrendz shrnul a vytvořil afinitní diagram. Poté byly vytvořeny drátové modely lo-fi budoucích obrazovek.
Fáze uživatelského rozhraní
Narendra už měla zkušenosti s vytvářením dashboardů, ale trvalo to hodně času.
„Nevěděl jsem o existenci UI velryb. Při procházení Dribbble jsem objevil soupravu Material-X UI od Setproduct. Komponenty byly esteticky příjemné. Byly seskupeny a uspořádány tak, aby je designér mohl snadno a přirozeně používat. Netrvalo dlouho, hned jsem si je koupil, “říká Narendra.
Jedním z hlavních úkolů ve fázi uživatelského rozhraní bylo sledovat myšlenky konzistence barev, podrobností rozvržení a výběru vzoru.
Narendra vyvinula 10 obrazovek s různými funkcemi:
- Úvodní stránka stránky prodejce
- Ovládací panel
- Objednávky
- Produkty
- Inventář
- Výdělky
- Doprava
- Přehledy
- Vrácení
< li> Profil stránky
Také provedl malé testování použitelnosti u stávajících uživatelů, kterým se nový design opravdu líbil.
Zákazníka potěšil také nový vzhled ovládacího panelu prodejce. Vedení GTrendz vysoce ocenilo celkové řešení stylů, tlačítek a ikon (které již bylo předem navrženo), vzory a další podrobnosti.
Přepracovat výsledky
Boční panel byl zúžen – nyní je v osobním účtu více místa. Podkategorie byly přesunuty do hlavní části osobního účtu ve formě panelu karet nebo tlačítek, což uživatelům poskytuje větší flexibilitu. A celkový design je vizuálně mnohem hezčí a elegantnější.
Rozebereme to:
Obrazovka řídicího panelu
Klíčové pruhy průběhu v řídicím panelu byly zvětšeny na zaměřit pozornost uživatele na nejdůležitější metriky.
Zde jsme použili hotové komponenty „Metriky“ a „Karty“, které byly pro potřeby projektu jen mírně pozměněny.
obrazovka objednávek
ID objednávky optimalizováno. Díky komponentě „Segmenty“ můžete snadno přepínat mezi podkategoriemi objednávek (nová, objednaná, doručená a zrušená). Používají se také komponenty „Karty“, „Knoflíky“ (v různých variantách) a rozbalovací nabídky – díky nim obsah nepřetéká přes obrazovku a je lépe vnímatelný. Tlačítka jako „Tisk faktury“ a „Tisk štítku dodávky“ jsou ale seskupena pod tlačítkem „Nastavení“.
Obrazovka „Produkty“
V kategorii produktů jsou prvky, jako jsou vstupy, tlačítka, přepínací přepínač atd. byly nahrazeny komponentami Material-X (plus přidán Datagrid, který umožňuje prohlížet a filtrovat produkty). Díky nim se výrazně zjednodušil proces vytváření formulářů, jako jsou „Varianty velikosti“ nebo „Drag & Drop Images“. Velkým rozhodnutím designéra bylo také snížit počet barev (původně měla tlačítka na obrazovce 5 různých barevných variací).
Výdělky
byly tyto obrazovky promítnuty „Karty“, „Statistické pruhy“, „Segmenty“ (můžete přepnout na Výplaty a výdělky), ikony a tlačítka. Přidána byla také velmi flexibilní tabulka „Datagrid“, která nyní zobrazuje nejrůznější informace (datum, platební metodu, ID transakce, zůstatek atd.).
Obrazovka profilu
Dříve byla tato stránka pouze prostý text. Po přepracování se stránka profilu stala interaktivnější díky přidání vstupů, formulářů, tlačítek a rozbalovacích nabídek. Návrhář zabalil formuláře do těchto rozevíracích seznamů, kde jsou uloženy podrobné informace.
Obrazovka „Zprávy“
Tabulka kategorií „Zprávy“ byla aktualizována pomocí rozbalovacích nabídek a komponenty Datagrid. Prostřednictvím aktualizované tabulky autor přidal několik dalších kategorií a v rozevíracích nabídkách najdete podrobnější informace o produktu. Uživatelské rozhraní bylo také vylepšeno o obrázky obuvi a přidání prostoru, aby uživatelskému rozhraní dodalo nádech elegance.
Obrazovka inventáře
Tato obrazovka je vybavena následujícími prvky z Material-X: Datagrid, čítače, tlačítka atd. Inventarizační tabulka byla aktualizována a vzhledem k kompetentnější struktuře prvků vypadá organičtěji. Všechna data pro konkrétní produkt jsou nyní v samostatném překryvném okně, kde se hodí čítače a tlačítka.
Prototypování a vývoj
Narendra spojila všechny základní funkce obrazovek a vytvořila minimální prototyp.
Poté předal svou práci vývojářům společnosti. Zde se můžete podívat na video, jak prototyp funguje.
Klíčové možnosti od návrháře
Narendra poznamenává, že Material-X má vše, co každý návrhář potřebuje.
Vytvořil vlastní komponenty výběrem několika různých prvků, jejich demontáží a vytvořením nových komponent potřebných pro projekt.
Ukázalo se, že skryté prvky uživatelského rozhraní uvnitř komponenty jsou velmi užitečné a pohodlné. Díky této vlastnosti byla komponenta transformována do jiné verze s novou funkcí/možností. Ten chlap měl rád takové jemnosti a ohleduplnost.
„Material-X“ je první sada uživatelského rozhraní, kterou jsem kdy koupil. A stálo to za to! Je škálovatelný, transformovatelný a esteticky příjemný. Počet komponent je enormní. Můžete vidět, jak Setproduct myslel na všechny možné požadavky a scénáře. Co dalšího potřebuje designér? “
Narendra Ram Návrhář na volné noze
Závěr
Pro Narendru to byl velmi zajímavý projekt. Zkušenosti, kterými se můžete ve svém portfoliu pochlubit. způsob, jakým lze jeho prezentaci na tomto projektu posoudit na jeho stránce v Behance.
Z naší strany si chceme povšimnout hodnoty, kterou velryby uživatelského rozhraní poskytují: s minimální investicí do týmu, návrháři a vývojáři šetří čas a zdroje rychlým plněním objednávek zákazníků z hotových komponent; nebo mnohokrát rychleji vydejte své vlastní aplikace.
Nebuďte hloupí – kupte si sadu uživatelského rozhraní 😉
