Modernizace uživatelského rozhraní informačního systému

M&M holding

Klientův informační systém se vyvíjí od roku 2008. Za tu dobu se toho mnoho změnilo - webové technologie, koncová zařízení (tablety, mobily, obrovské monitory), změnila se i rozlišení...

Výzva

Změnil se také způsob práce a nároky uživatelů. Zvlášť mladší lidé, zvyklí třeba na ovládání Gmailu, si mohli připadat jako v retro systému. Oprávněně.

Na rozdíl od dnes běžných věcí nešlo

  • všude jednoduše filtrovat,
  • přetahovat soubory, řádky,
  • přizpůsobit výpisy jednotlivým uživatelům,
  • a desítky dalších drobností.

Navíc i na naší straně jsme se chtěli zbavit starších technologií (např. Zend, dnes už nepodporovaný, tím pádem i potenciálně rizikový z hlediska bezpečnosti).

Celkově nastal čas, kdy hodnota “hezkého prostředí a lepšího ovládání” už je vyšší, než hodnota nových reportů nebo funkcí.

M&M holding

M&M holding je významná česká realitní skupina s provizním obratem přes 1 miliardu korun. Poskytuje portfolio dobře propojených produktů a služeb spojených s nemovitostmi a bydlením. Od zprostředkování prodeje nemovitostí, přes jejich financování a pojištění, realitní investiční fondy a správu nemovitostí až po rekonstrukce a výstavbu bytů a bytových domů.

"Lidi nevědí co chtějí, dokud jim to neukážete."

Rychlý průzkum. Vzhledem k tomu, že klient neměl žádnou představu, tak jsme se vydali na nejbližší pobočku a hodinu si povídali se 4 obchodníky. A následně i s pokročilejšími uživateli - pracovníky centrály a IT oddělení.

Požadavky. Definovali jsme si základní principy nového GUI

  • Detail a editace je 1 obrazovka - uživatel může upravovat data rovnou tam, kde je vidí. Technicky vzato jde o formu inline editu, případně lightbox s více údaji, pokud na sobě mají závislost.
  • Pokročilé přizpůsobení - každý uživatel může používat evidenci trochu jinak: přidávat a odebírat sloupečky ve výpisu, měnit jejich šířku a pořadí, přidávat a schovávat filtrovací pole, uložit oblíbené filtry, měnit počet řádků výpisu.
  • Responzivita zobrazení na různých zařízeních - u informačního systému poměrně složitá věc, protože množství dat a ovládacích prvků je enormní.
  • Sjednocení vizuální podoby prvků - obecné prvky/funkce navrhnout tak, aby mohly být stejné u všech typů záznamů (např. stavy, dokumenty, časová osa, diskuze, historie záznamu atd.)

Skicování. Jako první jsme vzali modul dashboard, protože uživatelé jej dobře znají a dokonce jej mají rádi. Vytvořili jsme několik verzí toho, jak mohou být ovládací prvky uspořádány, a několik verzí grafiky. Přidali jsme i návrhy několika nových funkcí, které uživatelům pomohou změnit myšlení a přicházet i s futuristickými myšlenkami, např. grafy plnění osobního plánu na měsíc nebo notifikační centrum.

Technologie. Součástí změny byl také výběr vhodných front-endových technologií a nástrojů pro další dekádu vývoje systému. Zvolili jsme

  • JavaScript: Vue.JS (původně JQuery)
  • CSS: Tailwind - jako utility-first CSS framework (původně Zurb Foundation)
  • Šablony: Twig (původně Zend phtml)
  • Wireframing: Adobe XD - high-fidelity wireframes (původně Axure)

Proč právě tyto? Protože jsou responzivní - uživatel může ovládat aplikaci pomocí mobilního telefonu. Umožňují znovupoužitelnost - jednotlivé části systému půjdou rychle aplikovat do jiných modulů. Významně urychlují vývoj - nové moduly musí být rychle sestaveny a poté pouze vyladěny dle business logiky, tak aby byl uživatel co nejvíce spokojen. Bezpečnost - standardní ochrana proti útokům jako CSRF a XSS.

Pilot. Informační systém je hodně rozsáhlý (30+ modulů) a nešlo udělat všechno najednou. Zvolili jsme proto strategii “po rolích”. Vybrali jsme nejmenší divizi, která navíc v tu dobu žila investicemi a rozvojem, a předělali do nového kabátu 4 moduly, které tvořily jádro jejich práce. Zajistili jsme tak, že tito uživatelé po spuštění pracovali 80 % času v novém prostředí a jen občas se překliknuli do starého. Tím jsme měli hotový minimální produkt.

Implementace. Během 3 měsíců jsme převedli 90 % systému do nového kabátu. Všechny nové moduly se tvoří přesně na daný use-case a snaží se co nejvíce ušetřit čas uživateli. Co opravdu makléř musí zadat, co musí zadat centrála a jiné role.

Dodané služby

  • UX/UI design30%
  • Vývoj front-end70%

Technologie

Symfony
Maria DB
Vue.js
Docker
Jira
Zeit.now
Doctrine
Adobe XD
Node Js
Git
Composer
Bitbucket
Představení nového GUI na školení obchodníků

Jaký to mělo efekt

Uživatelé si na nové rozhraní rychle zvykli. Soudíme, neboť na technické podpoře se nekupily dotazy, jak něco funguje.

Všechny nové evidence začaly od té doby vznikat v novém konceptu. Jsme dále u toho a agilně připravujeme nové prvky a kvůli novým potřebám upravujeme některé původní.

Urychlení vývoje. O desítky hodin zrychlíme vývoj nových evidencí, protože komponenty jde snadněji "přepoužít". Nový modul tak může mít již v základu spoustu časově náročných věcí, jako historie, diskuze, filtrování, nahrávání souborů, mnohonásobné výběry či našeptávání.


Systém se klientovi marketingově dobře prezentuje - ať už na projektoru na konferencích nebo na pohovorech se zájemci o práci. Grafika je líbivá a ovládání odpovídá dnešním standardům.