Global Snapshot


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.


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.

Learn about
the problem
Build, test,



Lead Developer
UI Designer

Team of 2


  • Online Research

  • Sketching

  • Google Maps Javascript API

  • Python

  • Google AppEngine

  • Wireframes

  • High-fidelity mockups

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


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?


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.


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


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.


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)

Build, 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 iterated directly on the front-end code as we refined the interface.

To test each iteration, we conducted usability studies with students. We asked them to explore the application with the goal of understanding global current events. We wanted to know how useful the tool was in helping them explore and contextualize news meaningfully.

Design Decisions

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.

Design Concept - Landing page with daily briefing option

6. People 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.

Design Concept - Walkthrough of news on map

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

Design Concept

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

Design Concept - Filters by Section

9. People said "It's still a lot of stories. I'd like this to show me stories I care about." We could add options that allow users to customize the stories they see by type topic (e.g. world news, politics, etc.)

Mobile Interface Decisions

We started designing this for a desktop interface. And that was fine. Users like computers, but they also like smartphones! We know from our research that a huge portion of people consume news by smartphone. We want to make our tool just as usable on a mobile device. We had several considerations when approaching this effort.


We created sketches and an interactive wireframe of our mobile interface. Because of time constraints, we're still working on implementing the mobile interface.

Design Decisions
Mobile Interface - Sketching

1. Explore how we could represent various states of the map and show helpful levels of information about stories while users explored the map.

Mobile Interface - Interactive Wireframe

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
All Projects
About Me