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.
Dark & Light Mode