The NewsHouse Redesign
The redesign of The NewsHouse website aims to enhance user experience and align the site with user needs, industry trends, and usability principles. This project builds on comprehensive research, user personas, and iterative design phases to create a visually appealing, functional, and user-friendly platform for delivering news and stories relevant to the Syracuse University community.
Scope: UX Research, User Interface Design
Deliverables: User Personas, Userflows, Sitemap, Low-fidelity wireframes, High-fidelity mockups and Prototypes
Tools: Figma, Adobe Illustrator, Photoshop & Firefly
Overview
A User-Centered Overhaul
TheNewsHouse.com is a multimedia platform providing news, entertainment, and updates from Syracuse University, while also helping Newhouse School students build essential digital skills for the media industry. In Fall 2023, the site’s director identified a need for a redesign to address rising mobile traffic and high bounce rates, with a vision for a modular, visually engaging website that’s user-friendly on the front end and easy for students to manage on the back end.
The goal was to make the site more mobile-friendly and aligned with Syracuse University’s brand while ensuring a flexible platform that students can easily update and maintain behind the scenes.
Challenge
How might we revamp TheNewsHouse.com to improve mobile accessibility, SEO, and user engagement, while maintaining ease of use for students managing the backend?
Solution
By implementing a mobile-first, modular design with a focus on responsive content, innovative but simple aesthetics, and SEO optimization, the redesigned website will enhance user experience across devices and allow future students to easily manage and update the site.
Empathize
Understanding the Audience and Current State
To kick off The NewsHouse redesign, I immersed myself in understanding the needs of both site users and content managers. Through a content inventory audit, user interviews and observations, competitive analysis, and heuristic evaluations, I gathered key insights about user preferences and pain points. These findings revealed opportunities for improvement, particularly in usability, visual appeal, and backend ease of use. By focusing on user needs and listening to the perspectives of content managers, I built a solid foundation for design decisions.
Key Takeaways
Navigation & Clarity: The website’s navigation needs clearer labels and organization, especially for sections like "Off Campus," to align with user expectations and make content easier to find.
Intuitive Interaction: following convention is key—users expect familiar and straightforward ways to access content, such as clicking images to open articles or receiving content recommendations to encourage engagement.
Content Discovery: Implementing content recommendations would improve the browsing experience by helping users find similar stories of interest, enhancing engagement.
Design Aesthetics and Mobile Optimization: A visually appealing and clean design is important, with mobile optimization prioritized since most traffic comes from mobile devices. Text and images should scale appropriately for smaller screens.
Define
Prioritizing Solutions
Using the insights from the research phase, I developed user personas that represented the target audience and distilled their goals into clear problem statements. For example, one of my key questions was: How might we modernize the site’s design while staying true to The NewsHouse's established identity?
For each HMW question I came up with 5 solutions and subsequently determined their respective potential effort and impact to then map onto an effort-impact scale to managing time more efficiently on a project and to determine the feasibility of the proposed solutions.
An effort-impact scale helped me prioritize features and focus on solutions that balanced practicality with user impact. I aimed to create a redesign that retained the brand’s recognizable colors and feel while exciting new visitors and improving overall usability.
Ideate
Exploring Solutions
In the ideation phase, I explored a variety of design possibilities. Low-fidelity wireframes served as a starting point for brainstorming layouts and features. Feedback from stakeholders highlighted a challenge I wrestled with throughout the project: balancing visual variety with simplicity. Too much variation felt overwhelming, while too little lacked interest. This iterative process helped me hone in on layouts and elements that worked modularly, allowing flexibility for different types of stories while maintaining a cohesive and user-friendly design.
Prototyping
Animations for Impact
I translated my wireframes into high-fidelity prototypes in Figma, incorporating feedback from peers and usability testing to refine the designs. Key adjustments included tweaking layouts to reduce clutter, refining the typography for better readability, and experimenting with color schemes to enhance visual appeal. One priority was ensuring the design met the needs of content managers by being modular and easy to implement, while also being visually appealing to users.
To enhance interactivity, I incorporated animations like:
- A hover state on the hero image to create a dynamic homepage experience.
- Carousels in the trending stories and creator highlight sections to encourage exploration.
- A categorization bar in trending stories for improved content organization.
These animations ensured a seamless and engaging experience across both desktop and mobile platforms. To maintain consistency across the redesign, I also developed a comprehensive style guide that aligned with The NewsHouse's established identity while modernizing its look. This style guide became the foundation for creating a cohesive user experience.
Final Solution
A Front Page Ready Redesign
Usability testing was crucial in refining the redesign. I received feedback that some layouts felt too cramped or contained excessive information. In response, I adjusted spacing, simplified certain sections, and further streamlined the design for clarity and ease of use. These iterations improved both the user experience and the visual balance of the site. The final design is user-friendly, visually appealing, and flexible enough to support various types of stories.
Problems Solved
- Simplified and reorganized the navigation system with clear labels, improving overall content discovery and accessibility.
- Unified typography, color palette, and iconography to strengthen the visual identity and improve brand consistency.
-
Incorporated animations to enhance user engagement and make the site feel more responsive and dynamic.
-
Developed a modular design that allowed for more flexibility and ease of content management, enabling content managers to efficiently implement changes without disrupting the user experience.
- Integrated content recommendation features and made the site more visually appealing and interactive, encouraging users to explore more stories and return to the site, limiting site bounce rates.