Gotham Space Agency

Description

Client:

The Gotham Space Agency, is a group dedicated to exploring the frontier of space and inspiring the next generation of citizen scientists. It is founded by Andre Dua (Founder of McKinsey Academy) and Nigel Snoad (Product Manager of Google) in 2015. The Gotham Space Agency is planning to launch a satellite into space and to create a educational platform using the resources sent back from the satellite for middle school and high school students.

Deliverable:

User research and usability test, comparative analysis, user persona and user flow, site map, interactive wireframe, project booklet. 

Role:

In this 7 weeks project, we worked in a group of 4, created user experience within the mission component of the Gotham Space Agency websiteMy job include: brainstorming the tasks, creating user personas, user testing and gathering feedback, making 1 paper prototype and 2 interactive prototype by Axture  

 

Tools:

Paper prototype, Axure RP, Photoshop, Indesign & Keynote.

 

Research

Our client comes with a very open-ended concept. The idea they have is "Let's launch a satellite and do something cool that kids would love to play with". So we start at brainstorming the possible deliverable we could present on the website for education using the "satellite" journey.

User research

Media outlets in use by children could be an App, a website, and a Instagram. Latest trends on what keeps kids interested on day to day basis

  • Cartoons
  • What’s currently in space?
  • NASA experiments
  • Satellites
  • International Space Station
  • Space News
  • Games

Brainstorming Points

  • Story Line (A story within the story of our astronaut character).
  • Daily tasks competition (kids come up with things for astronauts to do)
  • “We will fly over your home”, kids enter their address and are notified with a message from above that the satellite is flying over their house. Could be real time or just imaginative. Instagram postings?
  • Astronauts say hello from space. Addressed to particular kid. Kids submit requests. Instagram or website or App.
  • Daily broadcast from space that tells a story about earth and/or space., can be locally created
  • Map, always on, shows where exactly satellite is
  • Geography stories

Narrow down the topic

After brainstorming and first iteration on paper prototyping, we realized it is impossible to put that much of information on a single website/mobile application. We narrow down the scope of information we would like to deliver on the website mainly focusing on documenting the journey of the satellite and our character with science story and the social media interaction. We convinced the clients about the range of tasks we decide to include by presenting a comparison between a "super informative" and a clearer version of prototype during the first client critique. As quoted from our client: "Now we have clearer thoughts about what we are going to do."

We decide to mainly focus on the website experience because

  1. It is easy to access and keep tract on.
  2. Not all children have smartphone. Even if they have, parents won't be happy about kids staring at cellphone all day although they use "education purpose" as excuse.

As a satellite launching process, time is an important element through the entire journey. So I come up with the idea that using a timeline to link all of our important event. Users could go back and forward along the timeline to view all important moments. This idea has been accepted and becomes the center of the project.

User Persona

User Flows

Wireframe and User Testing

1st wireframe

user feedback:

  • Most of the users are confused about what kind of information is shown in each stages
  • 10 users were confused about game playing and satellite tracking windows ( are they clickable?)
  • 3 users didn’t understand what will happened until they click the placeholder
  • 1 user mentioned that the game is very unnoticeable since it is at the bottom right corner of the screen. He believes this place is usually for unimportant advertisement.
  • 1 user think the current information window is too complicated, each stage information is displayed in a different format. She expected to see a more universal way among each stage.

changes made based on user testing:

  • Improving the format of time line
  • Change the time line to vertical for consistency
  • Instead of let user read update from sliding window, change the information window to be a universal panel sorted by category
  • Delete the game, if needed, could be displayed in the daily update panel

2nd wireframe

user feedback

  • The timeline is great but needs more efficient way to indicate time
  • 4 users did’t realize the timeline is clickable
  • 2 users would like to see the spaceship to rotate or have a bar to indicate the exact date
  • 1 user was very excited about the rocket, it reminded of a game
  • 1 user suggest to delete the sliding window and only display the newest update as well as the gallery 5 users ignored the “view gallery” button

changes made based on user testing:

  • Improving the format of time line
  • Change color of clickable components on time line on mouse move and mouse click
  • Include gallery on every page of the “drama” pop up window
  • Change format of the countdown, add drama as well adjust position according to its importance improve over layout
  • Separate tracking and live map window from “drama” windows

 

Final wireframe