Challenge Summary
Welcome to the “NASA STS Mobile App Design Part-2 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.00 Onboarding - Forgot Password
00 Onboarding - Completing profile
03 ISS now - 2D - Portrait + Landscape
03 ISS now - 3D - Portrait
06 Location settings - Add new location
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.00 Onboarding - Forgot Password
00 Onboarding - Create new account
00 Onboarding - Completing profile
02 Sky view - Landscape
03 ISS now - 2D - Portrait + Landscape
03 ISS now - 3D - Portrait + Landscape
03 ISS now - Metrics/Parameters
06 Location settings - Add new location
06 Location settings - Search results
06 Location settings - World map
06 Location settings - Location name
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 map UI and other screens 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, 02, 03 and 06.
- 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.
00 - Onboarding
- Forgot Password?
- Tapping Forgot password on the login screen brings the user to this page.
- Allow user to enter their email address to reset the password.
- Also allow an option to return to the sign-in page in case they have mistakenly come to this page.
- Keep this screen simple
- Show both success and error states:
- Success: Show a successful password reset message with a button to open their email app.
- Error: Show error on the same screen if an incorrect email is entered
- Set new password
- This screen comes when the password reset link is clicked from the email after initiating the forgot password flow.
- Allow users to enter and confirm their new password with a button to change the password.
- The user should also be able to toggle the password’s visibility.
- Sign up
- Sign up page allows users to create a new account if they don’t already have one.
- User is required to enter:
- Email address
- Mobile number
- Password
- User must also agree to the STS app’s Terms of Service and Privacy Policy before signing up.
- After tapping the signing up button, the new user will be presented with an OTP screen. Also, show this screen.
- Complete your profile
- New users must also complete their profile after they have verified the OTP.
- Step 1: Enter basic information.
- First name
- Last name
- Country (Dropdown)
- State
- City
- After entering the required information, they should be able to tap the “Continue” button.
- Step 2: Notification settings
- Toggle ISS Viewing opportunities
- Toggle Upcoming events
- Toggle Educational content
- After choosing the above settings, they can go to the home screen after tapping “Done”
- Sky view should be accessible from the bottom navigation.
- The portrait version of this screen is already completed in the previous challenge and is provided as reference for you to complete the Landscape format in this challenge.
- We have also got one default view of sky view designed in landscape format but looking for your help to design the rest of the states for Sky view along with this one.
- You must retain same functionality as provided in the portrait screens.
- 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
- 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.
- ISS now shows the live location and trajectory of ISS on a globe/map. Similar to Home screen except this screen will show more details about ISS movement.
- Use the same style for 2d/3d map/globe as provided in the winning submission from previous challenge.
- Show toggle for 2d and 3d map
- Show zoom in/out options
- Show toggle to switch metric/imperial units
- Show current timestamp
- Would it make sense to allow users to move back and forth in time to show past/future location of ISS? If yes, show how this feature might work?
- World map - 2D
- Show ISS location and trajectory on flat 2D world map
- Show ISS stats
- Latitude
- Longitude
- Altitude
- Speed
- Show day/night mask
- User should be able to pan the map
- Indicate user locations on the map
- Design this screen for both portrait and landscape views
- World map - 3D
- Allow same options as 2D map
- Panning may not be required. Instead allow user to rotate the globe.
- Do not show clouds on globe.
- Design this screen for both portrait and landscape views
- This screen is available inside settings of the app
- Shows current/default location and all the added locations with option to toggle location-wise alerts.
- User should also be able to add/edit/delete location from this screen.
- Add new location:
- User should be able to add a location by entering a location address OR by dropping a pin on the map.
- User may also add a nickname to the location. For example: My home, My office, etc.
- Also show option to turn on notifications.
- Also show state for auto-complete/drop-down while entering location address
- How will users edit/remove locations from this page?
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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.