Project
Augmented
Master's Thesis
Role
User Research
Prototyping
Interaction Design
Visual Design
Year
2021
Arduino is an open-source electronics platform that enables users to create a wide range of electronic projects. It has several use cases and also a broad user group. Augmented is an attempt to address some of the challenges users face while undertaking academic projects using the Arduino platform in a remote setting. The final outcome was an Android application that incorporated Augmented Reality to aid breadboarding of simple Arduino circuits. I had also developed an android application using Unity and Vuforia that implemented one of the main functionality.
Problem Statement
This project is an attempt to understand the implications for users when Augmented Reality is applied to aid in the teaching of the Arduino platform. My research is focused on gaining user insights and developing an appropriate design solution.
Goals
The main goal of this project was to try and understand the implications of applying Augmented Reality to aid in teaching or learning the Arduino platform in the context of remote education.
My personal goal was to have a part technical implementation of the prototype and to better understand Augmented Reality as a technology and its impact on user experience when applied to products.
Users
The primary user group for this project were students engaged in third-level education who had to use Arduino or related platforms for Academic work. This included students from Engineering, Design and Art and technology backgrounds.
Scope and constraints
The project is academic and was part of my Master’s thesis submission. It was carried out over 5 months and I carried out research, prototyping and also a partial technical implementation using Unity and Vuforia. Due to the ongoing pandemic situation user research and testing was carried out in an online setting. For the technical implementation, I had to learn to code using C# in addition to learning Unity and Vuforia. This was challenging for me as I did not have a background in coding and had to learn these in a few months.
Process
The project was carried out in phases and included user research and defining the context of the problem, developing prototypes of different fidelities, testing and iterating and part technical implementation. These were carried out in a user-centric iterative approach.
Literature review
I carried out literature reviews of scientific articles relating to Arduino, Augmented Reality and interaction design. The literature reviews helped broaden my understanding of the topic. It helped me to understand how Augmented Reality has evolved over the years, its application in education, its drawbacks and also concepts like gamification in education and design.
User research
I started user research with a survey, 12 participants responded out of a total of 15. The survey was a useful step to gain a basic understanding of the user’s background and context. It also helped me to recruit user’s for the later stages of research.
Out of the 12 survey respondents, 8 agreed to be interviewed. The interviews were semi-structured and encouraged an open discussion and brainstorming of ideas. The initial interviews with users helped me to gain a better understanding of typical pain points the users encountered while implementing academic Arduino projects in an online setting.
Research outcomes
Some of the main outcomes from user research included the inclusion of features to identify components, having a marketplace to buy and sell components and also using Augmented Reality for step-by-step instructions. I also decided to proceed with an Android application as most users felt that a mobile application would be ideal as opposed to a web-based implementation.
Affinity mapping
I used an affinity map to help organize the main points from user interviews. This was done on Miro as the discussions with users were carried out on Miro as well.
Affinity mapping
Mind mapping
I created a mind map to help organise the various ideas generated from user research. Mind mapping was useful to bring clarity and link several ideas together visually.
Mind mapping of ideas
Persona- Susan
Age demographic :20-28
Bio
Susan is a student, currently pursuing her Master’s degree. She has a background in Design and is taking remote classes.
Goals and Needs
Learn the basics of Arduino at her home.
Make interactive prototypes
Complete her module successfully.
Frustrations
She cannot follow along with online classes.
Finds it difficult to understand the different components.
Does not understand the basics of electronics
Sketching and ideation
I started ideating and sketching design ideas and also creating 3D assets required for use in technical implementation.
Ideation sketches
Information Architecture
I proceeded to work on the Information Architecture of the app to understand the basic flow and interactions and also to define the main pages within the app.
Wireframing
After creating the user flow diagram I started sketching wireframes of basic pages and layout and then proceeded to create digital wireframes on Figma to test with users.
Wireframe screens
Visual identity
At this point, I decided to design a logo that would also become the app icon. I also decided on the colour palette and typography for the app and kept the design minimal and simple. It was important to have a visual identity as it helps with improving the overall visual aesthetic. I also decided to refer Google Material design system for visual design specifications, sizes and typography.
Prototyping and user testing
I moved to prototyping and developed a basic Augmented Reality version of the Arduino using HTML and Google modelviewer. After testing this with users I learnt that it lacked interactivity that can be attributed to Google modelviewer. I then decided to move to Figma and Unity to develop an Android application. After testing the wireframes I redesigned the bottom navigation tab and the home page navigation. I added a top tab bar for the home page to include more tabs and also added text with the icons of the bottom Navbar for better usability. The overall UI was also refined based on the Google Material guidelines for Android.
Hi-fidelity Figma prototype and Native Android app demo
Outcomes and lessons
Some of the key takeaways for me from undertaking this project are: