Aleksandra Hristova's presentation at JavaSkop 2019. Topics touched: - Using pattern libraries to improve the communication between designers and developers and the importance of including the whole team and the client into the planning phase. - How to plan and build components that can be used in different contexts and within other components with examples from real projects. - How we have used UX design principles to ease our front-end implementations with code examples using the latest CSS features and Angular.

1. Aleksandra Hristov
30.03.2019, Skopje @ JavaSkop
A case study of re-re-building
the international train traffic coordination system
Front-end up front

3. The legacy project
3
2004/2005

6. 2014/2015
Next Generation
6

7. User Experience
7

9. Source: uxpin.com

10. Prepare

11. Briefing & Users
IM
Infrastructure managers
RU – Passenger
Railway Undertaker
RU – Cargo / Freight
Railway Undertaker
RFC
Rail Freight Corridors

12. Give responsibility

13. …and deal with politics

14. Documentation / track of progress

15. Source: bradfrost.com

17. col-xs-1 col-xs-2 col-xs-1 col-xs-8

18. col-xs-1col-xs-2 col-xs-?col-xs-2col-xs-3
col-xs-1col-xs-2 col-xs-3col-xs-2col-xs-3 col-xs-1

19. col-xs-1 col-xs-2 col-xs-1 col-xs-7col-xs-1
col-xs-8col-xs-4

20. 30px flex-direction: column;
flex: 4 35px; (1) 30px 30px flex-grow: 20; (5)

29. 29

30. Envelope Concept
30
2016/2017

31. 31

33. www.thesprintbook.com

37. Usability testing
IM
Infrastructure managers
RU – Passenger
Railway Undertaker
RU – Cargo / Freight
Railway Undertaker
RFC
Rail Freight Corridors

38. 38

39. Methodology
Development process
Issue tracking in Jira Change Requests
Code reviews UX & RE Technical/functional RE

40. for developers :)
User Experience
40

41. Source: uxpin.com

42. Grid calendar
42

44. 44https://codepen.io/alexhris/pen/djbrBP

60. 60
… September 2019

61. Current team
(in order of joining :D )
61
Aleksandra Hristov
UX Architect
Jana Karcheska
Senior Software Eng. & RE
Valerija Velinovska
Senior Software Eng.
Hristijan Dimitrieski
Senior Software Eng.
Aleksandar Cindrikj
Senior UX Engineer
Ignatij Gichevski
Software Engineer
Trajche Naumoski
Senior Software Eng.
Gorazd Titizov
Project Manager
Many others
Sys, Clients, ex-Team…

62. Things to mention
§Enhancing in order HTML → CSS → JS
§Accessibility (for public web applications is a must!)
§Storybook.js (for building pattern libraries)
§Web components (waiting on browser support)
62

63. 63
Thank you!
aleksandra.hristov@netcetera.com
@alexhris