THE TEAM: Lauren Torres, Louisa Garcia (me), Saverio Dalia and Sylva Franklin
CNN - What’s happening around me?
Augmented Reality Conceptual Feature
brief
CNN is looking to integrate an Augmented Reality
feature into their pre-existing mobile app.
problem
How can we empower and inform users while implementing an Augmented Reality feature into the CNN app with news articles related to the world around them based on their GPS location?
solution
Create a geotagged, filter-based feature that would allow them to use the built-in cameras on their phones to see news and event alerts happening around them within the last 24 hours.
Timeline: 2.5 weeks
Platform: Mobile App Integration
Tools: Pen, Paper, Sketch, Post-its, Adobe Illustrator, After Effects, Premier Pro
and InVision
My Role: Lead UI Designer, User Research & Interviews, User Journey Map, Affinity Mapping, Design Studio, Wireframing, High Fidelity Prototype, User Testing and Prototype Video
design process
1. Research
BRAND RESEARCH
Our first attempt to address this challenge was to
understand who CNN was and we uncovered this mission statement.
We felt it epitomized the kind of immersive experience we were designing.
CNN go there
From the ends of the earth to the heart of the story, from the news down the street to the questions no-one else is asking, CNN has always gone where no-one else does.
Today CNN drives that spirit forward by inviting its viewers to go to unknown places, encounter a wider range of powerful personalities, and experience stories like never before.
SURVEY
After understanding the brand, we decided to get a feel for who our
uses are and their habit so we conducted a survey.
Interviews
We then conducted several interviews to get a
sense of what users thought of and expected
from the news.
What we learned was:
users DO want to know what's happening
around themthey always want to know the trending news
they care about decisions our government
makes and how it effects them
“I care about news that directly impacts me.”
affinity map
We wrote down all the insights we found on post-its and looked for trends.
We were surprised to see that most users who seek out news also
enjoy being influencers and share what the news they find.
Time lapse of the team creating an affinity map
“I like
to be informed.”
user persona
Meet Kyle Meadows.
An influencer and political speech writer. He checks news sources daily, and often.
He works in a busy, fast-paced office of a popular council member in lower Manhattan.
“Every time I need to know the news
quickly,
it’s what’s happening in my area.”
kyle's current journey map
This is Kyle's current journey without the CNN Augmented Reality integrated feature.
This scenario was from an actual user who encountered a police perimeter around his subway. He couldn't access his subway or find any information on what happened.
Click (tap) to enlarge
Click (tap) to enlarge
ideal user flow
We devised an ideal user flow for Kyle with a GPS-based alert system in place to notify him of any news happening around his immediate area.
2. Ideation
mind mapping
Augmented reality feature for GPS-based news is something that hasn't been done before, we really struggled on where to begin. Since I was the only one of our team who was familiar with AR, I pulled us together to create a mind map to figure out what features we would need.
design studio
This is where we began our first attempt at visualizing what
this AR integration could look like. We selected features we knew would be
very important to our user, Kyle, and placed the rest into our parking lot.
3. Design
sketch wireframes
From our design studio session, our team member, Saverio,
went on to sketch out our wireframes and wireflow with some direction from us all.
4. Test
Medium fidelity wireframes
One of the main troubles with creating this feature was that it was hard to
have users visualize exactly what they were looking at. Users felt really
confused and didn't understand how one screen could lead to the next.
If there is one thing I would change about our process, we would have
printed our medium fidelity wirefames on transparent paper to create the
illusion of augmented reality for users when they held up their phones.
first high fidelity wireframes
Here are some things we discovered when we tested our high fidelity wireframes:
the tutorial we created was overwhelming and confusing
crime awareness sparked their anxiety, but they still felt it was important to know
our hierarchy competed for users' attention
they loved being able to see what news was happening around them
they wished there was a way the app could help them navigate around the event.
second high fidelity wireframes
With this iteration, I implemented a welcome to our tutorial feature,
moved the crime tab to the last spot, added a navigate reroute
button that would direct them to google maps (for now) and
a way for the user to exit out of alerts. I also removed the
all filters tab because it caused confusion.
Before and after
The iteration between the first and second high fidelity wireframe.
prototype
We used InVision to prototype our integrated feature.
5. Iterate
test and repeat
So after another round of testing, users found the augmented reality feature was easier to understand and use and wished it existed currently.
next steps
Some of the features we thought could be considered
for the next steps are the following:
Give users the ability to personalize alerts they'd like to see by signing up for a CNN account
Have actual rerouting navigation in place
Increase CNN TV viewership with this AR feature by having users hold their phone up to their televisions for total immersion into the story right in their living room
CNN Augmented reality feature video
A demo video I made to show what this feature would look like in a real world setting.