Bitconnect Milestone 3

Video Link

A. User Experience Requirements

Our potential design is tailored for two types of users: teachers and students. So we divided up the users stories into teachers and students user stories.

Teachers User Stories

Students Users Stories

2.Which user stories are most relevant to your proposed solution and why? It could be all of them or perhaps only a few. Whatever you pick, please provide a strong justification with supporting evidence.

Teacher User Stories

Student User Stories

User stories removed:

Justification: We decided that these user stories were both too broad and described only non-functional requirements for our system, which would not translate well into mockups for our interface. These are still important ideas, but they were not suitable for this stage in development.

B. Ideation and Preliminary Designs

1.For each of the relevant user stories you identified and justified in (A), generate ideas for alternative designs that could be used to tell that story.

2.For each alternative design of a user story, produce a wireframe with enough artboards (i.e., pages, screens, etc.) that a potential user might be able to provide useful feedback.**

Teacher User Stories

As a teacher, I want to be able to use video games to foster socialization among students.

Design alternative #1

For the first design, we decided to have multiple groups laid out in a grid pattern so that teachers would have a bird’s eye view of all the groups. This way, teachers would have easy access to all the students. img

Design alternative #2

For this mockup, we decided to lay out the students in a “zoom” like layout, which may be easier for teachers to understand, if they’ve used the zoom interface before.img

img

As a teacher, I want to list available learning resources and modules in an easy to digest way

Design Alternative #1imgDesign Alternative #2img

As a teacher, I want to be able to control when my students are able to communicate.

Justification: A single mute-all allows easier muting than target muting, but targeted muting allows more fine-tuned control.

img

As a teacher, I want to have a good feedback feature that does not stress students when they fail in the game.

Justification: Text chat allows more detailed feedback, but emoji-based is easier to read at a glance and see if anyone isn’t feeling as confident about material.

img

As a teacher, I want to be able to invite my students to my class securely and easily.

img

Student User Stories

As a student, I want to be able to use a nickname so that I can play without being too shy.

Design alternative #1

The first design alternative for this user story is to generate random nicknames from which students can choose. img

img

Design alternative #2

The second design alternative for this user story is generate nicknames based on a set of questions and preferences of the students.

img

img

img

As a student, I want to be able to add questions to a game so that my peers and I can play and answer them together.

Design alternative #1

The first design alternative is to have a dedicated questions or discussion page in the game where students can ask questions and answer these questions together. Such a design decision is popular in learning systems where there is a dedicated page for question and answering. img

**img**

imgimg

Design alternative #2

The second design alternative is to allow students to add questions next to objects in the game, such as minecraft. Other students can find these questions and try to answer them. img

img

img

img

As a student, I want to be able to browse games for each class so that I can join and play with my peers in any class at any time.

Design alternative #1

The first design alternative is to list all the available games along with some statistics for classes at once. img

Design alternative #2

The second design alternative is to display a subset of the available games and allow students to navigate to other games. img

As a student, I want to be able to see my friends’ virtual avatars and interact with them/work together as opposed to just seeing their camera in a zoom call.

Design Alternative #1imgDesign Alternative #2img

As a student, I want the virtual learning environment to be easy for me to learn how to use.

Design Alternative #1imgDesign Alternative #2img

As a student, I want to use gamified assignments to keep track of my progress and encourage me to improve my skills through the use of leaderboards, tournaments, and ranks/levels.

Design Alternative #1

In this design alternative, the student is presented with multiple modal windows corresponding to each class they’re taking that year. All assignments, grades, and interactions take place within their respective class section.img

img

img

img

img

Design Alternative #2

For this alternative, we decided to draw on inspiration from the MMORPG “quest” paradigm. All assignments, quizzes, and tests would be assigned to the player as quests, and would not be organized by class, but by either proximity to the starting point in the game world or due date (ascending)img

img

As a student, I want to see and use common video game paradigms (inventory management, hotbar, common interaction keys, typical camera system, WASD movement, etc.) so that the learning curve for the interface is minimal.

Design Alternative #1

Pictured below is an illustration of the in-game WASD movement system, from a first person view.img

img

img

img

img

Design Alternative #2

Rather than navigating around the world from a first-person view, student interaction could potentially be performed through NPC interaction (clicking on the NPC, accepting assignment, and generally using the mouse pointer to navigate through the world).img

img

As a student, I want to be anonymous when I fall short while playing the game.

Justification: Individual anonymity allows students to choose when to be hidden, but teacher control allows the anonymity to be global when neededimg

As a student, I want to be able to easily enroll in my teacher’s class.

Design Alternative 1:

We created a basic, simple user flow for student and teachers to create and gain access to the platform securely.

Design Alternative 2:

We decided to add text that’s more friendly as well as user icons for the students.

img

C. Detailed Designs

1.For each of the relevant user stories you identified and justified in (A), pick what you think is the best design alternative you wireframed in (B), then produce a higher fidelity mockup of the wireframe.

Teacher User Stories

As a teacher, I want to list available learning resources and modules in an easy to digest way

Justification: This allows for students to access their learning materials even outside of the classroom. They can also create/join game rooms based on the material and save questions from the game rooms they participate in for later review.

img

img

As a teacher, I want to be able to use video games to foster socialization among students.

Justification: Teachers have a hybrid interface where they can easily see their entire student body on the right, and the list of breakout groups to the bottom. Both the students and breakout rooms have their own set of actions. Multiple students can be assigned to a breakout room, where they can all be given the same quiz, or set of actions to perform.

img

img

img

img

img

img

As a teacher, I want to be able to control when my students are able to communicate.

Justification: An emoji-system allows quick feedback that can be read at a glance by the teacher, and let them know how students are feeling.

img

img

Student User Stories

As a student, I want to be able to use a nickname so that I can play without being too shy.

Justification: We think this is a good design alternative because it could make students engaged in a game with a nickname that best describes them and their personality.

img img

img img

As a student, I want to be able to add questions to a game so that my peers and I can play and answer them together.

Justification: We think this is a good design alternative because it allows students to add questions next to objects in the game. That makes it more relatable instead of just having a list of questions in a questions or discussion page.

img img img img img img

img

As a student, I want to be able to browse games for each class so that I can join and play with my peers in that class at any time.

Justification: We think this is a good design alternative because it does not show so much information at once. It could be easier for students to compare and choose at a low scale.

img

As a student, I want to be able to see my friends’ virtual avatars and interact with them/work together as opposed to just seeing their camera in a zoom call.

Justification: It allows the students to show off their avatars, as well as see each others’ avatars while learning/playing.

img

As a student, I want the virtual learning environment to be easy for me to learn how to use.

Justification: This would allow for students to access the tutorial from any page on the virtual learning environment, rather than having to actively seek out the page. If the student runs into an issue at any point, they can simply open the tutorial.

img

img

As a student, I want to use gamified assignments to keep track of my progress and encourage me to improve my skills through the use of leaderboards, tournaments, and ranks/levels.

Justification: For this user story, we decided to incorporate the quest idea from our design alternative from part B. We decided that this approach would create a more student centric experience, rather than a class based experience. We also decided that, in addition to fostering anonymity, introducing healthy competition through leaderboard stats would help students compete and cooperate with each other.

img

img

img

img

img

img

img

img

As a student, I want to be anonymous when I fall short while playing the game.

Justification: Letting the teacher control when anonymity is enabled allows it to be global over the game, rather than target at individual students, which would in effect not be really anonymous at all

imgimg

As a student, I want to see and use common video game paradigms (inventory management, hotbar, common interaction keys, typical camera system, WASD movement, etc.) so that the learning curve for the interface is minimal.

Justification: We decided to incorporate the idea of WASD movement and mouse camera controls into our system. For the mockups, a 3rd person view is used to illustrate the movement in a 3D space. In the 2nd to last mockup, we can see the effect when moving the mouse horizontally: the camera is rotated around the player. In the last mockup, we re-introduce the idea of interacting with NPCs, but in a 3D environment, activated by pressing the E key while in close proximity.

img

img

img

img

img

img

img

As a teacher, I want to be able to invite my students to my class securely and easily.

Justification: We decided to add more friendly, casual text as well as incorporate feedback from our collaboration session where we ideated a “guild chat” of sorts for students to ask questions and talk.

Teachers User Story Link

As a student, I want to be able to easily enroll in my teacher’s class.

Justification: We decided to add more friendly, casual text as well as incorporate feedback from our collaboration session where we ideated a “guild chat” of sorts for students to ask questions and talk.

Students User Story Link

Contribution