Speaker Identification

PHONEXIA
UX / UI design
2019

Co se dělalo?

Webová aplikace, která jednoduše prezentuje technologii SID (identifikaci a verifikaci volajícího).

Aplikace má být intuitivní (vzhledem ke složitosti technologie) a jednoduchá na ovládání, odezvu a prezentaci výsledků.

Má role

Ideace spolu s developery, product ownerem, marketingem, obchodníky. Rapidní prototypování, design, testování a oponentura implementace.

Problém

Aktuální demo všech technologií fungovalo jen na systémech Windows a Linux. Existovala i jednoduchá varianta webového dema, které však byly vytýkány neduhy jako: neintuitivnost, design, zpětna odezva.

Prezentace však probíhají na různých místech a událostech. Výjimkou nejsou rauty a večírky s hlasitým okolím a okolnostmi s nároky na ovládání, aby bylo opravdu jednoduché.

Vyplynuly nám dva výchozí body:

  1. Aplikace bude optimalizována pro mobily a
  2. zvolíme přístup “jedna funkce na obrazovku”, aby ona jednoduchost byla zachována v rámci nezahlcování kognitivních funkcí.

 

Ideace

Začali jsme klasicky představením a upřesněním person a prostředí. Rozebrali si možnosti funkcí a domluvili se na postupu mobile-first. Díky kterému jsme se mohli soustředit opravdu jen na to podstatné a zároveň měli řešení pro stěžejní zařízení — mobil či tablet a zároveň plně funkční na desktopu.

Typické bylo neustálé zjednodušování a otázka “je tohle potřeba”? Tak jsme se dostali až na “dřeň” jen toho nutného.

Proces “diskuze — whiteboard/papír — iterativní design” se osvědčil.

Kroky při identifikaci a verifikaci
Kroky při identifikaci a verifikaci

Základem bylo načrtnutí user flow a zároveň scénáře, kdy se využije určitá technologie. Hledali jsme "úzká hrdla" — latenci, kvalitu prostředí, možnosti technologií.

Obrazovky
Obrazovky

Rozdělení na obrazovky s důležitými interakčními prvky.

Obrazovky
Obrazovky

Detailnější rozkreslení obrazovek. Soupis kroků / hlášek / typů uživatelů / ...

Zápisy z meetingů
Zápisy z meetingů

User screnarios, návrhy vizualizací časového progresu.

Zápisy z meetingů
Zápisy z meetingů

Zápisy z meetingů
Zápisy z meetingů

Řešení

Po několika iteracích jsme přes wireframový styl grafiky dospěli ke vzhledu definovaném Material Designem. Výsledkem je jednoduchá aplikace v Angularu. Komunikace probíhá přes několik API s potřebnými službami a téměř v reálném čase je možné vyhodnocovat volajícího.

Předání probíhalo exportem ze Sketche do Zeplinu.

Funkce > Forma
To bylo naše vodítko.

Prototyp pro mobil

Jakým problémům jsme čelili

Problémem číslo jedna byl čas. Termín byl zároveň pozitivní ve smyslu, že jsme se museli zaměřit opravdu jen na to důležité.

V průběhu práce se objevily další požadavky na zobrazení transkripce řeči aj. Iterativním cyklem jsme opět společně navrhli řešení.

Přínos pro klienta, zákazníky & business

V prvním kroku vždy klient představuje zákazníkům SID demo a ti jej pak mohou dále používat. Pokud by si někdo (obchodník i zákazník) měl pamatovat postupy nebo číst návod, tak by řešení nefungovalo.

V našem případě aplikaci může používat i laik a přesto vidí, že získává správný výsledek s velice nízkou časovou prodlevou.

Aplikace splňuje vše požadované pro demonstraci technologie a její jednoduché používání.

Co projekt přinesl mě

Rychlý a iterativní přístup, kde jsou ihned vidět výsledky a je možné chyby opravit v počátku je zásadní.

Je důležité být v úzkém kontaktu se všemi zúčastněnými a neustále své postupy validovat.

Časový rámec s brzkým termínem nemusí být na škodu, pokud “vidíme” na konec projektu a v rámci možností pracujeme s časovou rezervou.

↰ zpět na výpis projektů