To start the project, our team explored websites offering free public APIs. We listed potential APIs in Figma, starred our top choices, and used stickers to narrow down our focus to three topics. After researching APIs, we ensured they had enough resources and tested those with easy access to keys and sufficient data for creating a visualisation website.
Using the Random User API from API Ninjas, we generated code with ChatGPT to display data in a 3x3 card layout based on our lo-fi wireframes.
After realising the Random User API lacked birthdates, we incorporated the Ninja API, which provided birthdates but lacked user images.
In the final test, we successfully combined both APIs, displaying images from one and user information from the other.
Before moving forward with coding the website, we sketched wireframes to conceptualise the "Classmate Yearbook."
We considered two button layouts: one on the side and one in the middle. We chose the middle layout for easier navigation on phones, accommodating both left- and right-handed users, and aligning with the CTA line for better visual hierarchy and comfort. Since cards are the most important element, we prioritised key details based on student needs: name, school email, LinkedIn, Instagram, and a portrait—enough to introduce classmates without oversharing personal information. After outlining these elements, we created over 20 low-fidelity design iterations, surpassing our original goal of 10.
We explored multiple designs, all featuring modern, colourful artwork inspired by various artists. Ultimately, we chose our self-made artwork created in Figma, as it aligned perfectly with our style guide and design research.
Initially, we opted for a black-and-white card design for its simplicity and strong contrast, but we later explored other options.
We added more colour selections and incorporated a gradient effect.
In the end, we selected a final iteration that aligns with the website’s theme and style guide while ensuring good contrast between the text and background.
During our tests, we faced a slow API integration that made us think the site was broken.
This prompted us to consider how to inform users that the page was loading, leading to the idea of a spinner with a rotating Sheridan IXDA icon.
ChatGPT assisted us by simplifying the code and providing detailed comments, which clarified the concept since we lacked experience with coding spinners.
I gained a deeper understanding of API functionality and how dynamic data is managed in web applications. Researching APIs taught me to integrate external data sources and analyse JSON responses, enabling me to retrieve, manipulate, and display data effectively.
I learned how crucial it is to evaluate code continually, as we often realised that the website didn't fully align with our use case and personas. This led to necessary changes, highlighting that coding is an ongoing iterative process.
ChatGPT was an invaluable learning tool throughout this project, helping us simplify complex concepts and providing clearer explanations. For example, when we encountered difficulties with API integration or JavaScript, ChatGPT assisted in breaking down the code and offering simplified solutions, which greatly enhanced our understanding.
I encountered several challenges, including errors from old, uncommented code that conflicted with new JavaScript, preventing the page from loading. This experience underscored the importance of clean, organised code and using new files for testing.
I also faced CSS issues where changes didn't reflect on the webpage, emphasising the need for thorough testing and debugging. Additionally, CORS issues caused frustration, but I was thankful that older code from my partner worked after I redownloaded it to my laptop.