KING 5 NEWS

a newspapers and a cell phone laying on a desk

OVERVIEW

SCOPE
This was a three person team group project. The purpose of this project was to create a new feature for the assigned app. We received the King5 news app. We had two weeks to conduct interviews, gather data, create mockups and deliver a presentation.
MY ROLE
I was the interaction designer and the competitive research lead for this project. This means that I helped write interview questions to zero in on the competition, evaluated the feedback, and created wireframes based on existing branding and user needs.
TOOLS
Paper and pen were used to create the initial wireframes which were then captured in “Pop by Marvel” to create a more realistic process for testing. Sketch was used to create the wireframes. And InVision brought the high fidelity wireframes to life for the final rounds of testing.

DISCOVER

ABOUT KING 5
KING 5 Media Group is the largest media company in the Pacific Northwest. It has a local vibe, allowing you to keep up to date with the latest shows and sports, but also offers a variety of national and global news categories.
ORIGINAL SITE
The original app was tested with users to determine how users navigate the app as well as to discover what feature to introduce.
USABILITY TESTING
You are a resident of Seattle and you want to read the local news on the King5 app to stay informed with political happenings. How would you navigate the app to find the information you are looking for?
KEY INSIGHTS
  • Users want to be able to better navigate the website
  • Users were overwhelmed with visuals
  • Users wanted a way to connect with the community
COMPETITIVE ANALYSIS
It was neccessary to conduct a competitive and heuristic evaluation on the news apps that came back in our user surveys as favorites (CNN, NPR, Seattle Times). The analysis of the three apps helped me to better understand how these industry experts layed out their products for users. I then compared the findings to the King 5 app. comparing visual designs on Seattle Times, CNN, NPR, and King 5 on cell phone screens
FINDINGS
  • K5 was the only news site to have a community section which may be a reason locals choose to use their app
  • K5 is weak in the organization of its politics section which could be frustrating for those who are looking for specifics
  • NPR, Seattle Times, and CNN had what appeared to have the most complete and intuitive navigation
  • K5 had one of the best Traffic and Weather sections
  • K5 is poorly labeled and poorly laid out- especially the politics, local and national news sections

DEFINE

PROBLEM
Mature customers need a better way to find and purchase books online because unclear navigation and categorization are both confusing and frustrating leading to early website abandonment.
AFFINITY MAPPING
The team took the results from a user survey the research lead created and compiled the findings onto an affinity map.
whiteboard full of sticky notes outlining design ideas
SWOT ANALYSIS
The main discovery was that users base the way they consume news based on how the news source makes them feel. When people lose trust in one source they find another source that gives them a sense of control and hope in the system. Users also had a desire to receive local news and to be informed of events, politics, and activities happening in their area.

STRENGTHS

  • Recognized Local Brand
  • Visual Content
  • Community Focus
  • Live Feed

WEAKNESSES

  • Confusing Navigation
  • Flawed Heiarchy
  • Little Personalization
  • Text Heavy

OPPORTUNITIES

  • Improve Layout
  • Create Intuitive Navigation
  • Improve Hierarchy
  • Create Sense of Community

THREATS

  • Loss of Trust
  • Frustrated Users
  • Lack of Retention
SOLUTION
By creating a news app with a localized feature that brings both community and national news together, we can provide a unique, balanced, and engaging perspective that our users want.
WHAT NOW?
Now that the problem and solution were better understood, It was time to create a design that would improve the user’s need for community connection and a more seamless navigation.

DEVELOP

DESIGN PROCESS

The King 5 app offers something other news apps lack- a sense of community and pride for its user base. The team wanted to highlight and expand upon this key insight by creating a feature that would further personalize the user’s experience while at the same time bringing in potential clients looking for a news app with a strong community base.

This led to the creation of a simple onboarding process, which included:

  1. An overview of what the feature is
  2. A way to join neighborhoods based on personal prefrence
  3. A way to personalize topics based on the neighborhoods selected in step 2
  4. A way to manage alerts and updates (as noted in the subject matter expert sites)
PAPER PROTOTYPE v1
original designs
ONBOARDING
  • A four step feature onboarding process
  • Opt out option for users who do not wish to use the new community feature
  • Simple #2 and #3 screens to add Neighborhoods and Topics.
HOME SCREEN
  • “Top Stories” placed first followed by “Your Community” based on competitive analysis.
  • Very basic settings page to be tested and iterated on
  • Option to turn notifications completely on or off
  • Global navigation based on card sorting
USER FEEDBACK
  • Users disliked how many screens there were in the onboarding process
  • Users wanted more defined visual cues such as a scroll bar and larger touch fields
  • “Map View” was suggested to see more locations without needing to scroll
  • Users expected to see “Community Stories” at the top of the news feed
  • Users asked for more personalization related to notifications
PAPER PROTOTYPE v2
original designs
ITERATIONS
  • Made touch fields larger for accessibility
  • Added a visual scroll for clarity
  • Added “Map View”
  • Made a note to add map screen for a visual search option in next iteration
  • Removed a screen to decrease the time users spend with onboarding
  • Gave users a platform to control their community within settings
  • Made the decision to flesh out the settings page in the high fidelity wireframes and continue testing with users to determine needs
  • “Community Stories” was pushed to the top of the home feed based on user feedback that this is what they wanted to see first
HI-FI WIREFRAMES v1
Based on the color test and user feedback a new style guide started to take shape.
new blue-based style guide

ONBOARDING ITERATIONS

  • Map view option added with option to switch back to list view
  • Communtiy stories at the top of the Home Feed
new blue-based style guide

SETTINGS ITERATIONS

  • Global navigation switched to bottom of the screen
  • Simple layout with clear heirarchy and white space
  • General Preferences vs Community Prefrence options gave clarification
  • Users wanted clear labeling of “Alert Frequency over “Frequency”
SUMMARY OF HI-FI ITERATIONS: v1 & v2
  • The global navigation was split between the top and the bottom based on the HIG guidelines in addition to user feedback
  • Setting was kept on the top of the screen for quick access and personalization
  • A save option was added in addition to a pop up confirming changes after users update preferences in settings- based on user feedback
  • The King5 logo was placed throughout the entire onboarding process
  • The proportion of the screens was adjusted to fit most content above the fold
MEASURING SUCCESS
After testing version 2 of the high fidelity mockups, we reached our goal of getting a user score of over 80 which signifies “Excellent” usability amongst those tested. For refrence, the first wireframes tested recieved a usability score of 73.

User Feedback on Final Wire Frames

“This (onboarding process) was super easy!”
“Nice settings flow.”
“I didn’t have to think!”
“I like that I can edit my prefrences.”

DELIVER

Clickable Prototype

LESSONS LEARNED
  • Keep branding in mind: The heart that was placed in the “Community Feature” screens was not congruent with the King5 branding.
  • Remember the scope: The team spent a lot of time on re-working the navigation when the task was to create a new featutre.
  • NPR, Seattle Times, and CNN had what appeared to have the most complete and intuitive navigation
ACCESSIBILITY
Don’t assume that users have the same capabilities that you do. Test for easability as well as accessibility.
NEXT STEPS
  • Continue to create a more intuitive navigation.
  • Hand off wireframes to visual designer with redlines and specs.
  • Address layout issues throughout the app.