ARt app | UX Case Study

A new way to study History

of Art through Augmented Reality.
ARt

UX Case Study
Watch the functioning app on TikTok
ARt Sophia Viganò 2022 Elements of Human-Technology Interaction

Summary.
Project overvie
Targe
Main functionalitie
SWOT Analysi
Needfindin
Persona
User journe
Wirefram
Heuristic evaluatio
App developmen
App screen
Evaluatio
Conclusions

Project Overview
Background

For History of Art’s students, AR technology may help them improve their learning effectiveness.

ARt can integrate technology in teaching and learning.

In fact, the use of this technology in the classroom or during the study at home could improve the quality of teaching and
the learning experience of students.

Studies confirm that XR has the potential to engage students in more effective learning than traditional methods.

It allows students to participate in real-life 3D environment simulations, increase their attention span, and engage in
interactive learning through virtual manipulation.

Project Overview
The problem

For art students, the study of art history is essential. Traditionally, learning relies on explanations from instructors and textbooks,
supplemented by static images of artworks. However, this approach may lack depth, particularly for subjects like sculpture,
architecture, and artifacts that require exploration from multiple perspectives. While videos can partially address this limitation,
active engagement has been proven to enhance interest, experience, and comprehension. Yet, physical museum visits aren't
always feasible due to constraints such as time, distance, or current circumstances like the pandemic.

The goal

The objective is to develop an AR marker-based application that presents 3D models of the artworks under study. The
concept involves integrating the app with the art history textbook, where each photograph of an artwork serves as a marker
for accessing the corresponding 3D model. This approach aims to facilitate effortless and interactive exploration for
students, enhancing their learning experience.

2. Target
3. Main functionalities
Our targets are students of History of Art, both from High School and University, with an age between 14 and 30 years old.

The application can
scan the environment
and recognize
markers.
The application can
scan the environment
and recognize
markers.
The application can
show 3D models of
the artworks shown
in the pictures.
The application can
show 3D models of
the artworks shown
in the pictures.
The application can
show a text that
describe the artwork
shown in the picture.
The application can
show a text that
describe the artwork
shown in the picture.
The application can
reproduce an audio
track of the artwork
description.
The application can
reproduce an audio
track of the artwork
description.

Stregths
Weaknesses
Threats
Opportunities
4. SWOT Analysis
Thanks to Unity
would be easier to
develop the app.

Limitations in the availability of online
3D models for artworks pose a
challenge
Existing 3D models may exhibit
imperfections or inaccuracies
Acquiring missing 3D models
necessitates collaboration with
photographers and 3D artists
The process of capturing photos and
creating 3D models is time-consuming.
The widespread availability of
smartphones among students presents
an opportunity for widespread adoption
AR technology has the potential to
significantly enhance student
engagement and interest
For producers of the textbook,
integrating AR can serve as a unique
selling point, differentiating them from
competitors and offering an innovative
educational tool.
Some students may face limitations
due to insufficient storage space on
their smartphones for app installation
Potential resistance from certain
teachers towards adopting AR
technology in their teaching
methodologies may pose a threat to
widespread acceptance and
implementation.

5. Needfinding
Before delving into design creation, it's essential to comprehensively understand the users and their needs.

This involves posing targeted questions to gather a wealth of data for analysis.

The insights gathered will serve as the foundation for constructing formal user models.

Through a user questionnaire, the following aspects will be explored
Identification of user demographic
Examination of study habits related to Art Histor
Evaluation of user attitudes and expertise regarding AR and technology.

Platform used

Modalities

Google Form

The link of the survey had been sent to people who riflected the target characteristics.

5. Needfinding
Survey

User typ
How old are you
What is your education level
What do you study
How is your level of expertise with technology?

Problem space

4. Which of the following learning methods works better for
you?
Listening someone that teaches yo
Reading alone the boo
Reading summarie
See with your eyes what you’re studyin
Studying with other
Othe
I don’t know

5. How much do you agree or disagree with the
following statements?

a. I find difficult to understand an artwork from a
picture.

b. Viewing an artwork at the museum makes me
understand it better.

c. I find easier to study Art History if the book
doesn’t have many pictures.

d. I find Art History hard to learn.

e. When I study Art History I get bored.

6. Do you have any app for helping you to study?

7. Are you usual to go to art museums? If not, why?

8. Are you interested in Augmented Reality?

9. Do you think Augmented reality could help students
learning Art History?

6. Personas Daniel
18 / Art High School Student
Daniel is a 18 years old boy who attends the 4th year of
an Art High School. He is very good in drawing and
painting, but he finds Art History very boring to study
and hard to remember. He can’t go often to museums
because he don’t have them near where he lives.
He wants to increase his performace in Art History. He
wants to feel involved and motivated when he studies
at home.
Due to dyslexia, he has some learning difficulty that
mainly causes problems with reading.
Technology expertise
Interest in AR
Goals
Frustrations
active loyal generous impatient
Diana
22 / Fine Arts University Student
Diana is a 22 years old girl who attends a bachelor
Degree in Fine Arts (specialisation in sculpture). She
used to go often to museums, because she thinks the
images on books aren’t enough to understand the
artwork, but with the pandemic she had to stop. Now she
found a part-time job and she doesn’t have much spare
time to go there. She likes the traditional study and she
uses to read many summaries before the exams.
Technology expertise
Interest in AR
sensitive fearful passionate traditionalist
She is passionate about art and she wants to explore
evrey detail of the Art Works she has to study.
She’s scared that technology could distract her from
her study.
Goals
Frustrations
To organize the information obtained
from the survey resultes, I built the
model of two potetical users through
the delineation of Personas.

The aim is to give a face, a story,
objectives, motivations to the target
audience, in order to stay focused on
ARt’s possible users and empathize
with them.

7. User Journey
I mapped out a step-by-
step journey that users
undertake to achieve their
objectives.

This approach proved
instrumental in
identifying existing
challenges and
conceptualizing an
optimal user experience
from the user's
standpoint at an early
stage of the process.

The insights gained from
this exercise provided
invaluable material for
informing subsequent
steps in the project.

8. Wireframes
To initiate the conceptualization of the ARt application's structure and
design, I created wireframes. This initial step proved beneficial for
several reasons
Organizing a preliminary draft of the information architecture
Beginning to outline the organization of different sections and
functionalities within the application
Developing an initial design concept
Verifying the flow for any major errors
Identifying and addressing any potential issues with the initial
concept early in the project.

The app's structure will remain straightforward, comprising only

two pages
The main page, featuring the logo and buttons to either exit the
app or commence its use, including the scanning function which
leads to the second page
The AR page, where users can activate the camera to scan
markers and view 3D models. Additionally, users can access an
information panel by clicking the designated button, allowing them
to read and/or listen to audio tracks while exploring the models.

9. Heuristic Evaluation
As the first evaluation of the Wireframe designed, an Heuristic Evaluation has been carried out. It’s a predictive
evaluation that aims to find problems and criticalities in it that make the user experience less satisfying.
The wireframe has been evaluated following the Jakob Nielsen's 10 Heuristics:

#1: Visibility of system status

#2: Match between system and the real world

#3: User control and freedom

#4: Consistency and standards

#5: Error prevention

#6: Recognition rather than recall

#7: Flexibility and efficiency of use

#8: Aesthetic and minimalist design

#9: Help users recognize, diagnose, and recover from errors

#10: Help and documentation
I also usedthe results of the paper Adapting Usability Heuristics to the Context of Mobile Augmented Reality (A.
Labrie, J. Cheng, 2020), which interpreted classic usability heuristics in the context of mobile AR, and I adapted them
to marker based AR.

The application underwent a comprehensive heuristic evaluation conducted by myself, acting as an expert usability
evaluator. This approach allowed for the identification of a wide range of violations against established usability
principles.

I am the evaluators of this heuristic analysis, since:
I know the app that is going to be tested (domain expert)
I have knowledge about heuristics (usability expert)
For carring out the evaluation i documented all the problems encountered and explained which heuristic was violated
and why.

Then I established the severity of the possible violation, on a scale from 1 to 5 (where 1= cosmetic problem and 5 =
usability catastrophy).

It's worth noting that although the wireframe lacked 3D model integration, I still included related problems in
anticipation of addressing them during the subsequent development phase.

I decided to find a solution to the 5 level of severity violations.

E2: Closing the description panel -> Users can close the description panel by tapping the info button again.
E3: Going back to the main page -> Users can navigate back to the main page by tapping the arrow icon located in
the top-left corner
E14: Realistic 3D models -> In the developed application, 3D models will be depicted as realistically as possible.
They will maintain proportional sizes relative to the markers and remain fixed to surfaces, mirroring real-world
behavior.
E15: Free exploration of the 3D model -> The developed application will enable users to freely explore 3D models
by moving their phones, facilitating immersive and intuitive interaction.

Problems & Solution

10. App development
Tool
Marker
Unit
Vuforia Engin
Visual Studi
Sketchfa
Android phon
MP3 audio converte
Figma

I utilized photographs of the artworks to simulate students' textbooks: scanning these images will prompt the 3D
models to appear.

10. App development
Development flo
I created a project in Unity for developing the App for Android mobile phones
I imported the Vuforia Engine
I deleted the basic Camera and I set up the Vuforia ARCamera
I created two scenes (“MainScene”, for the main page, and “ARScene, for the page where the 3D model and its description will appear)
I did the UI of the pages (background, buttons, texts...
I created buttons from images (made using Figma) by adding the “Button” Component to them
I created the target databases Vuforia website, I downloaded it and I imported it in Unity.
I set up the markers in the project
I changed the option “Consider Target as visible if its status is” to Tracked (to make the 3D model disappear when the phone is not scanning the
marker anymore)
I downloaded the Sketchfab plugin in Unity
I imported the 3D models from using the Sketchfab plugin in the project.
I set up the 3D models: I changed a bit the materials to make them look better, I scaled down them, I oriented them in the good way and I make
them settle down on the marker
I made the 3D models childs of their own marker
I made the information button and the description panel as childs of their marker
I put the Title, the text and the audio buttons (play, pause, stop) as childs of the panel
I wrote a C# script (“PanelToggler”) for making the panel appears/disappears when the info button is selected
I set up the On Click () function
I included the audio source that I downloaded from youtub
I set up the On Click () functions to make the audio buttons play, pause and stop the audio track
I wrote a C# scripts (“Scene Controller”) to make the Back button to bring you back to the main page when selected, and the Start button to
bring you to the ARScene and the Quit button to quit the app
I set up the On Click () function to make these buttons work.

10. App development

10. App development
This C# script “PanelToggler” makes the panel appears when
the info button is selected and makes it closes if it’s selected
again
The info button will be able to switch on and off the pane
I created a bool variable isOn and I make it false
The SerializedField shows the private variables in the inspector
I created a public void function, togglePanel()
If the panel is on, the SetActive function is set to false (the
panes is disabilitated) and the variable isOn is set to false.

10. App development
This C# script “Scene Controller” makes the Back button to
bring you back to the main page when selected, the Start
button to bring you to the ARScene and the Quit button to quit
the app
I included the library “SceneManagment”, for making possible
to navigate through the scenes.
I created three functions
MainMenu() -> it will load the main scene
ARScene() -> it will load the AR scene
QuitApp() -> it will makes the app to quit.

11. App screens

12. Evaluation
This phase aim to evaluate three dimensions of usability: effectiveness, efficiency and satisfaction.

For taking data for each dimesion it’s been used
Effectiveness (the degree of correctness, accuracy, completeness in which the user achieves his goals) ->
Efficiency (the relationship between the result achieved and the resources used to achieve this result) ->
Satisfaction (the quality of the experience of achieving the result) ->
rate of success/
failure of the task
time measur
Post-test Questionnaire

12. Evaluation
Plannin
Partecipants:
Target population: 2 Art students from high
school and University
Age: 18 and 23 years
Expertise with technology: good

Equipment:
mobile phone
camer
paper with the questionnaire
Requirement
AR-t app installed on the phon
screen recorder app installed on the phon
Artifacts
consent form signe
post-questionnaire
My role
facilitator of the sessio
note-take
observe
questionnairer giver

12. Evaluation
Pre-

conditions
3D model view
Title
The user scans the photo marker of
Laocoön and His Sons which triggers the
AR model to appear on the device.
T1
TASK 1
Description
Post-

conditions
Successful

flow
The user is on the main page of AR-t app.
The user is able to see the 3D model
and to explore it moving his phone.
The user selects “Start
AR page appear
The user scans the photo marke
3D model of Laocoön and His Sons appears

on the screen.
Id
Optimal time 7,67 sec
Tasks

The main use cases of the application has been chosen as tasks.
Methodology

User Test
Runnin
One partecipant at tim
Starting the screen recor
Writing down notes about any user’s difficulties and error
At the end, asking general and specific questions, to better

understand some pathways or comments.
Metric
Final comments over the experienc
Success/failure of the task
Time on task, considering the time obtained by me, an expert user
as the optimal tim
Questionnaires (post-Test)

12. Evaluation
Pre-

conditions
Listening to the audio track of the artwork
description
Title
The user starts the audio track of the
artwork description.
T2
TASK 2
Description
Post-

conditions
Successful

flow
The user is viewing the 3D model.
The user is listening to the audio of
the artwork decription.
The user selects the info butto
The panel with the artwork description
appear
The user selects the Play butto
The audio track starts
Id
Tasks

Methodology

User Test
Runnin

Metric
as the optimal tim

12. Evaluation
Pre-

conditions
Closing the description panel
Title
The user closes the description panel
T3
TASK 3
Description
Post-

conditions
Successful

flow
The user can view the 3D model full-
page
The user is listening to the audio
track of the artwork description
The user selects the Stop button
The audio track stops
The user selects the the info button
The panel with the artwork description closes
Id
Tasks

Methodology

User Test
Runnin

Metric
as the optimal tim

12. Evaluation
Analysi
Effectiveness -> rate of success/failure of the tasks

Both of the user reached their goals following the successful flow for tasks T1 and T2.

About the task T3
both of them tried first to press areas outside of the panel to make it goes away, before understanding they had to tap
again the info button
one of them didn’t stop the audio track before closing the description panel.

12. Evaluation
Analysis

2. Efficiency -> time measure

The results are similar to the optimal time, even though a bit higher
T1: bot of the users looked a bit confused about what to do when the camera of the phone started working. U1 asked the
facilitator “And now? What do I have to do?
T2: similar to the optimal time
T3: both of them lose some time by tapping the screen outside the panel without understanding soon they had to select the
info button.

12. Evaluation
Post-Test Questionnaire: SUS

Result
System Usability Scale (SUS
The aim is to measures users’ overall impression of the usability
and experience of the application, for obtaining a test-level
satisfaction measurement
It’s a 10-item Likert-scale questionnaire where each question

has 5 response options
It produces a score from 0-100 (a SUS score above 68 is
considered above average)

U1 SUS score: 8
U2 SUS score: 82.5

12. Evaluation
Post-Test Questionnaire: TA
Technology Acceptance Model (TAM
I wanted to understand if the students would accept the introduction of this app in their lifes
It predicts individual adoption and use of AR-t app in the user context (school and home study).
Intention to use new technology is based on 2 factors: perceived usefulness and perceived ease of use. Perceived
usefulness is characterized by an individual’s belief that engaging a technology improves their study performance while
perceived ease of use refers to their belief that using the technology requires minimal effort.
The measurements of the two constructs are calculated using a Likert scale as follows: strongly disagree = 1, disagree = 2,
neutral = 3, agree = 4, strongly agree
The items (4 for each constructs) have been adapted for AR-t app.

Ease of use Variabl
It was easy to reach the point of viewing the 3D model
It would be easy for me to become skilful at using AR-t
I can easily use the app without help
I easily make the app doing what I wanted it to do.

Usefulness Variabl
AR-t app could enhanced my involvement in the lessons and in
home studying
I believe AR-t app is useful in learnign and education
AR-t app could be able to better remember the artworks that I
study
AR-t is useful at school to enrich the Art History lessons.

12. Evaluation
All the items got a quite high score (never under 3).

Results

12. Evaluation
Post-Test Questionnaire: (NPS
Net Promoter Score (NPS
I wanted to understand if the students could refer this app to others and suggest it to other students, or, vice versa,
spreading negative messages and reviews
“Considering everything, how likely will you recommend this product to a friend or colleague?
This is a 11-point scale ranging from 0 (not likely at all) to 10 (extremely likely).

Result
U1:
U2: 9

NPS= 100%

12. Evaluation
Discussio
In general, the results of evaluation are positive. In fact, they show that AR-t
allows the users reach his goal without failures
allows the users to reach his goal without wasting too much time
is enjoyable to use.

Also
it’s perceived as easy to use and useful: probably the introduction of AR-t in the teaching and learning contexts might be
easy to accept by Art students
would be racommended to friends or colleagues.

Emerged problems
PROBLEMS
both of the users tried first to tap areas outside the panel to
make it goes away, before understanding they had to select
again the info button
bot of the users looked a bit confused about what to do
when the camera started working. U1 asked the facilitator
“And now? What do I have to do?”

SOLUTIONS
Insert an “X” button to close the panel
Insert guidelines (i.e. “scan the artwork photo of
which you want to view the 3D model” or an
animation of a phone getting close to the marker).

13. Conclusions
This UX case study started with the concept of developing a marker-based AR mobile application aimed at showcasing 3D
models of artworks, with the intention of enhancing the quality and learning experience of students studying Art History
Initially, I identified the target audience, outlined the primary functionalities of the app, and conducted a SWOT analysis
Needfinding was conducted through a survey to ascertain user demographics, study habits in Art History, and attitudes
toward AR and technology
To organize the survey results and better understand the target audience, I created personas and developed a user journey
Wireframes were then designed to draft the information architecture and app structure, followed by testing via Heuristic
Evaluation, based on Jakob Nielsen's 10 Heuristics and the paper "Adapting Usability Heuristics to the Context of Mobile
Augmented Reality"
Heuristic violations were documented in a table, with solutions proposed only for those rated as severity level 5
I implemented the application with the new solutions using Unity and Vuforia Engine
The app evaluation aimed to assess usability across three dimensions: effectiveness, efficiency, and satisfaction: Task
success/failure rates, time measurements, and post-test questionnaires were utilized for evaluation.
Additionally, to gauge user acceptance, an adapted TAM questionnaire was administered, along with a Net Promoter Score
(NPS) questionnaire to assess user willingness to recommend the app to others.

13. Conclusions
Throughout this case study, the ARt app has been designed and developed, yet there remains ample room for improvement
Future prospects could entail
Iterating upon the app by implementing the solutions identified during the evaluation phase
Expanding the number of participants in the evaluation phase to enable robust data analysis of the results
Enriching the app's content by including additional 3D models
Conducting a controlled experiment, wherein two groups of students are compared: one studying Art History through
traditional methods (e.g., reading textbooks), and the other utilizing the ARt app. Questionnaires would be administered to
gauge
Knowledge and comprehension: Does the ARt app enhance learning outcomes in Art History compared to
traditional methods
Satisfaction: Does the ARt app contribute to a more enjoyable learning experience in Art History compared to
traditional methods?

View the functioning app on TikTok
Thank you

for the attention!

ARt app | UX Case Study

Recommandé

Recommandé

Contenu connexe

Similaire à ARt app | UX Case Study

Similaire à ARt app | UX Case Study (20)

Dernier

Dernier (20)

ARt app | UX Case Study