INFO
The Following Project was done for the European Space Agency and is a detailed description of the design and development process
Due to confidential information, there is limited visual information displayed
— PROJECT NAME
Groundstation Monitoring and Management System (GMMS)
— ROLE
UI/UX Designer
— DATE
01/04/2016-01/06/2017
— TOOLS
SCRUM, Adobe xD, Balsamiq, Jira, Affinity Designer, Microsoft Visio
ESA’s XMM Newton and Integral was launched on 17 October 2002, and has been providing ever since an increasingly detailed insight into some of the most energetic phenomena in the Universe. These include the births and deaths of stars, super-massive black holes, neutron stars, the annihilation of matter and anti-matter, and gamma-ray bursts. It is the biggest scientific satellite ever built in Europe, its telescope mirrors are amongst the most powerful ever developed in the world.
The system that the XMM Newton was built on needed to be updated and this is where the GMMS project started
My team and I had the task to migrate first of all the system’s architecture to a different platform called Skyline Dataminer. The task afterwards was to have a complete re-design of the UI and back-end architecture to fit the new system’s functionality.
In order to achieve that, we used SCRUM methodologies and I was responsible for creating the backlog and all the items for the sprints of every iteration for the Design Team.
Background Research
Right from the start in order to redesign a system, one must know what the system's purpose is and what it does
Step 1 – Background Research
The first step to solving the problem is to start with background research about monitoring systems (e.g nuclear power plant system) and get an idea of what are the key elements to a bulletproof monitoring system.
Step 2 – Understanding the system through research and observation
The second step is to get familiar with the old system:
• understand the workflow of the expert users (by observation)
• understand which were the components that were used the most and which the least (Based on feedback from the expert users – Questionnaires)
• which components were more important than others (Based on the feedback from the expert users – Questionnaires)
• any correlations between them (Based on the data gathered)
To understand some of the points above was proven to be harder than expected since the operators (expert users) were busy 24/7. So the alternative was to observe and consult with the technical leads in order to figure out the parameters above
Background Research – Interviews
I conducted user interviews in order to get a better understanding of the problem
There were 8 main operators in the European Space Agency working for this project. Some of the questions that I asked are the following
Guiding Questions:
- - What are some of the main issues experienced during a normal shift?
- - What are some of the issues experience with the UI/UX during an overtime shift
- - Which are some of the main components used on a regular basis
- - Which are some of the components that most vital to the system
- - Which are some of the components that cause correlation problems
- - What is the frequency of those components causing trouble?
- - What is the main thing that you would change in the UI if you had the power
The process of interviews continued throughout the whole project and was done every 1 or 2 months depending on the iteration deadlines
Prototyping
Low-Fidelity User Interfaces
Once i had established a clear overview of the system and its components, i started drafting out rough mockups with Balsamiq in order to demonstrate a possible combination or grouping of elements that made sense in the UI.
Since we are re-designing a system, the UI’s number was pre-defined, therefore, for each UI we already knew which elements will go in that specific UI. The problem was to establish a clear and cohesive way of displaying these elements, in terms of grouping and screen real estate.
There was a number of problems at this stage, one of them being the understanding of the subsystems and understanding the grouping’s best suited location
(Caption 1: Component Grouping Low Fidelity Interactive Prototype)
High-Fidelity User Interfaces
Once there was a clear mockup established i started to create the UI's for the system itself in Microsoft Visio. Caption 1 gives a rough example of how the first prototype looked like (blurred because of sensitive information) of one of the most complicated UI's of the system.
Caption 2 is one of the first attempts to create a high fidelity prototype from Caption 1. The UI might look simple but there was a lot of work involved in order to group, arrange and place the different components
A thing I am proud of*
I developed a system where each shape represents a different major component type. In this UI you can see three different types of shapes, the Oval, the Square and the Rectangular (with smaller circles inside). Each one of these components serves as an identifier so that the operator can navigate easier. The shape system was an idea that I came up with and has the disadvantage that there is a learning curve to this, in which the users have to dive deep.
This shape system was extensively tested in the user testing section, and was proven a success through the end of the iterations
The platform that we used to re-design the system is called DataMiner, its the leading end-to-end NMS platform. The limitations for this system was the usage of Microsoft Visio as the primary tool for designing and displaying information on the monitor.
User Testing
The user testing process for this project, especially for the UI part was done partially by the iterations and meeting with the stakeholders and operators and the other part was done by conducting further user research by creating a web app to test the user interface
In the first phase of the user testing I was responsible for meeting with operators and stakeholders to show them the UI's and ask questions regarding the efficiency and usability of the user interface.
The method used was a moderated questionnaire together with printed user interfaces.
The subjects had to answer the questions given and give feedback to the printed material.
The following questions were given after every print of the user interface
First Phase – Guiding Questions
- • Briefly explain the pros and cons of this user interface
- • What is the possible problem with this implementation and how would you tackle it
- • What do you most like in this implementation of the user interface
- • Briefly give feedback on how can this implementation serve you better in the operation room
Second Phase – Prototype Testing and Web app
In the second phase I gathered all the information from the interviews and developed a web application using HTML,CSS and Javascript coding in order to create all the functions needed to gather as much information as possible.
The application
The application consists of a home page and three simulations of alarm systems with different UI’s. The user inputs his participation number and enters all three simulations for one minute.
The first simulation (Caption 2 Above) consists of one system, the second simulation consists of two systems one next to the other and the third has three systems portraid in such way, as in the real world use case.
You can you this place to talk a little bit about the image on the side.
The function
In the photo on the right you can see one of three simulations, the interface is filled with components that are green, which means the system is healthy without any errors. The system starts to display gradually errors of different severity and the operator must click on the component that the error has occurred and clear it.
In different simulations there are two modalities that are interacting with the user.
Vision Modality: In the vision modality there were two different techniques used
- Color change with a static component
- Color change with a dynamic component ( a components borders are flashing
Audible Modality: the change of color of the component is followed by a noise (noise comes out only in severe cases which are color RED)
The Goal
The goal is to figure out
- if the color palette used for this alarm system is cohesive and clearly visible
- which combination of modalities is best
- the positioning of the elements are in such way that the operators can identify them quickly
- the complexity of the system is such so the operator can quickly react to an error and clearly understand which components functions
Questionnaires
There are three questionnaires used in this user testing phase in order to extract as much data as possible from the operators that participated in the user tests. The questionnaires were chosen based on the usefulness for this specific scenario by me and the head of engineering.
The questionnaires used are:
USE
It stands for Usefulness, Satisfaction and Ease of Use; The USE questionnaire measures the most important dimensions of usability for users, and it measures those dimensions across domains
ATTRAKDIFF
- Is a model of user experience that dividies the attributes of a product into hedonic and pragmatic attributes. The Atrakdiff questionnaire is used in order to measure the global appeal of the product at hand and see in what way the other attributes affect this global judgement
NASA TLX
Task Load Index questionnaire is a tool that rates the subjective workload perceived in order to assess a task/system/ or other aspects of performance. The Human Performance group at NASA's research center developed this questionnare. The NASA TLX has six scales: 1) Mental Demand 2) Physical Demand
3) Temporal Demand 4) Performance 5) Effort
- 6) Frustration
Contact
email@domain.com
000-000-000
RESULTS
It is important to note that this test was done two times before the final design of the UI took place.
The results that was gathered from the first iteration was overwhelming, some of the significant findings are:
1) Remove sound from the less important components and keep it only for the most important components(bigger components seen in Hight Fidelity UI: Simulation1) when the severity is of high importance (RED)
2) The change of components from important to less important
The results that was gathered from the second iteration were very satisfying, as the operators were really happy with the results from all the observation/questionnaires and user testing done in the previous steps.
If you would like to see a more detailed overview of the results, contact me and I will be able to send you the full document with all the graphs and data.
UI Design
Once I gathered all the information needed and tested the low fidelity prototypes, I started designing the final screens in Microsoft Visio.
The visual style of the system is unfortunately tide to the limitations of Microsoft Visio so I did not use any background colors in order to avoid distractions.
Guidelines
I used a specific color palette that I was given from the previous system and created my own design guidelines based on the user feedback. I designed from scratch all icons in order to make the interface more understandable
There are specific shapes that are used for specific components of the satellites, ground stations and antennas in order to distinguish faster the components that might cause problems.
All neutral elements are of the same color and all elements that are connected to external attributes are taking colors of the color palette of the alarm system
All in all, I tried to simplify as much as possible and make a straight forward workflow so that the operators focus more on the functionality of the system rather than the complexity of the UI
What I learned?
What did I learn?
From the beginning of this project I was this graduate without any experience or confidence taking on a serious project like that as a first project right out of university was quite challenging.
There were several things that i learned throughout this project but first i want to discuss about the fears that naturally arouse when someone is in such pressure
- Fear that i will not understand what the project is all about since I was working with space engineer seniors
- Fear of not being good enough, naturally since it was my first project
- Fear of not delivering professional work
Those fears were there for a good amount of time in the beginning but the biggest help that you can have when you are a junior in a sea of senior sharks is your mentors. Thankfully I had the perfect mentor to guide me through all the hard times (Link- Eduardo Cruz) and cope with my fears until there were none
Some of the things i learned throughout this project were:
- How to manage my time and deliver on time for the next sprint/iteration
- Talk with stakeholders about problems and solutions
- Confidence in taking important decisions
- Understanding the workflow process and product development (ideation-prototyping-design-implementation-testing )
Though perhaps the biggest achievement out of this project which I am proud of is:
' My first project is being actually used in one of the operating rooms of ESA '
16 iterations
200+ Screens
100% User Satisfaction
er