Kompletní grafický návrh webu
FINfárium
UX/UI design & uživatelský výzkum
Webová prezentace specializující se na prodej lekcí a kurzů mermaidingu pro děti. Díky případové studii jsme důkladně identifikovali potřeby zákazníků a následně vytvořili uživatelsky přívětivé a responzivní prostředí.
Úvod
Role
- Interaction (IxD) Designer
- User Experience (UX) Designer
- User Interface (UI) Designer
Výstupy
- Generativní výzkum
- Komparativní analýza
- Dotazníkový průzkum
- Site mapa
- Personas, User Journey map
- UI kit
- Low-fidelity wireframes
- High-fidelity mockupy and prototypy
- Usability testy and zjištění
Specifika projektu
Doba trvání: 9 týdnů
Nástroje:
-
-
-
- Figma
- Miro
- Canva
- Photoshop
- WordPress
-
-
Původní webová prezentace FINfárium
Návrh postupu a metodologie
- Projekt je high priority/ unexplored
- Nutnost provést foundation research.
- Zaměřit se na uživatele (user-centric).
- Tímto zaměřením se dozvíme o pain points a potřebách uživatele.
- Provede se generativní/foundation výzkum, který bude podpořen evaluativním výzkumem.
- Kompetitivní audit konkurence – příležitosti?
- Empathy map, persona, pain points, user story, user journey
- User flow, story board, how might we, crazy 8 cvičení,
- Informační architektura, wireframy, obsah, prototypy
- Tvorba design konceptů
- Testování a evaluace
O projektu
Webová prezentace je vytvářena pro společnost FINfárium, která prodává kurzy plavání pro děti s ocasní ploutví. FINfárium je plavecká „škola“ zaměřená na zábavnou vodní aktivitu mermaiding neboli plavání s ploutví.
Aktivity jsou pořádané především pro děti, z nichž 90 % jsou dívky ve věku 8 až 15 let. Hlavním decision-makerem pro koupi služby je rodič dítěte. Dítě je pak uživatel služby.
Díky uživatelskému výzkumu lépe porozumí motivacím zákazníků v procesu objednávání lekcí/kurzů mermaidingu, o čem přemýšlejí, jaké mají obavy a jakým překážkám čelí během procesu, a to jak na webu, tak i mimo něj.
Cíl projektu
Jedním z hlavních cílů bylo nahradit stávající webové stránky a provést jejich redesign.
Mezi další cíle patří:
- Implementovat mobilní responzivní design, který by uživatelům umožnil snadné zobrazení na různých zařízeních.
- Objevení současných motivací/rozhodování zákazníků v procesu objednání lekcí/kurzů a jejich pocity z celkové zkušenosti, a to jak na webu, tak i mimo něj, za účelem vytvoření uživatelsky přívětivějšího webu.
- Zjistit více o aktuálních problémech, frustracích a překážkách uživatelů v objednávacím procesu a o tom, jak by ho oni sami zlepšili.
- Vyhodnotit, jak uživatelé aktuálně reagují na možnost objednat službu online na webu.
Výzkumný problém
Současný web není uživatelsky přívětivý a responzivní.
Webová stránka není dohledatelná v Googlu vyhledávači, což je jedna z příčin nízké návštěvnosti webových stránek.
Současný web není dostatečně zaměřen na cestu zákazníka a jeho informační struktura a rezervační systém neposkytují optimální řešení. Cílem je zjistit, zda je proces vyhledávání informací a objednávání služby snadný a pohodlný.
Výzvy
- Předchozí stránky bránily uživatelům v přístupu k potřebným informacím. Komplikovaná navigace způsobovala problémy a důležitý obsah byl obtížně dohledatelný.
- Webové stránky nevystihovaly brand klientova podnikání, nepředávaly tu správnou zprávu a byly vizuálně nepřitažlivé.
- Neresponzivní webová stránka. To vedlo k neefektivitě a v konečném důsledku to byli uživatelé webových stránek, kteří byli negativně ovlivněni.
- Nutnost vytvoření a převod stávajícího obsahu.
- Vytvoření a dodání grafických podkladů (fotografie, videa aj).
- Neujasněná strategie klienta.
- Omezené finanční prostředky.
Designový proces
Jednotlivé kroky, které vedly k dokončení studie.
Empatie
Definování
Ideate
Prototypování
Testování
Porozumění uživatelům
- Uživatelský výzkum
- Persona
- User journey maps
- User flow
- Story Board
- IA – card sorting
- Výstupy a zjištění
Výzkum
Výzkum jsem začala analýzou konkurence, abych porozuměla přístupům dalších prodejců služby mermaidingového plavání. Na základě detailního rozhovoru s klientem jsme projednali strategii podnikání a identifikovali jeho silné a slabé stránky. Na základě toho jsem vytvořila SWOT analýzu.
Prostřednictvím dotazníků jsem získala vhled do toho, jaké informace jsou pro uživatele klíčové a co je pro ně nejdůležitější. Jaké jsou jejich motivace a tzv. “pain points” aneb překážky, kterým čelí během rezervování lekce.
Persona
Hlavním publikem jsou ženy, které představují hlavní zákazníky nakupující mermaidingové lekce pro své děti.
Persona, která byla vytvořena, je založena na kvantitativních a kvalitativních údajích získaných z uživatelského průzkumu a rozhovorů.
User Journey map
Při tvorbě mapy uživatelské cesty pro naši cílovou skupinu a identifikaci typických činností jsem odhalila klíčové emocionální aspekty, na které by společnost FINfárium měla klást zvláštní důraz. Těmito emocemi mohou být například pocity nejistoty a frustrace, které mohou jednotlivci prožívat během procesu objednávání lekcí nebo kurzů.
User flow
Navrhování uživatelského toku (user flow) se odvíjí od Problem statementu: „Anna je pracující matka a manželka, která by chtěla rychle a jednoduše zakoupit lekci pro své děti, aby nemusela čekat na zaslání faktury po e-mailu.“
Na základě těchto informací jsem vytvořila uživatelský tok/User flow, který detailně popisuje rozložení jednotlivých sekcí a prvků na webu.
Story Board
Big picture storyboard = zaměřuje se na User experience.
Close-up picture storyboard = zaměřuje se na produkt.
Jedná se o soubor šesti obrázků, které slouží k vizuálnímu popisu a vysvětlení uživatelského zážitku s naším produktem. V našem příběhu pracuji se čtyřmi klíčovými prvky:
1. Charakter: Uživatel, který představuje typického zákazníka.
2. Scéna: Scéna mi pomáhá představit si prostředí, ve kterém se náš uživatel nachází a kde interaguje s naším produktem.
3. Zápletka: V této části příběhu prezentuji řešení. Zaměřuji se na to, co produkt umožňuje a jaké problémy řeší.
4. Příběh: Představení designového řešení, jež reaguje na potřebu nebo problém uživatele.
Informační architektura – card sorting
Tato metoda mi umožnila zapojit samotné uživatele do procesu třídění a návrhu obsahu na webových stránkách. Během této aktivity mohli uživatelé sami roztřídit kartičky obsahu do předem definovaných kategorií. Pro provedení card sorting jsem využila aplikaci optimapworkshop.com. Tímto způsobem jsem získala cennou zpětnou vazbu od samotných uživatelů, což mi pomohlo optimalizovat strukturu a uspořádání webových stránek tak, aby lépe vyhovovaly jejich potřebám a očekáváním.
Obrázek vpravo zobrazuje nejoblíbenější skupiny podle skóre umístění karet. Tato tabulka ukazuje procento Vašich účastníků, kteří zařadili jednotlivé karty do odpovídající kategorie:
Výstupy & zjištění
Zákazníci vyjádřili přání mít jednotný rezervační systém, který by je provedl od výběru místa a času lekce/kurzu až po dokončení objednávky a zakoupení služby.
Pro zákazníky byla klíčová schopnost filtrovat lekce a kurzy podle místa.
Zákazníkům chyběly určité informace o průběhu lekcí/kurzů na webových stránkách. Rozložení informací na webu bylo chaotické a nepřehledné.
Po odeslání objednávky prostřednictvím objednávkového formuláře měli zákazníci pochybnosti. Dlouho čekali na zaslání faktury, kterou potřebovali k provedení platby za lekci/kurz. Rovněž si nebyli jisti, zda mají místo na lekci zarezervované.
Chybějící nebo nedostatečné informace na webu vyvolávaly nedůvěru vůči samotné službě.
Webovým stránkám chyběla responzivita.
Digital wireframes
mobile first a desktopová verze
Z důvodu omezeného času jsem přešla přímo ze skicování na high-fidelity prototypy ve stupních šedi. Tento černobílý přístup mi pomohl odhalit problémy týkající se měřítka a informační hierarchie. Návrh s důrazem na mobilní zařízení v tomto režimu mi pomohl rozhodnout se, které prvky mohou být z hlediska prostoru sekundární.
Vyjasnění vizuálního designu
Klient již disponoval svou vlastní vizuální identitou, kterou využíval napříč všemi komunikačními kanály. Tam, kde to bylo vhodné, jsem stavěla na této existující vizuální identitě, s níž se stávající zákazníci ztotožňují. Sem spadalo logo, některé fonty, barevná paleta a fotografie.
Nutností bylo rozšířit vizuální identitu o další prvky, které měly klíčový význam pro úspěch tohoto projektu. Zvláštní pozornost byla věnována hierarchii a jasné definici jednotlivých prvků, tvaru tlačítek a ikon.
Nově navržená UK kit tak doplňuje stávající vizuální identitu.
High-fidelity prototyp
Mockups
Grafický návrh
Řešení
Moderní a vizuálně přitažlivé nové webové stránky FINfária vystihují samotného ducha společnosti a její hodnoty. Vycházejí vstříc potřebám svého publika.
Mobilní, responzivní rozhraní, které funguje ve všech prohlížečích a zařízeních.
Webová stránka byla vytvořena pomocí redakčního systému WordPress na základě klientových požadavků na vlastní správu obsahu. Po předání zakázky si web spravuje sám.
Společnost FINfárium bude sledovat vývoj po spuštění, aby mohla dále pracovat na zlepšení svých služeb. Po získání relevantních dat bude web otestován.
Další kroky
Shromáždění feedbacků od uživatelů, diskuze a sdílení svých zkušeností a poznatků.
Sledování, jak si web vede z pohledu SEO a pozice ve výsledcích vyhledávání na Google.
Provedení dalšího výzkumu (post-launch research) k ověření, zda jsme uspěli a zda byly problémy, se kterými se uživatelé setkali, efektivně řešeny. Podařilo se nám to?
Z důvodu nedostatečných finančních prostředků nebyl zaveden rezervační systém. Pro rezervaci lekcí byla zvolena možnost prostřednictvím rezervačního formuláře. V budoucnosti se počítá s implementací rezervačního systému s platební bránou.