Interactive Medium-Fi Prototype Ayushi Chandaria| Chloe Keilers| Haotian Sun| Lilly Zhou

Value Proposition

Learning a New Language is Now One Call Away Formal language learning focuses on the reading and writing element and hence language learners often struggle to develop confidence in actually speaking the language. VoicEd focuses on teaching languages by developing conversational confidence in a fun and safe space.

Three Tasks

SIMPLE MODERATE COMPLEX Three Tasks Flashcards incorporating both visual and auditory learning Conversational phone calls with customizable subject, feedback and level settings Setting up a learning calendar of phone calls and feedback in order to gain long term fluency SIMPLE MODERATE COMPLEX

SIMPLE MODERATE COMPLEX Changes in Tasks The task has been changed to allow users to listen to words in slow motion as well. In addition, we will provide a stack of flashcards we recommend for the user on the home page. If the user wants to change the stack of flashcards, the user can go into the flashcard settings. This task has been updated to also include the option of having a quick phone call that does not require too much setting up. This phone call will be a general phone call at the level your progress tracker indicated. We have also added a flashcard element where the user can practice words gotten wrong in the call using flashcards. This task has been updated to be more goal oriented. We plan on setting up the calender with a goal in mind. The goal will be a certain level the user wishes to achieve and the user will have to initially take a diagnostic test so goals can be well tracked. SIMPLE MODERATE COMPLEX

Major Design Changes

A major design change that we made was the home page A major design change that we made was the home page. We designed to split it up into Tasks set by users themselves for the day, and tasks recommended by VoicEd. This is because based on feedback we received, we realized that students are motivated to do tasks they set for themselves and so clearly distinguishing it will help them stay motivated. DEsign CHANGE 1

The second design change that we made was in our initial home page The second design change that we made was in our initial home page. As we wanted to establish the app as a professional educational tool rather than game, we decided to go with a more professional colour theme and less colours. Since the theme colour of our App is blue we also decided to use a blue background. DEsign CHANGE 2

We changed the design of the Flashcard quiz as well We changed the design of the Flashcard quiz as well. Firstly we will display the language that the flashcards will be in at the top and allow users to change it (EG From spanish to English and English to Spanish). Another change we made was that rather than a tick or cross appearing, the colour of the box will reflect whether the user got the answer correct. DEsign CHANGE 3

Task Flows

The user can turn a vocab list into Flashcards The user can turn a vocab list into Flashcards. By clicking the card the user will get the english meaning. Task 1

The user can use the vocabulary from either calls or flashcards lists to test themselves Task 1

The user can quickly set up a call Task 2

As a call is going on, the app will automatically create a transcription of what is said. It will underlines words that were wrong for future reference. Task 2

The User can create his or her long term goal plan The User can create his or her long term goal plan. The user can create a calendar, set goals and Track Progress Task 3

The User can use the one time set up for the app Initialization

Prototype Overview

How did the tool did not help? Prototyping Tools What did you use? How did the tool helped? How did the tool did not help? Figma -Created the visuals that showed how our screen would look like -Emulated what the app would look like in its actual form (a web app) -No option of voice interaction -Difficult organization of pages and ways to split up different tasks Adobe XD -Allowed some basics voice interaction techniques -Used to create some transitions to make the app more ‘real’ -There was no easy way to get from Figma to Adobe XD -Voice interaction component not strong enough to allow for phone calls -Easy to get confused in the ordering of pages

Limitations/tradeoffs of the current prototype Diagnostic test has not been created due to voice command limitation on Adobe XD Progress Tracker is not up to date with user’s language skills. This current progress tracker should not be treated seriously as it does not accurately represent language ability of the user. The actual progress tracker will update and display the current language skills every time user talks with VoicED. User can only learn one language right now User cannot set any other languages besides English and Spanish. The actual prototype will incorporate more language options for users to choose from. A lot of the options are hardcoded right now User cannot have a full conversation with VoicED just yet due to limitation of voice command feature on Adobe XD

Any Wizard of Oz techniques required to make it work The main Wizard Of Oz technique we are using is that we are assuming the the phone call happens. Whether this be to create the progress tracker, the vocab lists or the conversation backgrounds we are assuming that the conversation has occurred behind the scenes.

Hard-coded features and why required The Date on the Calendar (task 3) was hard coded because it would be unnecessary for a prototype two have to select any dates especially when the call feature does not currently work We hardcoded the conversation because we did not have the technology to listen to the users voice and create use voice recognition to create a conversation The time of the call on the goals section is also hard coded. We put in 10Am. We did this because in order to continue we wanted to have a time put in for sure.

FINAL PROTOTYPE