Goally AAC App

Creating an Augmentative and Alternative Communication (AAC) app from scratch

Final.png

Goal

Create an AAC app that is intuitive and visually clean with better usability.

Role

UX design, UI design, Visual Design, User Research, Prototyping

Team

CEO, 2 designers, SLP

Duration

1 Month

Product

AAC app for children

Goally is a subscription-based software company with a mission to help neurodiverse children and their families. They're preparing a new product, which is an Augmentative and Alternative Communication (AAC) application, to give a voice to children who experience severe speech problems.

Examples of AAC apps in the market 

image 5.png
image 6.png
image 7.png
image 8.png

Most popular app 

Project

A mobile app and web portal for children and their parents.

The project is to create an AAC mobile app for children and a web portal for their parents to customize the vocabularies used in the AAC app.

App

The AAC app is a vocabulary set with buttons in a grid layout. Children find and press the word buttons to make a sentence as a method of communication. Target audience: young children with speech problems.

Web portal

Coming Soon

The web portal is where parents can manage vocabularies used in the AAC app. It also provides all customizable options for the vocabulary set.

Design system

Coming Soon

Although I wasn’t asked to create a design system, I dedicated my time to consolidating design components of the new project in order to improve the workflows of developers and future designers.

Team

I took the design lead. Our team also includes a speech-language pathologist (SLP) to help us understand the users and AAC.

Problem

Not easy to use and learn

The function of the AAC app is simple: find and press word buttons. It should be intuitively easy to use, especially for children. However, many apps in the market are visually confused and inefficient, especially when navigating words. How can we create an AAC app for children that is user-friendly and easier on the eyes?

My contributions

  • I took the design lead from concept to implementation.

  • I conducted user research to identify user problems and work directly with the CEO to design new features.

  • I designed both mobile app and web portal from scratch and initiated a design system for the new product. 

  • I accomplished more than Goally planned for the project in a month and saved them both time and costs. 

Kick-off

Collecting requirements and constraints

Our team started with 3 intensive meetings to gather requirements for the project and learn about the AAC system with the speech-language pathologist (SLP). I requested the CEO list the purpose and functions of the app and web portal in order to understand the product and business goals. Throughout the meetings, I also noticed there were some constraints to consider.

What I was given

Goally Sketch.png
Goally Text.png

Small Screen Size

Goally provides their own mobile devices to fit into children's hands with stable grips. Thus, the screen size is smaller than standard phone devices. The company also decided to design for only landscape mode because of the smaller screen. 

Colors

AAC apps must use symbols to explain the meaning of words. The type of words, such as verbs or nouns, are distinguished by the colors of the buttons. It’s unavoidable to see the multiple colors which affect visual hierarchy. The color was key to decluttering the visual mess.

Lack of Resource

Due to the lack of time and resources, we weren’t able to interview users or conduct user research. Thus, I had to find alternative ways to research and observe users’ behaviors.

Research

Understanding competitors and users

Competitors

Most AAC apps are expensive and subscription-based, so below is how I investigate their apps.

  • Tutorial videos

  • Reviews on app stores

  • Free trials

I watched their tutorial videos to learn about their design decisions and observe the interaction flows. All apps contained word buttons in either colored borders or backgrounds with symbols inside, which made the interface overwhelming with a lack of legibility. Another thing I noticed was inconsistency in the arrangement of words and folders in different pages.


From app reviews, the majority of complaints were about the poor usability despite the simple structure of AAC apps. Even parents didn’t understand how to do certain things on the app. People appreciated a range of customization options, but they were designed mainly for parents.

Users

Notes: Although we could contact current Goally users to interview them about their AAC app experience, if they had any, the company decided not to do so until they had a mockup to show users. I took a different approach to observe users’ behaviors.

Since children can’t express their experiences, I included a variety of users, from parents and SLPs to other adult users with less severe speech problems. 

  • Videos; vlogs and app reviews

  • Blogs, articles, and research papers

  • Facebook community

I searched videos on YouTube to look into users’ interactions with AAC apps and determine what affects users’ behaviors. Most pain points I discovered were navigating words; users often got confused when searching for words or folders. When users look for different variants of words such as tenses, they identify words faster depending on the ease of access. I noticed that children don’t really use other tools than word buttons and apply simple motor skills only, such as tapping and scrolling.

I also joined Facebook groups to emphasize users. Because of the group policies, I couldn't talk to the members. However, simply reading posts about their daily lives in general helped me to better understand the users and build more compassion.

Ideate

Based on my research, I decided to work on the user interface first to enhance the visual hierarchy, which optimized both legibility and identifying words. 

 

My next step was to make navigation more predictable so that user flows would be straightforward and clearly guide users performing tasks. Lastly, I made sure all buttons and features were easily accessible for children. 

Note: Managing all customizable options on a mobile’s small screen was inefficient. Thus, Goally decided to use a web portal to handle all customizations.

Design

Designs don’t have to be creative from the beginning. I started a mobile app design from a traditional perspective of the AAC system — buttons in colored borders with symbols inside — and followed the CEO’s request to differentiate words and folders in the same page. 

1. User Interface

  • Grid layout

  • Button colors

  • Button shapes

  • Symbols

2. User Flows

  • Finding words and folders

  • Understanding folder categories

  • Opening related words

3. User Interface

  • Motor skills

  • Simplified functions

Design

User Interface

Grid Layout

According to research, exposing more words in the AAC system helps neurodiverse children to learn language. I adjusted button sizes to fit 24 buttons in a 3x8 grid.

3.png

Button Colors

Multiple colors are inevitable. I found that neither border colors nor backgrounds were necessarily helping to better fixate words. I suggested the vocabulary type be indicated by coloring the top of the buttons instead. 

Before

5.png

After

4.png
7.png

Button Shape

Although rounded-corners shapes are more aesthetically pleasing to the eye, the group of the shapes increases the scintillating grid illusion, which shows dots at the intersections of adjacent squares’ corners. 

However, I made a small tweak and designed the tops of the buttons with a rounded-corner shape and the bottom with a sharp-corner shape. This created unusual spaces at the intersections and prevented the forming of dots while delivering a kid-friendly, playful look.

Scintillating grid illusion

Home_ word-1.png

Symbols

Symbol resources for AAC apps are limited and usually far from aesthetic designs. We decided to use open-source emojis. However, the emojis are not made for learning vocabularies — there are no emojis for verbs, for instance. Thus, I combined emojis to explain the meaning of verbs.

10.png

Words: Combine emojis to explain the meaning of verbs. 

Folders: Combine 4 emojis from each folder to give a hint of the folder’s content.

11.png

Design

User Flows

Finding words and folders

All AAC apps contain both words and folders in the same screen without specific orders. The CEO initially wanted to separate them by columns. We brainstormed for better ideas and thought about having a menu to show the folders. I immediately thought about the floating action button (FAB) and shared an example in Figma via the Zoom screen-share. We then agreed to have words and folders’ pages separate via FAB.

Folder.gif

Understanding folder categories

The CEO and SLP worked on organizing the words into fewer folder categories so users could easily narrow down the word choices. We ended up adding subfolders since there were so many topics to cover, but navigation became simpler and clearer.

Sub Folder.gif

Opening related words

Some words have variants, such as different tenses for verbs. Without taking users to a different page, like other apps, I decided to have a pop-up grid appear by tapping the word. Users can choose variants from there, as well as hear the word before selecting it.

Related words.gif

Design

User Interactions

Motor skills

Neurodiverse children may experience some sort of motor difficulty or issues with repetitive behaviors due to autism. We decided to make touch gestures very simple, making everything accessible by one touch — no double taps, pinch open, or long-pressing. For example, long-pressing might be hard for some children because of the need to estimate pressing time.

Everything is accessible by one touch

One touch.gif

Simplified functions

To help children focus on learning, we kept only the tools necessary to complete a sentence and combined their functions to minimize tool buttons. For example, it's important to include punctuation marks in a sentence since the device might read a question as if it were a statement. Many other apps have a folder of question words and encourage children to start a question sentence from there.

However, younger children with less grammar knowledge may have difficulties beginning with question words. Our solution was to place the punctuation mark in a speech/text bar and combine them with a speech function. As a result, children must press either the period or the question mark to have the app automatically play the sentence they made.

Punctuation Marks to differentiate questions and statements.

16.png

Next Steps

The company is collecting feedback from others. So far, we received positive responses with most compliments about its intuitiveness and ease of use. People also appreciated the simple and clean visual presentation. There are some areas in which they shared suggestions based on their AAC app experiences. The company is trying to reflect their opinions and then expect to build the product once all feedback has been collected.

Reflections

Validating problems

During the research, I discovered that users tried at least a couple of different AAC apps before they settled on their current app. I searched for videos to observe as many AAC apps as possible and identify common pain points that users experience. This helped me validate usability issues I researched and clarified my goals for the project. As a result, people agreed that the Goally app is more intuitive and straightforward because these problems had been vastly reduced in comparison to other apps. 

Breaking rules

The one thing that immediately impressed users was the interface design. When I worked on the button colors, I was still learning about the AAC system and didn’t want to break rules just to make the design look creative. However, I learned that the traditional methods of coloring buttons were not necessarily helpful and took a different approach. Introducing my ideas to the team confirmed that it was the right decision; I was able to improve the visual hierarchy as well as design a unique layout that stands out from competitors. Thinking outside the box is great, but should be done carefully and based on research that supports the decisions. It’s also good to keep in mind that team members are the first users to test my design decisions. 

Not making everything easier

As a UX designer, one of my goals is to simplify complex interactions. However, I learned that this isn’t always the solution. For example, I thought about a feature to make customization much easier. After review, we decided not to implement it because it was better to keep the default setup than give users the flexibility to change the grid, which may cause confusion in navigation. I learned that it’s important to check interactions and see how they will impact the overall user flows.