Trade

Case Study

Trade

Analiza UX

Projektowanie UI

Firma
Trade Company

Data ukończenia
Luty 2022

Rola w zespole
Projekt indywidualny

Wprowadzenie

Opracowanie interaktywnego narzędzia do zarządzania liną trendu na notowaniach giełdowych dla firmy z branży finetech.

Wymagania edytora linii trendu:

  • dodawanie,
  • edycja,
  • usuwanie.

Plan działania

1 Desk research

Etap pierwszy pozwoli przeanalizować rozwiązania dostępne na rynku oraz zapoznanie się z branżą.

2 Wirefolw

Drugi etap to rozrysowanie schematu funkcjonalności narzędzia. Krok po kroku przedstawienie na wireframach logiki funkcji dodawania i edycji linii trendu.

3 Prototyp papierowy

Etap trzeci to stworzenie papierowego prototypu dla rozwiązania dostarczanego dla klienta.

4 Testy

Etap czwarty to testowanie papierowego prototypu z badanymi w celu sprawdzenia najważniejszych elementów prototypu względem użyteczności dla użytkowników.

5 UI Design

Etap piąty to stworzenie designu UI. Prototyp aplikacji w pełni interaktywny pokazujący funkcjonalność całości produktu.

1 Desk research

Wykresy giełdowe

Wykres cen akcji to graficzne przedstawienie zmian cen danej akcji, jest tworzony z dwóch osi X i Y. Pozioma oś X odpowiada za wskazanie czasu zmian cen, natomiast pionowa oś Y wskazuje zmiany cen akcji. Wykresy giełdowe są przydatne do analizy akcji na giełdzie.

Wykresy dają możliwość analizowania ruchów cen akcji. Wyróżniamy trzy podstawowe rodzaje wykresów:
– liniowy,
– słupkowy,
– świecowy.

Wykres liniowy jest najbardziej podstawowym typem wykresu, zawiera jedynie podstawowe informacje. Z reguły wykres liniowy jest analizowany w interwałach dziennych. Jest to bardzo rzadko stosowany typ wykresu ponieważ nie zawiera informacji o cenie otwarcia, maksimum i minimum ceny w danym okresie czasu.

Wykresy słupkowe dostarczają dużo więcej informacji niż wykresy liniowe. Jak sama nazwa wskazuje wykres składa się ze słupków wzdłuż wykresu. Każdy słupek reprezentuje jeden okres. Aby stworzyć słupek należy nakreślić maksimum oraz minimum ceny z wybranego interwału Następnie należy zaznaczyć linią poziomą cenę otwarcia po lewej stronie słupka oraz cenę zamknięcia po prawej stronie.

Najpopularniejszym a zarazem dostarczającym najwięcej informacji jest wykres świecowy. Wykresy świecowe dostarczają takich samych informacji, jak wykresy słupkowe, jednak w nieco innym formacie. Tworzenie wykresów świecowych polega na nakreśleniu kolejnych świec wzdłuż wykresu. Każda świeca przedstawia jeden okres. Tworzenie świecy polega na nakreśleniu pionowej linii łączącej maksimum i minimum dla danego okresu. Na wykresie wyróżniamy dwa rodzaje świec białe (wzrostowe) i czarne (spadkowe).

Linia trendu

Trend określa kierunek ruchu cen całego rynku bądź danej akcji. Trend ma podstawowe znaczenie przy podejmowaniu decyzji o kupnie czy sprzedaży. Narzędzie do dodawania i edycji linii trendu jest bardzo istotne, ponieważ poprawnie wyznaczona linia pozwala podejmować trafne decyzje giełdowe o kupnie i sprzedaży.

2 Wirefow

Poniższe wirefolw w czterech krokach prezentuje wstępną logikę działania produktu. Aplikacja będzie działała w układzie wertykalnym, natomiast narzędzie do rysowania i edycji linii trendu zostało zaprojektowane do działania w trybie horyzontalnym. Szerokość ekranu w trybie horyzontalnym pozwoli wyświetlić większy wykres akcji co za tym idzie więcej istotnych szczegółów widocznych do użytkownika.

3 Prototyp papierowy

Prototyp

W początkowej fazie projektowania opracowanie papierowego prototypu pozwala znacznie przyspieszyć proces projektowy i szybko zwalidować stworzony produkt z badanymi na teście.

4 Testy

Wyniki testu

Przygotowany w poprzednim kroku prototyp papierowy został zwalidowany na teście z czterema użytkownikami. Podczas testu dokonano sprawdzenia użyteczności zaprojektowanego rozwiązania.

Dla badanych najważniejszy w narzędziu jest wybór rodzaju wykresu oraz zakres danych pokazywanych na wykresie.

Badani wskazali, że istotnym w trybie rysowania i edycji linii trendu jest wybór koloru i grubości rysowanej linii. Funkcja automatycznego przyciągania rysowanej linii do wykresu jest również znacząca dla badanych.

5 UI Design

Etap piąty to zaprojektowanie w pełni funkcjonalnego, ostylowanego prototypu narzędzia.

Na podstawie wireframe, papierowego prototypu oraz z uwzględnieniem wyników testu powstała aplikacja do śledzenia trendów akcji na wykresie, z możliwością wyboru rodzaju wyświetlanego wykresu oraz wyboru zakresu dat. Narzędzie do rysowania i edycji linii trendu jest automatycznie włączane po odwróceniu telefonu horyzontalnie lub po naciśnięciu przycisku powiększ.

Interaktywny Prototyp Trade App - Portfolio Iwona Gałązka

Dark & Light Mode

Aplikacja została zaprojektowana w trybie Dark oraz Light. Użytkownik może dostosować wygląd aplikacji za pomocą toggla w górnej części ekranu.