I'm actually working on this project. I'll upload content soon
Conceived and produced in team a brand new Cross User Interface in order to supply students with easy registration and access, courses research and enrollment, account settings, certificate's signatures and much more
As Cattolica faced the Internet Era at the beginning of 21 century, they provided students with the possibility to login and apply to their courses such as: undergraduate courses (Bachelor's degree), graduate courses (Master's degree), PhD programs and many others.
Nevertheless, as years passed by, the user interface designed so far wasn't getting along quite well in terms of not only Usability but also Look & Feel (according to the design trends today). With this being said, the main goal of the project covered: restyle the entire Portal website according to the latest Ui Design Trends and Responsiveness rules
To make this happen, I conceived and produced a brand new Cross User Interface. It's more intuitive, even more aligned with the mobile app. Nowdays, students will find quite a lot changes when they'll look at an easy registration and access, courses research and enrollment, wizard instructions step by step, document management, account settings, certificate's signatures and much more friendly user interfaces. They will find the new UI more intuitive and easier to use
Also designed email templates. The email marketing isn’t dead. The number of practices to follow for better email design are growing in an exponential rate. There is no more simple way to bring your brand recognizable as to send the series of welcome emails. The simplicity! That was the principle that made this email design uniquely readable. The good combination of colours and font famnily improve the user experience, especially when these emails talk about crucial user activites. Down below some of the samples created so far
Even the Personal Technical Admins were in need of restyling the whole interface scenario. Giving you a samples down below of what the old User Interfaces used to be. Yes, you're right! You can tell that it really needed a massive design update.
In fact, Cattolica's team was aware of their website's big problems, when it comes to design consistency. That's mostly due to the fact that the Ui was built on years of old code. Not to mention the students have complained about this many times, resulting in a loss not only of brand attraction but also income money. These were the consequences as they were not following along with the new design language in use today.
As the User Interface production covered almost the main critical areas, the prototype step kicked in sight of Usability Test. Here students of all ages were given tasks in order to experience the new Ui built so far based on euristic evaluation. The interactive case scenario was designed on bachelor's and associate's degrees enrollment. As Ui designer, this was a challenge to present micro animations in order to give a new perception fo the Portal, like a for example a concept loader down below.
Last but not least, the final step where Ui production is put to the test by developers:
css styling implementation based on bootstrap, responsiveness to meet different devices viewports, cross browsgin fallbacks and much more. Quite often feedbacks are given to improve further the ui interactions
At this entry point students experience the courses research pattern. Filtering and sorting make it easier to check and select among several courses offered by Cattolica
As a specific course is chosen, students apply by filling forms split in the form of a double custom stepper. Since enrollment experience was demanding (e.g.: handling certificates, documents, etc..), a wizard instruction was created to provide students with a tutorial guide as a clear visual breadcrumb accessible from anywhere
Here students set and edit their main infos such as anagraphics, degrees and certificates pursued so far. Cards and tabs component serve the purpose
Animations were given to improve the User Interface interaction like this widget that sums up the list of documents necessary to apply to a course. Also each document is presented with a custom icon previously designed (see Ui Library section below)
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
As time passed by, this portal has gone through maintenance with a variety of change requests. In fact, the Interaction Design, within the UCD framework of processes, makes possibile to get the job done the right way along with the development team. According to this stage of design known as Review, I produced a document to keep track of the changes along the way.
Certificates is a web app that allows to request digital certificates to be digitally signed right away online (out of the portal) in order to avoid annoying lines at Cattolica desk offices.
Web app show three simple section to handle certificates: available, waiting and signed. Like the student layout, Backoffice was created to fit small viewport as well to make operations easier on the go
As the request is sent to backoffice, certificates move to the waiting section
As the students send their requests in the pipeline, on the other side the admin backoffice team receive the queues (to be sign section) and digitally sign the certificates (signed section) untile students receive them (sent).
In the making of web portal iscrizioni, the Ui process restyled another related website, MyAccount. In fact, this web app manages all the student's accounts along with their account informations such as, mobile phones, emails, privacy, password, emails and so on.
The Design process focused on prototyping to make possibile the interactive scenarios. Basically the web app flows allows the student to create and edit all their account information within Cattolica profile database. The Interaction Design based the Ui study either on Desktop and Mobile viewports
