Global Snapshot

Problem

Many young adults in America don't know what's going on in the world because they feel they don't have time to keep track of global news.

Solution

An interactive global map that displays a curated list of top global news stories from the New York Times. People can see what's going on all over the world, and drill deeper for more information and context.

Role

UX Designer and Lead Developer. Team of 2

Methods

  • Online Research

  • Sketching

  • Google Maps Javascript API

  • Python

  • Google AppEngine

  • Wireframes

  • High-fidelity mockups

  • Front-end development
    (HTML, CSS, JS, Bootstrap)

Date

Fall 2016

Current Product

Learn about the problem

I was in a class called Interactive Systems Design and Technology. We had to build a web application with Python that used APIs to provide a useful service to people. It was election season, so we were all talking about world news. We realized that a lot of people, including us, just don't read the news, making us pretty ignorant about some really important events. We did some online research on this.

Why don't people read more news articles?

Brainstorm

People obviously had trouble taking the first step in the learning about global events. We played with ways we could make world events more consumable.

Sketching

Idea - To address the fear of helping people easily "catch up" with events they may feel out of touch with, a timeline of important global happenings or topics that organizes stories into a linear narrative

Sketching

Idea - No wonder people feel overwhelmed. A feed of articles doesn't always show what concepts are most pressing or relevant. Maybe a "Topic Cloud" that uses news sources and social media to emphasize certain topics. We could make this more relevant to people by letting them customize the algorithm that highlights certain topics.

Sketching

Idea - We are visual creatures. News sites might include locations of global events, but it can be hard to visualize where these events are playing out geographically. A map of news stories could provide this context without overwhelming people. (spoiler: we went with this idea)

Make, test, iterate

We started by setting up the back-end, since that was the focus of the course. Because of the time constraints of the course, we built the front-end as we designed the interface, so each prototype was a working one.

Design Decisions

Prototypes - V1

1. Since people prefer one trusted News Stories, we pulled from a curated list of top world stories from the New York Times

2. Let people see where news is playing out, which will help them actually remember it, and avoid bombarding them with information.

Prototype - V1

3. Give surface level information to help people decide if they are interested in reading more or not by showing a story's title when they hover over it on the map.
4. To focus users' attention on the stories on the map, hide the story list on the right, but give a quick route back to the global map ("World View")

Prototypes - V1

5. Show an image and preview of the article from within the application so users can get the overall point of the story, which they can associate with the location.

Prototypes - V2

6. Users said "The landing screen doesn't make it clear what I am supposed to do with the tool." So we could add a landing screen that quickly gives context and provides options.

Prototypes - V2

7. Some people were still initially overwhelmed by all the data on the map. We could give a "Daily Briefing" of the top 5 news stories

Prototypes - V2

8. People said "The tool helps me see where stories are, but I still don't know much about the locations themselves or what's going on there." We could add a More about [topic or location] option that would pull from different sources to give context to a story

Prototypes - V2

9. People said "It's still a lot of stories. Which ones are the most important?" We could add options that allow users to customize the stories they see by type topic (e.g. world news, politics, etc.)

Testing

Between V1 and V2 above, we let fellow students explore the application, then asked them questions about how useful it would be to help them absorb what was going on in the world.

What I learned

There are two things I would have changed about this process. I wish we had utilized more front-end frameworks like react.js and bootstrap to build the interface and allow us to pivot more quickly, rather than painstakingly making changes in HTML, CSS, and Javascript, which we did without taking the time to properly comment. I also wish we had done more usability testing with low fidelity mockups early on. It was hard to implement large changes to something that has already been built.

This too is an ongoing project! Check back to see its progress.

Current Product
Back To Top
LinkedIn
Contact 
About Me