Matteo Mara 3rd Developers@CERN forum UX Concepts How they affected our development flow. Matteo Mara 3rd Developers@CERN forum https://indico.cern.ch/event/577155/

UX Concepts, how they affected our development flow. The Locations project https://locations.cern.ch Locations Repository Locations Application Centralized locations repository for CERN History of changes Creation of specific attributes for customers Creation of groups of locations Creation of custom locations Browse full Locations data Advanced search of locations Integration with CERN maps Locations attributes bulk editing Definition of locations groupings Management of custom Attributes 14-February-2017 UX Concepts, how they affected our development flow.

First development phase Designing the application Analysis of the parts of the repository to expose Definition of the technological stack Creation of the mock-ups (based on our knowledge) 14-February-2017 UX Concepts, how they affected our development flow.

First development phase The main resources for designing the 1st version of the UI All the credits for these amazing covers go to @ThePracticalDev CC BY-NC 2.0 14-February-2017 UX Concepts, how they affected our development flow.

When the UI/UX Expert joined the team… The fundamental features of Locations were already working (according to our design). After few interviews with the development team he started the creation of the concepts for the functionalities still missing. …and started to redesign from scratch what was already in place, according to proper UX concepts. Actually we realized that there was not a single page of the application properly designed. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. First thoughts ? ? ? ? What??? He has no idea how much effort is needed for coding all these features! Is he supposed to write CSS or what? He is destroying my lovely (working) application! I am a developer I know how to take care of the UI of my application! ? ? ? ? ? ? 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Home Page The home page was the one less affected. The small changes improved the layouting and the readability. With proper interaction there is no need to specify that “To start working, click on a location on the map or use the searchbar”. The UI is supposed to drive directly the user to what can or cannot do. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Home Page The home page was the one less affected. The small changes improved the layouting and the readability. With proper interaction there is no need to specify that “To start working, click on a location on the map or use the searchbar”. The UI is supposed to drive directly the user to what can or cannot do. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Details Page The data in the details page has been completely reorganized Instead of the left menu a tab navigation mechanism has been implemented The tables have been removed for a better organization based on the location type. By default a set of data relevant for each location type is displayed, the more advanced users can always get the full list by clicking on the apposite button. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Details Page The data in the details page has been completely reorganized Instead of the left menu a tab navigation mechanism has been implemented The tables have been removed for a better organization based on the location type. By default a set of data relevant for each location type is displayed, the more advanced users can always get the full list by clicking on the apposite button. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Details Page The data in the details page has been completely reorganized Instead of the left menu a tab navigation mechanism has been implemented The tables have been removed for a better organization based on the location type. By default a set of data relevant for each location type is displayed, the more advanced users can always get the full list by clicking on the apposite button. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Details Page The data in the details page has been completely reorganized Instead of the left menu a tab navigation mechanism has been implemented The tables have been removed for a better organization based on the location type. By default a set of data relevant for each location type is displayed, the more advanced users can always get the full list by clicking on the apposite button. Highlight the move from Columns and Values to values in a proper context like Machine/Office or the flag of the nation… The location type is another good example of moving the data from the table to the UI. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Advanced Search Probably the page that has been changed the most. Our initial “Advanced Search” mechanism was almost pure SQL style. From a set of AND conditions to selectors based on the most relevant details for every location type. Adding live results counting and extra filtering on the search output. Removal of the map, it was just a redundant feature! 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Before and After Advanced Search Probably the page that has been changed the most. Our initial “Advanced Search” mechanism was almost pure SQL style. From a set of AND conditions to selectors based on the most relevant details for every location type. Adding live results counting and extra filtering on the search output. Removal of the map, it was just a redundant feature! 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Lessons learned After an initial phase of confusion the improvements to the whole application were pretty clear. We spent more time than planned for coding the features related to the new UI, but then no extra time has been spent on modifying what was already there. All the new features have been coded starting directly from the concepts provided by our UX expert, once the templates were ready the code development started. The analysis of the users and their needs can properly drive the development of an application from day one. 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Conclusions Time spent in the (proper) implementation of the User Interface has been well spent. A clean UI drives the user to all the functionalities without the need of clicking everywhere (and discovering those crazy bugs that only users can find). After a little bit of training, the fundamental aspects to take in consideration become automatic, and a check with the UX expert is more a confirmation than a redesign. In case of laziness, and because the developers always know how to write the UI by themselves, I can really suggest you this book. Credits: @ThePracticalDev CC BY-NC 2.0 14-February-2017 UX Concepts, how they affected our development flow.

UX Concepts, how they affected our development flow. Questions? 14-February-2017 UX Concepts, how they affected our development flow.

Thank You!