1. Matteo Mara 3rd Developers@CERN forum
UX Concepts
How they affected our development flow.
Matteo Mara 3rd forum

2. UX Concepts, how they affected our development flow.
The Locations project
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.

3. 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.

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

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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.

16. 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.
CC BY-NC 2.0
14-February-2017
UX Concepts, how they affected our development flow.

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

18. Thank You!