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.

Learn about
the problem
Brainstorm
solutions
Build, test,
iterate

Process

Role

Lead Developer
UI Designer

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, didn't know about some really important events. We did some quick online research.

Why don't people read more news articles?

Brainstorm

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

Sketching
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)

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
Version 1 Prototype

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.

Version 1 Prototype

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")

Version 1 Prototype

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.

Landing page with daily briefing option

Users said "The landing screen doesn't make it clear what I am supposed to do with the tool."

Walkthrough of news on map

Some people were still initially overwhelmed by all the options initially visible on the map. A "Daily Briefing" of the top 5 news stories gives them a place to start.

Smart links to informative reading

Users 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

Filter by topic

Users said "I'd like this to only see stories I care about." Customizing by topic would make the experience more personal.

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.

Considerations

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

Mobile Decisions
Sketching

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
Current Product

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.

Back To Top
All Projects
LinkedIn
Contact 
About Me