Sentence Mosaic

Jun–Aug 2016

 
 

 
 

CHALLENGE:

design an application that would facilitate the teaching and learning of sentence structure and parts of speech for teachers and their students with learning disabilities

 
 

 
 

PRIMARY RESPONSIBILITIES:

1. create a user interface with Illustrator

2. create an experience with the interface using InVision

3. meet with client every week to check progress

 
 

ADDITIONAL TEAM–MEMBERS:

one Computer Science student

one Electrical & Computer Engineering student


 
 

Background

During the Summer of 2016, a few students and I who are a part of Design for America, came across a client in need of a service that would be of aid in teaching students with learning disabilities.

Creating a System

The client we worked with explained that she already has a system that uses colors to associate with parts of speech. She used an existing system called the Fitzgerald Key. She already had a physical system that worked well with the students. 

We were asked to create an iPad application that would allow more accessibility to this teaching method for fellow educators and to parents who would like to practice with their kids at home.

She also wanted the application to facilitate homework assignments–have better communication between the educator and students’ parents.

Prototyping

In order for my teammates and client to clearly understand the flow and feel of the application, I began to create a grayscale prototype in Illustrator. We decided to use the colors of the Fitzgerald Key, but changed a few of them to make them consistent with the colors in the system she had made. 

In the first prototype, I made a few screens to better understand how she wanted the sentences to be formed, how she wanted the words to be grouped, or how she wanted to add a word. 

These are some screenshots of the grayscale prototype (click to enlarge):

 
 
 
 

After meeting with our client, we incorporated her feedback and I created a prototype that clarified some of the features, such as how a photo would be taken and stored and how it would lead to creating a sentence (we kept it grayscale).

This first part shows the flow for when the user wants to take a new photo (click to enlarge).

 
 
 
 

*to create a sentence and connect each part of speech, the user has to tap the part of speech and then type in the word desired

This next part shows the flow for when the user wants to look back at the photos they took. When the user taps on a photo, the app would prompt the user to create a sentence about that photo (click to enlarge).

 
 
 
 

For the last iteration, I needed to create a user-flow to clearly define what the user will be encountering at each level.

 

I added color, made a few changes to the existing features, and added a recording feature. This is the prototype I created in InVision: https://invis.io/GK7RIRU7D#/215819286_1. And here are some screenshots (click to enlarge):

 
 
 
 

Project's Current Status

After creating the last prototype and getting approval from our client, my teammates began to code a website for iPads. From Sep 2016–Feb 2017, the team was recruiting students who are knowledgable in Django to further advance the project. And now, we will be meeting with our client and start to build the iPad app.

What i learned

  • how to be a visual facilitator by working with the client to communicate her desired application
  • learned how to use InVision and Marvel, and learned how to determine which tool would best fit the design phase we were in
  • how to communicate with people who code/understand what is possible in a certain time frame