Team 3 Group Project

part 2

CMPT 985: Interactive Prototyping

Instructor: Dr. Parmit Chilana
Spring 2021

Group Project part 2 - Horizontal and Vertical Interactive Prototypes

Language Learning Application

Team 3

Members:
Mahnaz Booshehrian
Ladan Fathi
Kenneth Lau
Mona Mehdizadeh
Maryam Rezaie
Team 3 Group Project
part 2

Part 1: Revised Problem Statement and Tasks

Based on the feedback we received on our proposal, we decided to narrow down our target
audience. The revised target audience would be: People with at least a minimum English
knowledge (enough to navigate themselves around in an English app) who are looking to deepen
their knowledge with a focus on speaking and pronunciation. Furthermore, in order to narrow
down the scope, we decided to have different themes for the application. The user will choose a
theme like sports or movies and then they would have access to all the related content in the
selected theme and they are able to connect with other people who are interested in the same
theme and have one on one or group discussions. We also revised each task and made them more
clear.

● Collaborative feedback on pronunciation

After reviewing our initial design, we figure that our design was a bit too complicated and
confusing for the user. Therefore, we decided to remove the automatic ai feedback part and
instead go with a more simple design for the chat. Now, for this task, the user would be able to
either connect with another online user right away or schedule with a user that is available at a
convenient time for them. The user would still be able to talk one on one in a voice enabled
environment and receive feedback on their pronunciation.

● Learning slangs and quotes

For this task, the theme idea helped scoping down the category for which the slangs and quotes
will be. So now, the users can choose the theme based on the category of slangs they want to
learn and then they have access to all the community built slangs and quotes in that category. We
decided to omit the video part of our slangs and use voice instead. We still used the video idea in
a different way for Group Conversations in the next section. They can search through the slangs,
read, listen and vote on the existing ones or create their own. The voting system would also
provide a feedback base from the community to know how accurate each one is, for example, if a
quote gets significantly more dislikes than likes, it would not be shown in the lists anymore.

● Creating and joining group discussions

The last task that our design intends to support is providing a place for participating in group
meetings to fill the existing gap of lack of connection with the community. Our initial idea was
to have this task as scheduling group meetings and have a video group meeting. However, we
came up with a better and more innovative design to achieve our goal. So instead, we decided to
have ongoing conversations that people can join in and out of anytime and give the people the
option to be just listeners if they do not feel like speaking. In this way, users would have more
opportunity to be in an English speaking environment with any level of participation they are
comfortable with. The theme idea helps in this task as well, since the users would be able to
access all the conversations that are happening in the selected theme.
Team 3 Group Project
part 2

Part 2: Horizontal Prototype

Since users should be recognized, we start our prototype with login/ signup pages. Users
information including the level of knowledge is asked here and later shown in the users profile
page. This feature will help the user better decide who to connect with in the one on one
meetings. Home page is based on the user's interests and similarities. Therefore, important and
related contents become available for them to reach faster and easier, while also hinting out the
other pages and features that users might not automatically go to. For example, having the slang
of the day or the top related group conversation suggestion in the home page would encourage
users to check out slangs and group conversation sections.

Meet a Language Partner Section

The users can access the meet a language partner page (Meeting frame) by using the “Language
Partner” option from the menu. Users want to use the application to talk to a language partner
either immediately or schedule for a meeting at another time. Users should also be able to send a
message to a language partner in case they want their questions to be answered and do not need
to chat with someone. To that, end users should be able to see all available language partners. On
top of the screen, the users can see currently online users who are available to chat. Because of
the small screen of mobiles, scrolling to see all online users is part of the design. Similarly, if the
user wants to schedule for another time instead of meeting immediately, they can see available
partners for the desired date and time.

Group Conversations Section

Users can see the list of meetings in the group conversation page. By clicking on the information
button, they can find out more about the meeting, including the number of participants, the name
of the host, and the list of listeners and speakers (Conversation info Frame). Meanwhile, the user
can choose between two options to join the meeting. Listeners can join and have the opportunity
to be in a speaking environment. Others can boost their speaking knowledge by participating in
the discussion. There is an additional option in this page for those who want to create new
discussions as hosts. In the meeting, users can see the list of listeners, speakers and the host
(Group conversation hall Frame). They should read the host's comments or any media from
him/her. Listeners can request to speak from the host of the meeting. We consider this feature in
cases that listeners have something to discuss in the middle of the meeting. There is an option in
this section for creating new group conversations which is shown by a plus icon in the main page
of this section. This feature gives users the chance to host and manage their own conversations.
This option hasn't been designed in our prototype yet.

Learning a Slang Section

When users want to learn a more entertaining topic they can take a look at the slangs page.
Pressing down on the “Slangs and Idioms'' tab from the drop down will allow users to access a
list of slangs related to the topics. Users can learn what idioms and slang are and listen on how to
pronounce the slang (Slangs Frame). Furthermore, application will allow the users to vote for
their favorite idiom and slang. The slangs that upvoted the most will be used as the slang for the
next day. This function will show us how our users are engaged in learning about the slangs and
will highlight the most well liked one. By pressing the up arrow and down arrow, users are able
to scroll through more slangs and idioms that are available on our site.
Team 3 Group Project
part 2

Part 3: Vertical Prototype

The functionality of our application starts from choosing the theme. Based on the chosen theme,
all the contents are related to that.

Group Conversations
In order for the people to have a short initiation, the host can upload a short clip for the group
conversations. When the user joins a conversation, they can see the video clip and watch it to get
the initiation process and then listen in. When joining a conversation the default role of the user
is set on Listener and the user has the option to choose to join as a listener or speaker. The host
should allow the Speakers in but Listeners can come in any time. If a speaker is not adhering to
the rules set or is engaging in an inappropriate conversation, they may be subjected to either
being reported or banned for the group conversation or any future group conversations. The
action is performed by hovering over the negative participant and clicking their profile to see the
report or ban option.When a user is reported, the host is notified of the report and is able to go
over the context of why they were reported. If the host finds the report suitable for a ban, the host
can ban that user from the group. There are confirmation pop-ups for both banning and reporting
action to prevent the users from accidentally reporting or banning others.

Learning a Slang Section

In the learning slangs section, if users want to contribute to the list of slangs, they are able to
conduct such action. By selecting the bottom right of the “Learn a Slang” page, the user will be
taken to a new page where they are able to explain the slang. The first panel asks the user to
introduce the new slang or idiom they want to introduce to the application. The second panel will
have the user write a description on what the idiom is about. Finally, on the third panel, the user
will also need to record how they would pronounce the slang using the recording button. Once a
user finishes creating the slang, they are able to save it to the list of slangs where it can be voted
upon.

Meeting the language partner

Users will see both online and available-to-schedule partners on the screen. Selecting a different
date will show available users for that date. By selecting each user, their user profiles will be
shown. A user profile includes information about the user, a short bio, and themes that the user is
interested in. “Send a message” button is available on each user profile. If the user is online at
the moment, a “chat now” button and if the user is offline“schedule a meeting” is available.
Selecting “chat now” will lead to the chat screen which is designed to support conversation
practice of a learning user. Both users can send text or send voice messages. Voice messages are
necessary for practicing pronunciation. Users can take notes (Not implemented) and save the
chat (text and voice). When “Schedule a meeting “ is selected, a calendar which includes only
available time slots will be shown. Selecting one of the time slots will lead to a pop up message
that asks the user to confirm the schedule. If the user confirms, a feedback message will let the
user know that the meeting is scheduled.
Team 3 Group Project
part 2

Part 4: Cognitive Walkthrough

Task: Schedule a one on one meeting with another user
The chosen task for the cognitive walkthrough is to schedule a meeting with a chosen language
partner. Our assumption is that the users have used other mobile applications and know enough
English to interact with the application. The user has already signed up to the app but does not
use the app frequently and does not have a long-time experience using the app.
For this task, the user should be able to do the following actions:

1. Enter the username and password

2. Login to the account
3. Click the “choose your theme” button
a. Issue: Users have to click a theme or else they will be stuck. There is no step that
takes them directly to their home pages or any back button.
Suggestion: ​A default theme can be shown at the beginning with a tutorial telling
the user how to change the theme later on.

4. Click on a preferred theme and go to the home page

5. Click on the “meet a partner” menu at the bottom of the page or through the burger menu
a. Issue: ​It takes some time for new users to find the button and understand the
purpose of it as there is no tutorial or explanations regarding it. The other problem
is that the content in the home page takes much of the users’ attention and it takes
some time for a new user to navigate all the options to find the proper route.
Suggestion: ​Create a section in the burger menu that provide detailed instructions
or a Q and A section on how to use the language application
b. Issue: ​Users can choose either the “meet a partner” button at the end of the page
or “language partner” option from the burger menu on the top left of the home
page. One important problem is the inconsistency of the language between the
two options.
Suggestion: ​The label of both menus should be the same to prevent the confusion

6. Choose the desired date

7. Choose a partner amongst the available users

a. Issue: ​Although scrolling amongst the users seems intuitive considering the
arrows on both side, one problem is that there is not any search feature to find a
specific partner to schedule a meeting with
Suggestion: ​a search option can be implemented to help users find a specific
partner.
b. Issue: ​The other problem is that there is no option to confirm a scheduled meeting
in this frame. As a result, users might be afraid to click on one of the visible user
profiles as it might lead to immediate scheduling.
Team 3 Group Project
part 2
Suggestion: ​After selecting a date on the calendar, a message can be shown that
tells the user to choose the partner from the list to help them with the next step.

8. Select the “schedule a meeting” button

a. Issue: ​Although the button is visible, its affordance which is being pressed is
trivial.
Suggestion: ​The button could be surrounded by a rectangle with a shadow to
provide the desired affordance of being able to be pressed.
b. Issue: ​The position of the “schedule a meeting” button is in the middle of the
popup page that is not aligned with previous experiences of users with submitting
a form or confirming a meeting. Usually these buttons are at the end of the
provided information.
Suggestion:​ ​The button can be placed at the bottom of the pop-up page
c. Issue: ​Users might expect to see the available time of the chosen partner while it
is not shown in this page and they might think that by clicking on the “schedule a
meeting” the meeting will be set.
Suggestion: They see available time on a calendar on the same page as well as a
“schedule” button so that they select a time and press schedule.
d. Issue: ​The label of the “schedule a meeting” button can be changed to shows the
place it takes the user which is the page that shows the timing of the chosen
partner
e. Issue: ​There is no back button in the popup menu to let the user go back to see the
profile of the partner and send a message for instance.

9. Select the desired time amongst available time

a. Issue: ​The user expects to see the “schedule a meeting” button on this page, so
that he/she can select a time slot first, and click the button.
Suggestion​: ​Instead of showing confirmation pop-up after choosing the time, put
a confirmation button on the page.
10. Confirms the schedule by clicking on the yes button
a. With the proper feedback pop up, users will make sure the meeting is scheduled.

Conclusion
The main finding was that although the components for scheduling a meeting are obvious, after
choosing a language partner, the steps and process are not intuitive and do not align with the
expectations of the user. Having several steps that are not visible in the same page at the same
time leads to more cognitive load and needs more recall than recognition. Therefore, it might
lead to less learnable design and more frustration for users that do not use the app frequently.
Moreover, we realized that u​sers are not able to see their previously scheduled meetings in the
“meet a language partner” page; the information is merely available on the home page. As a
result, it might lead to double booking a specific time slot. Furthermore, currently, the users are
not able to cancel or reschedule their meetings either. Moreover, there are some minor changes
needed regarding the visual feedback and affordances of the elements that can be fixed easily.
On the other hand, using the calendar and showing time slots in a table format make it easy for
users to find their desired time and date.
To sum up, we believe our current design as it stands hinders inexperienced users to do the task.