I'm working to make this project look better. I'm reviewing the content
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 students with easy registration and access for studying abroad all over the world: courses research, destinazione preferences, enrollment, study programs settings, language certificate's signatures and much more. This way the portal provide the students with a clear path to roll along, from enrollment to the acceptance of their requests. At the same time, this project included a back office admin panel dedicated to the use of technical administrative staff, the international 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. Doing so I provide the Cattolica client, UX Designer and Development with a very first demo version of the portal
As for other services, the portal has also been updated according to the principles of modern design along with the needs of students that have emerged in recent years. By doing so I produced, in collaboration with the colleague UX Designer, a detailed documentation that explains all the sections either for the Front and Back Office interfaces
Also known as an User Interface Library, a Style Guide helps to define every visual building blocks given in the Ui production such as, fonts, colors, buttons, selectors, imagery, cards, shadows, inputs form and much more based on Material Design. As a matter of fact, it can be shared not only to the development team but also to the customer as a official Ui document to keep track either for future editing or just as visual metrics reference
As time passed by, Cattolica Ui project demand was increasing a lot. The Style Guide method could not hold the high requests anymore. With this in mind, I applied the technique of Design System to make things work a lot better
The interface design was based on a preliminary analysis study by the colleague UX Designer. Next, the Ui iteration developed a design pattern that was defined according to advanced techniques and methods and in harmony with the Digital Style Guide. Since this portal is an application to be used by Cattolica students, it was necessary a modular approach, thus considering desktop screens, tablets and smartphones. It was an opportunity to set a preliminary study and analysis for the foundations of the future Design System of Cattolica.
The amount of flows was highly demanding. I had to split this project in smaller files to make the Ui iteration run smooth and clean for desktop viewport
The amount of flows within a tablet & mobile viewports was even higher, since a student could take more steps to perform an action. I had to split this project in smaller files to make the Ui iteration run smooth
Even the admin panel Interface Design was based either on colleague UX Designer study and designed with my Digital Style Guide. Unlike the Front Office, the design approach has dedicated its attention only to desktop screens. Even this panel gave me the chance to present new and more complex patterns along with new components ready made to be used within the next Cattolica Design System
The portal has set new goals in design by introducing a new state of Interactive art in the form of complex prototyping patterns. In fact, the goal of Interaction Design is providing the final user with a demo preview of what the app could look like and interact with it as well. This way we as team were able to collect feedbacks and tweak the errors or perfection the details so far
Every Flow Branch was based on the Scenario Board in order to show the functions a student could interact with to process all the study abroad needs 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 tablet 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
Every Flow Branch was based on the Scenario Board in order to show the functions a Personal Technical Administrator could interact with to process all students files and related study abroad programs, within a desktop view only
