top of page
ABC7 Chicago:
An (Unsolicited) responsive Site Redesign
ABC7 Chicago's current website
Project Overview | ABC7 Chicago needs a well organized online presence for all their news articles and resources. This is a student project to redesign ABC7 Chicago's current website to look great on all screen sizes, and for their community resources to be more accessible for users.
Timeline | 2 Weeks
My Team | Ann (UX Research), Enrique (Visual Design), Johnii (Interaction Design)
My Role| Information Architecture
Let's Get the News
Interviewed 7 avid news consumers over Zoom
Interviews | We sat down and interviewed 7 consumers of news sources. Each conversation was roughly 30 minutes long, and followed a set of scripted questions with some room for spontaneity. Our interviewees were asked to describe how often they consume news, what types of platforms are preferred, and how they locate their community resources. Each insight contributed to improving the ABC7 Chicago online experience.
Affinity Mapping | After sifting through all data from the interviews, we organized the information into three categories. These being Emotions, Behaviors, and Thoughts.
Emotions| The user needs to feel a sense of trust and comfort within what they relate to news and community. They want to feel a sense of belonging connected through being informed.
Behaviors| The user does not want to think about where to find the information they are looking for. It also needs to be accommodating for their short bursts of consumption.
Thoughts| The user wants to have a foundation to build a reliable ritual. So that they can discover news and resources. They want to know where to volunteer, donate, and help small businesses.
Community resources is under Station Info
Community resources page looks like an article
Testing| We put the original ABC7 website in front of the users. We asked them to find where they think community resources are located. It took the users an average of 5 minutes to find the correct page. It's located within the hamburger menu under Station Info. Once the user arrived to the correct page, they would leave immediately and look elsewhere. This was because the page looks like an article.
The Local Chicagoan
Combining Trends | Even though these 7 people didn't all live in Chicago, they had some strong similarities when it came to consuming news and community resources. They all want to easily stay informed about what's going on in their community.
The Problem:
"Tina needs an intuitive source of applicable community resources, so that she can be enabled to stay safe, grow, and act on information quickly with her community."
The Flow
User Flow | The two tasks we were focusing on were finding articles and finding community resources. Both of these paths lead the user to their ultimate goal, which is gaining knowledge to take action. We also had to keep in mind what paths our persona would take on mobile vs. desktop.
Wireframing
Previous Iterations | The original wireframes were designed with a modal pop-up. We changed this in the final prototype to preserve screen space. The very top banner above the header was changed from blue to red after usability testing.
Visual Design
Mood Board | Being in charge of the mood board, I wanted to stay true to the tradition feelings you have when you turn on the news. I also wanted to emphasize on community and current events. Blue is a color of trust, which is why a lot of news stations use it in their logos.
Style Guide| For more details on our visual design, check out the style guide Enrique put together.
Desktop + Mobile Prototypes
Go through the Prototype yourself!
Testing| We were able to put our Hi-Fi prototypes in front of one of the users. The user found Community Resources within 30 seconds. This was a huge improvement from the original.
Next Steps|
-
Design: Adding a map for filtered results
-
Plan: Card sorting for organization tags
-
Test: Navigating within the bigger news sites
bottom of page