King 5 News

The Challenge

King 5 is a local Seattle television station specializing in local news. While much of their content is television based, they do have a website and a mobile app. Our challenge was to identify user pain points on the existing mobile app and address those points through an app redesign.

Our Solution

We redesigned the King 5 mobile app, putting the emphasis on consolidating and reorganizing the site map and creating a customizable news feed. We cleaned up the visual design and moved the ads from the bottom of the screen to integrated within the news flow.

My Role

My team consisted of four people including myself. Because of the collaborative nature of the project, we all participated in most aspects of the research, planning and design. In my role as Project Manager, I was most involved with the project planning, persona creation, user scenario, design lab, and creating and leading the presentation.

Discovery

We began the research process by conducting a heuristic analysis of the current King 5 News app. We wanted an objective look at how the app layout, navigation and accessibility affected how users interacted with the application, and to locate any obvious pain points before diving into the user research aspect of the redesign.

We found that the navigation was unclear and convoluted and cluttered by unnecessary images and confusing click-throughs. In addition, ads were placed in areas that made it easy for users to 'fat-finger' while scrolling and open an ad by accident.

User Interviews

Our researcher created a survey and interviewed 10 users, hoping to glean insights into their news consumption habits and to learn what sources they use to get their information. In addition, she had users navigate the current King 5 News app, following a script we wrote that led users through the main features of the application, and discovered several pain points along the way.

Generally, users were overwhelmed with the number topic categories, the ease (or lack thereof) of navigating said categories, misplacement of ads and overall lack of customization. One user even proclaimed: "If I could customize it, I would use it." Taking this feedback, our researcher and I created a persona, Amy Tin, to represent the user throughout our design process.

Persona

Affinity Diagram

Our researcher conducted an open card sorting exercise to see how users would naturally categorize, group, and prioritize the content on the app.

As a team, we reviewed the feedback from the user interviews, and used an affinity diagram to tease out common themes and areas of frustration among users, in an attempt to narrow our focus heading into the design phase.

Generally, we found that users were looking for a better way to locate and organize the stories that they wanted to read, a way to save stories that they wanted to come back to later, and a less cluttered, more intuitive and user-friendly interface.

Design Studio

I led a design studio exercise to explore and create our persona Amy’s customized news feed experience. Independently, we each came up with ways to address the problem areas identified through the interviews, card sorting and current app navigation. We then combined our ideas, taking the best and most practical parts of all four sketches to come up with one powerful solution. By the end of the session we had created a rough draft for how to address Amy's desire for a customizable news feed.

Initial Wireframes

Our Interaction Designer and our Visual Designer used our initial research and design studio solution to redesign the app, and created wireframes so we could test with potential users.

Design Iterations

We created an interactive prototype to test with potential app users. Our researcher walked 10 participants through a modified script that let users explore our solutions to Amy's problems with the app: the new customizable newsfeed (My News) and locating desired stories and news topics.  Based on the feedback, we addressed the remaining pain points, and our visual designer modified the prototype to accommodate our fixes.  

Final Design

Taking into consideration our users' pain points, as well as how we addressed them, our Visual Designer refined the experience, making sure that the design was cohesive across all wireframes, and our researcher performed a second round of testing with the users. Overall, feedback was positive.