ABC 7
Re-imagining ABC 7 mobile into a more meaningful experience.
Project Overview
ABC 7 Chicago is one of the original ABC channels in the United States, signing on for the first time in 1948. ABC 7 Chicago would like to shift to a local community focus as a response to the pandemic’s Stay-At-Home order. This is a student project to redesign the abc7chicago.com news site prioritizing access to relevant news topics through the mobile platform.
Timeline: 2-week design sprint
My Role: UX Research, Visual Designer
My Team: Alex Rowley (UX Research, Visual Design), Nate Tuft-Brown (UX Research Lead), Lionel Hill (UX Research)
Methodologies: User Interviews, Affinity Map, Organizational Research, Competitive & Comparative Analysis, Heuristics Evaluation, Journey Mapping, Task Analysis, User Persona, User Flow, Wireframing, Prototyping
Identity Crisis
One of the biggest challenges that ABC 7 Chicago faces is their identity within the community. While the site reported on local and national news, the news is not organized in a way that is easy for their readers to distinguish the categories. For certain key national news topics, their coverage is either buried or hard to find. For local news, the readers crave positive local news and events so they can stay engaged with community but are only able to find articles about crime and corruption. As a result readers are turning to other news sources to meet their needs.
Visual Navigation
Visual navigation and scanning was also a challenge for readers. There wasn’t a strong visual hierarchy and as the users scrolled, it was hard to discern between different categories of news. Using a tiny tweak responsive design, the article links became wall of text on a mobile screen, decreasing the effectiveness of the user scanning through body of text. An unintended consequence of the design pattern is that this created a lot of scrolling to get through all the stories.
ABC7Chicago.com - Current mobile view
Understanding the Need
Meeting Chicagoans
Our user research began with user interviews and we sought out ABC 7’s target demographic. We interviewed five participants, three of which were Chicago natives with a strong interest in local affairs, and we were able to gather details on how they interact with the national and local news, how they prioritize different news, and understanding the news that they care about.
We synthesized the data through an affinity map exercise and uncovered the following key group:
-
“I have local concerns I would like to see covered”
-
“I care about big topics like Covid, racial injustice, and elections
-
“I like listening to the news stories and podcast because it’s accessible, convenient, and engaging”
-
“I want to learn about events & positive news so I can stay engaged with my community”
Meet Louie, our persona for abc7chicago.com. Louie is a native Chicagoan who works in a local hospital’s IT department. Chicago has a high rate of coronavirus infection and it has been heavily impacting the hospitals.
Competitive & Comparative Analysis
In our competitive analysis, we compared the direct local news competitors in the Chicago market such as NBC Chicago, Fox 32 Chicago, and CBS Local Chicago Our findings was that in our competitors, the navigation was much clearer, better designed, and easier to navigate. The articles were classified into key logical categories.
In our comparative analysis, we chose the national news aggregator and blog “huffpost.com” and found that comparatively, the news was better organized by way of information architecture.
Visual Design
ABC 7 Chicago is looking for a mobile-first approach design to engage with their users. We took the research data and converged on key concepts and features that meet the needs of our persona. My design partner, Alex, was responsible for the desktop design while I was responsible for the mobile design. We worked closely throughout the design process to ensure cohesiveness between the desktop and mobile designs.
The current abc7chicago.com site uses a tiny tweak responsive design pattern and in the compact mobile view, the design pattern creates a wall of text making it difficult to scan and inadvertently, also increases the amount of scrolling for their users.
The first step I took was to update the responsive design pattern to a Mostly Fluid design pattern. This allowed the site to better utilize the real estate in their respective mobile and desktop platforms.
Wireframes for Mostly Fluid responsive design patterns
Why Scroll When you can Swipe
maintaining the theme and colors of the original site, we overhauled the navigation and created a new visual hierarchy to allow for easier scanning of news stories in their respective categories.
In the mobile site, to increase access to news articles and decrease the amount of scroll, we moved the articles from a list of text based links to an article carousel above the page fold. Without scrolling, this offered up nearly double the number of articles than the current design when a user arrives at the site’s landing page.
The Feature Story utilizes a set of dot pagination to cycle through the top 5 News Stories.
We identified and called out four news sections that Louie cared about: Local News, US & World News, Community News, and Entertainment & Events. Within each of these sections, readers are able to swipe horizontally to access the news stories in each news sections. This not only reduced scrolling but allowed the users to know where they are on the main page.
Where You Live Matters
Chicagoans are closely tied to the suburbs they live in. However, not all suburbs have access to a local news papers, making a lot of suburb news word of mouth. We redesigned the local news page so that readers can easily select their suburb and surrounding neighborhoods.
Passive News Engagement
User engagement is extremely important. So how do we keep Louie engaged when he is away from his screen? In our research, we found that users are still willing to engage with the news stories even as they multi-task. In our design, we incorporated the audio track so whether the user is working on his desktop or walking from his train stop to work, the user can stay engaged by listening to the news.
Usability Testing
Our participants were able to complete the usability testing scenarios and its 15 tasks with little to no assistance. The observer assisted the users only in understanding the task and it was unrelated to the navigation of the site. While they were able to complete the test successfully, we received a lot of feedback regarding accessibility.
The post-usability iterations were all related to accessibility. We increased the font size throughout the designs to make it easier to read. There were menus bar that were locked to provide an anchor for navigation and while it may seem intuitive, the users rather see more of the news article. We unlocked the menus are allowed the user to scroll back up to access the menu. The last iteration was that the “bookmark confirmation” pop-up was too transparent and therefore too hard to read. I increased the opacity and moved it closer to the bookmark icon.