homeLogo

Interface Design Class | March-April 2023

Research, UI, UX, Prototyping: Empath- Daily Reading and Community

Empath is a gamified daily app targeted towards seniors. Over the course of several weeks, my team researched, designed, prototyped, tested, and refined our app idea. In this page, will detail my contributions to this project.

Collaborators:

Shahvir Sarkary, Echo Chen

Tools I used:

Figma, Procreate, Protopie

Skills:

Research, Sketching, Wireframing, Prototyping

Try the Prototype

App Goals

In our early research of our target demographic, senior adults, we discovered 2 problems that they suffer from:

1. Many seniors face loneliness due to factors like living alone and lack of work community

2. Lack of intellectual stimulation leads to cognitive decline in old age

This led us to our design goal for this project:

We want to reduce cognitive decline in seniors by fostering intellectual stimulation and sense of community as part of their daily interactions

Design Process

After ideating and receiving feedback, we decided to achieve this goal through a daily reading app that stimulates brain activity and encourages community interaction.

We then decided to focus on 3 main principles to design our app around:

1. Make our app intuitive to seniors mental models

2. Aid cognitive stimulation through helping users learn

3. Cater to accessibility concerns: visual impairment, mobility impairment

Some of these principles play directly into our style guidelines which I created before designing any screens. Our focus was to make the text readable, meaning the smallest font size we utilize is 16pt. Another focus was our very large action buttons, which are forgiving to users with lessened dexterity and mobility

image of style specifications
Style guide, created by me in Figma

With this user guide, we then designed screens in Figma, based on every point of this rough interaction architecture I created of our app

an interaction diagram I made
initial sketches and high fidelity wireframes
My initial sketches next to my Figma wireframes. I could easily import my Figma wireframes into Protopie with the Protopie plugin.

After coming up with and then tweaking our Figma designs after feedback, we imported them into Protopie to build our interactions, turning our wireframes into a working prototype. While everyone in the team worked on parts of the prototype, I mainly took the lead on complex features like the reader view, settings, and chapter quizzes

screenshot of my work in protopie
One of my screens for the quiz game being worked on in Protopie

Challenges

Prototyping complex interactions such as Key Insights and the Quiz Game posed challenges we weren’t quite prepared for, especially since we were new to protopie.

For example, Key Insights must appear and disappear according to specific points in the text. I made this work by sending a command to increase the opacity of the insight to 100 at a certain scroll position of the container, and hide it at another position. This worked for when we had only one text size, but increasing the text size completely broke it, because it also increased the length of the scroll container!!

I remedied this by creating a variable to store the length of the container, and created another variable to divide that length by, that would change depending on the text size. With this, I could set off the Key Insights based on a proportion of the scroll container rather than a static pixel value!

considerations when prototping complex features
my key insights feature in action

Testing and Refinement

With our now-working prototype, Echo and I conducted a mixture of in-person and online usability testing with 7 participants between the ages of 55 and 75. Through this, we found several areas where our app was lacking, then I made a priority matrix of changes we wanted to make in the next week.

core insights from testing
A summary of our feedback from user testing, written by Shahvir.
priority matrix
I plotted the changes we wanted to make to the app on a scale of difficulty versus value, to give us a better idea on how we should go about our improvements

Final Solution and Reflection

After another week of refinement, we brought our prototype to the final state that is in now. We revamped the onboarding, added accessibility options to the reader view like increasing text size, dark mode, and the ability to toggle key insights on or off, and redesigned interactions regarding the community page for better usability. In this project, I went from an absolute newbie at Protopie to gaining a sort of confidence using the software. I also built confidence in my presentation skills through the consistent weekly progress presentations, and learned how to conduct usability tests. While there are ways I would like to improve upon this project, like doing more research and conducting another round of tests, I’m proud of what my team and I accomplished given this short time frame.

More Projects

Research / Illustration

Turquoise Goat Trading Cards

Graphic Design / Illustration

Bound by Flame: A TTRPG