port-image-spotmedia.jpg

Spot Media

Spot Media

Responsive Web App Design

About Spot Media

Spot Media 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 web platform, distill brand principles and create a style guide.

My Role: Design Lead

I led a team of four designers to scope and execute on the project. I also facilitated design and feedback sessions with the client.

 

TL;DR

Spot Media 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. We delivered:

  1. Version 1 of the Spot Media 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 started off by grounding ourselves in the satellite imagery and journalism industries. We conducted interviews with subject matter experts, ran competitive analysis, and usability tested existing products. From there, we created job stories to guide our design process.

Problem Space Exploration

Existing Use:
We read up on the history and evolution of satellite imagery. We cold emailed 30+ individuals who use satellite imagery (eg. journalists, environmentalists, anthropologists). Connecting with individuals at the Washington Post, NBC, Mongabay, the San Diego Union Tribune, and UC Berkeley provided us with insights to deeply understand current use cases.

Competitive Analysis:
There are 13 key services (public and private) that offer satellite imagery. Surveying each, we were able to understand core features and 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.

 

Requirements & Ideation

Using research as a guide, we worked with the client to refine requirements for the first version of their product.

We conducted a Design Studio and diverged on potential pathways to bring the requirements to life. We ran a critique on our ideas and converged to flesh out the most promising ideas. 

We identified core use cases and an initial flow for helping customers get the job done.

Design Studio: Diverging using an exercise called  Crazy 8s

Design Studio: Diverging using an exercise called Crazy 8s

Design Studio: Converging after the design critique to storyboard out promising ideas

Design Studio: Converging after the design critique to storyboard out promising ideas

Task flow for a core use case

Task flow for a core use case

Initial concepts for a core use case

Initial concepts for a core use case

 

Lo-Fidelity Prototyping

Using our sketches as a guide, we created lo-fidelity mockups. 

Before the next full round of testing we:

  1. Reviewed static mocks with 2 potential customers to get initial feedback on any missed opportunities for v1

  2. Talked through mocks with the client for feedback and discussed alignment with product objectives

At this point, 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 is likely not 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 flows and also needed to add a project organization section to enable teams at news agencies.  

We held another Design Studio to refine user flows and create an organization structure. Next, we prepared for lo-fidelity testing.

 

Lo-Fidelity Validation

We conducted 5 tests. Pain points that came out of user testing were affinity mapped and prioritized. We carried our insights through to the hi-fidelity mockups.

lofidelity_affinitymapping.png
 

Hi-Fidelity Prototyping

Tangentially, we ran branding workshops with our client (not featured in this case study). We began to incorporate the style guide and brand principles in hi-fidelity. Abstract enabled us to speed up our design process and work more collaboratively.

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 Media responsive web platform.  Final deliverables included master Sketch file, Zeplin export, and interactions document. We delivered:

  1. Version 1 of the Spot Media 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 a deep understanding of customers and their mental models and were able to create a first version of the product that the client loved. The core Spot Media team is thrilled with the first version and currently implementing our designs.