Project Description:
For this project, I was asked to propose a brand new design for JPL Missions’ landing microsite page (https://www.jpl.nasa.gov/missions/). After reviewing the present microsite, I thought it would be a good idea to refresh it and give it a more modern, sleek, interactive flow. I started by doing some research and pen sketches, adding some potential new elements within the page flow.


For the User Experience design (UX), I created multiple sketches and wireframes for the main landing page. After creating a few options, I decided to work on the User Interface design (UI), including a top video roll, following with the main Mission JPL statement, and including three main top categories to choose from – Technology, Exploration and Innovation.


To make the page more fun, I included a bit more User Interaction design (IxD), and a JPL Mission History road map, following a Mission selection Interactive map driven by a data visualization graphic map. Whenever the user hovers over a selected area within the map, they will get an overview of a past or active JPL Mission. At the same time, one has control over what mission to view or select by choosing from some drop-down menus.


Using JPL style guides, colors and fonts, I created a few other modules on the JPL Missions landing page. These modules consisted of more in-depth information about the infrastructure, budgets and investments per mission. One can view all budgets, exploration, technology and general information for the JPL missions from that module (landing page in progress). On the last module, users will be able to read more about the Space Flight operations and personnel per mission. On the main module frame, users will be able to read the latest information about space flights, in this case, we have the “Meet the Deep Space Exploration System Crew” article with general info. One can also read and learn more about other space flights by clicking the More Info cta button (in progress).




Top Features:
• Fully Responsive / Mobile-Friendly
• Multiple Video Rolls on the Top Hero Module
• Multiple Interactive Elements and Modules
• Data Visualization Map
• Mission Stories Overview
• Infrastructure & Investments Area
• Spaceflight Operations & Personnel Module


My Roles:
• UX/UI/IxD Designer
• Art Director

Primary Sketches
  

 

 

 

 

 

  

  
Process — Work Space
  

  
Proposed Design — Landing Page
  

  





Research + Credits





Credits and Research


www.teslarati.com/spacex-crew-dragon-port-return/

www.anychart.com/solutions/technical-support-dashboard/

www.nasa.gov/sites/default/files/atoms/files/nasa_fy_2019_budget_overview.pdf

www.nsf.gov/attachments/137508/public/nasa_emc_dev.pdf

www.videoblocks.com/video/looping-animated-orthographic-engineering-blueprint-of-cassini-spacecraft-displayed-specs-are-accurate-data-nasajpl-hfh4oniegiv07yb5h

www.jpl.nasa.gov/infographics/infographic.view.php?id=10780

www.io9.gizmodo.com/over-100-past-present-and-future-nasa-jpl-missions-in-5937815

www.microstrategy.com/us/resources/introductory-guides/data-visualization-what-it-is-and-why-we-use-it

www.fontsinuse.com/uses/10500/the-martian-ui-graphics

www.nasa.gov/mission_pages/station/main/index.html

www.twitter.com/territorystudio

https://x.company/projects/loon/

https://x.company/projects/waymo/

www.nasa.gov/feature/jpl/nasas-mars-insight-flexes-its-arm

www.jpl.nasa.gov/missions/

www.territorystudio.com/project/spyscape-museum-lift/

www.edigma.com/#!projects






Data visualization


Data visualization is viewed by many disciplines as a modern equivalent of visual communication. It involves the creation and study of the visual representation of data. To communicate information clearly and efficiently, data visualization uses statistical graphics, plots, information graphics and other tools.

www.promptcloud.com/blog/6-big-data-visualization-tools-for-you/

1. Google Charts —
www.developers.google.com/chart/

2. Tableau —
www.tableau.com/

3. FusionCharts —
www.fusioncharts.com/

4. Highcharts —
www.highcharts.com/demo/

5. Canvas —
www.canvasjs.com/

6. Power BI —
www.powerbi.microsoft.com/en-us/

7. Cognos Analytics —
www.ibm.com/products/cognos-analytics




Others info

www.tableau.com/solutions/capablities/big-data

www.public.tableau.com/en-us/s/gallery/find-your-perfect-summer-holiday-destination?gallery=votd