OscarProjectsBooks

NMT Library Quiz

The stack: Wordpress, Figma, Github

Summary: The NMT Library Quiz project was a year-long project transforming the existing processes into a digital-native experience for new students entering the Northbridge campus, particularly to raise familiarity with the library environment. The Problem: The current solution for the library to get new students familiar with the layout and services offered by the library was a paper-and-pen based scavenger hunt in which students were tasked with finding answers to questions based on items they could find within the library. This was an extremely wasteful approach as each cohort of ~30 students would require paper print outs and spares, pens and, clipboards. There would be ~ 6 sessions per day and up to 4 classes at a time so there would be around 700 sets of orientation quiz each day and the orientation’s would get to get done within the first month when possible. As you might expect, this generated a massive amount of single-use waste which was counter-productive to helping the campus reach their strategic goals by 2025 of reducing paper waste where possible and improving the digital literacy skills of students. The Solution: When the library came to us (Andrea and Myself) to develop a solution they had a clear vision for what they wanted the product to look like. They wanted as close to a 1 to 1 copy of the paper quiz but in a mobile-first design built in Wordpress. They needed to be able to easily edit the questions and view the results from a dashboard somewhere. The Process: 1. Initial meeting - work out what the client wanted and come up with a couple ideas for what a solution for them might look like. They were looking to digitise their paper-based orientation quiz in line with the strategic plan and better optimise their processes. 2. Possible solutions report - Investigate possible solutions (premade form platforms, Kahoot and similar, custom solution (wordpress)). This was sent to the librarians with the recommendation that we create a custom quiz built with Wordpress and one of the many Quiz platforms 3. Identify the best solution - A custom wordpress solution was identified as the best solution for the library’s needs. In maintaining user privacy (not needing them to sign up). Accessing the quiz home through a QR code. Working well and being designed for a mobile phone first. We also settled on Quiz and Survey Master (QSM) for the function and logic of the quiz. It enabled both the librarians to be able to modify and edit the quiz questions as much as they would like. It also enabled us as the developers to modify and customise the theme to better suit the mobile phone interface 4. Wireframe and Prototype - After getting the go ahead to build on the wordpress platform we needed to work out what we were actually making. We built a couple layout structures in Figma and presented the librarians with the ideas we had and received feedback on the ideas. We then refined these ideas while reminding ourselves of the constraints we were restricted by in the form of mobile browsers and the mobile operating system. 5. Development - The longest phase was the development stage. This meant turning the pretty prototype we made in figma into a functioning web-app. Built with Wordpress and the “Quiz and Survey Master Plugin (QSM)”. We encountered many challenges and obstacles throughout the way while developing the project. Some of the main ones were: - How do we customise the quiz themes while following the Licence? - After close examination of the licence we found that we could create a copy of one of the existing themes and modify it as much as we needed to get the structure and layout of the page to work with the primary target device (mobile phones and fingers) - How can we sync our projects on our devices with eachother? especially with Wordpress - We found Git however it was challenging to use and keep everything synced and labelled properly - We decided in the end to use Onedrive and back up the entire Wordpress folder which was an ugly mess but unfortunately it worked quite well. - Why are some of the changes working on the samsung but not carrying over to the iphone. - This was due to the rendering engine, and we had to make sure we were using CSS queries which were compatible with both iOS (Webkit) and Android (Blink) - We fixed this by checking the problematic elements with caniuse.com to ensure we met the requirements (cover 95% of all mobile users) - 6. Launch - On the hand over day we launched the NMT library quiz. Its first day of use was going to be the year after we graduated so we couldn’t see the fruits of our labour but we completed the project and the stakeholders were very happy with the project