Streamline Item Display
Transform disorganized product listings into a visually cohesive and user-friendly layout.
nicolas
Algonquin College Webstore Development & Design
Company
Algonquin College
Role
Website Process Support
Technology
CMS, HTML5, CSS3, Figma
Website
https://www.bookstore.algonquincollege.com/Item?item=197105046757Overview
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.
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
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.








