Research

First, we created aproject plan and timeline to map out the work ahead of us with our project scope & goals as our main focus.

We needed to learn the habits centered around news, from our users.

How Users Interact With News (multiple choice)

User Survey - 61 responses

Preferred News Network

User Survey - 61 responses

User surveysgave us great quantitative data on our users' habits and user interviews showed us qualitative data on goals and motivations for their news consumption. We then began grouping trends in this data through an affinity map.

Affinity Mapping information from User Interviews

We also created a comparative and competitive analysis on secondary competition (i.e. social media) to see how they were offering interactive news. In the midst, we also conducted in depth augmented reality & CNN brand research to get a larger picture of a baseline.

Key Insights

Users access news to make informed decisions.

GPS based news is valuable when an event occurs around the user or their family, due to safety.

When users need to know news in the moment they are successful at finding information through social media platforms and/or community & neighborhood pages.

Persona

Empathy Map, Persona, Customer Journey Map, User Flow

Empathy Mapping

We needed to know who we were designing for. Once we learned how our users accessed news, their pain points and their insights, we synthesized our data and created an empathy map & persona.

Empathy Map

Persona

Journey Map

Kyle is who we began designing for. He was the combination of our user data. His goals were now our own goals. By keeping him at the forefront, empathy was continually felt for our user (Kyle) and this kept all designs human-centered. When we knew who our Persona was, customer journey map & ideal user flow were shaped.

Ideation

Mind Map

Why would Kyle be using this AR feature?

This question led us tomind mapping where we could ideate and see all concepts on news genre that were possible. We narrowed down to focus on Kyle's goals and then we began initial sketches.

Mind Map on GPS-based news

Design

In our design studio we played around with how our interface might look and which features might be both expected and unexpected. We time-boxed this exercise and then collaborated on a hybrid of our best features, based on our project goals.

Card Sort - User 1

Card Sort - User 2

Card Sort - User 3

We conducted acard sort with 3 users for main navigation within the AR home screen. We wanted to see how our users prioritized and gave hierarchy to proposed features.

challenge

The first challenge that we encountered in the design process was during this card sort. The task was to place 9 labels on a drawn out phone screen in the order our user would expect or associate each label with. We didn't elaborate on what each label meant and instead had them interpret the meaning.All 3 of our users associated the label 'filter' with the process of going from a broad list of selection to a specified item and not 'filter' as in a swipe through to view different items, which we were planning to implement - as seen on other AR social media filters.

Challenge

The second challenge we encountered in the design process was: Which filters are most important and relevant? Do we keep them all? How will users be able to identify these filters?

Also, figuring out how to translate these features into an Augmented Reality Prototype was probably the bigger challenge.

Medium Fidelity Wireframes

CNN App Home Page

Traffic Screen

Local Trending News

Traffic Alert Screen

Trending News Info

Aerial View

Iteration

Alerts are placed in relevance to their occurring location. No longer sectioned together.

We added the CNN Home page for wire flow to show how Kyle would access the AR Feature.

Narrowed down filters to Traffic, Metro and Crime

Added the black bar at the top of the screen (consistent with CNN home page)

Aerial View page was rounded and a bigger view of the compass diameter, instead of a full map

Challenge

Our next challengesthat we encountered in the design process was during first rounds of usability testing . Users didn't understand that the positioning of the camera would determine the alerts or view you would be seeing. Since this is a newer technology, users had a hard time with orientation of how this visual information translates to their real world.

We also noticed that users felt the screen was too cluttered. They wanted to be able to view more of the screen without everything in the way but they still wanted the same features.

High Fidelity Wireframes

CNN App Home Page

All Filters Screen

Trending News

Traffic Alert

Aerial View

iteration

Added tutorial

Modified AR label and button on home page

Added titles under filter icons

Filter Icons only appear when it has been selected through swipes

Removed solid black bars from top and bottom

Moved weather and location to top left instead of top center

Made Aerial view/Map separate from Compass.

Aerial View is now sourced from google maps and allows users to view outside of immediate neighborhood

"All Filters" button was added to view all alerts at once

We gave color to alerts, which differentiated between high importance and low importance

Challenge

During this phase of the process the challenges we came across in Usability Testing were a refinement to what we already produced. Users were not keen to the 'All Filters' option and remained confused on the bottom navigation buttons: Top News & Watch Live. Users wanted more filters other than the pre-selected few.

Tutorial

CNN App Home Page

Camera Access Set Up

GPS Access Set Up

Main Screen Tutorial

Secondary Screen Tutorial

Prototype

Animated Prototype

Iteration

Our last set of iterations were minor.

We condensed trending news and our CNN home page button to share the space in bottom navigation and gave trending news a clear arrow button.

We altered the tutorial by giving it more context but not bombarding our user with information.

In the tutorial screens we also created a noticeable way to skip that process and jump ahead.