From 2019, ESA plans to bring together all its training and learning resources on a single online platform.
My role in this ambitious project was to ideate and design a single web portal that would bring together all these 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.
An Industry Learning platform shall be set up, entitled the “ESA Learning Hub”. This portal is intended to be a central place for information about (SME Initiative) training courses, with an option to provide information about courses in other ESA activity areas in the future. The site will also feature e-learning materials on various topics of interest to industry, using e.g. infographics, illustrations, videos, animations and texts.
While the “ESA Learning Hub” is, in the first instance, intended as a platform for courses and resources provided in the framework of Administration Area programmes and activities, it does have the potential to be a repository of all courses and workshops given and developed in the various ESA programmes (e.g. also those of a more technical nature) should these programmes wish to make use of it, for example for promotional purposes.
Our high level goals for ESA Learning Hub are:
- be the go-to portal for industry and delegations interested in ESA training resources provided in the context of IPL-IP activities and, later, the ESA Executive Campus (and other ESA initiatives in case of interest).
- be a centralised place for all information about ESA industry (and delegation) 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 user experience consultancy of the project throughout 2019. I collaborated with profiles such as fullstack developers, project managers or stakeholders across the European Space Agency (ESA).
I dropped the project at the final design stage, when the actual project started to be built (beta testing).
From the very beginning, I helped ESA orient the project towards minimum desirable requirements with which we all agreed. They are as follows:
- The platform shall have a user-friendly and responsive web interface (desktop, laptop, tablets, phone, etc).
- The Learning Hub 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 (e.g. materials for a particular course).
- The platform shall allow users to register in the portal to have access to the internal contents.
Picking Up The Pieces
ESA granted me access to a number of tools that they already had in place for training and learning resources, especially scientific information. The resources and quantitative data available were widely dispersed across various (about ten) portals, domains, sub-domains and so on.
I did an in-depth research of all the material that ESA had 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 problems and insights that served as a basis for providing real solutions.
As I said, the first steps included the observation and analysis of several existing ESA projects on training and learning resources. There was also some brainstorming in the process.
It didn’t take me long to come to some early insights:
- The lack of functional and aesthetic unity of many of the projects that ESA has shown me on this subject is obvious. There is a need to develop a unified interface, which coherently shows the various contents available and which in turn reflects what the European Space Agency is currently like.
- The search engines for existing projects on ESA training and learning resources are very different from each other and this is one of the biggest pain points for their users. In general, there is no consistency of criteria in design or functionality. This is probably due to the fact that these projects have been worked on from an individualistic, specific and concrete point of view. The result is that many of the search engines analysed were so confusing, did not work as expected or were not capable of performing their function effectively. It is necessary to generate a type of search engine that can be seamlessly adapted to Learning Hub or any other ESA projects.
- It is also necessary to add new material to the style guide and ESA reusable UI Kit components and recommendations for their implementation and use.
These are some of the deeper and more specific insights that I came up with by working closely with stakeholders. 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 (calendar feature for upcoming courses) on the homepage.
- a news section (on homepage as well as individual web pages for news items).
- newsletter subscription possibility.
- FAQ section.
- an “About us” area.
- links to ESA social media accounts.
- 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 ESA 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 the project was to come up with a unified, effective, simple and intuitive UI (search engine included) that would cover all the users’ needs. The concept would serve both for all the training and education platforms they already had and for Learning Hub in particular. Below is a series of screens, videos and graphics that show the solutions implemented for this project.
Desktop Mockup Screenshots
As you can see in the following screenshots and video, the totally unified design is the thread of the application. It is a modular design, based on atomic design. The design is both elegant and effective because it provides all the focus to the contents.
Mobile Mockup Video
The modular and responsive design allowed the Learning Hub 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 apps with a minimum effort for developers, with the consequent benefit that this means for an entity as wide and diverse as the European Space Agency, ESA.
Mobile Mockup Screenshots
Detail screens that show the ease and clarity of this modular design, perfectly suited to mobile devices. Navigation and user journey are kept consistent, whatever the device from which the Learning Hub is used.
How We Got There
From this point on, examples of much 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 have been discarded. Even so, a significant part of the design and evolution of the Learning Hub can be observed.
Early screens and drafts I worked on, in collaboration with ESA stakeholders. Looking at the project from this perspective, the commitment to the original idea is quite clear, as well as the refinement and maturity that the project acquired throughout its design iterations.
Mind Maps (Information Architecture)
Samples of the information architecture I generated for the ESA’s Learning Hub project. These diagrams describe the contents of the 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 developed during the sketching process. For this project, the sharpness of all wireframes had to be medium or even higher almost from the beginning. This is a requirement that ESA requested to facilitate as much as possible the global understanding of the project by all stakeholders. 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, efficient and as intuitive way as possible.
ESA Visual Guidelines
This is a sample of some of the design guidelines I followed from the ESA style guides. The Learning Hub project that you are now watching also served to improve the evolution of these style guides, helping the brand identity itself to grow.
An inclusive design: meeting the requirements that ESA asked me to develop, I have created an inclusive design, adapted to any device, and aligned with the new ESA brand identity. A unified meeting point now exists for all the knowledge that ESA makes available to humanity. One of my greatest contributions: an efficient and simple user interface, with an integrated search system that supports and enhances all the search engines they had scattered in other projects, both internal and public.
From this point on, information found on other portals would be gathered at the Learning Center. Part of this process was to progressively move the content to this portal and perform different usability tests to see how the Learning Hub project behaves when receiving all this information and how well it meets the needs of its users. In this way, the interface built would be validated and all kinds of aspects related to the digital product produced would be polished.
- It was estimated that the speed of searches would increase by 35% compared to the average of other search tools that ESA was already using.
- It was estimated that the number of new user and pre-existing ESA’s users who would move to the new platform would increase by 60%.
For confidentiality reasons, all other metrics have been omitted.
Thanks for watching. I really hope you enjoyed the journey!