Dec 23, 2024

Algonquin College Campus Store Website

Algonquin College Webstore Development & Design


Overview

In my role as Website Process Support at Algonquin College, I played a key part in redesigning and improving the Campus Store's website. Leveraging Bookware CMS—a bookstore management system—I created a user-friendly and visually appealing item display template that adhered to the college’s style guide and branding. This project focused on transforming the store’s online presence from a cluttered, inconsistent layout to an accessible, responsive, and cohesive design. Beyond design, I developed easy-to-use templates in HTML and CSS, allowing non-technical staff to update and manage item information effortlessly. Additionally, I supported the store's operations by managing item data, ensuring product descriptions, specifications, and images were accurate and informative. I also created logos, posters, labels, and item mockups for Algonquin Connections, the campus store’s in-person retail space.

Objectives

Streamline Item Display

Transform disorganized product listings into a visually cohesive and user-friendly layout.

Accessibility and Responsiveness

Design with accessibility in mind while ensuring a seamless experience across all devices.

Reusable Design Templates

Develop clean, reusable HTML/CSS templates that staff can easily implement without coding experience.

Challenges & Solutions

Challenges

  • Working within the constraints of Bookware CMS while improving the site’s design.

  • Designing templates that were both visually appealing and easy for non-technical staff to use.

  • Ensuring all product listings met accessibility and responsiveness standards.

Solutions

  • Designed the item display layout in Figma, adhering to Algonquin College’s style guide.

  • Developed reusable HTML and CSS templates, tested for responsiveness and accessibility.

  • Simplified template implementation by allowing staff to copy and paste the code, then edit content via a visual editor.



Let's work together.

Get in touch.