My thesis project, conducted in two phases, investigates the effectiveness of allowing older adults to self-tailor, or personalize, a website's information architecture (IA) structure. The content used on the website are dementia awareness videos created for a separate research project in collaboration with Cyber-Seniors. View the entire thesis here.

This page describes the first phase of the project, during which I developed an initial prototype, using Framer, based on existing literature and guidelines for older adults, including the Web Content Accessibility Guidelines. The key feature of the prototype is having the ability to switch between a linear and matrix website structure. This prototype was then brought to a focus group of older adults for feedback. Based on the results of the focus group, changes were made to the prototype, which was then evaluated during the second phase of the project.

My Responsibilities

Secondary Research, Design and Prototyping, Research Study Design, Focus Group


  • Figma

  • Framer

  • Zoom

Initial Design

The prototype consists of two main webpages: a homepage and a page for each of the dementia risk factor topics.

The homepage is what a user sees when they first visit the prototype using a web browser. This page has a description of the site as a whole, a top navigation, and a button to go to the topics, or “lessons,” pages.

The topic page, which has the same design for each topic available in the prototype, has four main areas:

  1. The same top navigation as the homepage

  2. A video player

  3. The navigation element which allows users to self-tailor the IA structure

  4. Text information which is separated into an overview tab and an additional resources tab

The initial matrix IA (left) allows users to go to any topic from any other page; clicking “Condensed View” changes the page to show the Linear IA.

The linear IA (right) allows users to go through topics in a linear order, either forward to the next topic or back to the previous one; clicking “Show All Topics” changes the page to show the Matrix IA.

In anticipation of comments regarding the amount of text information, an alternate version of the topic page was created, which grouped the text information into dropdown elements.

Including dropdown elements added complexity to the prototype, so gathering feedback from the focus group participants was crucial to ensure that the dropdowns would not hide text information from the usability evaluation participants.

Focus Group Evaluation

A 90-minute focus group was conducted with 11 older adults. Participants identified potential issues that they noticed and discussed potential solutions to the issues and other improvements that could make the prototype more usable. The protocol for the focus group can be found below.

Participants were required to complete a consent form before they could participate in the study and had to meet a set of inclusion criteria:

  1. You are over the age of 65

  2. You are fluent in English

  3. You have previous experience using a computer and browsing websites (basic IT support to be provided by researchers)

  4. You have access to a desktop computer or laptop

  5. You are interested in a self-guided dementia awareness program

  6. You do not have a form of dementia

  7. You consent to have your audio recorded

Focus Group Protocol

Introduction Text (Partially redacted for privacy):

Before we start, please go over this consent form if you have not done so already. A few things to note is that this focus group will take about 90 minutes and it will be audio recorded and transcribed. Your name and any identifying information will not be associated with the data. If at any point you would like to withdraw from the study just let me know. No explanations are needed. We will likely take a break or two during this session, so if there is something you would like to discuss privately, feel free to do so during those breaks.

Take your time to read over the consent form and let me know if you have any questions. If you have not already signed the consent form, please do so and we will begin.

[Consent Form]


To start, I am going to show you the website that I have made and the personalization feature that I am looking to design. After showing you the site, I have some questions and prompts that we can use, but ultimately, I am here to have a conversation and collaborate with all of you to improve this website. As a note, please do not hold anything back. Any feedback, questions, or other comments you may have will help make this website better and improve my research project. I am not an older adult, and everyone here is an expert on their own lives and perspectives. Image we all work for the same organization, our shared goal is to make this personalization feature and website as good as possible. If there is a topic that comes up that you do not wish to talk about, just let me know and we can move on.

To help facilitate this discussion, I am going to encourage you to use the “I Like, I Wish, What If” method from the Interaction Design Foundation (appended to the end of this document). Basically, this method encourages you to provide feedback on the design using one of three kinds of statements:

  1. “I Like…” to say positive things about the design.

  2. “I Wish…” to say things that could be improved or are causing issues.

  3. “What If…” to say things that might not have been considered or are completely new

Of course, these statements are just meant to be a starting point, feel free to contribute or share your ideas in any way that works for you.

[Website walkthrough]

While we are discussing the website, I may make some sketches or quick designs to present visually the ideas that we are discussing. Please let me know if there is something that I misinterpreted or did not understand.

Initial Questions & Prompts

  1. Does anyone have any initial questions or comments about the website and the personalization feature?

  2. Is there anything that stands out as being unclear?

  3. Does being able to change how you navigate the website seem useful? Why or why not?


  1. Do you think you would actually use this feature to change how you go between pages if it was presented to you on a website?

  2. Does the way you change how you navigate between pages makes sense? How could its functionality or the way you change between the two options be improved?

[Potential Break]

Text & Language

  1. The personalization feature uses some text to explain what your options are. Does it make sense to use text here, or would there be a better way of conveying this information?

  2. Is that text that is displayed easy to understand? Would you change it at all to make it clearer?

  3. Do all of the button names and other labels make sense?

  4. Is there any other text or language, anywhere on the website, that should be changed or that I could improve on?

[Potential Break]

Visual Design

  1. Generally, does the design of the personalization feature look usable? Why or why not?

  2. Do the colours and layout look nice? Is anything hard to read or understand because of the colours or shapes used? What about the size of the buttons and where they are located on the website?

  3. What about the website as a whole, is there anything visually that is unappealing or should be changed?

Summary of Feedback

For the purposes of my thesis, a qualitative thematic analysis of the focus group transcript was conducted using NVivo to identify themes relevant to the research questions. However, a summary of the issues and suggestions identified during the focus group can be found below.

  • “Lessons” button in header is redundant

  • Make the length of each video clearer

  • The font is too small

  • Use consistent labelling

  • Change website title

  • Mixed reviews of the colour palette used

  • Too much text information

  • Button labels should be descriptive

  • Text labels are confusing

  • The topics in the matrix IA should have a meaningful order

  • Better convey the purpose of linear IA


Based on the feedback from the focus group, changes were made to the design of the prototype to improve the experience of the participants who would take part in the usability evaluation.

Original matrix IA (left) and redesigned matrix IA (right). The topics were put into four categories noted in the image by red arrows. The red boxes show the label change on the self-tailoring button.

A separate page was created for the categories so the participants could choose which category of topics they wanted to look at, though the matrix IA structure still allowed them to navigate to any topic.

The linear IA element was also redesigned around the categories to better convey its purpose and how the participants could use it.

The new linear IA only went through one category of topics at a time, taking participants back to the categories page if they reached the end of the category.

The text element underneath the videos was changed to a series of four dropdown elements. The first three dropdown elements are subheadings related to the topic and the fourth element has the links to additional resource.

The text under each of the subheadings was reduced to just convey key points from the video.

When hovering the mouse on the dropdown elements, tooltip-style descriptive text stating “Click to Open!” or “Click to Close!” appears to ensure participants understand how the dropdown elements work.

Several other small changes were made to the prototype based on the data from the focus group:

  1. Updated “Lessons”/View Categories” button

  2. updated descriptive label, “Home” became “View Homepage”

  3. Video length added to webpage

  4. Website title changed from “DementiaAP” to “Dementia Awareness


This phase of the my thesis project gave me the opportunity to design and conduct a focus completely independently. I definitely learned a a great deal about how to effective engage with many different participants at the same time.

When designing my thesis project, there were questions regarding whether two rounds of user involvement was needed. Based on the changes made to the prototype design and the feedback that I received, having this formative evaluation clearly made the subsequent usability evaluation more insightful as issues unrelated to the core research questions could be addressed ahead of time.