During 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 were to:
- 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, design and web development of the project throughout 2019. I collaborated with profiles such as fullstack developers, project managers or stakeholders from the European Space Agency (ESA).
I dropped the project during the final visual design phase, when the actual project started to be built.
From the very beginning, the ESA provided me with a number of basic requirements that had to be met. 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 gave me access from the beginning to a number of tools they already had in place for training and learning resources, especially scientific information. The data was widely disseminated in various portals, domains and sub-domains.
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 which ones. During this research phase I was able to identify the main problems and insights that served as a basis for providing real solutions.
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 are probably one of the biggest pain points for users. There is no unification of criteria. 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 are confusing, do not work as expected or are 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 projects analysed. It is necessary to add to the style guide and ESA UI Kit reusable 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 materials shall be searchable.
- there shall be the possibility to download materials (e.g. videos, PDFs).
One of my greatest contributions was to come up with a unified, effective, simple and intuitive search engine 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 very effective because it gives 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 Learning Hub. 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 and even high 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 part 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 the design guidelines I followed from the ESA style guides. The Learning Hub project that you are now watching also served to support 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 best contributions: an efficient and simple search system that supports and improves all the search engines that they had scattered in other projects, both internal and public.
From this point on, the information found in other portals would be brought together in the Learning Hub. Part of this process consisted of progressively moving content to this portal and carrying out different user tests to see how the Learning Hub project behaves when it receives all this information. In this way, the interface that has been built would be validated and all sorts of technical aspects of the tool would also be polished.
- It was estimated that the speed of searches would increase by 35%.
- The estimated number of potential new users and users of pre-existing ESA platforms would increase by 60%.
For confidentiality reasons, the rest of the values of these metrics have been omitted.