Goally

Web Portal Design

Web portal - Completed.png

Requirements

The web portal is where parents can store, manage, and customize vocabularies used in the AAC app. It has two different lists – one to keep track of all words, the other to manage the words currently assigned to the child’s app.

The CEO shared his idea for the initial layout based on the current web portal design of their first product, the visual scheduler. I also asked him to list the purpose and feature requirements in order to understand its goals.

19.png

Visual Scheduler's web portal design

Group 1304.png
Group 1303.png
 

Ideate

In order to manage and customize words, the web portal requires many functions, from creating words to assigning them in the learner’s dictionary. My biggest concern was usability due to the potential confusion of the features. I, therefore, focused on organizing the content and clarifying functions and task flows. I kept the consistency of the interface design from the visual scheduler web portal.

 

Design

Initial layout to start

To keep the consistency, I started with 2-column layouts for dictionary lists. I then divided them again horizontally into separate spaces and differentiated their purposes. The top space lists the vocabularies while the bottom displays different state modes for customization, including view, create, and edit mode. Users can stay on the same page and look up words while creating or editing words.

17.png
18.png

Navigation

I added a breadcrumb to track all folders instead of using a back button. By indicating words, folders, and phrases in different ways, users can clearly distinguish them without opening each one’s information.

breadcrumb.png

Breadcrumb

Types.png

Indicating words, folders, and phrases

State Modes

I first sorted out important information which required emphasis. For example, some vocabularies appear in words and folders with the same spelling. To prevent customizing the wrong type of vocabulary, I differentiated the type clearly in a bordered box and placed it in front of the vocabulary. The most challenging aspect was the create mode for a phrase - where users could combine words - because of the limited space available to display the process of creating a phrase. Our solution was allowing users to search words from the input box and add the words to list them in chip components.

Create mode.png
View mode.png

Interactions and user flows