My role in this ambitious project was to help ideate and design a web portal that would bring together all kind of scientific and technologic courses and resources. Its main purpose was to make it easy for its users to manage and find all this information, at any time, from any device.
This portal was intended to be a central place for information about training courses, with an option to provide information about courses in other activity areas in the future. The site would also feature e-learning materials on various topics of interest to industry, using infographics, illustrations, videos, animations and texts.
While this project was primarily intended to serve as a platform for courses and resources, it should have the potential to be a repository for all the courses and workshops taught and developed in various programmes.
Our high level goals for this project were:
- be the go-to portal for industry interested in technological training resources.
- be a centralized place for all information about technological industry, training courses, covering all activity areas and all courses offered throughout the year.
- provide access to course calendars, registration interfaces, e-learning materials, videos, online tutorials, webinar recordings, etc.
I led the UX/UI Design of the project throughout 2019. I collaborated with profiles such as fullstack developers, project managers, etc.
I dropped the project at the final prototyping stage.
From the very beginning, I helped them focus the project towards minimum desirable requirements. They are as follows:
- The platform shall have a user-friendly and responsive web interface (desktop, tablets, mobile, etc).
- The website shall have a publicly accessible part as well as areas that require a log-in.
- It shall be possible to grant access to certain types of resources/parts of the web pages to users or groups of users.
- The platform shall allow users to register in the portal to have access to the internal contents.
Picking Up The Pieces
I benchmarked training tools and learning resources, especially scientific ones. I did an in-depth research of all the material regarding courses and teaching materials, although due to privacy issues I cannot mention much. During this research phase I was able to identify the main pain points as well as some insights that served as a basis for providing real solutions.
As I said, the first steps included the observation and analysis of several existing projects around training and learning resources. There was also some brainstorming in the process.
It didn’t take me long to come to some early insights:
- There was a need to develop a unified interface, which coherently showed the various contents available and which in turn reflected what the company was like.
- The search engines for existing projects on training and learning resources were very different from each other and this is one of the most painful points for their users. Generally speaking, there were no consistency of criteria in design or functionality. The result was that many of the search engines I reviewed were so confusing, did not work as expected or were not capable of performing their function effectively. It was paramount to generate a type of search engine that could be seamlessly adapted to all of their projects.
These are some of the deeper and more specific insights we found. The portal should have the following elements:
- a course catalogue (with options to search and filter), listing all upcoming on-site and online courses (including webinars, livestreams, etc.).
- screens for each course (based on a template), listing e.g. course title, date, time, place, target group, requirements, course description, agenda, etc.
- a course calendar for upcoming courses on the homepage.
- a news section.
- newsletter subscription possibility.
- FAQ section.
- an “About us” area.
- links to social media.
- an area for “Resources” and other training materials (including, for example, possibilities to play videos, show animations, infographics, illustrations, texts and links to e-learning modules or already existing resources).
- the related educational resources shall be searchable.
- there shall be the possibility to download resources (e.g. videos, PDFs).
One of my greatest contributions to this project was to come up with a unified, effective, simple and intuitive UI (search engine included) that would cover all users’ needs. The concept would serve both for all the training and education platforms they already had. Below is a series of screens that show some of the solutions implemented for this project.
Desktop Mockup Screenshots
As you can see in the following screenshots, the unified design is the thread of the application. It is a modular design, based on atomic design. The design is both sleek and effective because it provides focus to the contents.
Mobile Mockup Screenshots
The modular and responsive design would allow the project to become a perfect tool to be used from any device. It even allowed to reuse its structure and design concepts to generate new mobile applications with a minimum effort for developers, thus benefiting company.
Below you can see detail screens that show the ease and clarity of this modular design, perfectly adapted to mobile devices. The user journey remain consistent, whatever the device from which it is used.
Animations and micro-interactions
Below are some animations made in Principle. It is a swift and concise way to suggest the type of animation and interactions to be used in the final development. It is recommended to watch the videos below in fullscreen mode (use the “Fullscreen” button on the right side of the video player).
Advanced Search animations
Course Calendar animations
How We Got There
From this point on, examples of some of the work done to get to the interface you saw above are shown. It is an intensive and thorough process. For confidentiality reasons, certain data and metrics are not shown. Even so, a significant part of the design and evolution of the project can be observed.
Mind Maps (Information Architecture)
Samples of the information architecture I generated for this project. These diagrams describe the contents of the key screens with great precision, so that both the design and the development process are highly improved.
Wireframes Desktop (Mid-Fi)
A sample of some key screens I designed during the sketching process. For this project, the sharpness of all wireframes had to be medium or even high almost from the beginning. As can be seen in the captures, the greatest evolution was received by the search engine. It is, after all, the key point of this project. A system capable of finding any content in a friendly and efficient way.
An inclusive design: fulfilling all the desired requirements, I created an inclusive design, adapted to any device, and aligned with the brand identity. One of my greatest contributions: an efficient and simple user interface, with an integrated search system that supports and improves the overall utility of the tool. For confidentiality reasons, all metrics have been omitted.
Thanks for watching. I really hope you enjoyed the journey!