The Newshouse is a news website at Syracuse University intended to give student journalists experience writing for a real news publication and reporting on events across campus.
The director of the website wanted a redesign that gives student journalists more flexibility to change the layout based on editorial decisions, while also overhauling the overall design to be cleaner, more modern, and realistic to implement on the front end and the back end.
Research
Who am I designing for?
I spoke with some of the key groups of people that use the Newshouse website to find out what problems they have and what changes they want.
![Overview of the Newshouse users.](images/newshouse/process-images/Newshouse-stakeholders-and-users.png)
Potential design opportunities
After I observed student journalists go through the process of creating and uploading an article to the website, a few things stood out to me.
![Graphic showing a workaround student journalists have to do for mobile headlines.](images/newshouse/process-images/newshouse-mobile-headline.png)
![Graphic showing article tags on the Newshouse.](images/newshouse/process-images/newshouse-article-tags.png)
A primary user journey: mobile traffic from social media
The website manager said that users often come to the site when they find an interesting article on social media. After being directly linked to and reading that article, they leave the site.
![The as-is journey of a user coming from social media, reading an article, and then leaving the site.](images/newshouse/process-images/newshouse-as-is.png)
![The to-be journey of a user coming from social media, reading an article, and then going to another article or going to a section front.](images/newshouse/process-images/newshouse-to-be.png)
Analyzing user behavior from analytics
The manager of the Newshouse said that users often come to a specific article on their phone through social media, read it, then leave without going to other articles or a section front.
A pattern I noticed in the analytics data is that the section fronts on desktop have higher page view rankings than their counterparts on mobile.
One of the differences between the desktop and mobile views of the Newshouse is that on mobile, the section front pages are hidden behind a hamburger menu. That made me wonder if the mobile section fronts have lower page view rankings because they are not right in front of the viewer like they are on desktop.
![Table showing that the section fronts on the desktop version of the Newshouse get higher traffic relative to other pages than the section fronts on the mobile version do.](images/newshouse/process-images/NewshousePageViewRankingChart.png)
Designing and iterating
My wireframe had too many articles
After showing my wireframe to the website manager, he said there were too many articles, especially with the inclusion of a button that loads more articles.
Since the Newshouse only publishes a few articles per week at most, he didn't want there to be lots of older articles on the section fronts.
![Wireframe of my initial redesign of the Newshouse sports section front.](images/newshouse/process-images/newshouse-sports-section-front-wireframe.png)
Designing different headers for different contexts
The website manager wanted to implement WordPress blocks on the website so that student journalists could change the layout based on their editorial decisions. I designed various templates for the section page header that student journalists can choose from, depending on the situation.
![Three variations of the sports section front for the Newshouse website.](images/newshouse/process-images/newshouse-modular-section-front.png)
Mobile design optimizations
Based on the user journey of mobile users coming from social media, reading an article, and then leaving, I redesigned the navigation of the mobile site to not be hidden behind a hamburger menu. This means that users would be more likely to go to a main section page, where they can discover more articles.
![Two mobile design optimizations that I made.](images/newshouse/process-images/newshouse-mobile-optimizations.png)
Final designs
Sports Section Front
![Newshouse sports section front.](images/newshouse/final/pngs/D SportsFront Normal.png)
Article
![A sample story page.](images/newshouse/final/pngs/D Story.png)
Live story
![A sample live story page.](images/newshouse/final/pngs/D LiveStory.png)
Search results
![Search results page.](images/newshouse/final/pngs/D SearchResults.png)
Contributor page
![The contributor page.](images/newshouse/final/pngs/D ContributorPage.png)
Lessons learned
Working with a client
This project showed me what it is like to work with a client and the importance of listening to different stakeholders, which in this case included the website manager, student journalists, and site users.
Combining qualitative and quantitative data
To understand the problems and constraints, I made use of Google Analytics data in addition to talking to users and student journalists. This combination of qualitative and quantitative data helped me create unique insights.