Coventry University Blog Landing Page
Overview:
The CU Coventry blog, a place for prospective students to find out more about the courses, experiences and benefits of studying at CU Coventry.
For this project, I undertook a comprehensive redesign of a blog landing page, focusing on enhancing the user experience
and optimizing website performance.
Role: UX/UI Designer & Developer
Design Tools: Figma, FigJam
Development Technology: HTML, CSS (Griding, and Flexbox), Vanilla JavaScript
Problem
The previous blog landing page was outdated, with significant issues in both UI and UX design. The main UX challenges included:
- Blogs were not clearly categorized or tagged, making it difficult for users to filter content.
- Poor UI/UX design
- The header image caused accessibility issues due to its design.
- There were no featured blogs highlighted on the page.
This redesign aims to address these challenges and enhance the user experience.
Solution
The new landing page design addresses the previously mentioned challenges by incorporating best UI/UX principles and a user-centric approach. It features a modern, clean layout with an intuitive user journey, prominently displayed featured blogs, and an easy-to-use filter and tag option for seamless content navigation.
Information Architecture
For the information architecture, I structured the single-page layout with clear, intuitive sections: homepage header, “About Us,” “Our Services,” “Industries,” “Features,” “Partners,” and “Contact Us.” This design allows users to easily navigate and access key information, ensuring a seamless and engaging experience.
Wireframe
High-Fidelity Designs
Final Layout
Development
The goal was to create an engaging and accessible landing page that intuitively guides users to explore content.
I aimed to balance visual appeal with usability, ensuring users could easily discover blog posts and navigate through content.
My Approach:
Structure with HTML: I built the page structure using clean, semantic HTML, ensuring accessibility and SEO best practices were in place. This provided a solid foundation for styling and improved the readability of the codebase.
Responsive Layouts with CSS Grid: Leveraging CSS Grid, I created a flexible and adaptive layout that seamlessly adjusts to different screen sizes. I structured the grid to highlight key content areas, like featured posts and categories, while maintaining a visually appealing flow.
Interactive Elements with Vanilla JavaScript: To enrich user experience, I incorporated Vanilla JavaScript to add interactive elements. These include dynamic loading effects, smooth scrolling, and a “load more” button for a streamlined, distraction-free experience without additional dependencies.
Result
The redesigned blog landing page achieved several notable improvements:
Enhanced User Experience: The intuitive layout and responsive design allow users to easily find and engage with content on any device, whether on a mobile phone, tablet, or desktop.
Improved Performance: By using lightweight JavaScript and efficient CSS, I reduced page load times and optimized asset delivery, resulting in a faster, smoother browsing experience.
Higher User Retention: The visually appealing and easy-to-navigate design contributed to higher user engagement and retention rates.
