Rememberly — A UX case study to help people affected by Alzheimer’s and Dementia

Published in

TJ Egbert Design

7 min readNov 16, 2018

Alzheimer’s is a progressive disease that destroys memory and other important mental functions and 5.7 million americans today are living with it. By 2050 this number is projected to rise to nearly 14 million.

Objective

I had the opportunity to collaborate with Sara Hathoway, Sean Rockwood, and Uliti Fangupo to design a web based solution helping people who suffer from Alzheimers or Dementia. The goal was to create a tool which allows them to access memories and structure interatctions.

I have been fortunate that Alzheimer’s hasn’t affected my life to this point. Without much background other than the prompt we were given, we had a lot of work ahead of ourselves to figure out our approach. The first half of the project was spent in a group format, after that we broke off individually and each finished our own visual design.

Design Process

Design thinking consists of five stages:

These stages helped us craft our design without rushing to conclusions. I will take you through each stage and how they contributed to the final product.

Empathize

We started by listing our assumptions of the effects of Alzheimer’s and Dementia and how it affects those around it. With every assumption, we listed an anti-assumption to challenge what we originally thought. This helped us think about the issue from different points of view.

A creative brief helped give us a direction and explore the need for our tool in more depth. It helped us answer initial questions like: Who is our client? How can we help? What are our strengths, weaknesses, opportunities, and threats? Is there existing research we can draw from? What are the goals we’d like to achieve? What is our tone?

In order to truly empathize with our potential users and create a product dealing with these serious topics we needed to learn more about the disease itself and traditional methods used to cope with it.

The group then set out to gather more data on the subject by distributing surveys online and interviewing people affected from all aspects of the disease. The interviews were scripted for each type of person. We talked to family members, friends, primary caretakers, experts, and had a very eye opening discussion with a man who has known for 5+ years of his alzheimer’s diagnosis.

Define

Our data was read through and sorted. Through it we created four ficticious personas who represented users of our product:

The Alzheimer’s patient
The primary caretaker
The healthcare professional
The extended family member

In our minds we needed all these perspectives to make the platform work, but quickly realized our attention was spread too thin and would be best served focusing on one primary persona. Our data pointed in the direction of the primary care taker. Using information and quotes from our interviews we set aside three of our personas and created Sandy Priest. In an effort to get a better sense of who Sandy is, we composed an empathy map on what she would think and feel, what she would see, what she would say and do, and what she would hear.

We determined she spent the most time with her loved one and in so doing was saddled with the most burden. Through her, we believed everyone else involved could be served. She would also benefit from the resources and interaction.

The next step was creating a story map based around Sandy Priest. We all brainstormed features that would meet her goals and frustrations. We used markers and post-it notes to come up with as many features we could think of, be it out of the box or not.

The ideas were grouped together and titled with headers. Next, we organized our headers into a story of how we thought a user would best want to navigate through our product. Underneath the headers we placed all the original functions and features we had brainstormed earlier. From our research we knew Sandy’s most important needs were seeking emotional support, getting family involved, and remembering her mother how she used to be.

The next step was figuring out which of the ideas would meet her needs. We used tape to divide our many ideas. Everything above the line was absolutely needed, the rest below wasn’t a necessity for the site to function. If we were working with developers we would’ve included them in this important part of the process.

Ideate

At this point in the process our group separated to create designs based on the research and story we had built. To help myself personally wrap my mind around what we had designed, I put together a site map to iron out the flow and functionality of the site’s potential pages.

From there, I began sketching out wire frames of each possible page in as many different formats as I could think of. I sketched 10 x 10s for each page, then narrowed them down to the designs that looked and functioned best. I experimented with mobile designs first, then transferred them to web designs.

Prototype

Lo-fi — My sketched out wireframes were recreated within the Sketch App. These are very basic designs without any color, text, and images. These designs could then be used to mock a functioning website through the Invision prototyping tool.

More interviews and usability testing was performed to give feedback on the basic designs I had created. Once I felt comfortable with my general layout I moved on to the hi-fidelity updates of my wireframes.

Hi-fi — I had to think about things like hierarchy with text and color schemes. I used websites like fontpair.co to compare multiple fonts with one another. I found two fonts that would speak to my persona. Lora, I used for my headers. It has a serif and portrays an elegent classy look. For my body text I chose Roboto, a sans serif font that is easier to read in smaller sizes.

When it came to choosing a color scheme, I researched colors associated with Alzheimer’s disease. I found that purple was generally considered the color associated with Alzheimer’s awareness and teal is the main color the Alzheimer’s Foundation of America uses for their organization. These recognizable colors paired with a lighter shade of gray gave me some interesting options. Playing around with them I began working on a logo to represent the site. Using the 10 x 10 method once again, I created a logo and tested it out in different color schemes before I settled on what I thought looked best.

Usability Testing

Throughout the process I received design reviews regularly from my peers. I conducted usability tests with my hi-fidelity prototype, observing users navigate my website. They helped me reword a header that was read as “too harsh.”

“Coping Mechanisms” was changed to avoid negativity toward the disease. A better alternative was “Resources.”

I was also given feedback on my layout:

Before content is uploaded to the site, the user is invited to add memories, add stories, and invite others to join. The text explaining these options wasn’t arranged in a way that would direct someone to the image it referenced. I had to change the hierarchy of the text and place it closer to the images.

With more time I would’ve been much more thorough in the testing process, because it really helped. The goal was to make sure the site would be simple and accessible for an aging generation and I feel I succeeded with my end result.

In Conclusion

The high fidelity product is an ongoing process. I learned a lot going through my first user experience project. Going back on the process I would’ve sketched out my wireframes quicker, not worrying so much about what it looked like beforehand. At times I found myself thinking too much before I would put pen to paper, this slowed me down. Another thing that would’ve helped would be looking at similar types of website interfaces. I wanted to believe that coming up with something completely original would make it special. It’s not a bad thing to borrow things you like from other sites. In final, more usability testing and time to implement suggested changes would be the biggest benefit to improve the Rememberly site.