DeciphAR

Mount Royal University Library
Client
Mount Royal University Library
Role
UX Designer and Developer
Skills
  • UX Design
  • XR Development
  • Marketing
  • Project Management
Link
DeciphAR

About

DeciphAR is an app created by the Mount Royal University Library in partnership with Red Crow Community College. It incorporates augmented reality (AR) to provide audio and visual information about the Blackfoot signage in the Riddell Library and Learning Centre (RLLC). The audio information includes pronunciations of the Blackfoot phrases on the signs, and Info-cards list an explanation of the translation. Users will have an opportunity to test their new knowledge through a quiz and easily share results on social media

Problem Statement

How might we engage library patrons with the signage in the RLLC?

Outcome Goal

The goals for DeciphAR were to create engagement within the building​, be accessible through mobile devices​, create a system that drives returning users​ and make information accessible offsite.

Process

Ideation

To better understand the problem I conducted research and performed an audit of the signage of the building. After the planning documents and research were conducted a basic outline was created. This included user flows, wireframes, and eventually a lo-fi prototype.​ The entire process was managed with weekly meetings with library team members and a Trello board.

Project timeline
User flow
Wireframes
Mockups

Stakeholder Meeting

Due to the nature of the Riddell Library and Learning Centre with multiple building partners, I presented the application and its assets. With approval from the partners, I continued. The video below was a key asset in delivering this proposal.

Visiting Red Crow College

We made two visits to record signage pronunciations with Elder Leo Fox. In addition to the pronunciation audio, we recorded video and conversions with Leo Fox about the importance of using the Blackfoot language. The audio and visual work was done by myself.

Visiting Red Crow

Development

Using Vuforia for AR and Unity as the development of the app was created. In total there were 14 major iterations during development and testing. To be accessible to as many people, steps were taken to optimize the app and ensure it ran on as many devices as possible. This included allowing the app UI to resize to the device size. The framework for the app was developed with scalability in mind, allowing additional languages and features in the app. Small sample of code from the game control script.

public class GameControl : MonoBehaviour
{
    //public masterList[] masterLists;
    public location mru;
    public location institution1;
    public location institution2;
    private location currentLocation;
    private string location;

    //Static GameController
    public static GameControl control;

    //Script for controling the list
    public ListControl listControl;

    //Script for panelManager
    private panelManager panelManager;

    public GameObject arBorder;

    //Cards to be autounlocked on startup
    public List<string> autoUnlock = new List<string>();

    [HideInInspector]
    //Serializable list for storing the unlocked cards
    [SerializeField] List<string> unlockedCards = new List<string>();

    //Reset Box
    public GameObject reset;

    public int totalSignsScanned;
    public int uniqueSignsScanned;
    public int availableSigns;

    [HideInInspector]
    public bool isActive = false;

    [HideInInspector]
    public bool canGoBack = true;

    void Awake()
    {
        if (control == null)
        {
            //Creates one GameControl that is non destroyable
            DontDestroyOnLoad(gameObject);
            control = this;
        }
        else if (control != this)
        {
            //Destroys the new GameControl if one already exists
            Destroy(gameObject);
        }

        //Change infocard set based on location
        location = PlayerPrefs.GetString("Location");

        if (location == "mru")
        {currentLocation = mru;}

        if (location == "institutionOne")
        {currentLocation = institution1;}

        if (location == "institutionTwo")
        {currentLocation = institution2;}

        if (location == null)
        {currentLocation = mru;}

        //Generates the list
        listControl.currentLocation = this.currentLocation;
        listControl.generateList();

        //Sends locations string
        Analytics.CustomEvent("Institution", new Dictionary<string, object>
        {
            {"Location", location}
        });
    }

    private void Start()
    {
        panelManager = GetComponent<panelManager>();
        Load();
        //Tally up total number of cards in current location
        for (int i = 0; i < currentLocation.masterLists.Length; i++)
        {
            availableSigns += currentLocation.masterLists[i].listsCards.Length;
        }

        //For each of the unlocked cards unlock them in the list
        foreach (String str in unlockedCards)
        {
            listControl.unlockCard(str);
        }

        unlock();

        //Check if user has played before
        int hasPlayed = PlayerPrefs.GetInt("HasPlayed");
        if (hasPlayed == 0)
        {
            //if they haven't, start onboarding
            panelManager.onboarding.SetActive(true);
        }
        else
        {
            //if they have, start SceneActive (this is to color the camera icon as active, which we don't want if they are going through onboarding)
            panelManager.onboarding.SetActive(false);
            SceneActive();
        }
    }

    public void unlock()
    {
        foreach (String str in autoUnlock)
        {
            listControl.unlockCard(str);
        }
    }

    //Calls DeActive function in panelManager
    public void SceneActive()
    {
        panelManager.DeActive();
    }

    //When a sign is trigged, receives the infocard associated with the sign
    public void signTriggered(infocard receivedInfocard)
    {
        //Look by comparing names, if it is unlocked already show the card
        if (unlockedCards.Contains(receivedInfocard.name))
        {
            activateCard(receivedInfocard);
            return;
        }
        //If it is not unlocked, unlock it, add it to the list of unlocked cards, save, then show the infocard
        else
        {
            if (allUnlocked())
            {
                panelManager.ActiveCongrats();
            }
            listControl.unlockCard(receivedInfocard.name);
            unlockedCards.Add(receivedInfocard.name);
            uniqueSignsScanned++;
            activateCard(receivedInfocard);
        }
        totalSignsScanned++;
        Save();

        //Custom Analytics event
        Analytics.CustomEvent("InfocardFound", new Dictionary<string, object>
        {
            {"Infocard", receivedInfocard.name},
            {"Total Cards", totalSignsScanned},
            {"Unique Signs", uniqueSignsScanned}
        });
    }

User Testing

To ensure the app provided the best possible experience for the users, Usability testing was conducted. The testing was conducted in a manner that the users started from a fresh install, therefore going through the tutorial. To test the function in the real environment, users were sent out in the RLLC to explore then return and complete a questionnaire.​

User Testing Booth

Deliverables

Application Marketing

After the application when testing I uploaded it to both the App Store and Play Store. The icon is a play on pre-existing branding in the RLLC, using the dots on the glass and the ones on the floor. It also reflects the binary used in RLLCs branding. The icon reflects morse code as a way to encode and decode spoken word, therefore, reflecting the word decipher. Multiple types of marketing material were produced including 4*6 cards and posters. A short video ad was also produced and released on our social media networks.

On the day of the launch, we had a table at the entrance of the library encouraging users to try the app.

Launch day

Outcomes

Media Attention

With the launch of the application media interest grew and was featured on news channels such as CTV, CityNews 660 and the Mount Royal University Page. Furthermore, we were invited to present the application at multiple conferences across Alberta.

Phase Two

With a successful launch of the application, we looked to expand the application to multiple partner institutions. A very similar process was complete to create this stage including a high fidelity AdobeXD prototype to test this expansion.

Phase two prototype