NASA STS Mobile App Design Part-1 Challenge

Welcome to the "NASA STS Mobile App Design Part-1 Challenge"! In this challenge, we need your help to design the overall look and feel through the key components of the Spot the Station (STS) app. STS App will track the real-time and projected flight path of the International Space Station (ISS) and presents this information visually to the end users.

Note: This is the first of the three design challenges for NASA to build the Spot the Station (STS) mobile app. The winning submissions from this challenge will serve as a reference to create more screens in subsequent challenges.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum.

Round 1

Submit your initial designs for checkpoint feedback.

• 00 Onboarding - Splash
• 01 Home - Default view
• 01 Home - Select Location
• 01 Home - Detailed Compass
• 02 Sky view - Default view
• 02 Sky view - Assistant compass

As part of your checkpoint submission, upload your designs into the MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers (1, 2, 3, etc.)

Round 2

Submit your initial designs for checkpoint feedback.

• 00 Onboarding - Splash
• 00 Onboarding - Login
• 01 Home - Default view
• 01 Home - Select Location
• 01 Home - Sightings times
• 01 Home - Detailed Compass
• 01 Home - Notification
• 02 Sky view - Default view
• 02 Sky view - Save moments
• 02 Sky view - Share to Social media
• 02 Sky view - Assistant compass

As part of your final submission, you must replace your checkpoint submission with the final submission into the MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers (1, 2, 3, etc.)

CHALLENGE OBJECTIVES

• Design an iOS + Android mobile app for NASA
• Create 10-12 UI screens in production-level quality
• Design AR experience and other key components in the app

BACKGROUND OVERVIEW

Spot the Station (STS) Mobile App is a product that will - 

• Continuously track the location and projected flight path of the International Space Station, and
• Relay this information in a variety of visual formats to end users. 

Primary feature

• To notify and inform line of sight opportunities for mobile app users who can gaze up into the sky and view the ISS as it crosses a user’s visual line of sight. 

Additional features

• Ability to customise user location
• Update user settings (such as privacy settings)
• A sky view option that directs the user to the ISS via the live camera view with an option to overlay the trajectory lines on the current camera view
• A nowcasting global map view
• View Assistance UI (Dynamic Compass)

About International Space Station

• The International Space Station (ISS) represents an international partnership of five space agencies from 15 countries.
• The ISS has been continuously occupied since November 2000, and an international crew of seven (or more) people live and work while travelling at a speed of five miles per second, orbiting Earth about every 90 minutes.
• In 24 hours, the space station makes 16 orbits of Earth, travelling through 16 sunrises and sunsets.
• It is the third brightest object in the sky and easy to spot if you know when to look up.

Further resources to learn more about ISS:

• International Space Station | NASA
• International Space Station Overview | NASA
• Crews and Expeditions | NASA
• Space Station Research & Technology | NASA
• Space Station Orbit Tutorial

USER STORY

John: The Space-Loving Dad
John Stockert, 33, is a busy dad of 2 boys aged 6 and 10. He is always thinking of ways to inspire an interest in science and math in his kids. He works as a lab technician in Boston, MA.

Mood Journey (Existing website)

The existing website can be accessed at https://spotthestation.nasa.gov/.

• Receiving info about the Spot the Station website from a coworker: John is just getting to know about the Spot the Station service. He wants to get information about line-of-sight opportunities. He immediately accesses the website.
• Exploring line-of-sight locations near my existing location: Getting excited to select a line-of-sight location and can’t wait to gaze up into the sky and view the ISS at the right time.
• Reading the sighting location details: He feels that he doesn’t understand the detailed parameters of the sighting location details. Max height: 78°, Appears: 10° above NW, Disappears 13° above SE
• Finding a way to see live ISS tracking map: John gets confused about why the ISS path is represented as a curve line instead of a linear line. He needs an explanation and detailed information. The static image doesn’t describe the live tracking details well.
• Signing up to get heads-up alerts via email: He doesn’t receive the alerts. It might end up in the spam folder. He doesn’t understand some parameters of the sighting location details sent to his email.
• Signing up to get heads-up alerts via mobile text: John can’t find his mobile carrier in the selection list as it only listed US mobile carriers. He decided to select “others”, but he is unsure if it works as a guide to put country code and if the “+” character is considered valid input.
• Missing the opportunity to see the ISS in the sky: He is unaware of the closest time to see the ISS in the sky as he forgot to open his email inbox. He wonders if the service provides push notifications to his phone, it would be very helpful.

Mood Journey (New mobile app)

• Seeing the Spot The Station app on Apple Store/Play Store, then downloading & install it: John is just getting to know about the Spot the Station service. He wants to get information about line-of-sight opportunities. He immediately downloads and installs the app.
• Signing in to the app and completing location, notification, and profile settings: Getting excited to select line of sight location and can’t wait to gaze up into the sky and view the ISS at the right time.
• Opening View Assistance Compass: He feels that the assistant compass is very helpful for looking at specific areas of the sky where the ISS might be flying and exploring the direction, altitude, and velocity.
• Selecting Sky View (AR feature): He is delighted. The AR feature is very cool. Exploring and waiting for the ISS line of sight is so much more fun and more interesting.
• Observing the live view of the existing location of the ISS: Likes the map (switching from 2D to 3D). The path becomes clearer and more understandable. It’s much better than the flight path seen in the aircraft cabin monitor.
• Getting notification in Dynamic Island: He is very surprised; he gets a notification on his phone (dynamic island feature only for iOS) or push notification for non-supporting phones.
• Seeing the ISS in the sky: Finally, he can see the ISS for the first time. It looks like a bright star moving across the sky.

AUDIENCE

• The general public who is interested in NASA, space, satellites, astronomy, and the International Space Station.
• It could range from a 10 yr old in Kansas to a Dad in California to a grandma in Florida.
• It will be a globally-released app; available in the Apple App Store and Google Play store.

COMPONENT AND SCREEN REQUIREMENTS

The entire app is divided into several components. Each component has several screens and provides one or more features in the app. Together, all components are connected in a seamless flow for the user to navigate. You will only work on the components marked with “In scope” in this challenge, i.e. Component 00, 01, 02 and 03.

• 00 - Onboarding (In scope, partly)
• 01 - Home (In scope, full)
• 02 - Sky view (In scope, full) 
• 03 - ISS now (Out of scope)
• 04 - Resources (Out of scope)
• 05 - Account (Out of scope)
• 06 - Add location (Out of scope)

Primary Navigation

• We have identified five key sections of the app to go into the tabbed navigation at the bottom:
  • Home
  • Sky view
  • ISS now
  • Resources
  • Account 
• Follow the above or suggest new ideas to organise the app sections in a better way.
• Design or use appropriate icons to go with each section.

00 - Onboarding

• Splash screen:
  • Information to be displayed:
    • App logo: Use a placeholder
    • App name: Spot the Station
    • App description: Gaze up into the sky and view the International Space Station (ISS)
    • NASA logo: Use a placeholder
  • Keep this screen simple
• Login screen
  • Create a simple login screen that allows user to login in to the app using their account email and password. 
  • Additionally, the login screen should also provide the following:
    • Option to also log in with Google and Facebook
    • Option to reset the password using Forgot password link
    • Option to sign up for a new account
  • Keep this screen simple
  • Also, show an error state on this screen if incorrect credentials are entered.

01 - Home

• Home should be accessible from the bottom navigation.
• Default view:
  • The default view of the home screen should contain
    • Option to select a location. This opens to a sub-screen at the moment.
    • Next sighting time: Provide the time and count down the clock. For example, 1 hour away & it will occur at 430 EST
    • Animated globe and ISS, which shows its current location and flight path
    • Live feed from ISS
    • Small compass: Floating icon showing the ISS's direction from the user’s current location. Tapping it will take them to Detailed compass, which is a sub-screen.
  • How do users interact with the globe? 
  • Verify Email address
    • For first-time users, the app should show a message on top of the screen to verify their email address.
• Select Location
  • This screen shows a list of nearby locations and allows the user to select the desired location.
  • The user should also be able to change certain location settings.
• Sighting times
  • This shows a sortable list of date/time, visibility duration, and maximum height for all sightings in the week.
• Detailed compass
  • Detailed compass opens up mobile camera view and allows users to understand the position of the ISS using AR.
  • Imagine this feature as a way to locate ISS and its path along with its distance and time left.
  • Help us understand how this feature might help users to locate ISS without going to Sky view, which has a more detailed UI?
• Notification screen
  • Push notification should arrive 30 mins ahead and when it is visible.
  • Can we leverage Apple���s latest ���Dynamic feature��� on their latest iPhones to use to display notifications? This is not a requirement, as this feature (if at all) will only be used by a small subset of users.

02 - Sky view

• Sky view should be accessible from the bottom navigation.
• Default view:
  • Sky view hides the bottom navigation and opens up the mobile camera and options to locate and track ISS using AR-based assistance UI.
  • How do we show the current and projected track of ISS?
  • How best to guide users to spot the ISS
  • Options to be shown for assistance in Sky view:
    • Save moment
    • Locate ISS
    • Share to social media
    • Toggle trajectory
    • Toggle assistant compass
  • Information to be shown:
  • Time left (in minutes, seconds and milliseconds)
  • Distance 
• Save moments
  • Allow users to record screens and save them in their phone photo gallery
• Share to Social media
  • Allow users to share that they are watching ISS
  • What view pops up when clicking share option
• Toggle assistant compass
  • The toggling assistant compass shows an arrow on the screen that hints to users to move their phone towards the ISS location.
  • How do we hint to show the current or projected track of ISS? 

DEVICE SPECIFICATIONS

• Target device: iPhone 14 Pro Max
• Design @1x: 430px x 932px
• Export @2x: 860px x 1864px

Note: For the scope of the design challenge, you will design on iPhone screen size. But remember that the app will be built for iPhone and Android phones.

DESIGN GOALS AND PRINCIPLES

• Use the provided wireframes only as a starting point. Do not just reskin the wireframes. We want you to optimise screens for user experience.
• Remember that the app will mostly be used at night, if not always. A dark colour scheme is preferred.
• We want to emphasise that the app follows a clean, polished look and feel, which also conforms to Human Interface Guidelines - Design - Apple Developer. 
• Follow best practices for Augmented Reality - Technologies - Human Interface Guidelines - Design - Apple Developer.

BRANDING GUIDELINES

• Use the provided branding reference to get an overall sense.
• You may look at existing NASA Apps For Smartphones, Tablets and Digital Media Players, but we don’t expect you to follow their style.
• Follow the guidelines and suggest improvements where they seem appropriate and in line with the goals.

JUDGEMENT CRITERIA

• Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
• Exploration: Out of the box, consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch, finished-looking visual design.
• Branding: Flexible; follow the guidelines and suggest improvements where they seem appropriate and in line with the goals.

GLOSSARY

• STS: Spot the Station (Name of the app)
• ISS: International Space Station
• AR: Augmented Reality

DESIGN ASSETS

The link to design assets is provided in the challenge forum.

FINAL DELIVERABLES

• All original source files created in Figma.
• Marvel Prototype
  • Upload Your Screens To Marvel App.
  • Send your Marvel App request in the challenge forum.
  • Include your Marvel App URL as a text file in your final submission. Label it “MarvelApp URL”.