What's Happening Around Me:
AR Mobile App Feature

Speculative integration of a GPS-based Augmented Reality feature into
CNN: Breaking US & World News App

 

 
CNN AR animations .00_00_08_22.Still001.jpg
Augmented Reality: using the lens of technology (in this case smartphones) to pre-impose objects/words into the users' real world setting. 
 

 

PRoblem

We were tasked with Integrating a GPS-based news
Augmented Reality feature into CNN's mobile app.

Solution

We used built-in cameras on users phones, GPS access, crowd-sourced & local affiliate news stories, and proximity alerts as a way to view breaking news within the users GPS-based location.

Role

I was a part of a small UX Design team and my primary roles were as Project Manager and Head of User Research

Goals

  • Understand how augmented reality could be used to compliment news stories
  • Find out why users would want to access GPS-based news
 

Research

Project Plan, User Survey, User Interviews, Affinity Map, C&C Analysis, Brand Guide, Web Analytics, AR research

 
CNN Primary Logo.png
 
 
 

First, we created a project 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 surveys gave 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

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 

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 mappersona

 
 
 
 
 
 

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 to mind 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

Mind Map on GPS-based news

 
 

Design

Design Studio, Low-Fidelity Wireframes, Medium-Fidelity Wireframes, High-Fidelity Wireframes, Prototype, Card Sort, Usability Test Plan, Usability Test, Iteration

 
 

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.

 
 
 

We conducted a card 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.

Trends

  • Home label was consistently placed at bottom
  • Weather label was usually on top
  •  Aerial view, location view & compass view labels were grouped together.
 
 

Low Fidelity Wireframes

 

Features

  • Filters: Traffic, Crime, City Services, Emergency, Metro
  • Location
  • Weather
  • Compass/ Aerial View
  • Locally Trending News 
    • Clickable Hashtags to view in depth information on the story
  • Alert Pop up based on the direction your phone is facing
    • Clickable Alert to see a photo and story (if available)
  • CNN Home Button
  • CNN Main Navigation
Low-Fi Traffic img.jpeg

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

 

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 challenges that 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

 

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
5 All filters.jpg

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

 
 
 

 

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.