UX/ UI and Product Designer
My role
My role as an industrial designer
-
Literature analysis.
-
User analysis, surveys, card sorting, etc.
-
Design of the user interface and the logo of the gamification tool.
-
Design and execution of usability testing.
-
Communicating design needs with systems engineers
Participants
-
Andrea Paola Pinzón Barbosa
-
Research group galea
-
Systems engineers
Institutions
Problem definition
Design a motivational didactic tool based on ICT, associated with the prioritized ABET competencies.
Logo desing
Initially, a golden rectangle was created, and from there, the motivatic logo was designed.
Afterward, the font type was attached to the golden tile and modified in the following way: first, the letter "o" was placed in the golden point, second, changes were made with the letter "M" in the "y" axis so that it would touch the diagonal line of the square base of the golden rectangle. once these two letters were placed, the rest were distributed keeping the same "X" axis. in addition to the letters, the computer network elements were added, and the elements were placed from the golden point.
After these modifications were made, the color of the typography was edited and overlapping was added to the font to express volume, finally, an enveloping distortion of the "arc" style with a 5% curve was applied.
The logo implements two IT concepts: information networks and the hub component, the first refers to the set of devices interconnected with each other through a medium that allows the exchange of information and sharing of resources, the second called "hub" or concentrator, is a device used to concentrate the wiring of a network and expand it.
These concepts were applied because the tool stores the content of the teachers' class curriculum in a gamified way and shares it with the students, this information can be amplified by being shared between teachers and students, which allows the transversality of knowledge through a mobile application. the sum of all teachers and their relationships with students create networks. Therefore, in the motivatic logo the lines are the connections, the squares and dots are the senders and receivers of information.
​
​Ya que el objetivo de la herramienta es ser implementada en la universidad industrial de Santander, se tuvo en cuenta los colores institucionales.
Wireframe of low fidelity
Each section is described below:
A. User data entry.
B. menu: allows access to the avatar, search engine, settings, classes, and add another class.
C. Student profile.
D. List of topics.
E. List of games.
F. Home quiz questions and answers.
G. Question and answer activity.
H. System that recognizes if the answer is correct or not.
I. Confirmation dialog: correct.
J. Confirmation dialog: incorrect.
K. Confirmation dialog: end of playful activity.
L. Survey.
M. Confirmation dialog: survey sent.
N. Playful screen 2,
Ñ. Play activity 2: letters,
O. Play activity 2: answer input
Diseño UI
Gamification element used
.png)
-
Points: points refer to the number of times the student correctly completes an evaluation of the play activities.
-
Badges: the badge represents the student's progress in the course module and is classified in three: gold, silver, and bronze. Each of them is determined by a percentage of points.
-
Avatar: is the virtual representation of the student
-
Transactions: transactions are made with the system when the user "buys" items with the points earned in the recreational activities.
-
Time: the time restriction is used in the question-and-answer game.
-
Feedback, progress: the user's progress is shown in four ways: through the accumulation of points, the acquisition of badges, the leaderboard, and the user's progress.
-
Leaderboard: the leaderboard is used to generate competition among users and thus motivate them to perform the game activities.
Poins
Badges
Avatar
transactions
Competition
Progress
Playfulness used
Game 1: questions and answers
Introduction, Helps
Learning content
In this section, the student will be evaluated by means of multiple choice questions with a single answer with a time limit, each time he/she answers the question correctly, he/she will earn points in the case of being wrong, he/she will go to the next question without accumulating score, in this game, there are no winners and losers since the intention is learning and not to generate negative emotions in the user. Also, the user can make use of three aids: time, minus2, and life, in the first one the system restarts the time of the question, for the minus2, the system eliminates 2 wrong questions and in the life aid, it allows the student to answer again in case he/she has selected a wrong answer.
Game 2: Cards
Game content
The card game was selected with the intention of covering the ABET competence: acquisition of new knowledge. This activity is based on showing a series of cards to the user with concepts or images and as the user advances the concepts are evaluated randomly, for example, card one is shown, followed by card two, then card 2 is evaluated, card 3 is continued, card 1 is evaluated and so on, in case of answering any of the cards wrongly, the evaluation of the concept will be carried out later, presenting the concept in a different format.
​
The ways to evaluate the cards are a questionnaire of questions and answers with multiple choice and single answers, a questionnaire with open questions, and finally a table of concepts to be related.
​
When the user evaluates the card for the first time, he/she earns 5 points, if he/she does not answer the card correctly, the second time he/she earns only 2 points, and if he/she answers the card correctly for the third time, he/she earns only 1 point. If the user answers the question correctly after the first three attempts, he/she will not earn any points.
Game 3:Teamwork
Interface, third game, Teamwork: A. introduction to activity 3 with the option to add points, B. confirmation dialog that the action is invalid, C. completion of the activity
This section was developed to cover the ABET competency: teamwork. For this game, the teacher performs a group activity in the classroom and assigns points to the students by means of a code, the assignment of points in this case is manual, the teacher has the autonomy to give points to his students according to the work done.
Content rating survey
interface qualification of play content: left - survey, right - confirmation dialogue sent
At the end of the recreational activities the student can rate the content of the recreational activity by means of a survey, to motivate the user to take the survey, a reward of 5 points has been assigned at the end of the survey. students can access this option only once per recreational activity.
Other secreens
Log in /Reset password
Add course
My Courses
According to the search equation performed in the first objective of the project in general, different gamified tools for education were identified, in each tool we analyzed:
-
The objective of gamification
-
The game system used
-
The ABET competence represented
-
The gamification elements used: dynamic, mechanical, and components
-
the system or device used
-
A brief description of the validation.
Based on the literary analysis, the following information was compiled and synthesized.
-
In some cases, fantasy is used, and they make the classroom a story in which students are part of it with specific functions, tasks, and missions, among others (role-playing).
-
The use of badges, levels, points, and leaderboards is frequently identified, as well as the use of question-and-answer games.
-
The implementation of gamification to the classroom curriculum is observed, where the student can earn points, badges and elements according to their performance, for the case of rewards, two factors are used, emotions and real representation, with emotions referring to the personal satisfaction of the student for successfully performing their task and getting points, virtual badges or being the leader of the leaderboard, and the real representation, refers to the accumulation of points or badges, is reflected by a real grade in their studies (determined by their teacher).
-
The validation model that is most used is the comparison model, in several occasions, the same teaching is used with two groups, one of them using the gamified tools and the other not, at the end a survey is made to the student, and the results are compared between the two classrooms. The student's knowledge before and after using the tool is also evaluated.
User requirements
A survey was conducted with engineering students from the Universidad Industria de Santander in order to know their needs regarding the design of a gamified tool based on the following ABET competencies: 1. solving engineering problems 7. acquiring and applying new knowledge, implemented on a mobile device.
according to the user survey, the following list of needs was established:
-
That it be emotional and fun
-
That it uses real data or situations and the development of the exercise.
-
It should contain gamification elements (levels, challenges, among others).
-
That the application allows for feedback
Information architecture
In order to know how users group the information, a card sorting was carried out open to students of the Industrial University of Santander.
For the development of the activity, the users were given 21 cards with gamification elements, general elements of the curriculum and elements of the application, together with empty cards for them to write the category corresponding to the group generated. The purpose of this exercise was to know how students relate the information without having categorization restrictions.
Gamified tool flow
Se realizó un card Sorting cerrado a los estudiantes de la universidad industrial de Santander con la finalidad de identificar una secuencia lógica en la aplicación,
Durante el desarrollo de esta actividad se entregó al estudiante 15 tarjetas con elementos de gamificación y elementos de aplicaciones móviles. el trabajo del usuario consistió en ordenar tales tarjetas de forma consecutiva de acuerdo a su concepción de la aplicación.
Testing
The evaluation of the graphical interface for the Meta® augmented reality glasses, together with the implementation of the LED screen orientation system, was carried out in order to determine whether the attributes of the two graphical interfaces affect the quality of the user experience during tunnel drilling for anterior cruciate ligament reconstruction RLCA, according to the following usability criteria: effectiveness, efficiency, and satisfaction, through the design and execution of a test.
Performance of the test
​Development of the activity
the test which is divided into two parts: I. interaction with the graphical interface and II. Conducting a survey:
-
Interaction with the graphic interface: Through a mockup made with the marvel tool, participants were asked to perform the following activities, the evidence can be seen in Annex 1:
-
Access the question and answer game of module 1 of the business management course 2.
-
Accessing the card game of module 1 of the business management course.
-
Go to the team game of module 1 of the business management course.
-
"buy" the item "glasses" in the student's profile.
-
Add a new course to the "my courses" folder.
-
Access the feedback (leaderboard and progress) of module 1 of the business management course.
-
Access the feedback (leaderboard) of the "questions and answers" game.
-
Exit the application
-
Survey: Once the interaction with the interface was finished, the participant was asked to answer a series of questions according to the experience he/she had with the interface.
​
Link of the mock-up used for the interface validation: validation prototype
Usability metrics
Three forms were made for data collection during the course of the test, these are for efficiency, effectiveness, and satisfaction, the first one consists of the time taken for each activity performed and if the participant performs it at the first attempt. The second consists of the number of errors, number of interventions, and requests for help. Finally, for satisfaction, a survey was conducted in which the participant rated the elements of the graphic interface from 1 to 5, with 1 being the lowest level.
Conclusions
-
The methodological development of the project was accompanied by orthopedic surgeons in each of its phases, which allowed for adequate check the decision-making throughout the design, development, and implementation of the visual guide.
-
The design of the guide was developed continuously, it was a process of constant improvements, under the premise of providing the orthopedic surgeon with pertinent information in an accessible way at the moment of performing the tests for the surgical process of tibial and femoral tunnel perforation in the RLCA.
-
The importance of iterative GUI prototyping was evidenced in the development process, as this allows for continuous evaluation and optimization of the GUI proposals.