NASA STS Mobile App Design Part-3 Challenge

 

?Welcome to the “NASA STS Mobile App Design Part-3 Challenge”! In this challenge, we need your help to design screens to track ISS in the Spot the Station (STS) app, using the winning design from the recently concluded Part-1 challenge as the basis. 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: Part-1 Challenge is already completed and both Part-2 and Part-3 challenges are running simultaneously. We welcome you to participate in any or both challenges! You are not required to have had participation in Part-1 challenge.

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.
04 Resources - Home page
04 Resources - Events + Event Detail page
04 Resources - Missions + Mission Detail page
05 Account - Default 
05 Account - My profile
05 Account - Change password flow

As part of your checkpoint submission, upload your designs into the Figma prototype. Please include the Figma 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 final designs for checkpoint feedback.
04 Resources - Home page
04 Resources - Events + Event Detail page
04 Resources - Missions + Mission Detail page
04 Resources - Interviews + Interview Detail page
04 Resources - Educational Content + Educational Content Detail page
05 Account - Default 
05 Account - My profile
05 Account - Change password flow
05 Account - Notification settings
05 Account - Privacy settings
05 Account - Terms and Conditions


As part of your final submission, you must replace your checkpoint submission with the final submission into the Figma prototype. Please include the Figma 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 screens for account and educational resources

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 04 and 05.

• 00 - Onboarding (In scope for Part-2 Challenge)
• 01 - Home (Completed)
• 02 - Sky view (In scope for Part-2 Challenge) 
• 03 - ISS now (In scope for Part-2 Challenge)
• 04 - Resources (In scope for Part-3 Challenge)
• 05 - Account (In scope for Part-3 Challenge)
• 06 - Location settings (In scope for Part-2 Challenge)

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 primary navigation from the winning design.

04 - Resources

• Resources is a collection of educational content for users to learn interesting trivia and knowledge content to learn about ISS and related. 
• You may use placeholder content from resources links in Background section.
• All of the content should also be searchable. How will search option look like? 
• At the moment, each category is a plain list of items, but we want to make this rich and engaging experience for users. 
• Also think how do we bring users to this page? As learning about ISS will make their overall experience with app more enriching. 
• Think of different kinds of users -- and if screens can offer interesting combinations to them. For example: What might appeal to school kids so they explore Resources page?
• Can users interact with resources? Might be interesting if users can like or share  
• We have four categories within Resources:
  • Events: List of launching/docking or any kind of events related to ISS.
  • Missions: List of missions carried out for ISS
  • Interviews: List of interview videos by astronauts, scientists from NASA or space agencies partnering for ISS
  • Educational articles: List of educational articles about ISS
• You are welcome to rethink all of resources in a new and better way.
• Events:
  • Shows a list of different events, from recent to past. We are thinking of cards, but suggest what you think makes more sense.
  • Each event to have:
    • Category: Launch, Docking, other
    • Event name
    • Event date
    • Event picture 
  • How do we present this information to user? 
  • Tapping on a event card should open a page to see detailed information about events.
• Missions:
  • Shows a list of different missions carried out for ISS. 
  • Each mission to have:
    • Category
    • Mission name
    • Short description
    • Mission picture
  • How do we present this information to user? 
  • Tapping on a mission card should open a page to see detailed information about mission.
• Interviews:
  • Shows a list of interview videos by astronauts, scientists from NASA or space agencies partnering for ISS
  • Each interview to have:
    • Interviewee name
    • Interviewee organisation
    • Interviewee photo
  • How do we present this information to user? 
  • Tapping on a interview card should open a page to see detailed information about interview. Mostly a video.
• Educational Content:
  • Shows a list of educational articles about ISS
  • Each educational content to have:
    • Content category
    • Content title
    • Short description
    • Picture
  • How do we present this information to user? 
  • Tapping on a content card should open a page to see detailed information about educational content. 
• Detailed page: Each of the category items will lead to their own detailed page with a unique template.
  • We need your help to design look for each of the detailed page for -
    • Events
    • Missions
    • Interviews
    • Educational content
  • Each of the item can have rich content:
    • Pictures
    • Videos
    • Text
    • Interactive widgets

05 - Account

• Account is a set of screens to allow user to dig into information and preferences related to their account with the STS app.
• Default view:
  • Shows a list of sub-pages:
    • View profile
    • Settings
    • Terms and Conditions
    • Sign out
• My profile:
  • Show following details:
    • First name
    • Last name
    • Email address
    • Mobile number
  • Allow option to change password.
  • Show screens for password changing flow.
• Settings:
  • Show a list of sub-pages:
    • Notification settings
    • Privacy settings
    • User location settings (Out of scope for Part-3 challenge)
• Notification settings:
  • Show settings for 
    • Toggling notification related to 
      • ISS viewing opportunities
      • Upcoming events
      • Educational content
  • Setting notification time: Default is 30 mins ahead
  • Setting notification type:
    • In-app: True/False
• Privacy settings:
  • Show settings to turn off notifications between a time period.
• User location settings:
  • This is not in scope for the Part-3 challenge.
• Terms & conditions:
  • Keep this simple. 
  • Show us how this page will look like.

DEVICE SPECIFICATIONS

• Target device: iPhone 14 Pro Max
• Design @1x: 430px x 932px (Portrait), 932px x 430px (Landscape)
• Export @2x: 860px x 1864px (Portrait), 1864px x 860px (Landscape
  

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.
• We want to emphasise that the app follows a clean, polished look and feel, which also conforms to Human Interface Guidelines - Design - Apple Developer. 

BRANDING GUIDELINES

• You must follow the look and feel from the provided winning submission from previous challenge. This is a continuation of the same app and thus, should have the exact same visual appearance.
  

JUDGEMENT CRITERIA

• Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
• Exploration: Restrained; strictly follow the provided screen requirements section and production guidelines.
• Aesthetics: Hi-fidelity design; provide a top-notch, finished-looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

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.
• Figma Prototype
  • Create Figma Prototype and connect all your screens.
  • Include your Figma Prototype URL in the declaration file in your final submission. Label it “Figma Prototype URL”.
  • MarvelApp Prototype is not required in this challenge.