Zlaté odstíny a funkce organizátoru: návrh rozhraní pro svatební tržiště

O vizi funkčního tržiště, změně firemní identity zákazníka během práce a designu „online deníku“ pro celý cyklus přípravy na svatbu case Případ Uprising, designové a vývojové studio

Svatba je jedním z nejkrásnějších, slavnostních a nejdůležitějších dnů v životě mnoha lidí. Ale stejně krásná, jak je nakonec, je stejně složitá v organizaci. Je třeba vzít v úvahu mnoho faktorů, od výběru oblečení, dodavatelů a uspořádání sedadel pro hosty až po minutovou správu času a přidělování rozpočtu.

Pro zmírnění všech těžkostí a vytvoření příznivé tvůrčí atmosféry přípravy byl vytvořen projekt, na kterém jsme pracovali – svatební krabička. Jeho tvůrci plánovali uspořádat takový online prostor, kde by novomanželé mohli nejen najít kvalitní dodavatele pro svatbu, ale také použít web jako plnohodnotného organizátora svatby, který zohledňuje všechny aspekty nadcházející oslavy.

Dáno

V době, kdy nás kontaktoval, měl zákazník knihu značek a MVP projektu – vstupní stránku na Tildě.

Zpočátku projekt nevypadal masivně ani komplexně designově. Po několika iteracích komunikace se zákazníkem a vytvoření obecné vize pro budoucí web jsme si však uvědomili, že práce bude mnohem hlubší a zajímavější, než se na první pohled zdálo.

Úkol

Vytvořit designové rozhraní velkého svatebního projektu, který zahrnuje tržiště dodavatelů, proces interakce mezi novomanželi a dodavateli a také „online organizátor“ pro přípravu oslavy.

Řešení

V článku zmíníme několik webů a dalších materiálů, které by vás mohly zajímat, a případně se stanou odkazy na budoucí projekty, proto jsme všechny odkazy pro větší pohodlí shromáždili do jednoho podváděcího listu.

Svatební krabička Jako asistent přípravy na jeden z nejjasnějších, něžnějších a dojímavějších dní se nám okamžitě představil jako lehký, lehký a vzdušný. Stávající kniha o značce nás však trochu překvapila – používala tmavé, ponuré a „zemité“ odstíny, které vypadaly nejen z naší představy o budoucím webu, ale také z moderních trendů.

Měli jsme velké štěstí na naše zákazníky a během diskuse o dalších krocích jsme se dohodli, že nabídneme naše vizuální řešení, která by byla bližší mladému, převážně ženskému publiku.

Za hlavní referenci jsme považovali Bridestory (1) ve staré verzi (nedávno prošli rebrandingem). Barevná řešení byla inspirována některými šablonami webů – stejně jako náš projekt, vytvořený primárně pro ženy (na obrázcích níže). Výsledkem bylo, že hlavní finální odstíny byly zlato jako jeden z tradičních svatebních odstínů, béžové, bílé a trochu zelené pro svěžest.

Rovněž byla použita široká škála inspiračních zdrojů, které, zdá se, nemají vůbec nic společného se svatební tématikou. Například pro tvorbu infografiky byl velmi užitečný vývoj Maxima Podolského – Leaf (2). Základem pro koncepční uspořádání místa konání a usazení hostů byla infografika Politico o prezidentských volbách v roce 2020 (3) ve Spojených státech. Bublání, minimalismus a maketa prezentace byly inspirovány sadou UI Motion (4). A Preply (5) se opět stal příkladem vysoce kvalitního moderního trhu založeného na volbě poskytovatelů služeb.

Obecné stránky

Domovská stránka

Hlavní stránka je klasický posuvník, který se skládá z první obrazovky, která vede osobu podle struktury webu, a části níže, která vypráví o výhodách používání služby. Nejdůležitějším detailem zde bylo další oddělení uživatelských scénářů – pro ty, kteří poskytují služby, existuje stránka „Dodavatelé“, pro novomanžele – „Klienti“. To umožňuje nemíchat informační bloky pro různé skupiny uživatelů na jedné stránce a zaměřit pozornost uživatele pouze na informace, které potřebuje.

Tržiště

S touto částí webu jsme zacházeli obzvláště opatrně, protože ve své podstatě je to jeden z hlavních způsobů interakce mezi dodavateli a zákazníky. Karta dodavatele byla pečlivě promyšlena nejen z hlediska designu, ale také z hlediska plnění obsahu; bylo pro nás důležité, abychom na kartě uvedli přesně ty informace, které by nám umožnily již vybrat ve fázi prohlížení stránek tržiště.

Provedli jsme malou studii, spojili jsme její výsledky s našimi zkušenostmi – mnoho našich zaměstnanců již prošlo fází přípravy svateb a jsou obecně obeznámeni s trhem akcí – a uvědomili jsme si, že pokud jde o přípravu na svatební den pro novomanžele, služby od dodavatele jsou důležité, ale také porozumění, přijetí jejich vize oslavy a její podpora. Proto jsou nejdůležitější podrobnosti:

personalizace – na kartu jsme přidali nikoli název společnosti, ale konkrétního zástupce se jménem a avatarem (více o tomto);
osobní interakce – karta nezobrazuje seznam služeb, ale odvolání dodavatele k novomanželům;
názor předchozích zákazníků – k tomu jsme na kartě umístili hodnocení dodavatele na recenze minulých případů.

Kategorie a filtry

< p> Zákazník nám okamžitě poskytl vývoj týkající se filtrů na trhu, jehož nejdůležitější koncepcí bylo rozdělení na:

kategorie (prsteny, stylisté, choreografové, catering, dekoratéři, místa atd.); filtry v konkrétní kategorii.
filtrování v konkrétní kategorii.

< p> Tuto důležitou zásadu jsme vzali v úvahu při návrhu rozhraní seskupením tematických kategorií do samostatných bloků, abychom uživatelům usnadnili navigaci.

Do seznamu byla přidána také řada pozoruhodných bodů panel filtru:

web automaticky určuje geografickou polohu uživatele a zobrazuje nejen město, ale také IP;
každý parametr zobrazuje skutečný počet dodavatelů (v šedých číslech);
dodržoval koncept minimalismu, takže místo těžkých zaškrtávacích políček nebo odrážek – lehká zaškrtnutí;
dva parametry – „Pouze s recenzemi“ a „Pouze s akcemi a slevami“.

O avatarech

V designu „Svatební krabice“ vypadají všechny avatary reprezentativně: stejný úhel, osvětlení, tonalita. Ale toto je design. A položili jsme si otázku: je možné vytvořit funkčnost, která by řídila kvalitu nahraných fotografií a poskytovala rady? Ano.

Podle našeho záměru se předpokládá, že web může určit kvalitu nahrané portrétové fotografie podle tří kritérií:

úhel;
expozice (jas a ISO);
obsazenost prostoru (vizuální váha).

Rovněž se předpokládá, že každá nahraná fotografie, která splňuje kritéria, bude automaticky oříznuta webem, čímž se odstraní pozadí. Taková technologie již existuje: služba Remove.bg (6), která poskytuje API.

Při vytváření tohoto konceptu jsme se řídili skutečností, že fotografie osoby je stejným produktem prodeje a zapojení jako biografie, komerční návrh a profesionální úspěchy. Na libovolném webu hrají avatary stejnou roli jako fotografie v kvalitním životopisu.

Pro dodavatele

Stránka s podrobnostmi dodavatele

Nejdůležitějším úkolem zde bylo správně prezentovat velké množství informací – strukturovaným, logickým a konzistentním způsobem. Strávili jsme spoustu času studiem referencí pro odesílání velkých objemů materiálu a v konečném výsledku jsme se hodně spoléhali na šablonu organizační karty v Yandex.Services (7).

Také jsme pochopili, že novomanželé v přípravě budou studovat desítky a stovky stránek dodavatelů. Díky této myšlence vznikla myšlenka udělat krátké shrnutí hlavních indikátorů, pomocí kterých mohou zákazníci analyzovat, porovnávat a vybrat si nejvhodnějšího poskytovatele služeb pro sebe.

osobní účet dodavatele

Modelovali jsme nejen pohodlný nástroj pro zpracování příchozích požadavků, ale také personalizovaný řídicí panel s aktuálními statistikami. Dodavatel může kdykoli kontaktovat svůj osobní účet a analyzovat kvalitu práce – počet a množství objednávek z tržiště, reakci na propagační nabídky – a dokonce vypočítat předpokládané výnosy na základě přítomnosti nebo nepřítomnosti objednávek v aktuálním čase.

Struktura kanceláře je promyšlená tak, že se vždy zaměřuje na oznámení o změnách v objednávce, včetně organizačních záležitostí a provádění plateb. Pro větší pohodlí jsme přidali stupnici připravenosti objednávky, aby dodavatel mohl správně rozdělit své úsilí a čas.

pro novomanžele

osobní účet zákazníka

V procesu vytváření rozvržení osobního účtu klienta jsme analyzovali mnohokrát tematicky podobné služby a představovali si sebe na místě novomanželů , přemýšlet o tom, jaké funkce by byly opravdu pohodlné a užitečné pro přípravu. Takže z místa, kde se ukládají informace o dodavatelích a všech odeslaných požadavcích, vyrostl velký koncept integrovaného „organizátora“, včetně:

rozpočet a počítadlo výdajů – všechny placené služby dodavatelů byly automaticky odečteny z přiřazeného rozpočtu; další výdaje lze navíc zadat ručně a kontrolovat tak celkový peněžní tok;
kontrolní seznamy a plánovač – skutečný online deník se schopností označovat nejnaléhavější úkoly vytvořený pro kompetentní správu času, úsilí a rozdělení odpovědností;
funkce sezení – k tomu jsme vytvořili abstraktní „tabulky“ „kde můžete přidat počet hostů rovný skutečné kapacitě stolů na oslavě;
generování pozvánek – vytvoření jednoduchého návrháře pozvánky a možnost zjistit, zda host potvrdil svou přítomnost na oslava.

<3>>Novomanželé si vyberou dodavatele, určitý počet služeb a odešlou objednávku. Prodejce ji obdrží a buď ji přijme tak, jak je, nebo odešle navrhované revize zpět. A tak dále, dokud se vize obou stran neshoduje. Výsledkem je, že zákazník nemusí trávit čas budováním komunikace s mnoha lidmi a můžete si také kdykoli prohlédnout celou historii změn a možnosti objednávání.

Práce s vlastními skripty

Jedinečnost práce na projektu spočívá v podrobném studiu celého informačního pole. Řídili jsme se „domino principem“: chyba v jednom parametru může vyvolat řetězovou reakci a zničit logiku celé informační struktury. Názorným příkladem přísného dodržování tohoto principu je rozložení aplikačních karet v osobním účtu klienta a osobního účtu dodavatele – a úplný vztah mezi nimi. Zvažme jednu ze situací scénáře: události z 10. listopadu 2020, Út:

v 10:27 moskevského času (ráno) dodavatel přijal žádost a připravuje plánovaný rozpočet na odeslání;
v 10:35 moskevského času (ráno) klient vidí návrh dodavatele a připraví schválit to;
22:26 moskevského času (večer) klient schválí rozpočet, dodavatel to uvidí a připraví se na to, že klient zaplatí zálohu.

Pouze tyto tři události již významně mění uspořádání logiky obsahu: změna infografiky pokroku, změna tipů, obsah řady tlačítek a změny informátorů – což zase ovlivní další stránky vytvořeného designu.

Přemýšleli jsme o desítkách takových událostí.

Zkontrolovat

nejen návrh rozhraní

připravili pro zákazníka mnoho referencí a doporučení, obhájili svoji vizi designového řešení projektu;
práce na projektu probíhaly ve formátu lean design. Pochopili jsme, že k vnímání konceptu a vzhledu určitých přání zákazníka dojde, jakmile dojde k vizualizaci;
zpracovali jsme možné chyby v nesrovnalostech mezi designem a jeho implementací – například jsme navrhlo použít speciální službu ke sjednocení všech uživatelských avatarů;
pečlivě jsme vypracovali strukturu rubrik a filtrů pro nejvhodnější interakci uživatele s webem;
z vlastní iniciativy , podrobně jsme prošli celým informačním polem a přemýšleli o desítkách možných událostí a jejich dopadu na další stránky vytvářeného designu.

Poznámka. Uvnitř v rámci tohoto projektu jsme pracovali pouze na designových dispozicích a koncepčních řešeních. Po dokončení práce byla rozvržení přenesena na vývojáře klienta a další implementace proběhla mimo naši kontrolu.

Máte zájem o podobný design?

Další práce