About

This was a group project, and my team members were Anusha Chitranshi, Nishil Faldu, and Athulya Ganesh. We were tasked with creating a "game-ified" version of Canvas, the Learning Management System used by the University of Cincinnati.

Gathering Design Requirements

Interviews

Each team member completed two interviews to help drive our requirements-gathering process. See the document below for the details of our interviews.

Contextual Inquiries

We completed two contextual inquiries and received the following results.

Design Challenges and Alternative Design Sketches

To come up with ideas for our design challenges,  we completed a protocol for exploring design alternatives called "10-plus-10." See below for our ideas and associated sketches.

User Interface Prototype Sketches and Feedback

Each team member sketched the pages/tabs that they planned to implement. The following document includes those sketches and feedback received.

Implementation

Availability and Demonstration

The code for our implementation is available at https://github.com/egardner2019/alterna-canvas. See the demo video below for a run-through of our application.

Features, Controls, and Indicators

All Pages

Features

• The user can navigate to other pages using the links in the navigation bar

• The user can keep track of their progress using the shelf with their matured plants

Controls

• The navigation bar with links to other pages

Indicators

• The profile image of the current user

• The logo of the school the user attends

• The user's current garden shelf containing their matured plants

Dashboard

Features

• The user can click a course card to navigate to that course's page

• The user can stay up-to-date on news in their courses via the announcements section

• The user can expand an announcement they are interested in reading

• The user can change the position of the icon position for announcement expansion

• The user can plan their future work through the to-do list section

• The user can view more announcements and to-do list items

• The user can water their plant using the water points they have accumulated

• The user can view their progress in their courses via the "My Garden" section

Controls

• Clickable cards linking to their respective course pages

• Button to water plant

• Arrow to expand announcements

• Dropdown to change the position of the announcements expansion icon

Indicators

• Cards for each course the user is taking

• Next 3 assignments due

• Three most recent announcements

• Name of the user 

• The progress of the user's garden

  • Current plant's health

  • Current plant's progress (image and health bar)

  • Number of water points available

  • Number of days until the current plant wilts

  • A shelf containing all of the user's matured plants

Garden Page

Features

• A user can water their current plant if they have a water point available

• A user can view their progress in their courses overall

• A user is encouraged to submit assignments so that they earn water points

• A user is encouraged to regularly complete assignments so that their plant does not wilt and all progress is lost for that plant

Controls

• Button to water the current plant

Indicators

• A shelf holding all of the user's matured plants

• If the user has not completed their garden...

  • The name of the current plant

  • The health of the current plant

  • The number of water points the user currently has in their inventory

  • The number of days until the current plant wilts

  • An image showing the current plant's maturity

• If the user has completed their garden...

  • Text telling the user that they have finished their garden for the semester

  • A fun image celebrating the user's achievements

To Do Page

Feature

• The user can view their incomplete assignments and plan what they should work on next

• Proposed future work: allow the user to click an assignment to navigate to that assignment's details

Controls

• Proposed future work: make assignments link to their respective pages

Indicators

• The name and due date of each incomplete assignment, listed in order of due date

Announcements Page

Features

• The user can stay up-to-date on news in their courses

• The user can expand an announcement they are interested in reading

• The user can change the position of the icon position for announcement expansion

Controls

• Arrow to expand announcements

• Dropdown to change the position of the announcements expansion icon

Indicators

• An exclamation mark icon that signifies a new/unread announcement

• Arrows for each announcement header that signify that they can be expanded

• The header, content, author, and date of each announcement 

Profile Page

Features

• A user can use the dropdown to change between three students: Alice Johnson, Bob Anderson, and Eva Martinez

• A user can edit the bio of the currently selected student

  • Proposed future work: make changes to the user's bio permanent. As of now, this feature is temporary. When the user comes back to the Profile page, their edits will disappear.

• A user can click a link to email the currently selected student

Controls

• A dropdown to change students

• A button to edit the student's bio

• A link to email the student

Indicators

• The name, profile image, email, username, and bio of the current user

Syllabus Tab

Features

• The user can view details about the course via the syllabus

Indicators

• The information about the current course, provided by the instructor

Modules Tab

Features

• A user can view a list of the materials of a course, organized by modules

• A user can view a list of all of the presentations for the course

• A user can preview an individual file within a module

• A user can download presentation files

Controls

• Collapsible elements for each module

• A collapsible element for all presentations

• Clickable file names

• Button to exit from the file preview

Indicators

• Arrows for each module that signify that they can be expanded

• The names and descriptions of each file of each module

• File content (when previewing)

Grades Tab

Features

• The user can view their grades in the course, both the number of points earned and the associated percentages

Indicators

• The user's grade for each section (assignment, participation, project, exam)

• The user's grade for each individual assignment, along with that assignment's title and due date

• The user's overall course grade

Assignments Tab

Features

• The user can view all of their submitted assignments and also those that they have yet to submit

• The user can submit an assignment and has three options:

  • Only submit text

  • Only submit a file

  • Submit both text and a file

• The user can cancel an assignment submission

• The user can change the selected file before submission

• The user earns a water point for each assignment submitted

• Proposed future work

  • Allow the user to resubmit an assignment

  • Save the user's submission. As of right now, the assignment is marked as complete, but the submission content is not saved.

Controls

• Clickable assignment names

• While submitting an assignment:

  • A text area for submitting text

  • Buttons to close the submission modal

  • A button to select a file

  • A button to remove a selected file

  • A button to begin uploading a file

  • A button for submitting the assignment

• Collapsible sections (Assignments Not Submitted and Assignments Submitted)

Indicators

• The name and description of each assignment

• Arrows for each header (Assignments Not Submitted and Assignments Submitted) that signify that they can be expanded

• After submitting an assignment: a notification that the user has received a water point

Files Tab

Features

• The user can view files by their type (assignments, course information, pages, presentations)

• The user can download the desired files

Controls

• A tab for each file type (assignments, course information, pages, presentations)

• A button to download each file

Indicators

• The types of files

• The names of each file under the selected file type

Zoom Tab

Features

• The user is redirected to https://zoom.us/join upon clicking the Join button

• Proposed future work: incorporate the individual course's Zoom meeting information/recordings/links

Controls

• A Join button that redirects to Zoom's website

Division of Work

In order to complete this assignment by the deadline, we split up the work. See the document below for details.