UX Design & Documentation

Link to interactive wireframes, via Adobe XD

Notes

Wireframes are designed to be responsive, but shown in 1280 x 800

Landing Page

Featured Tutorial

1. The featured tutorial includes the most prominent display, including:

   • Thumbnail of the tutorial video
   • Title of the tutorial below the thumbnail
   • Tags for its concepts and interests, below the title
   • Name of the author appended to Codewit. (e.g. Codewit.Destiny)
   • Photo of the author, below their name

2. Thumbnail and title should link to the tutorial page

Additional Tutorials

The additional tutorials will be shown below the featured tutorial, under the label "Related tutorials" and providing a brief summary of other videos.

1. The horizontal scroll should include 6+ tutorials, add each of the following until there are at least 6 videos.
   • Any other tutorials that have the same matching concept and interest (selectors), sorted by newest video
   • If there isn't >6 videos, append to the end of the list: videos with the matching concept but non-matching interest, sorted by newest
   • If there isn't >6 videos, append to the end of the list: videos with the matching interest but non-matching concept, sorted by newest
   • If there isn't >6 videos, append to the end of the list: other videos by the same tutor
   • If there isn't >6 videos, append to the end of the list: five newest videos that don't have matching interest nor concept
2. Clicking on any of the additional tutorials should go to that tutorial page

Dropdowns

1. Concept selector is the first dropdown (showing "If statements"). Interactions:

   • Initially populated by all Concepts that have at least one Tutorial associated with it, with a random one selected
   • When the user changes the selection, the Interest selector should update with only Interests that have at least one Tutorial associated with it that also has a matching Concept selected

2. Interest selector is the second dropdown (showing "Interest"). Interactions:

   • Initially populated by all Interests that have at least one Tutorial associated with it that also has a concept matching the current Concept selector. If there are multiple available, select one randomly
   • When a user changes the selection, the Featured Tutorial should update to reflect the current Concept AND Interest selection. If there are multiple Tutorials available that match both the concept and interest, then choose the newest-created Tutorial available.

When both dropdowns have been selected, the featured tutorial (biggest thumbnail, creator's name and photo, tutorial title, listed concepts and interests) as the newest tutorial (most recently created) that matches both selections.

Tutor Profile page

Each tutor (any user with Creator role and who has been identified as an author of at least one tutorial) should have a dedicated profile page. Note that normal users who practice content but haven't created content do not have a tutor profile page.

1. Profile pages should have custom routing so that /with/tutorid directs to their profile, where tutorid refers to a unique id generated by:
   • Get their first name followed by their last initial from their authenticated account. Ex. account kbuffardi@mail.csuchico.edu has the name Kevin Buffardi and should have the tutorid KevinB
   • Each tutorid needs to be unique so if the above does not create a unique id, then append _x to the tutorid, where x is an incrementing integer from 1.
2. As shown in the wireframe prototype, the left side should have "codewit.name" where name is their first name (with bold and underline), their photo, and then a list of their interests.
   • Their list of interests should include both the interests they selected when they created their profile as well as any interests associated with tutorials they created (with no duplicates)
3. The right side should have a list of their tutorials, sorted by newest created