Through FAAD Art Book, we aim to strengthen the sense of community at Sheridan College by offering a dedicated, interactive platform where students can share and appreciate each other’s artwork.
This project not only highlights the importance of databases in user-driven content but also emphasizes the role of design in building connections within a creative community
Secure Login with Auth0
Only authenticated Sheridan College students can log in using valid credentials, ensuring a safe and exclusive environment for contributors.
Seamless Artwork Sharing
Students can easily post their artwork, fostering creativity and collaboration among peers.
Post Management with Real-Time Updates
Students can edit their posts, with changes reflected instantly for a smooth user experience.
Program-Based Search
A search bar allows users to explore posts by program, connecting them with peers and discovering inspiration within their fields.
Animated Marquee of Popular Posts
A dynamic marquee highlights standout artworks, providing visibility and motivation for creators.
Sheridan College, Canada’s largest art school, boasts over 5,000 full-time students across 36 programs in the Faculty of Animation, Art, and Design (FAAD).
With such a vibrant community of artists, there is a strong demand for spaces to showcase their work, draw inspiration, and foster connections.
However, Sheridan students currently face limited opportunities to display their artwork, as only two physical options exist:
These spaces offer minimal capacity, restricting students’ ability to share their creativity, diminishing their visibility, and making it more challenging to engage with their peers.
Artworks are shown inside glass cabinet on the hallways
Exhibition Room in Building AA - Sheridan Trafalgar Campus
To solve this issue, we wanted to create a platform that allows Sheridan students in the FAAD program to share what they have been doing in their respective programs as they rarely get to interact with one another.
Specifically, a web app to help students have the flexibility to share their artwork, whether they’re using a laptop or a phone. “FAAD Artbook” is the platform that encourages creativity, builds a sense of community, and helps students connect with each other.
It focuses on three key goals:
FAAD Artbook serves a diverse audience with varied motivations, primarily including Sheridan College’s:
Additionally, it is also not limited to:
Persona 1 - Sofia
A 23-year-old animation student at Sheridan College, aims to showcase her 2D designs, find inspiration, and secure internship opportunities.
(!) She struggles with the lack of a safe and flexible platform to present her work while exploring creative ideas from her peers.
Persona 2 - James
A 24-year-old Sheridan’s industrial design student focused on sustainable products, wants to connect with collaborators and attract potential employers.
(!) He finds social media too cluttered with irrelevant content and is concerned about its lack of security
Storyboarding
I’m mapping the user journey to identify the key interactions our web app needs to support.
This exploration has provided valuable insights for designing the user interfaces.
Based on the Storyboarding, we formed an understanding about user’s experience on FAAD Artbook
User Journey Map
Then, we got deeper into user behaviour and emotional states. This revealed that many users have concerns when uploading their artwork.
Impact/Effort Matrix
Focus on solving users pain points, we made a list of possible solutions and prioritize them based on the Impact/Effort Matrix.
Solution Prioritization List
Gathering from the above Matrix, the app will have these features focused on answering key user needs:
"Is it easy and safe to post my artwork?"
"How can I manage my posts?"
"What tools can help me find artistic inspiration and connect with peers who share similar interests?"
Back to research...
Before designing, we analyzed similar competitor platforms to identify key design patterns.
From this, we identified essential patterns:
Low-Fidelity Wireframe
I began by identifying the core structure for the web app, focusing first on the fundamental functions.
Once the core structure was mapped, I started filling in details, including a login button and a space for the art post gallery, ensuring users could easily access the platform and view shared artwork.
I also included a featured artwork section to highlight standout posts, a search bar for easy navigation, and user interaction buttons for login/logout and posting artwork.
Users can upload their artwork in .jpeg, .png, or .heic formats and provide related details, including:
This ensures flexibility while allowing users to share as much or as little information as they prefer.
The artwork gallery went through many iterations to ensure it was visually appealing and easy to navigate. Each version was refined based on user feedback, focusing on improving layout, functionality, and responsiveness across devices.
I used a clean, nostalgic Polaroid theme to bring out a sense of personal stories and creativity. This design helps users share their artwork in a familiar and visually engaging way, making the platform feel inspiring and connected.
Understanding the System Design
We created a UML activity diagram, demonstrating how users are able to go thorough our web application and complete their task.
In this activity diagram, we focused on showing the new user activity while integrating the new use case in the web app.
We then created a data flow diagram to show some logical clarity on how the data flows in order for the web application to work.
We found this data flow diagram very useful as it was able to demonstrate how the data is used and stored for our users as well as showing the steps and elements required to include in the code.
We coded FAAD Artbook based on an example from Professor Harrold and a lot of YouTube learnings.
In this image, we learned how to intergrating Auth0 API into our web app for the log in function
Using MongoDB to save user’s input
Applying Mongoose to add the structure and rules to the stored data in MongoDB database
Asking ChatGPT for code suggestion on the Search bar function
To ensure that the CRUD works, we tested it out on Insomnia through the GET, POST, PUT, and DELETE functions.
In this image, Insomnia showed that the file was deleted and when we went back to the public URL of the code, the post was successfully deleted.
Successfully tested our code by posting our own image after so many failed attempts!
Introducing our welcoming and safe platform for Sheridan students to present their art expression, connect and appreciate each other’s work!
View web app
Our web app is fully responsive, functioning seamlessly on smartphones and tablets. This ensures users can access the platform anytime, anywhere, on any device, making it more accessible to a wider audience.
Here, a user interaction on the smartphone demonstrates how users can search for art inspo by program name.
Usability Test
I measured the product’s success by conducting user tests and interviewing Sheridan student participants. The results were astonishing, backed by clear and impressive numbers that validated the platform's impact.
My learnings
This project taught me how to design a platform that genuinely meets user needs. I learned to focus on user pain points and improve features through multiple iterations. By balancing functionality and design, I made sure the app is easy to use and visually appealing. User testing showed me the value of feedback, and using AI tool including ChatGPT, helped speed up the back-end development.
What is coming next
The next steps for FAAD Artbook include further enhancing its features, such as adding more advanced search options including search by student name or year, and introducing a collaboration hub for students to connect and work on projects together. We plan to gather more user feedback to fine-tune the app and ensure it continues to meet the evolving needs of Sheridan students. Ultimately, we aim to create a fully polished platform that inspires creativity, fosters connections, and grows with its users.
A special thank you
I would like to thank my partner in this project, Franziska, for her guidance in back-end coding, together we had turned our ideas into a working web app. Facing many challenges, but the effort of solving users’ pain points kept us motivated. Every mistake taught us new lesson and brought us closer to building a platform we’re proud of.
Unlocking literary imagination
through AR experience
