Visual cues are a visual depiction of a phrase or an object, and it is typically used to facilitate better communication with individuals with individuals whose communication abilities have been impaired. They are useful in several situations. For example, when a person with Alzheimer’s has unmet needs, they may behave in a disruptive way. It may be that they are frustrated because they cannot remember what they like to do – or that they forgot the way to the toilet. So, using visual cue cards to display imagery of possible reasons this person may be behaving a certain way may solve the problem.
Emmetros is a software company which provides an application call SparxConnect to medical providers to assist in caring for their patients, with a particular focus on those with Alzheimer's and Dimentia.
While working at Emmetros as a product designer in the Summer of 2020, I was on a team with my manager, the director of User Experience Design, and a Product Designer. Near the beginning of my co-op term, my manager presented me with the task of beginning the creation of a section of SparxConnect which would function as visual cues for patients with communication difficulties.
The Project
Currently, visual cues are physical cards, typically in a booklet, with images and a word underneath. The idea behind adding a Visual Cues section to the SparxConnect app is to make the use of these visual cues easier, and more convenient for users. These booklets can cause difficulties, because they aren’t customisable, and flipping between the cues can be a large inconvenience, especially in more urgent situations. The Visual Cues section of the SparxConnect app would provide the user with visual cue cards accessible from their mobile device - which will allow for more customisation, convenience, and further collaboration between caretakers.
The Concept
Beginning the process
In order to begin the creation of the Visual Cues section of the MemorySparx app, I researched into Visual Cues to better understand their use cases. I learned that a large difficulty with the current method of using visual cues, is supporting those with language barries. There are individuals who may not speak english, and also individuals with alzheimer's and dimentia who have begun to revert to their first language, effectively no longer speaking english. Another issue that physical visual cues have is the lack of ability to customize them for the individual who views them. After having a meeting with my manager, we determined that these visual cues should have a description field below them, as well as fields for pronunciation and translation of the visual cue. The description field could be used to communicate tips and tricks for how a specific cue is typically used for an individual.
Using Balsamiq, I began by creating basic wireframes for the Visual Cues section. I had little difficulty determining the basic layout for visual cues. Once the user enters the 'Cues' section of the app, a 2-columned list of categories would be displayed. Once the user enters one of the categories, they would be presented with a 2-columned list of the visual cues within that category. When a user selects a visual cue, it would open up to display the cue and the title below it.
Wireframing
After creating this basic set of wire-flows, I realised some issues.
-
The names for some of the visual cue categories were too long to fit on one line of the mobile device screen.
-
Visual cues are useful because they are so minimal, they are simply an image and a title. If I included a description and translation/pronunciation underneath the visual cue, it would be a disctraction from the main purpose of the visual cue.
-
Caretakers who use visual cues may be comfortable flipping through them, and the SparxConnect app does not currently have that functionality.
One of the members of the CS department offered to rewrite some of the category titles that were too long, but would still communicate the same thing.
We also determined that having a way to hide the description, translation, and pronunciation fields would be the best way to balance having both a description field, and having the cue displayed with just an image and title. However, having a large button on-screen titled 'display visual cue' would be an issue, leaving open the potential for the individual to become distracted by it, or click it to reveal information that would only be useful for the caretaker. They also agreed that having a way to flip through cues would be beneficial. After furthering my wire-framing, I determined that having an arrow below the visual cue title that could be selected to hide/show the details (if added) below the cue would be the ideal design for this functionality.
Once I created a simple set of wireflows, I met with two people on our team from the Customer Experience department from our company, who have experience using visual cues and understand what our users' needs are. During that meeting, I had presented the issues I ran into, and displayed various options I had come up with to solve them.
The Options:
I furthered the detail within my wireflows, including flows for adding, deleting, editing, moving, and pinning visual cues. I included separate fields for pronunciation/translation, adding an audio recording, as well as a description. In order to reduce the amount of scrolling that would be necessary, I put some of these fields into a checkbox.
After finalising the first draft of wire-flows, I met with my manager and had her review them. After recieving feedback, we determined that we didn't need separate fields for pronunciation and translation, as these details could be included in the description field.
Once these wire-flows were finalised, I met with the development team to present the concept of Visual Cues, and give a walkthrough of the wireframes I had created. I also made a small prototype to show the functionality. You can see that below.
From this meeting, we determined a date for the release of this feature in the app, and also scaled down what we would be including in the first release. We determined we would not include an option to record audio, and would only be including the most crucial categories for visual cues, in order to illustrate the visuals within the timeline that was set. With a final release date, and requirements determined, I began the process of adjusting the wireframes, and begin the process of creating mock-ups for the Development team. The UX team determined that moving forward, we would use Adobe XD for wire-framing. Here are some snippets from the finalised wireframe.
With the wireframes complete, I began the process of created high-fidelity mock-ups. However, this project is currently in progress - with this being the latest steps I had taken. Here are some images of those mock-ups.
Visual Cues - Assistive Tool Design
July-December 2020
Classification: Work project, Solo
Roles: Design Lead, UX/UI Design, Comparative Research
Tools Used: Balsamiq, Adobe XD, Illustrator, Draw.io,
Visual Cues - Assistive Tool Design
July-December 2020
Classification: Work Project
Roles: Design Lead, UX/UI Design, Comparative Research
Tools Used: Balsamiq, Adobe XD, Illustrator, Draw.io,