nasa-43566.jpg

Spot News

Spot News

Responsive Web App Design

About Spot

Spot is a platform for journalists to access, purchase, and analyze satellite imagery from public and private imagery sources. It is a low-cost source for independent, credible, and globally consistent reporting.

Project Goals

Design the first version of their responsive web platform, distill brand principles and create a style guide.

My Role: Design Lead

I co-led a team of five designers to scope and execute the project. I also acted as a primary point-of-contact for the client and organized internal and external meetings.

 

TL;DR

Spot wanted to build the first version of their product: a service that would aggregate public and private satellite imagery and would be a low-cost source for journalists to access  independent, credible, and globally consistent imagery. Through our design process (eg. user research, competitive analysis, design sprints and user testing) we were able to deliver:

  1. Version 1 of the Spot responsive web platform which will be built in Summer 2017

  2. Extensive user research and competitive analysis of the satellite imagery industry

  3. Brand principles and a style guide

Click here to explore the desktop prototype, or watch it in action below!

 

Research

We first needed to ground ourselves in the satellite imagery and journalism industries. We conducted user interviews with subject matter experts, competitive analysis, and usability testing of analogous products in the space. From there, we were able to create job stories to guide our design process.

Problem Space Exploration

Existing Use:
As a team, we diverged and read about the history and evolution of satellite imagery. We cold emailed 30+ individuals who use satellite imagery to deeply understand the current use cases for imagery. This included talking with individuals who work in journalism, environmental studies, human rights, and anthropology. Organizations we talked with included the Washington Post, NBC, Mongabay, the San Diego Union Tribune, and UC Berkeley.

Competitive Analysis:
We identified 13 services (public and private) that offer satellite imagery and surveyed each of them to understand core features and the industries in which the product was used.

Usability Testing

We conducted 15 usability tests for products that also offer satellite imagery including Spaceknow, Airbus, and Landinfo.

Job Stories

From our problem space exploration and usability testing, we created Job Stories that would guide our design process.

 

Ideate

From our problem space exploration and usability testing, we started off the ideation phase identifying Spot’s core features and creating a task flow of how we envision the customer interacting with the product to achieve their needs.

We identified core features and an optimal user flow.

As a group, we then conducted a Design Studio which is a day of ideation and group sketching. 

ideate_designstudio.png

After sketching and critiquing, we moved forward with whiteboarding out the user interface. 

 

Lo-Fidelity Prototyping

Using our UI sketches as a guide, we created lo-fidelity mockups in Sketch and a clickable prototype in InVision. 

There were 3 key things we did before jumping into lo-fidelity validation:

  1. A walk through with the client to share the first digital version of the product to ensure we are on the same page and to discuss any technical questions/constraints

  2. An abbreviated usability test with a journalist

  3. A walk through of the prototype with two cartographers at the Washington Post to identify any crucial pain points or missed opportunities in the first version

In relaying user feedback to our client, our target user also started to change. Instead of targeting specialist cartographers at large new organizations, the client wanted to start focusing on smaller news agencies where a journalist may not be a super user of satellite imagery. The business model also shifted from offering more complex geo tiffs to pngs. We had to rethink a few of the initial user flows. We also had to add a project organization section which felt like an important feature for our users.  

As a team, we held another mini Design Studio to rethink flows and create a purchased images organization system. We created a second version of our lo-fidelity prototype for validation. We also started building the mobile version of the application.

 

Lo-Fidelity Validation

We created usability test scenarios and questions, and conducted 5 tests. We used affinity mapping to organize and prioritize major pain points in the prototype.

lofidelity_affinitymapping.png

We carried our insights through to the hi-fidelity mockups. You can find the major pain points and our solutions in the next section. 

 

Hi-Fidelity Prototyping

In hi-fidelity, we incorporated the style guide and brand principles that we created in collaboration with the client. We also decided to use Abstract to speed up our design process by working collaboratively from one source of truth. Abstract was a massive time saver for our workflow and a great way to build communication among team members. 

To solve the major pain points uncovered in lo-fidelity validation, we went back to whiteboarding and also looked at patterns in existing products.

Here are major pain points identified in lo-fidelity and addressed in hi-fidelity:

Hi-Fidelity Validation

We conducted a round of usability tests, iterated on feedback, and tested again. For each usability test, we used a matrix to score if the user was able to successfully complete the task or not. 

Below are some of the biggest usability issues we uncovered in hi-fi validation, and our solution for each issue.

Task: Move “Area of Interest” (Desktop)

Problem

  • User wasn’t sure if the AOI box can be moved by dragging the box.

Solution

  • Added a darker overlay to indicate the box can be moved.

 

Task: Save Search Results (Desktop)

Problem

  • Save Search button was displayed below the filter tools and user had difficulty locating it.

Solution

  • Moved Save Search button to adjacent to search bar and added a bookmark icon.

 

Task: Count Objects (Desktop)

Problem

  • Comprehension of the Count Object tool

  • Users didn’t understand the mechanics of drawing a box around the object before counting

Solution

  • Onboarding tooltip on My Images page for each tool

  • Onboarding tooltip in Count Objects page showing an example of how it works

 

Task: Filter Search Results (Mobile)

Problem

  • When all filters were expanded, it pushed down the search results.

  • User wasn’t sure if search results were updated after applying the filters.

Solution

  • Moved the filters to a new screen.

  • Added a call to action to apply filters so user understands that search results will be updated.

 

Task: Move to Projects (Mobile)

Problem

  • Comprehension of the Count Object tool

  • Users didn’t understand the mechanics of drawing a box around the object before counting

Solution

  • Onboarding tooltip on My Images page for each tool

  • Onboarding tooltip in Count Objects page showing an example of how it works

 

You can also check out the clickable desktop prototype here and mobile prototype here!

 

Conclusion

Over the course of five weeks, we designed the first version of the Spot responsive web platform.  Final deliverables included the master Sketch file, Zeplin export, and interactions document. We delivered:

  1. Version 1 of the Spot responsive web platform which will be built in Summer 2017

  2. Extensive user research and competitive analysis of the satellite imagery industry

  3. Brand principles and a style guide

Throughout the project, we uncovered crucial information through extensive user research and usability testing, and were able to build a product that the client loved by having a close feedback loop with the client who could then inform us of any changes in business objectives.  The Spot team is thrilled with the first version and currently implementing our designs.