Artbox

Role
Designer
and developer

Timeline
2019

Skills
UI
App development

Tools
Xcode

Artbox is an app that was created for my Year 12 Software Design & Development major project, and utilises augmented reality and image recognition to display information about artworks. For this project I designed the functionality and layout of the app and programmed it using Swift and Xcode. Comprehensive documentation detailing the creation of the app also had to be produced, including diagrams, logbooks and Gantt charts.

The Brief

It is often difficult to view and interact with artworks around the school. Those that are visible can also be placed in busy corridors or hung high up, making it harder for people to view them. Artworks are also shown without any context and interested viewers are unable to find out the artist, year, and other contextual information.

Artbox is a virtual art gallery app that is designed to provide a simple guide to the artworks around you. It utilises Apple ARKit to present an immersive augmented reality experience and display information in an interactive way. Artbox will detect and identify the artwork present, by matching its image and dimensions with a database of existing artworks that have been scanned and documented.

Design Process

Initially, the app was divided into three sections: Explore, Tutorial and Settings, as seen in the storyboards above. As development progressed and the scope of the system was refined, I realised that a Settings page was unnecessary as offering settings to change would overcomplicate the functions of the app. The Explore page was brought onto the main screen and the Tutorial added as an onboarding screen which could later be accessed through an icon.

This was my first major experience programming in Swift and using ARKit and Xcode, so I relied heavily on tutorials and guides online, particularly those on the Apple Developer website. Artworks were first scanned using the ARKit Scanner app and its corresponding information entered into Xcode.

The screenshots below show the initial AR functionality. The pop-up box appears when the artwork is recognised and the phone also offers haptic feedback to confirm this detection.

This layout was further refined, adding an image thumbnail to the pop-up box. The box also remains in the same position as the phone moves around, following typical AR affordances.

The majority of the project involved constant problem solving in order to resolve issues in the AR functionality. Due to my limited programming experience, a lot of trial and error was involved and the quality of the code probably didn't meet industry standards. Only the seven artworks that I had scanned were able to be detected by the app, and the corresponding information was hard coded rather than in a database. The screenshots below show some of the development process in Xcode.

Overall, the primary functionality of the app worked but various bugs still persisted. This assignment was a good opportunity to learn about programming in Swift and reaffirmed my passion for design rather than programming