Challenge

Design a novel interactive interface using API’s.

Outcome

A fun and interactive memory game that teaches about the frogs of Australia.

My Research and Findings

For this project we were directed to use a Galleries, Libraries, Archives and Museum (GLAM) API.

Some of my initial ideas included visualising art and gallery data however I found that the APIs didn’t have the information on them that I needed for the project, so I decided to use the Atlas of Living Australia and decided to base my project around a theme.

This project consisted of researching how to use jQuery and APIs to create dynamic interfaces.

I designed the project to be used by a museum or zoo in a large format touchscreen display. I found that museums have gradually begun to use interactive displays and exhibits, and people have come to expect this high level of interactivity.

I redefined my problem into how I could make my web interface, playful, informative, fun and innovative. I designed this web application to be used on a large format (50+ inch) touchscreen display. Interactive touchscreen exhibits can be much more engaging than exhibits with low levels of interactivity.

I was inspired by work from students from the Parsons School of Design who have designed data visualisations and interactive web interfaces using the Metropolitan Museum API.

Some of my ideas were to create a true/false game related to an animal, a guessing animal game, a connecting information to species game, top-down display of animal species that allow the user to click to see more information or a memory game that reveals more information on a matched pair.

I decided to pursue the memory game as I thought it would make for a fun and interesting concept. A modal could pop up after a matched pair with more contextual information on the species.

I was also inspired by many of the projects by Lightwell, a design company who creates engaging exhibitions and displays for public spaces and inspiration.

Some of the initial design considerations I had to include were a simple interface, accessible and clear home page that would make it clear the interface could be touchable, reduce typing elements and a clear navigation that doesn’t rely on the mouse. 

I utilised a random shuffle each time the page was loaded and the CSS ‘order:’ property to change the order of cards each game.

During my development I added a popup that would provide more contextual information, the contextual information came from an additional API, the Encyclopedia of Life. When the user scores a pair, the game will pop up with an image and additional information on the species, this utilises the Tingle JS library.

During my development I added a popup that would provide more contextual information, the contextual information came from an additional API, the Encyclopedia of Life. When the user scores a pair, the game will pop up with an image and additional information on the species, this utilises the Tingle JS library.

As I progressed through the project, I also implemented support for smaller and narrower screens such as mobile phones. Frogs of Australia should dynamically adjust to which screen you are currently using.

In my development of this project, I also added support for audio playback on the frogs, however this was only supported on one of the frog species due to a lack of frog sounds on the amphibia web database.

To finalise the project, I added a timer and move counter to gamify the experience, this also creates a sense of pressure for the player and allows them to beat others at the game. I also added a winner screen that displays the total moves and time it took the player to complete the game.

During my usability testing of this project, I found that the user’s finger could often change the position when they clicked a square, I implemented a scroll lock so that when the user is playing the game the screen no longer scrolls, unless a button is clicked, this prevents sudden movements that distract and confuse the user. Another problem that was identified was scaling elements more precisely when using larger screens, I adjusted the sizing to fit just right.

My Takeaways

Identify a target audience and context of use, some features of this project such as locking scrolling make no sense for traditional mouse/trackpad use but were an essential component when designing for multitouch touchscreens. Crafting tailor made solutions to the audiences that will be using the product will make the design much more effective.

Make it fun, one way to drive emotional engagement and increase user engagement is to turn it into a game. Games can help to make the application more enjoyable and engaging to play, it also provides a low stakes environment that makes the information on the site easy to consume.

Design for other devices, while the main use of this web application is to be used for large format (50+ inch) touchscreens it can be played on other devices such as laptops, desktops and mobile phones, this increases possible audiences and provides additional uses of the web application.