Space Agency

Gathering Knowledge

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.

Context

This portal was intended to be a central hub for information related to training courses, with an option to provide information 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 scientific courses and resources, it should have the potential to be a repository for all the courses and workshops taught and developed in various programmes.

Squad

• One Product Manager
• One UX/UI Designer
• One UX Researcher
• One Web Designer
• Two frontend devs
• Ten stakeholders

The Challenge

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 management, e-learning materials, videos, online tutorials, webinar recordings, etc.

My Role

I led all the UX/UI design and research part of the project. I collaborated with profiles such as developers, project managers, stakeholders, etc. I dropped off the project after the final design phase.

Requirements

From the beginning, I helped them focus on minimum desirable requirements (MVP). 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.

Early Insights

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 critical pain 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.

More Insights

These are some of the deeper and more specific insights we found. The portal needed (‘MUST’) 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).

The Solution

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 core of the application. It is a modular design, based on an atomic Design System. 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 and scale its structure and design concepts to generate new mobile applications with a minimum effort for developers, thus benefiting company KPIs.

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 I 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).