A New Way of Exploring Space Videos on Your Mobile Phone

Problem/Opportunity:
People who are interested in space like to watch TV programs that are related to celestial and terrestrial content. They also like to share as they are watching the show. In order to provide a better tool for them to explore in further depth, we will help them learn more about astronomy through an mobile app that allows people to enhance their experience through augmented television show viewing.

Purpose:
Designing an mobile app which serves as a extension to National Geographic Channel to support space television shows viewing experience. Main takeaways are:
- Having audience to share a video that they like to others, either entire video or at a specific time.
- Using the latest time-based animation to support interactive content viewing.
- Adding a new feature which allows audience to explore research materials and factual information of a video.

Duration: 2 weeks

Group members: Julia Wargaski, Lawrence Lee and Olga Sergeeva

My role: Lead UX Designer/Researcher, Project Manager, and Visual Designer

The main steps that I took for tackling this project:
1. Coming up with our project brief and project plan.
2. Preforming possible research methods to learn about the our competitors.
3. Validating problem statement through interviewing users and gathering feedback.
4. Analyzing and gathering data from user research and interviews to finalize project scope.
5. Sketching, iterating, and testing.
6. Finalizing UI direction.
7. Annotating Hi-Fi mock-ups.

1. Coming up with our project brief and project plan

It was tough for us to come up with a initial problem statement since each of us have different levels of knowledge in certain areas of expertise. We first started off by listing our favorite subjects in three main areas: Health & Fitness, Science & Nature, and Education. As we go deeper about our listing, we decided to dot vote them on the subjects that we like the most. After our voting session, we decided to go with “Astronomy.”

Topic voting by interests

As the process goes along, we decided to come up with different ideas about astronomy and how we can explore this topic deeper. We looked at different mobile applications that are somehow related to celestial and terrestrial, as well as interactive. For example, we looked at how users would track stars and constellations on the go. Later we come up with our initial problem statement with NASA as our brand.

First initial problem statement:
Mapping and navigating 3D spaces based off geo-location for celestial and terrestrial contexts.

However, NASA has done many applications to this particular subject matters. We decided to focus on the behavior of how people watch space/science television shows on their TVs. We decided to change the brand of the subject matter. Finally, we have National Geographic as our main brand for the product.

2. Preforming possible research methods to learn about competitors

Regarding our research method for the project, I talked to my teammates and decided the level of the research that we should be focusing on. Later we decided to focus on comparing brand models as well as features.

Feature and business comparison

In feature analysis, we looked at how our competitors handle their sharing features as well as delivering contents to audience. We also explored on how indirect and potential competitors are handling their pricing options in additional to their KPIs. We found out that lot of our competitor are augmenting television viewing experience by implementing various sharing options in additional to basic features such as “add to bookmarks” or “save it for later.” We decided to focus this as our primary feature.

3. Validating problem statement through interviewing users and gathering feedback.

It was nice to start off with a initial problem statement during our first week of planning session. However, we want to know if this statement does apply to our users in the scenario that users would navigating in 3D space with augmented reality technology. To move further, we decided to make a survey by asking people with their behavior in learning space content through television shows or any applicable content. We start off by ideating spaces on a white board and correlated how “we” think of space.

Astronomy and space mind diagramming

With the mind diagramming, we were able to come up with questions like…
- What science shows do you watch?
- When do you usually watch the program(s)
- When do you share?
- How much would you want to share with others?
- With whom would you share?

With these question, we were able to identify our true astronomy/science lovers for a in-person interview session.

Actual URL of the survey:
https://lawrence.typeform.com/to/wp00Ic

In our in-person interview, we were able to gather some useful data from users regards to their behavior when watching space television programs.
Some direct quotes are…

…its nice to have those fancy graphics whether it’s a life science show and the are looking inside the body — Whether its an astrophysics show and they are looking at the moons of Pluto.
I share the content on facebook, friends on whatsapp to my best friends who have common interests. I shares pictures more than anything else. It says more than anything else.
I would love to be able to cut out a piece of a comet flying across the screen, I would just like to have it. It would be a cool little video to have.
But if there was an easy way for me to like go through and ““snip” — this is a very cool moment” and share it or keep it or do something with it. I would love it.

Based on our finding from our interviews, we discovered that many people love to share some cool stuffs from the shows as they are watching it. They also enjoy the “AHA” moment from the television shows. Our problem statement has changed based on these interview data and we decided to revise based on our findings.

Here is the new problem statements:
People who are interested in space like to watch TV programs that are related to celestial and terrestrial content. They also like to share as they are watching the show. In order to provide a better tool for them to explore in further depth, we will help them learn more about astronomy through an mobile app that allows people to enhance their experience through augmented television show viewing.

4. Analyzing and gathering data from user research and interviews to finalize the scope of project.

After our user interview, we were able to gather data based on pain, pleasure, behavior, and context from our users’ responses.

First stage of affinity mapping

To understand the trend better, I took the lead of resorting the findings that we gather from the first diagram based on the similarity of each card with card sorting. After digging to these categories, I decided to focus on these similarities:

  • Aspects of sharing
  • Aspects of entertainment
  • Personal behavior / thinking
  • General frustrations

To explore the main frustrations based on users’ behavior while watching television shows, I resort the cards from our first affinity mapping and analyze them from another diagram to discover a certain pattern or trend.

The main frustrations are:

  • Don’t believe something from the narrator
  • No documents to bolster existing info on the video
  • Hate the fact there is no sharing option for a moment in a video
  • Hate to stop the footage to share
  • Don’t want to share b/c it will interrupted the show
  • Not knowing there is a option to click share while watching shows on the computer

The main behaviors are:

  • Typically get a link via emails from friends/parents
  • Only shares to people that are closer to myself
  • Keep up with family as a way to communicate
  • Don’t want to share on social media b/c there are not many closer friends

After we gather our data for pain points and behaviors, we wrote down the possible features based on those findings and put them on another affinity mapping diagram to show the focus of our features.

The features that we like to keep for our product are:

  • Recommend topics to view or suggested videos to see (change as per visited)
  • Bookmark your favorite videos
  • Balance between content / visuals
  • A spot for additional research serve as a supported materials to a video
  • Screen recording
  • Take a snippet of a video and share it
  • Record the entire video
  • Interactive visual elements

With these features and our finding from the previous diagramming, we were able to start sketching our ideas out on papers.

5. Sketching, Iterating, Testing and Prototyping.

As we were sketching, we want to explore many options on the to exhibit our planets in a fun but engaging enough to our audience. One thing that we was trying to discover is the interactive planets on our first page.

All sketches

As we move along, we then move along as we finalize our our paper prototype for testing. We asked our users to share a video at a specific moment when they saw something.

Sketch > paper prototype
  1. One of our users is interactive with timeline feature of our prototype (earlier ideas).
  2. Timeline feature
  3. Notification alert pop-up (iOS platform)
  4. Main video content in one of the planets. This is the main section where consists all videos under it.

As we are conducting user testing sessions, we found out that many people have difficulties in discovering the “screen-recording” feature on the main video screen. So we are actually destroying the UI convention of quicktime player by this specific design decision. Although the screen recording feature is interesting, but it is not technically feasible for iOS platform. We decided to go back to conduct more research about the existing technology that would be somehow feasible to the current iOS standard. Finally, we decided to reference “set time” feature from YouTube as our main reference.

Screenshot from YouTube’s share at specific time feature.
Evolution of sharing feature based on technical feasibility
  1. Combining “sharing the entire video” with “Share a specific time” as one pop-up tab beneath the main sharing bar.
  2. Another approach with native iOS notification slider design (this one is the most technical feasible compare to other iterations).
  3. Combining a specific moment with all social media access as one modal window. According to a iOS developer, this would requires more time and cost to make it happen.

As a team, we decided to go with second option since we are using the native notification slider but only modified them with web technology from YouTube to access a video for share it.

Since we are using time-based animation as our technology to build the interactive portion of the application, we decided to go with HYPE as our prototype tool.

Case scenario:
My name is Laila, and I am a science/astronomy lover. I downloaded the app couple weeks ago and I am familiar with what it does. I want to explore some exciting videos about Earth and I would like to share it to others on Facebook if possible.

URL of the prototype:
https://dl.dropboxusercontent.com/spa/6uhxzaf3wqqfkfe/Exports/prototype/prototype.html

6. Finalizing UI direction.

Since we are designing a mobile application as a extension of National Geographic Channel, we decided to fit the color scheme as their current style design. We also want to combine the mysterious factor of universe with their current design. I personally come up with this current design approach.

I also combine the wireframe annotation with the current HiFi mockups.

Next Step:

As our additional step, we want to test out if they are being “wow” with the fact that they can use airplay feature to connect to their Apple TV for better viewing experience. We also want to see if the “additional info” section under each video is worth to build for our users. I personally would like to evelated this prototype with all the current existing UI so it will look better and coherent with the overall NatGeo scheme.

Personal Reflection:

This is the first time of being a project manager for design project. It was hard to keep everyone on the same page due to communication issues. As we make it transparent, everything went smoothly in terms of engagement and task making. However, I still think I need to be able to make certain design decision under deadline and able to take the lead of team in expressing our ideas as a whole. Although we went back and forth of our problem statement, we were able to finalize our direction based on the feedback from user interviews. One of the biggest thing that I learn from this project is do the technical research while coming up with new ideas. You never know if a design decision is achievable or not until you talk to a developer. He or she may discourage you by their answers, but it is worth it to fail it first before handling your product to development. Fail fast and success early!