Space Agency

Reading Time: 7 minutes

Client: ESA.
Platform: Desktop, Tablet, Mobile.
Project duration: 1 year.
Methodology: 2-week sprints. Daily status meetings (some ESA stakeholders included most of the time), planning, reviews and monthly workshops.
Software tools: Figma, Sketch, Jira, InVision, Principle, Adobe Illustrator, Adobe Photoshop, Affinity Designer, Drupal, Visual Studio Code, Git, Monster Insights, Google Forms, Google Analytics…

Design thinking

Every design process involves a methodology to obtain the best outcomes. We as designers rely on solid and iterative methodologies such as Design Thinking. This way we get to understand the problem to be solved and provide the best possible solutions, testing, changing, failing, rethinking, improving…

Context

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 to manage and find all this information, at any time, from any device.

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 platforms.

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.

Approaching the problem

Research goals

Below are some of the main questions we asked ourselves when approaching the problem to be solved:

• What will be our potential audience?
• What motivations would potential users have for using our new portal?
• In what contexts and in what way would our portal be used?

User interviews

In the empathy phase, I conducted initial individual interviews with the users (all people interested in space exploration and science) to understand what our users really needed and why. I selected a series of 5 questions.

Style: Interviews.
Number: 5 people.
Duration: 15 minutes each.
Interview type: Contextual interviews.

Initial Questions:

• Are you interested in collaborating with scientific knowledge?
• How do you currently find out about scientific news?
• Are you happy with the tools you currently use to find scientific articles?
• What are your 3 main ways of accessing scientific knowledge?
• Are you interested in science e-learning courses?

Understanding the User

In the define stage, I conducted thorough user research, including developing personas, user stories and user journey maps.

Synthesizing the data from the interviews, I was able to form two distinct user personas and their pain points. This subsequently allowed me to write definitive problem and hypothesis statements, and formulate their user journeys.

User Story: James Jacobs

User Story

As a student of aerospace engineering, I would like to have an official reference site where I can go to look for scientific articles on the subject. I also feel that it is difficult to find a reference website or portal to take online or face-to-face courses about my career.

Problem Statement

James often reads scientific articles on the areas that interest him. He also want to continue his training on certain aspects. However, he does not know of any online source of knowledge that offers him complete confidence.

Hypothesis Statement

If we unify relevant scientific articles and the most prestigious e-learning courses in a single portal, said portal will become the reference that people interested in these subjects do not have today.

User Persona: James Jacobs

User Research: James’ pain points

Trust: Does not trust current online sources of knowledge.
Waste of time: He spends a lot of time trying to confirm if the information he reads is accurate.
Insufficient information: Tries to find extensive and specific information on certain topics but does not find it easily.

User Journey Map: James

Ideal path James would use to become our user.

User Story: Mary Barker

User Story

As an experienced scientist, I want to share my knowledge on the internet so that all future scientists have access to it.

Problem Statement

I’m not sure which is the best place to share my knowledge.

Hypothesis Statement

If we promote ourselves properly and clearly show scientists the advantages of using our portal, we will gain new users quickly.

User Persona: Mary Barker

User Research: Mary’s pain points

Her articles are scattered: She has been told on several occasions that it is difficult to access and find her old articles.
Related articles: She feels it is almost impossible to draw conclusions from her published articles because they are so spread out.

User Journey Map: Mary

Ideal path Mary would use to become our user.

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

Some early insights:

• There was a need to develop a unified , 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 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 detailed screens that show the ease of this modular design. The user journey remain consistent, whatever the device you are using.

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