Bežecká mobilná aplikácia · Mobilný produkt
Dôverná spolupráca
Keď musí mobilná aplikácia držať tempo.
Súkromná spolupráca na existujúcej bežeckej aplikácii v React Native. Redizajnovali sme vybrané časti, opravili kód, doladili správanie a odstránili chyby na iOS aj Androide.
Informácie
- Typ projektu
- Mobilná aplikácia
- Platforma
- iOS a Android
- Naša úloha
- Nešlo o nový produkt od nuly. V existujúcej React Native aplikácii sme prekreslili vybrané obrazovky a upravili ich správanie na iOS aj Androide.
- Stav
- Dôverná spolupráca
Technológie
- React Native
- iOS
- Android
Čo sa dozviete
- 01Ako udržať mobilný tok plynulý pri opakovanom používaní.
- 02Ako držať rozhranie prehľadné na iOS aj Androide.
- 03Ako rozvíjať jednu produktovú skúsenosť v React Native.
Rytmus produktu
Jedna návšteva pripraví ďalší krok.
Aplikácia spájala prípravu, samotný tréning a návrat k progresu do jedného opakovateľného toku. Tento pohľad je zjednodušený a anonymizovaný.
- 01
Pripraviť sa
Používateľ vidí, čo ho čaká, a rozumie nasledujúcemu tréningu.
- 02
Rozbehnúť sa
Počas aktivity zostáva pozornosť na jasných krokoch, nie na ovládaní.
- 03
Zhodnotiť
Po dokončení sa výsledok vracia v čitateľnom a pokojnom súhrne.
- 04
Pokračovať
Stav a progres dávajú ďalšej návšteve zrozumiteľné pokračovanie.
01
Vstup do rozbehnutého produktu
Nevstupovali sme na prázdnu dráhu. Aplikácia už mala svoju logiku, používateľské návyky aj technické rozhodnutia, ktoré bolo potrebné najprv pochopiť.
Súkromná spolupráca preto začala mapovaním vybraných tokov a konkrétnych miest, kde mohol redizajn alebo zásah do kódu priniesť najväčší úžitok bez narušenia známeho používania.
02
Redizajn tam, kde používateľ váhal
Pri vybraných obrazovkách sme upravili vizuálnu hierarchiu, rozloženie a dotykové prvky tak, aby ďalší krok pôsobil prirodzenejšie a dôležité informácie sa dali zachytiť rýchlejšie.
Nešlo o kompletné prekreslenie produktu. Redizajn bol cielený. Rešpektoval to, čo už fungovalo, a spresnil miesta, kde rozhranie zbytočne brzdilo používateľov.
“Dobrý redizajn nemení smer. Odstraňuje váhanie po ceste.”
Zjednodušená architektúra
Jedna skúsenosť, spoločný mobilný základ.
Aj cielená zmena obrazovky prechádzala viacerými vrstvami. Rozhranie, zdieľaná logika, služby a obe platformy museli držať rovnaký rytmus.
- 01
Produktová skúsenosť
- Plán
- Aktívny tréning
- Progres
- 02
Zdieľané React Native jadro
- Navigácia
- Predvídateľný stav
- Opakovateľné UI
- 03
Aplikačné služby
- Hranica účtu
- Výmena dát
- Prevádzková spätná väzba
- 04
Natívne doručenie
- iOS
- Android
Zjednodušený a anonymizovaný pohľad. Nezobrazuje interné systémy ani skutočné produktové dáta.
03
Opravy pod povrchom
Popri rozhraní sme riešili aj konkrétne opravy kódu, nečakané stavy a bugfixy. Každý problém bolo potrebné najprv spoľahlivo zopakovať, potom opraviť a overiť v kontexte celého toku.
Pri často používanej mobilnej aplikácii sa kvalita skladá z detailov. Správnej reakcie po návrate na obrazovku, predvídateľného stavu aj toho, že oprava jedného miesta nerozbije iné.
“Najlepšia oprava je tá, ktorú používateľ nemusí vôbec spozorovať.”
04
Jeden rytmus na iOS aj Androide
React Native umožnil držať veľkú časť skúsenosti spoločnú, no každá platforma má vlastné detaily. Kontrolovali sme rozloženie, dotykové správanie aj hraničné stavy na iOS aj Androide.
Cieľom nebolo, aby obe verzie pôsobili mechanicky rovnako. Dôležité bolo, aby mali rovnakú logiku, rovnakú mieru istoty a prirodzený pocit na zariadení, ktoré človek používa.
Ako sme postupovali
Zasahovať presne, nie prepisovať všetko.
Produkt už ľudia používali. Chránili sme preto to, čo fungovalo, a sústredili sa na miesta, kde mohla byť skúsenosť jasnejšia a spoľahlivejšia.
- 01
Pochopiť tok
Zmapovať vybrané cesty a aktuálne správanie.
- 02
Nájsť trenie
Určiť, kde hierarchia, interakcia alebo kód znižovali istotu.
- 03
Redizajnovať cielene
Zachovať známe správanie a spresniť iba potrebné miesta.
- 04
Zopakovať a opraviť
Spoľahlivo vyvolať chybu, opraviť príčinu a skontrolovať súvisiace stavy.
- 05
Overiť obe platformy
Skontrolovať rozloženie, dotykové správanie a hraničné stavy na iOS aj Androide.
05
Lepší základ pre ďalšie verzie
Výsledkom nebol nový produkt od nuly, ale citeľne uprataná časť existujúcej aplikácie. Zrozumiteľnejšie vybrané obrazovky, opravený kód a menej chýb v každodennom používaní.
“Nie každá dobrá spolupráca potrebuje veľké gesto. Niekedy stačí, že produkt beží istejšie.”
Podobný cieľ, riešenie podľa vás
