Trading app
NarzÄ™dzie do analizy wykresów
i prognozowania trendów w branży finansów.
O projekcie
MiaÅ‚am do zaprojektowania interaktywne rozwiÄ…zanie dodawania, edycji i modyfikacji linii trendu w branży finansów na iPhone X.
Istotnym elementem projektu było zadbanie o stylowanie oraz zaplanowanie przydatnych funkcji ułatwiających codzienne korzystanie z tego narzędzia. Dodatkowo do zaprojektowania miałam tryb Dark Mode, przynajmniej na jednym kluczowym screenie.
CZAS TRWANIA
15 luty 2022 - 28 luty 2022
UŻYTE NARZĘDZIA
Docs
InVision
Figma
Proces tworzenia
1. Research
2. Wireflow
3. Paper Prototyping
4. Guerrilla Testing
5. UI Design
01
Desk research
ZapoznaÅ‚am siÄ™ z tematem analizy wykresów i prognozowaniem trendów. W szczególnoÅ›ci zagÅ‚Ä™biÅ‚am siÄ™ w temat tworzenia linii trendu - w jakim celu jest wykorzystywana oraz jak prawidÅ‚owo jÄ… narysować. ZapoznaÅ‚am siÄ™ również z aplikacjami korzystajÄ…cymi z tego narzÄ™dzia.
02
Wireflow
Wireflow zostało wykorzystane w celu osadzenia funkcji linii trendu. Na rysunkach przedstawiłam jak dochodzi do wyszukiwania i wyboru narzędzia. Są to dwa kroki - wybranie ikonki rysowania z lewego paska, a następnie wybranie linii trendu z listy dostępnych narzędzi.
Po analizie zdecydowaÅ‚am siÄ™ na widok horyzontalny, jeżeli chodzi o korzystanie z narzÄ™dzi do rysowania. W przeciwnym wypadku, kiedy użytkownik zechce wyÅ‚Ä…cznie przejrzeć wykres, spotka siÄ™ z widokiem wertykalnym, który znajdzie siÄ™ we wczeÅ›niejszym widoku.
03
Paper Prototyping
Oprócz gÅ‚ównego widoku, rozrysowane zostaÅ‚y etapy tworzenia linii trendu.
04
Guerrilla Testing
Jedynym problemem podczas testu byÅ‚o niezrozumienie, jakie ruchy wykonuje testowany podczas rysowania linii trendu. Jednak po szczegóÅ‚owym dopytaniu, jakie kroki podejmuje, okazaÅ‚o siÄ™, że dziaÅ‚a zgodnie z zaproponowanym przeze mnie rozwiÄ…zaniem.
05
UI Design
LIGHT MODE
DARK MODE
Opis narzędzia
RYSOWANIE LINII TRENDU
EDYTOWANIE I MODYFIKACJA
NarzÄ™dzia do rysowania znajdujÄ… siÄ™ na pasku po lewej stronie ekranu. Po wybraniu ikonki wysuwa siÄ™ lista, która zawiera wszystkie dostÄ™pne narzÄ™dzia, w tym liniÄ™ trendu.
Aby podkreÅ›lić, że korzysta siÄ™ z danego narzÄ™dzia do rysowania, zostaje ono zaznaczone kolorem. Natomiast na wykresie pojawiajÄ… siÄ™ osie z kropkÄ…, którÄ… należy przemieÅ›cić w wybrany punkt
Punkty rysowania jest przyciÄ…gany do sÅ‚upków, aby móc precyzyjniej narysować liniÄ™. Po wybraniu miejsca rozpoczÄ™cia linii, należy tapnąć w ekran. W ten sposób zostanie zaznaczony pierwszy punkt.
Aby zaznaczyć drugi punkt należy przeciągnąć palcem po ekranie, a wtedy zacznie rysować się linia. Nie trzeba dotykać samej linii i jej przeciągać. Ma to na celu nie zasłanianie palcem wykresu.
Narysowana linia trendu.
Pojedyncze tapniÄ™cie w ekran wyÅ›wietla pasek z różnymi funkcjami edycji, który dla wygody można przemieszczać.
W tym momencie możliwa jest również modyfikacja. Wystarczy przenieÅ› wybrany punkt.
Podwójne tapniÄ™cie w liniÄ™ umożliwa szybkie zduplikowanie linii.
