SpecialCollection

THOMPSON'S WORKS FOR

ARCHITECTS STUDENTS HISTORIANS EVERYONE

Problem Statement

Alexander Thomson, a prominent Victorian architect in Glasgow, designed various structures such as commercial warehouses, tenements, houses, villas, and churches. Glasgow Life holds a valuable collection of Thomson's drawings and sketches, aiming to share it with the public and local community, as much of his work was not preserved during his lifetime and was only recognized posthumously.

The Mitchell Library holds a lot of material within the collection. The drawings have been professionally photographed and are accessible in printed and digital formats (JPEG) but have not yet been made available to the public online. Your challenge is to find a way for the public, whether that be local history fans, those interested in architecture, or perhaps architecture design students, to interact with the work, use it, or react to the drawings in some way.

Client's requirements

Specifications required from the client

Requirement 1

Interactivity , the ability of the site to respond to user actions and engage visitors in a dynamic and personalized manner. It is a fundamental aspect of modern web design that aims to create a seamless and enjoyable user experience. Through various interactive elements, a website can actively involve its users, encouraging them to explore and interact with the content.

Requirement 2

UI (User Interface) and UX (User Experience) are two critical aspects of website design that directly impact how users interact with and perceive a website. A well-designed UI/UX is essential for creating a positive and successful online presence.

Requirement 3

A robust search and filter functionality on the online platform to enable users to find specific drawings or sketches based on various criteria. Users should be able to search by building type (e.g., commercial warehouses, churches), architectural style (Graeco-Egyptian), location, or specific keywords related to the drawings' content. The search results should provide clear and relevant information about each drawing to aid users in their selection process.

OUR STORY

Inspired by the real-world challenges and opportunities that lie ahead, team 4B has already begun. Late nights in the lab, brainstorming sessions that spark brilliance, and the continuous pursuit of knowledge have become their routine. Fuelled by the desire to excel, they seek guidance from mentors and industry professionals, soaking in every ounce of wisdom to hone their craft.

As their story unfolds, these driven undergraduates will inspire and captivate us with their journey to industry excellence. With every challenge they conquer and every milestone they reach, they demonstrate the transformative power of ambition and the potential that lies within the next generation of innovators.

Project Roles and Task distribution

Who oversees which portion of the project

WEB DEVELOPER

Chen Jingquan

WEB DEVELOPER

Wong Darren

WEB DEVELOPER

Ho Jin Wei

WEB DEVELOPER

See Kai Cong Douglas

WEB DEVELOPER

Pang Jing Jie

WEB DEVELOPER

Neo Kah Siak Alex

Our Timeline

Our Detail Flow Of Milestones

Day 1
Activities

Fomulate questionaires keeping in mind that mental model is a vital part of comprehension. With the lesson learn it will help use focus on asking clear questions. We are also task to explore our teammates comprehension via a survay to differentiate perspective about the scope of the project.

Questionaire For The Customer's Product
1. Who are the primary target users?
  - Even though we know it is the public, is there a specific primary target audience?
2. How will the target audience “use it”?
  - Virtual tours, interactive gallery, reference materials.
  - Audio description, videos?
  - Adding reactions or comments on the artwork?
3. Where will this platform be used?
  - E.g. in a kiosk in the library?
  - AR interactive exhibition in a gallery?
4. With respect to networking requirements, what is the estimated maximum concurrent users of the system?
5. Will the file format remain in jpeg for simplicity?
  - If so, how many drawings should be displayed on a single web page and how much of the collection could we use?
6. What security are you consern about?
  - Is adding a watermark/disabling right click function necessary to prevent unauthorized distribution?
7. Would you like to retain the quality of the image or compress it for a faster loading time?
8. There are several pictures in the folder given, could you share more about them?
  - How are these images categorized to enable easier filtering and searching of artworks?
9. Do the audience members generally prefer to view artworks individually or in groups?
10. How should we keep the visitor’s interest in the interactive gallery?
  - What are the common behaviors when visitors learn about artworks in libraries?
  - How do they appreciate the artwork etc.
  - How will we be able to communicate with the target audience to find out their likelihood of interaction with the collection? (is there any communication channel?)
11. Would the public interact with the work, use it, or react anonymously or only after registering with our web?
Day 2 - Milestones

Customer Meeting day

To start the project, we did a indepth need finding with the customer using a technique call Need exploration interview. Need exploration interviews are qualitative research discussions aimed at uncovering unmet needs, desires, and motivations of potential customers or users. By empathetically listening and probing, researchers gain much deep insights to guide innovative product and service development, ensuring solutions that would genuinely resonate with the target audience's aspirations.
Day 3

Prototype & Video Pitch

The main idea is to allow user to freely display their thoughs on the design made by Alexander Thomson, in a form similar to social media. There will also be search and sort feature , to ease identifying works and improve the user experience. The draft prototype are as shown on the image above.

Activities

Learnt the mom test , which is listening more and talking lesser , question about the user perspective instead of trying to push an idea. We also learnt LLM prompts which allow us to precisely extract information from an AI such as ChatGPT.
Day 4 - Milestones
First Progress Video

Need Finding

Main take way is to improve recognition and interactivity between Alexander Thomson and any visitors. After discussions with the customers, we decided that the finalized idea will be a website that hold infromation of Alexander Thomson and interact similar to a social media.

Prototyping

Buiding a High Fi on figma , the High Fi aims to display a rough look and feel of how the application will take shape. This allow the customer to see if our vision matches , their ideal product.

Feature Backlog Identifed
1. Website structure and functional prototype
2. Image gallery
3. Database setup, Database schematics
4. Webpage design
5. Image annotation
6. Load image with annotation, retrieve annotation from db
7. Store annotation in db (position, user, comment) - no login functionalities. Just indicate name. Implement simple censor for vulgarities via regex
8. Event scrapping from society page
9. Image explanation
10. All relevant links and pages (bio, library, contacts)
11. Image compression upload to CDN
12. Deploy to vercel
Day 7

Feature Backlog Update

Webpage design is now broken down into Home, Gallery, History, Newsletter. Image annotation is now broken down into Gallery, Zoom in/out , Detailed Image , Toggle Annotation. Event scrapping from society page is now broken into Scraping tool & Integration.

Features such as Scraping tool & integration were completed while Image Annotation and Webpage Design's Gallery and History were in pending state.
Day 8
Project Clarification

Project Specifications were clarified based on our needfinding exercise.

Customer day was scheduled for tomorrow for us to get our initial feedback from the client and perform any additional work. We went into deeper details with yesterday's breakdown on our feature backlog and developed based on them
1. Website structure and functional prototype
2. Image gallery
3. Database setup, Database schematics
4. Webpage design
  - Home
  - Gallery
  - History
  - Newsletter
5. Image annotation
  - Gallery
  - Zoom in/out
  - Detailed Image
  - Toggle Annotation
6. Load image with annotation, retrieve annotation from db
7. Store annotation in db (position, user, comment) - no login functionalities. Just indicate name
8. Implement simple censor for vulgarities via regex
  - DB setup
  - Regex
  - Load and store
9. Event scrapping from society page
  - Scraping tool
  - Integration
10. Image compression upload to CDN (low prio)
11. Image explanation
12. All relevant links and pages (bio, library, contacts)
13. Deploy to vercel
Day 9

Customer Meeting day

The team visited The Mitchell Library and met with our clients to showcase our product at its current development stage and pesented a deck of slides to showcase the progress and findings of the prototype.

Client seemed pleased, thus the team continued to work on the rest of the pending features.
Day 10

Development Continuation & Poster Design

As we continued to work on our pending features, we also started working on the poster drafts and came up with a various number of them.
Day 11 - Milestones
Second progress video

Feature Backlog
1. Website structure and functional prototype (Done)
2. Image gallery (Done)
3. Database setup, Database schematics (Done)
4. Webpage design
  - Home (Done)
  - Gallery (Done)
  - History (Done)
  - Newsletter (Done)
5. Image annotation
  - Gallery (Done)
  - Zoom in/out (Done)
  - Detailed Image (Done)
  - Toggle Annotation (Done)
6. Load image with annotation, retrieve annotation from db (Done)
7. Store annotation in db (position, user, comment) - no login functionalities. Just indicate name. (Done)
8. Implement simple censor for vulgarities via regex
  - DB setup (Done)
  - Regex (Pending)
  - Load and store (Pending)
9. Event scrapping from society page
  - Scraping tool (Done)
  - Integration (Done)
10. Image compression upload to CDN (low prio)
11. Image explanation (Pending)
12. All relevant links and pages (bio, library, contacts) (Done)
13. deploy to vercel (Pending)
Summary

Most important feautres that promises interactive and recognition are completed and ready to deploy. We are left with minor feautres, hosting the website and improving the aesthetic of the product.
Final Product Submission - Milestone

Product Demo Video

Convention Presentation Video

Reflection

With the product completed , we are glad that we are able to produce a product that matches the ideal product for the customer and users, earning praise. Many refinement was made the to product , features such as the search & sort feature was deem not useful. Given the relatively low and rare number of Alexander Thomson's works available, we decided not to include a search feature. Instead, we believe that the absence of this functionality will actually increase user engagement rates and encourage users to actively explore and discover more of his works organically. Overall, we are confident that these decisions have enhanced the user experience, providing a seamless journey of discovery through Alexander Thomson's remarkable architectural achievements.

The project has been incredibly insightful, as it not only generates value but also sheds light on a forgotten architectural style. We have gained valuable insights into how the library operates and now deeply appreciate all the hard work that goes on behind the scenes. Additionally, we have learned many valuable lessons, such as improving our design abilities, asking better questions, and effectively prototyping. These newly acquired skills from our time in Glasgow will undoubtedly have a profoundly positive impact on our lives and future careers.

CONTACT INFO

2717865S@student.gla.ac.uk
2717875W@student.gla.ac.uk
2717857P@student.gla.ac.uk
2717928N@student.gla.ac.uk
2717886C@student.gla.ac.uk
2717914h@student.gla.ac.uk