I'm actually working on this project. I'll upload content soon
I worked along with a UX Designer within the UCD framework of process. I conceived and produced the Interaction Design with a brand new Cross User Interface, desktop and mobile, in order to supply professor and principals with easy access for any university activity related such as: thesis review and appoval, work hours compilation and approval, paycheck archives, student presence, technical support and much more. This way the portal provide the personnel with a clear guidance to roll along, while they're on their duties. At the same time, this project included the creation of the back office admin panel dedicated to the use of technical administrative staff, the polo office. Also, Docenti portal required a massive style review of the old version Sid, another back office to manage every professor and student activity in the background
The professors of Catholic University can manage their work time report on their own in the form of digital registers across their entire line of teaching, courses and faculties they have undertaken in their careers. Therefore, the portal guides the teacher on the one hand to complete his activities during the year, while on the other hand it facilitates the principals in verifying the correctness of these activities, approving them and thus transmitting the payment due. At the same time Docenti Portal can provide the users with other functions like a support page or a dashboard collecting all the necessary informations to be checked at a glance.
Red stands for Registro Elettronico Docenti
This project started off with my colleague UX Designer who did a preliminary analysis and study about the users involved, the students. Next, based on these findings, I could define a variety of interactive scenarios in the form of interactive prototypes or Ixd Flow Branches that I collected within a Scenario Board and an Application Hub. Doing so I provide the Cattolica client, UX Designer and Development with a very first demo version of the portal
I even wrote a document to explain better why a web app would need the presence of the Interaction Design by giving every technical reasons necessary by all means. Also, this document included all the Flow Branches designed so far in a way that client could understand the know-how applied during the stage of Design
Based on the Flow Branches road map, at the same time, I produced the Ui iteration according to advanced techniques and methods in tune with the Digital Style Guide. Not to mention, that this web app is really huge meaning I had to deploy groups of Flow Branches into a variety of Interaction design files.
As I was developing the Design System project at the same time, I could apply step by step the fresh new Design principles
As a whole, the portal has been studied and designed in all its countless functions and thus managing to offer a very comprehensive and detailed interactive scenario of the required needs. Every Flow Branch was based on the Scenario Board in order to show the functions a professor or a principal could interact with to process all the task or activities within a desktop views
This app was an opportunity to anticipate Patterns to be included into the future Design System of Cattolica
.
.
Following down below a set of Interactive prototype within desktop viewport
While I was making the Ui iteration, I had the chance to study advanced interactive Ui Patterns, with the future Design System in mind. Each one of them can be presented in different shape and form, depending on the functionalities
For example I developed these interactive patterns for the desktop views
.
Since it's an application to be used by students, it was necessary a modular viewport approach, thus considering desktop screens, tablets and smartphones. In fact, this was an opportunity to educate the client about the technique of Responsiveness and Adaptivity that I mentioned within my Design System as one of the layout foundation rule nowadays. In order to make this possibile I wrote a document which exposed the technical design approach to take into account before proceeding to the smaller viewports.
At the same time, I conceived and designed most of the desktop Flow Branches within a tablet and smartphone viewport to provide the client and my coworkers Developers with a clear and usable User Interface on the go.
Next I designed the Patterns, based on my Design System. This way the client and my coworkers Developers could understand better the mobile interaction among the endless functions of the portal. Not least, the final user, the professors and principals, would have the chance to access their account and perform every task they need
Following down below a set of Interactive prototype within tablet viewport
Following down below a set of Interactive prototype within smartphone viewport
.
.
While I was making the mobile Ui iteration, I had the chance to study advanced interactive Ui Patterns, with the future Design System in mind. Each one of them can be presented in different shape and form, depending on the functionalities
.
.
.
The Sid portal is the beating heart of all internal administration panels in the Cattolica world, as it manages most of the services distributed in many other portals. It is a complex portal made up of several modules; at the moment it has only been redesigned the Space Occupation module with a view to proceeding on the others. Actually these modules control the datas behind the Docenti Portal including Lauree and Professors Elettronic Register services
Sid stands for Sistemi Integrati della Didattica
This project didn't include a preliminary UX analysis. In fact I had to define a variety of interactive scenarios in the form of interactive prototypes or Ixd Flow Branches and then collect them within a Scenario Board. Doing so I provide the Cattolica client and Development with a very first demo version of the panel
I even wrote a document to explain better why a back office would need the presence of the Interaction Design by giving every technical reasons necessary by all means. Also, this document included all the Flow Branches designed so far in a way that client could understand the know-how applied during the stage of Design
In order to deal with the countless restyling activities, the Ui iteration was based on a fresh new Digital Style Guide I created to offer visual consistency in line with the Catholic Brand Identity and, at the same time, distributing it vertically on all the countless interfaces. As a matter of fact, it wasn't possibile to apply the Digital Style Guide so far, due to timing reason. Still, I could apply the (Design System principles to make the interaction working better
The Ui iteration has adopted a Template-type strategy to cope with the copious functions present in the Space Occupation module and also finding the opportunity to educate and apply techniques and concepts deriving from the Design System
In order to show better the user workflow I restyled all the interactive scenario to provide the my coworkers Developers with a clear and navigable online prototypes. During the exposition of these Design pattern, I had the chance to explain the Design reasons behind most of Design System principles and apply them as well
While I was making the Ui iteration, I had the chance to study advanced interactive Ui Patterns, with the Design System in mind. Each one of them can be presented in different shape and form, depending on the functionalities
During the Design process, in the handover passage from Design to Development, I produced a technical documentation to educate and correct the User Interface iterative cycle process of the Sid portal. The document included not only User Interface issues to fix along with Developers, but also and mostly important much more content to be aware of, like the performance based on user's standard network settings. Also, I conceived this document to provide the client and my team with as many design reasons as possibile to understand how the Interaction Design can make a big difference, when it's applied the right way
The goal of this portal is to guide students in the final step of their studies through three simple steps, from the presentation of the thesis title, through the creation of the degree application, and finally up to the request acceptance by theier professors. At the same time, the Lauree portal also included a back office panel dedicated to the use of technical administrative staff, the polo office
This project started off with my colleague UX Designer who did a preliminary analysis and study about the users involved, the students. Next, based on these findings, I could define a variety of interactive scenarios in the form of interactive prototypes or Ixd Flow Branches that I collected within a Scenario Board and an Application Hub. Doing so I provide the Cattolica client, UX Designer and Development with a very first demo version of the portal
At the same time, I developed the Ui iteration with a design path that was defined according to advanced techniques and methods in tune harmony with the Digital Style Guide. Since it's an application to be used by students, it was necessary a modular viewport approach, thus considering desktop screens, tablets and smartphones.
Unlike the Front Office, the design approach has dedicated its full attention to desktop screens, as the technical admin staff, the Polo Office, would use computers only
The interaction stage represented an evolution in terms of guide lines based on the very first version Digital Style Guide of Cattolica I made at that time. Similarly to Mobilità portal, I had to design from scratch new interactive patterns to provide students and admins with a clear and usable functionalities either on desktop and
This app was an opportunity to anticipate Patterns to be included into the future Design System of Cattolica
Every Flow Branch was based on the Scenario Board in order to show the functions a student could interact with to process all the thesis submission activities within a desktop and mobile views
Following down below a set of Interactive prototype within desktop viewport
Following down below a set of Interactive prototype within tablet viewport
.
.
Following down below a set of Interactive prototype within smartphone viewport
While I was making the Ui iteration, I had the chance to study advanced interactive Ui Patterns, with the future Design System in mind. Each one of them can be presented in different shape and form, depending on the viewport
For example I developed these interactive patterns for the desktop views
.
When it comes to handset devices, I had to design even more detailed interactive patterns
.
.
Not to mention the size of smartphones viewport, made even more difficult to design complex pattern for the students easy to navigate
.
Each Flow Branch was based on the Scenario Board in order to show the functions a Personal Technical Administrator could interact with. These flows were designed to process all students file requests and related thesis propositions, within a desktop view only
While I was making the Ui iteration, I had the chance to study advanced interactive Ui Patterns, with the future Design System in mind. Each one of them can be presented in different shape and form, depending on the admin task to be used