During part of 2019, in collaboration with ESA, I contributed to the development and evolution of a web portal that served as a repository for their scientific and technical knowledge. This portal was to make the creation and search of these contents as easy as possible. My task was to lead the UX / UI area and advise stakeholders. We reached the following conclusions regarding the key priority points that needed to be improved:
- Unify and clearly define the design, since we started from a very irregular base in that aspect.
- Optimize the usability of the portal throughout the entire user journey.
- To give a focus to the Home that would explain the purpose of the tool.
- Improve the search system.
- Find a unified and consistent way to embed multimedia content of different nature in the same document.
- Make the portal adaptable to any device.
The European Space Agency’s requirements for this project were to create a repository to store the capture of knowledge from scientists and experts, mainly through videos and all kinds of multimedia files. A kind of wiki for ESA Knowledge Management.
The repository would take shape through a web portal that would allow users to create and upload content, tag it with metadata and share it with other users.
The system was to contain three main categories of content:
- The content of the wiki, always changing and controlled by one or more editors.
- Curated documents of various types, with defined contents provided by an author and with a specified creation date.
- Video and audio content, video tutorials or knowledge capture interview results.
Research & early insights
I started benchmarking projects that might be of a similar nature, although I will not list them for privacy reasons.
This phase helped me to see what other similar projects were suffering from and to discover what added value our project could bring.
I also did an extensive analysis on a technical level to find out how the portal was built.
After this phase I obtained a series of early insights, many of them of a technical nature, which I will discuss in the next section.
After the previous phases and taking into account basic usability heuristics, I discovered and understood the importance of answering the following questions (only some are shown as examples):
- How do we distribute the information on a general level? The layouts will be of 1 or 2 columns, with their corresponding subdivisions. The 1-column layout is used in simple pages such as the Home page. For the rest we will use 2 columns and their subdivisions.
- How much weight should the menus have for this project? The top menu should be minimalist, giving much importance to the search engine due to the purpose of the portal and the recommendations of the ESA. The side menu will be adjustable in width only when necessary, for example in the advanced search filters. For mobile we will use mainly hamburger type menus.
- Texts, icons? The main menu will be simplified to improve readability, accessibility and responsive behavior. When icons are used, for example in advanced search, their purpose is to group elements visually. In the filter bar, we use the icons to help identify categories. They become especially useful, for example, when we fold the sidebar to gain space.
- Configuration of the element tables: the columns of the tables will be sortable whenever appropriate. The tables will be responsive.
Show search results and filtering systems: a drop-down menu will be added to the Home search and any other page except the advanced search. We will keep the filters in the folding sidebar, but it will be designed in a more modular way, making the applied filters more evident (through checkboxes). The checkboxes will also generate a label that will improve the usability and will serve as a visual aid. A toolbar will be added under the search field that will allow you to reorder results and change views (list / cards).
- Default texts: default texts and images will be generated and displayed as long as there are no contents yet.
- Hierarchical navigation: hierarchical structures will always use tabulation or indentation.
- Show additional information: specific blocks (cards) will be used for additional information. These blocks (widgets) will be reset to the space assigned to them, either to the right of the main contents, underneath them, etc. We keep the tabs, both horizontal and vertical, to show related contents.
Applying improvement criteria
The screenshots on the left (black header) show the status prior to the first phase of applying design and usability improvements. The screenshots on the right (blue header) show the design and layout changes. I describe them below:
Home: in a first step, I started to unify styles and colors that would give more coherence to the portal and the brand image. I also generated a series of replacement images to be displayed in the absence of definitive images.
Search: I unified all filters in the left sidebar to improve usability. This improvement applies in all similar cases.
Article: In this portal it was vital that articles with a lot of embedded content be kept consistent. This screen is a first approach to the solution.
Favorites: in this section I improved the distribution of the cards and their typology. Besides, the upper menu was completely remodeled to behave correctly in mobile devices and improve the graphic quality, as we will see also in the screenshots of responsive.
Applying Responsive Design
Here are some extra captures in tablet mode. They clearly show that the simplification of the top menu does not affect their usability.
The following iteration, developed with Sketch to streamline the process and obtain rapid validation by ESA, is shown below.
Sketch mockup – Desktop
In the Homepage I used a hero type slider to highlight the main features of the portal. Using this interface element I also improved the UX writing and onboarding.
For articles with embedded content, I chose to alternate text and image to keep the layout balanced. The side menu becomes more consistent than in the previous version, especially on mobile devices. The information architecture is clarified with the improved design of the tree view.
The advanced search is simplified. In the side menu, filters are activated by checkboxes, which are reflected in the faceted search bar. This bar is now displayed just below the search field for consistency and to improve its responsive behavior. It also allows you to change views (list / cards).
Below you can see a video with the live mockup.
Sketch mockup – Mobile
On these screens you can see in detail the adaptation of the top menu to mobile.
The advanced search functionalities are perfectly adapted to any viewport mobile.
Again, you can watch a live mockup video.
I developed this mockup in HTML to make it easier for stakeholders to understand the prototype.
Mockup Screens in Marvel
Here you can see all the screens that make up the desktop and mobile mockup.
Here are some of the iconography designs for the placeholder images
These are the fonts used in the project. They are those indicated in the official ESA style guide.
Sketches by hand
The genesis of my contribution to the project is here. It all starts with pencil and paper 🙂