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.

Very interesting, I like that I can watch video lessons. It’ll be very helpful to revisit what I learned in class!
— Solange, Intergenerations Student
I love it! When will we be able to use this application? Is it already available? Can I start using it right now?
— Odete, InterGenerations Student
I don’t like asking my family for help, I like figuring it out on my own. I’m excited to be able to learn on Grandma Tech!
— Wilma, wants to learn about apps

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