Brothers in Arms

Overview

For this project, we developed a digital campaign and responsive website for the Brothers in Arms Memorial, commissioned by the Srishti Foundation. The site honours the shared sacrifices of Indian and Canadian soldiers during World War I and aims to raise awareness, encourage donations for the construction of a stone memorial, and preserve this important historical collaboration.

The website was designed to be mobile-first, with an intuitive interface, compelling visuals, and an engaging narrative. Interactive features, including donation buttons and educational content, were integrated to drive engagement and inspire support for the memorial.

Problems

1. Historical Accuracy: Ensuring all content was factually correct while maintaining an engaging presentation for the audience.

2. Seamless User Experience: Designing a responsive, mobile-first website with smooth navigation and accessibility features.

3. Interactive Features: Implementing dynamic, engaging content like animations and interactive elements to enhance user interaction.

4. Branding Consistency: Aligning the website and promotional materials with the historical theme and the Srishti Foundation’s vision. 

Research

To ensure an authentic and compelling campaign, we researched:

• Historical Records: In-depth study of WWI battles where Indian and Canadian soldiers fought together, ensuring accurate representation.

• Collaborative History Projects: Analysis of initiatives like the Chinese Canadian Museum to understand how to balance presenting both sides of a shared history in a meaningful way.

• UX/UI Trends: Exploration of modern trends for history and donation-based websites to optimize user experience.

Process

1. Wireframes & Prototyping: 

• Bryle, Music, and Bernardo designed the initial wireframes in Figma with Rita’s guidance, ensuring a user-friendly structure and flow for the website.

• I used these wireframes as the foundation to guide the development of the site, ensuring the design was effectively translated into the final product.
  
  

2. Mobile-First Responsive Design

• Built a mobile-first, responsive website using HTML5, CSS3, and SASS to ensure a seamless user experience across devices.
  
  

3. Form Integration with Vue.js:

• Implemented a user sign-up form using Vue.js to dynamically handle form submission and display success or error states.

• The form communicates with the Lumen API to store user information in an appropriate MySQL table.

• Validated form inputs (e.g., emails, usernames, and passwords) and updated the view accordingly using JavaScript.
  
  

4. Content Management System (CMS):

• Designed and styled the CMS interface for content management, ensuring easy updates to text, images, and videos through a user-friendly admin panel.

The Brothers in Arms Memorial website combines historical storytelling with interactive features to honour Indian and Canadian soldiers. Key elements include:

• Mobile-First Responsive Design: Ensures seamless navigation across all devices.

• Historical Content: Highlights key battles, awardees, and personal letters from the front lines.

• Client Documentary Interview: A recorded interview offering deeper insight into the memorial’s significance.

• Branding & Social Media Assets: Custom branding and social media content to raise awareness and drive engagement.

• Marketing Campaigns: Infographics, print ads, and other materials designed to generate support and donations.

Together, these components create an engaging and informative site that commemorates the shared history while promoting awareness.

Reflection

This project was a great opportunity for me to learn and grow. Key takeaways:

• Learning Vue.js: This was my first time using Vue.js, and I gained a deeper understanding of how to manage dynamic content and build interactive features.

• Working with Lumen API: I developed my skills in integrating the Lumen API, allowing me to handle data seamlessly between the front-end and back-end.

• Collaborating across disciplines: I learned how to collaborate effectively with motion graphics and design teams to ensure our website's design and functionality worked together to tell a compelling story.

This project was a challenging yet rewarding experience for our team, and we're proud of the final product - a professional, educational, and engaging website that commemorates the shared history of Indian and Canadian soldiers.