Overview
V&A Dundee is a design museum in Scotland that was looking to update its QR code scanning system at the entrance of the venue. Users would scan their membership card on a tablet device and be able to get tickets for exhibitions, amend their visit time slot or create extra passes for other individuals.
Challenges
-
- Transitions, animations & loading times
It was essential to make sure that the portal is optimized as much as possible since the deliverable would have to mimic a fluid and intuitive application that also loads quickly.
-
- QR Code Detection and Testing
QR Code detection libraries had to be tested and explored to get a better understanding of what's achievable. Additionally, extensive tests had to be implemented to spot any potential drawbacks and replicate different user case scenarios.
Process
1. UI optimisation
Each step of the user journey is accompanied by a fade-in animation which kicks in on page load. If successful QR code detection occurs, or the user decides to change their time slot, a loading overlay is then triggered and remains visible while the server is processing the request.
2. QR Code Scanner Implementation
The initial idea was to use a Vue component that detects QR codes and thus connects to the backbone of the project for validating the user data associated with the code. For this purpose, I implemented the QR Code Reader library which uses the device camera and provides a live feed so that users can see what they're scanning and where it needs to be positioned.
3. Testing & feedback
There were certain limitations once we reached the testing phase of the project. Using the scanning device in person was not possible at the time due to geographic restrictions. A workaround for this was having regular Teams meetings where we would test the functionality with other team members based in Scotland that had access to the scanner. That would subsequently allow us to demo the progress to the client & provide frequent work updates.
Conclusion
Building the scanner interface was a different experience comparing to other developments I've taken on. It was a great learning exercise that involved playing with some Vue libraries, LESS and speed optimisation. Additionally, internal communication and client updates were kept to a high standard, which was essential for tackling the limitations we faced while developing & testing.