Grandma Tech
A fun way to teach the elderly how to use phones and apps
OVERVIEW
Grandma Tech started based on a project called InterGenerations, created by UXLeris, in which volunteers, including myself teach the elderly how to use mobile phones and apps in weekly in-person classes. However, many elders would forget what they learned from one week to the other and the initiative was geographically restricted to a specific city. Hence, the client, Luciana Zaina, head of UXLeris, decided to create an online platform in which the elderly could watch video lessons, not only allowing the elderly to revisit certain topics from the in-person classes but also expanding the reach of the project.
I volunteered to design the platform and worked with Lucas, a software developer who was also a volunteer at InterGenerations, to create Grandma Tech (Vovo Tec in Portuguese), a mobile-first web application that uses gamification to teach the elderly how to use mobile apps.
The Grandma Tech application aims to:
01 Provide easy access to video lessons on different topics related to mobile apps
02 Help the elderly practice what they learned by answering quizzes related to each video lesson
03 Leverage gamification to motivate the elderly and make the learning process more interesting
4 months (Aug - Dec 2019)
Client
UXLeris
Timeline
Sofia Silveira, UX/UI Designer
Lucas Penteado, Developer
Platform
Web (mobile-first)
Team
Elderly people in Brazil want to learn how to use their phones
PROBLEM
Many elderly people in Brazil want to keep in touch with their friends, to take photos and post them on social media, to call their families, to schedule appointments on their calendar, among others. Although they have mobile phones and want to use them for these tasks, they don’t know how to properly use their phones, so they want to learn.
Lack of simple and easy-to-understand resources + relatives have no time to teach
“Every week, I go to in-person classes to learn how to use mobile phones. But from one week to the other, I tend to forget what I learned.”
InterGenerations Student
“There are no initiatives in my city to teach elderly like me to learn to use mobile phones. I want to learn but I couldn’t find any easy resources in one place to do so.”
Not InterGenerations Student
Seeking to teach the elderly how to use mobile phones in an intuitive and fun way, the Grandma Tech application was successfully launched in early 2020.
A mobile-first web application that uses gamification, allowing users to watch video lessons, answer quizzes, earn points and level up while learning how to use mobile apps
83% of participants were able to finish all proposed tasks in the Usability Test
All testing participants demonstrated positive emotional feedback, feeling excited, motivated and curious about Grandma Tech
OUTCOMES
Although further testing had been scheduled to assess the application's performance and user adoption, the onset of the COVID-19 pandemic prevented its conduction.
Following a human-centered approach
PROCESS
Ethnography
Client interview
Secondary data
Research & gathering info
System requirements
Mobile-first approach
Planning & defining
Levels
Quiz models
Quiz questions
Elaborating gamification elements
Wireframing
Prototyping
Early testing
Visual identity
Designing & iterating
Usability testing
Self-Assessment Manikin questionnaire
User testing
Development
Delivery to client
Lessons learned
Delivery & review
Understanding the users and creating a user persona
USER RESEARCH
I conducted the Ethnography technique to observe and understand how the elderly behave when interacting with their phones. As I was one of the InterGenerations volunteers, it was easy to observe the elderly and take notes.
Ethnography
Key Takeaways
Some elderly feel intimidated by technology, so the application must be simple, inviting and easy to use
The elderly tend to use mobile phones and tablets more than computers, so the application design and development should follow a mobile-first approach
Some elderly have difficulty clicking on buttons, especially if they are not big enough and if the elderly are using smaller screens, therefore the application buttons must be big and easily clickable (Fitt’s Law)
The project client, Luciana, has already carried out several studies with elderly people and she provided me with secondary data, including research papers on how the elderly use mobile phones and social media and personas representing different elderly user groups, which helped me better understand who the users are and what their difficulties and needs are when using mobile phones and applications.
Secondary data
Key Takeaways
The elderly have difficulty reading on mobile phones, especially text in smaller fonts, hence the application should not contain too much text and the text font should be big
The elderly have difficulty seeing small images or videos on their phones, so having large images/illustrations and being able to expand the videos to a full-screen is essential
I also interviewed the client as a stakeholder requirements gathering meeting to learn what she expected from the application, the features she was looking for and which had a higher priority.
Client Interview
Key Takeaways
The client expects the application to be a complement to the InterGenerations project, displaying video lessons recorded by the InterGenerations volunteers
The video lessons should be grouped into different categories depending on the app they explain about, e.g. Facebook, Camera
The application design should include both the end-user and the content management (not shown here) parts of the system
The research findings culminated in the Persona Marina, who guided the design and development of the app.
Although Grandma Tech caters to both elders who participate in InterGenerations and elders who do not, the functionalities their ultimate goal and the functionalities they need are the same.
Persona
Defining system requirements
IDEATION
Considering Marina uses solely her mobile phone, the application must be designed and developed following a mobile-first approach, with an initial focus on smaller screens, which have more restrictions, and later the system functionalities were expanded to fit bigger screens, like computers.
-
the system must display text in big fonts
the system must have big easy-to-reach buttons
the system must have a walkthrough guide to help users understand how to use the app
the system must display the video lessons recorded by the InterGenerations volunteers
the system must display a message automatically after the video ends inviting users to answer a quiz
the system must display a message notifying users when they reach a new level
the system must group the video lessons by category
-
the system must allow users to sign up with an email account
the system must allow users to delete their account
the system must allow users to sign into the app
-
the system must present a quiz with questions related to each video lesson
the system must have at least 2 different quiz question models
the system must allow users to answer the quiz before finishing the video lesson by pausing the video
the system must hide from the quiz questions that have been answered correctly
the system must allow users to answer again questions they have answered incorrectly
the system must classify users by level of knowledge
-
the system must allow the app admin to sign into the system
the system must be able to CRUD (create, read, update and delete) a quiz following one of the defined models
the system must be able to CRUD (create, read, update and delete) a video lesson
the system must be able to CRUD (create, read, update and delete) a category
Creating gamification elements to engage and motivate the elderly
GAMIFICATION
As Marina tends to feel intimidated by the complexity of the phone, I decided to use gamification to make the learning process more fun and engaging for her. The gamification elements used in Grandma Tech were quizzes after each video lesson, points accumulation, progressive milestones with different levels and badges, progress bars in each category and on My Account page and feedback messages.
As the elderly accumulate points for answering quiz questions correctly, they reach higher levels and win prizes.
Levels
Level 1
5% - 24% questions answered correctly across all quiz questions on the app
Level 2
25% - 49% questions answered correctly across all quiz questions on the app
Level 3
50% - 74% questions answered correctly across all quiz questions on the app
Level 4
75% - 99% questions answered correctly across all quiz questions on the app
Level 5
100% questions answered correctly across all quiz questions on the app
I elaborated a few questions for each of the video lessons, totalizing 205 quiz questions.
The 3 question models I created are:
Alternative: selection of only one option
Sequence: selection of steps in the sequence to perform a task
Pairs: selection of pairs of icons/concepts and their meanings
Quiz question models
Alternative
Sequence
Pairs
Building wireframes of the main screens based on the insights gathered
WIREFRAMING
The next step was to put pen to paper and create low-fidelity wireframes of the main screens of the system. The idea was to create a very simple and intuitive interface. It is worth noting that, although it would be ideal to use divergent thinking and consider different possibilities at this point, the time and resources we had available did not allow for much exploration. Hence, as the requirements were very clear, I decided to move forward with the following wireframes, then conduct an early test with the elderly and make the necessary changes.
Homepage
The homepage contains a list of all the categories of video lessons, such as WhatsApp, Facebook etc.
Category page
The category page contains a list of video lessons in that category, such as how to post stories on WhatsApp.
Video lesson page
The video lesson page contains the embedded video lesson recorded by me and the other InterGenerations volunteers.
Mid-fidelity prototypes for proof of concept
PROTOTYPING
I then elaborated medium-fidelity prototypes in Figma in order to conduct a concept test with a few participants.
The screens shown below were translated to English for better comprehension of this case study.
Menu
Homepage
Category page
Video lesson page
I conducted a concept test to evaluate the feasibility and appeal of this possible version of the application. I conducted a focus group with 3 participants from the InterGenerations project after class. I first explained the goal of the app and asked them to click and explore as they wished, and then discuss their thoughts and impressions of the application.
It was possible to observe:
how the elderly interacted with the prototypes
if they understood the purpose of the application
if they liked the interface
where they found difficulty
Concept Testing
Key Takeaways
The elderly quickly grasped the idea of the application and said it was appealing and intriguing to them
They did not understand that the "hamburger" icon represents a menu. Therefore, the prototype was changed, with the button replaced by the word "Menu"
Presenting all categories as menu options felt confusing to them. As the redundancy was not necessary, I removed them from the menu and kept them only on the homepage
The elderly pointed out there was too much to pay attention to on the Category page. Therefore, I decided to remove the time indication of the length of each video lesson and increase the white space
From high-fidelity designs to development
SOLUTION
I then created high-fidelity wireframes of the app and started working with Lucas, the developer, to bring the designs to life.
Sign in
When users log in for the first time, an app walkthrough guide is shown.
Returning users are taken straight to the homepage, but can access the guide through the menu.
Sign in Page
User Guide
Home Page
Video lesson & quiz
By selecting a category, users go to the category page, where they can see the list of videos in that category. After selecting a video, users can watch a lesson about the chosen topic in that category.
Once the video ends, or if the video is paused, users are prompted with a message to start a quiz. When the quiz starts, a few questions related to the lesson will be randomly pulled from the database. After answering each question, Grandma will let users know if they answered it correctly or incorrectly.
Category Page
Video Lesson Page
Video Lesson Page (start quiz)
My account
On the menu, users have the option to go back to the home page, to see the walkthrough guide, to go to my account page or to sign out.
On my account page, users can see their level, the percentage of questions answered, the percentage of correct and incorrect answers and can delete their account.
Home Page
Menu
My Account Page
Obtaining satisfactory results from usability testing and SAM post-test
TESTING
After the system was developed, I conducted a Usability Test with the elderly. First, I conducted a pilot test to verify that the test planning was consistent. Before carrying out the Usability Test, I explained to them the idea of the application and how to access it on their mobile phones. Then, I ran the Usability Test with 6 elderly people and used the Think Aloud technique, asking the elderly to verbalize their thoughts as they tried to complete the tasks.
It is worth noting that, to avoid collecting biased results due to familiarity with the application, the 6 elderly doing the usability testing were not the same participants who did the early testing with mid-fidelity prototypes and had not seen the application before.
The usability test included 5 tasks:
Create an account
Read the walkthrough guide
Watch the video lesson “How to post on Instagram stories”
Answer quiz questions
Check the total of questions answered on my account page
83% of the participants were able to finish all the 5 tasks. The tasks in which the elderly faced more difficulty and, consequently, took longer to complete were watch the video lesson and check the total of questions answered. Overall, all participants felt enthusiastic about the system and wanted to learn more about it. Only small details needed to be changed in order to solve some difficulties observed while the elderly interacted with the application.
Results
Post-test
As a post-test, I applied the Self-Assessment Manikin (SAM) questionnaire to measure the emotional response of the elderly to the system.
The questionnaire evaluated 3 aspects:
Pleasure: their satisfaction and emotion while using the application
Arousal: their motivation and excitement while using the application
Dominance: their sense of control over the system
The answers obtained from the questionnaire were positive and showed that the elderly liked the application and felt good and excited when using it. Although 4 out of 6 participants did not feel in control over the system, mainly because it was the first time they interacted with it, all the participants showed a high level of motivation, curiosity and happiness, wanting to find out more about the application and start playing with it right away.
By following a user-centered approach and focusing on users since the beginning of the project, it was possible to understand early on that the elderly were not familiar with some aspects of technology that are commonly understood by other types of users, including the hamburger menu icon. The elderly did not know they were supposed to click on it in order to see all menu options. That emphasized the importance of co-designing with users and focusing on them throughout the whole design process.
One thing that I would change, however, is instead of just using the word ‘menu’, I would keep both the hamburger menu icon and the word ‘menu’, as it would allow the elderly to learn and associate the icon with its meaning, which is important considering the hamburger menu icon is used in many websites and apps.
What would I do differently?
LESSONS LEARNED
Want to read more?
Amazon 🔒
Designing a Planner Tool for Amazon while working as a UX Designer at Athlon
HomePeace
Helping roommates to live together more peacefully
icanbewell
Facilitating access to preventive health information in Canada