For the development of the project we used double diamond.

The project was designed based on data available from NASA and research on solutions that help improve sleep quality. Initially, ideas for applications that integrated the areas of sleep quality, nutrition and exercise were suggested. However, with the development of the project, the application area was chosen.

With all the data and characteristics of the astronauts and employees that were released by the space agencies, we have a basis for the personification of our users, from where our visual identity and action and design solution also emerged.

The persona is a fictional representation of the ideal user. It is based on real data about users' demographic characteristics and behavior. It also presents a creation of their personal stories, motivations, goals, challenges and concerns.

Annie Amberly, a woman, 42, married, without children, living in California, researcher, with a master's degree in Engineering Sciences in Aerospace Engineering, joined NASA in 2011, likes to walk, run, dive, backpack and practice weightlifting.

Ethan Henry, a 51-year-old man, married, 2 children, living in Massachussets, navy soldier, with a master's degree in Science in Electrical Engineering, joined NASA in 2005, enjoys outdoor sports, diving and cycling.

The choice of the color palette was formed based on research in the area of ​​mental health. The palette has two shades of Blue, Cerulean (# 333333) and Dark Blue (# 000000), cool colors that convey many sensations among them, calm, unity, technology, order and confidence in addition to being a representation of space. We have Red Tomato (# 663333), warm color that represents, enthusiasm, vibration, expansion, humor and energy. And Salmon pink (# cc6666) that reflects tranquility since one of our users are astronauts and look for ways to maintain relaxation, because of this we do not use vibrant tones, as it could also cause loss of sleep. Our palette pass deals with sensations such as happiness, satisfaction and mental health.

For this reason, we favor a modern aspect bringing these elements that flat design provides us. As it is a communication and interaction specifically for astronauts, men or women, we also chose to use a language with more seriousness that serves this audience, so that without many difficulties, the user can understand what is being presented and interact with the technology. Therefore, we chose to use geometric aspects to design and represent the simplicity of the shapes.

Regarding typography, the choice of the main font was also defined through our research, where we analyzed that adults have an interest in more flexible and harmonious letters, and provides a greater impact on them by holding their attention, which facilitate dynamic reading . The base source is Open Sans with its family of weight variations, where we seek to mention technology and health.

The secondary font that is used in our application, where we bring seriousness and ease of reading, rounded bases and does not have a serif, we seek to bring the maximum ease of reading so that everyone has no problem of readability. The Advent Bold1 font is technological and fully complies with our project.

All of these concepts also apply to the brand we are building, we designed the HeadHome brand | Space Immersion, we seek in the English language the union of words, first the word Head, we brought this simple and significant word to represent the autonomy, the freedom of the astronaut to maintain or conquer better conditions for his mental health. Finally, Home, representing being at home, that is, through the immersion of the application, the astronaut can feel at home. As a design metaphor we use the head as a fundamental tool for managing the body.

The logo developed was the Astronaut Helmet, but with its separate face, the astronaut represents North American culture; it is an icon that marked its presence in history and technological advances. Points of great relevance that we want to incorporate in our brand. In addition, we brought the head as a reference, symbolizing care for mental health and especially sleep.

The final result of the visual identity is a composition of the symbolic element that represents mental management applied to the concepts of flat design making a modern identity and also with a formal aspect for direct communication with the public.

Following the design process after developing the entire project identity, we aim to create the flowchart of our application. This diagram aims to describe the flow and process of information and data that will be present in the application.

Flowchart

1.Login (1 screen)

1.1. Login

2. Profile (1 screen)

2.1. Personal information - Name, email, phone, age

2.1. Photo - image with button for changing the image

2.1. Password - button to change password

3. Sleep Diary (3 screens)

3.1. Home screen (1 screen)

3.1.1. Sleep schedule (screen 2)

3.1.1.1. Create schedule (based on daily routine)

3.1.1.2. Sleep goals (schedule sleep periods)

3.1.1.3. Activity alert

3.1.2. My graphics (screen 3)

3.1.2.1. Slept hours (start, end, total)

3.1.2.2.Quality of sleep (sleep phases, sleep depth, efficiency,

 changes)

3.1.2.3. Previous statistics (7 days, 15 days, 30 days)

4. Sleep Management (4 screens)

4.1. Luminosity control - intensity of luminosity and color of light of the sleeping place (blue,

white, red and green). (screen 1)

4.2. Meditation and relaxation techniques - audio file. (screen 2)

4.2.1. Meditation to sleep, to wake up, help.

4.2.2. Sounds of nature - waterfall, birds, sea, rain.

4.3 Record sleep (screen 3)

5. Connect monitoring device (screen 4) - search for a device.

6. Professional support (2 screens)

6.1. Choose the specialty (screen 1) - List: Psychology, Generalist, Nutrition, Personal Trainner

6.1.1. Contact the professional (screen 2) - bring a list of professionals according to

with the selected area

Taking into account that the process of designing wireframes can be defined as the skeleton of the project, being a very primitive version of the visual, we use this technique to represent the diagramming of the structures of our application as mentioned in the description of this action.

Before starting the production of the interfaces, we conducted a search for references of other applications and structures that are similar in our proposal, so that we can then base our choices. We had two great examples that guided us, the first of which was Facebook itself, because, as it is a social network, we went to this great platform to be able to observe how the elements on the page are distributed.

We also used WhatsApp as a reference to compose our semantic panel, because today it has become one of the main tools that allows agile communication with instant conversations, video calls and sending files without much complexity and quick handling learning . We chose to bring these aspects to our platform.

Wireframing offers an objective look at link names, paths to conversion, ease of use, navigation and placement of resources. Wireframes help identify flaws in the architecture or features of the site and show how well they flow from a user perspective.

We produce basic wireframes that are also known as low-fidelity renderings, these are very simple page layouts, usually in black and white.

We did it this way because, later, we will have to design the mobile interfaces and carry out the prototyping to present our solution. With these models, we will have the necessary basis to continue in the design stages.

The UI Elements we used were buttons, text input fields, checkboxes, menus and indicator arrows. We use the maximum of the pictograms so that the interfaces correspond to an intuitive and dynamic navigation.

Dividing layouts and creative elements into interfaces in one step; wireframes ensure that these considerations are made separately, we can visualize and outline the development process. This allows stakeholders to provide much faster feedback during the process. For the creation of wireframes we used Adobe Illustrator software that made the iterative process inherent in mobile design more efficient for later steps. In addition, we also built low-fidelity models on the online Figma platform.

we understand that user experience design is a method to increase customer loyalty and satisfaction, improving usability and enjoyment in the interaction between the customer and the website; application and product. User interface design is closer to graphic design, although the responsibilities are a little more complex. In general, the design of the user experience comes before the design of the user interface. UX and UI tend to, and should, override the design process.

The navigation system includes a series of elements on the screen that symbolize the user moving from one page to another or through the icons to know which functions will be present. Our goal was also to make navigation design clear in relation to links so that users

naturally understand your navigation options.

Based on the visual identity, we designed HeadHome as a specific iconography for the issue of immersion where the user can do their personal sleep management. In addition, being able to view your data and follow-up with health professionals from space agencies.

 Interface design is the practice responsible for planning, developing and applying a solution with the aim of facilitating the user's experience and stimulating their interaction with a physical or digital object.

We followed the idea of ​​flat design to compose the interfaces, since, based on, many elements of simple user interface are used, such as buttons and icons. They are often simple shapes, such as rectangles, circles or squares

 In this sense, the user experience, or User Experience (UX), is the center of attention in the development of the system. A good project, whether large or small, must go through a stage of anticipating the user's thinking and needs.

With the realization of the practical project development of the assigned proposals, such as the idealization of a color palette, personas, typographies, information flow, wireframes and interfaces, we proceeded with the steps of our methodology, therefore, we have now arrived at the moment of prototyping.

For prototyping we use the TypeScript language with visual studio softtware using also react native frameworks.

Flow chart: https://coggle.it/diagram/X3fguHiILC8RA9hv/t/app

Wireframe: https://www.figma.com/file/m82wk4sFp2SMtnI5rP6AcZ/Cadastro?node-id=0%3A1

UI design : https://drive.google.com/drive/folders/1OFKl3hXIPmH-NRS_SbrKsaP3qtRogEpB?usp=sharing

The data from the space agency were essential for the construction of personas, for the understanding of routines in space stations, how the cicardian cycle works in stations, the types of solutions that astronauts have today, in understanding the peculiarities of lighting control, use of pharmacochemicals, in building a solid vision of the need for a solution for the more humane treatment of astronauts.

https://youtu.be/xW82-x0zCxg

As a reference, in addition to what was provided by NASA, as a summary of the challenge, the following articles:

Biographies of the active astronauts available on the NASA website for the identification of the profile and formation of the personas -https://www.nasa.gov/astronauts/biographies/active/

Seven Ways Astronauts Improve Sleep May Help You Snooze Better on Earth - https://www.nasa.gov/mission_pages/station/research/astronauts_improve_sleep

NASA Research Reveals Biological Clock Misalignment Effects on Sleep for Astronauts - https://www.nasa.gov/feature/ames/nasa-research-reveals-biological-clock-misalignment-effects-on-sleep-for-astronauts

Sleepless in Space: Therapy Helps Astronauts Snooze - https://www.space.com/36165-therapy-helps-astronauts-sleep.html

Impacto dos transtornos do sono sobre o funcionamento diário e a qualidade de vida - https://www.scielo.br/pdf/estpsi/v24n4/v24n4a11.pdf

The health benefits of meditation and being mindful - https://www.monash.edu/__data/assets/pdf_file/0004/694192/The-health-benefits-of-meditation-and-being-mindful.pdf

Mindfulness Meditation and Improvement in Sleep Quality and Daytime Impairment Among Older Adults With Sleep Disturbances - https://jamanetwork.com/journals/jamainternalmedicine/fullarticle/2110998

Can Music Help You Calm Down and Sleep Better? - https://www.sleepfoundation.org/articles/can-music-help-you-calm-down-and-sleep-better#:~:text=It%20has%20a%20direct%20effect,don%27t%20listen%20to%20music

Why are nature sounds só relaxing? - https://www.ceenta.com/news-blog/why-do-relaxing-sounds-help-you-sleep#:~:text=This%20lowers%20your%20stress%20level,in%20the%20apartment%20above%20you

Escutar sons relaxantes antes de dormir traz um grande benefício: Entenda - (https://www.minhavida.com.br/bem-estar/noticias/33718-escutar-sons-relaxantes-antes-de-dormir-traz-um-grande-beneficio-entenda#:~:text=Escutar%20m%C3%BAsicas%20relaxantes%20antes%20de,reduzimos%20nossos%20n%C3%ADveis%20de%20ansiedade

Sleeping in space - https://www.asc-csa.gc.ca/eng/astronauts/living-in-space/sleeping-in-space.asp

Why scheduling naps is one of NASA’s most important jobs

 - https://www.washingtonpost.com/news/speaking-of-science/wp/2016/10/03/why-scheduling-naps-is-one-of-nasas-most-important-jobs/

Documentation of Sleep App as Android - https://sleep.urbandroid.org/documentation/integration/wearable/

References and data were searched through the lattes platform, google academic, space agency websites, among others.

Technological resources were adopted for the production of videos, audios and presentations, such as: adobe illustrator (app screens design), adobe after effects (video editing), figma (prototyping), google drive (content repository, doc and exe), canvas (creating PDF presentations), narrator's voice (video narration), groovpad (music), visual studio (editor), type script (language), React-Native, Expo (framework), coggle (flowcharts), react (development).