ClassLens Hope C. | Amy L. | Yash T.

Value prop, problem and solution overview ClassLens helps teachers and students ensure that the skills gained in a class are relevant in future pursuits. Problem Currently, ​there’s ​no ​organized ​way ​for ​teachers ​and ​students ​to ​understand ​how specific ​course ​objectives ​are ​useful ​in ​downstream ​classes ​or ​jobs. Solution ClassLens is a ​web-based ​platform ​for ​former ​students ​to ​give ​feedback ​on ​skills ​gained ​in ​a ​class ​and how ​those ​skills ​are ​being ​used ​in ​downstream ​classes ​and ​jobs. ​Teachers ​can ​use ​this feedback ​to ​see ​how ​to ​revise ​their ​courses, ​and ​students ​can ​use ​it ​to ​see ​whether ​a course ​is ​valuable ​for ​their ​short ​and ​long-term ​goals.

Tasks

Tasks Task 1: Students explore careers and classes (complex) Task 2: Former students give feedback on classes (medium) Task 3: Teachers browse feedback (easy)

Revised Interface Design

Tasks Task 1: Students explore careers and classes Task 2: Former students give feedback on classes Task 3: Teachers browse feedback

Homepage + career map redesign Homepage (before): Design feedback Career map (before): Unclear that choices on the homepage were options for exploration No sense of hierarchy when moving between careers/skills/classes “Review” task was impossible to find Redundancy between career map and homepage - people thought the items they were pinning would go to their homepage BEFORE

New homepage design Design changes Remove the idea of separate career/skills pages and create one connected visualization from the homepage where vertical levels indicates hierarchy Clearly separate “Explore” and “Review” tasks using tabs on homepage Remove career/skill/course suggestions Unify homepage and career map, removing redundancies AFTER

New homepage design detail Careers Skills Classes

Refocusing on “students explore courses” task Design feedback Though people enjoyed the pinning interaction, it took away from the core focus of the task which is exploring courses We realized that the idea of pinning is actually a fourth, separate task of “students plan courses/careers” We decided we wanted to focus on our original three tasks and save the pinning/planning process as a possible add-on feature Option on our original career and skill pages to pin to career map BEFORE

Removing the pinning interaction Design changes We took away the option to pin careers or skills. Because the redesigned homepage will allow students to see all of the connections between various skills and careers as well as the skills/courses they’ve already taken, the idea of saving these views to a separate career map is unnecessary. Students will still be allowed to save courses they’re interested in to a simple list of bookmarked courses, but the intention is for the actual course/career planning to take place outside of our application, using our app as a tool. In later versions of our product, course planning could be added as a fully-fledged feature. AFTER

Tasks Task 1: Students explore careers and classes Task 2: Former students give feedback on classes Task 3: Teachers browse feedback

Review homepage Design feedback Our users couldn’t find the review button The courses haven’t been organized in any particular scheme, making it difficult to navigate to the course you want to give feedback for BEFORE

Review homepage Design changes Review and explore buttons are clearly visible at the top of the page. Also, review has been highlighted to make it clear that the user is in the review section The courses have been organized according to year and quarter so that it is easy to navigate to the course you want to review AFTER

Give feedback interface Browse/give feedback (before): Design feedback Rating the usefulness of a skill is subjective and the same rating may mean different things to different people Rating the usefulness of a course overall as a binary yes/no is not specific enough to gain useful insights Having specific anecdotes is useful to both teachers and students, but students may not fill out a form that makes them write something out for each skill BEFORE

Give feedback interface Design changes Introduce the idea of putting skills into buckets when reviewing a course (eg. “I feel comfortable using this skill”). This removes the subjectivity of users when evaluating Likert scale star rating for “was class useful to you?” Choose at least one skill to leave an anecdote for and describe how it was useful to you (later classes, jobs, etc.) We picked this as a balance between gathering useful information and keeping the form from being too long AFTER

Tasks Task 1: Students explore careers and classes Task 2: Former students give feedback on classes Task 3: Teachers browse feedback

New teacher homepage Design feedback It’s unclear what the buttons with the class codes are for (why are they on the page? Are they classes that they professor liked? Trending classes? etc). We need to more clearly convey what the buttons indicate There’s no way to navigate to the “bookmarked feedback” page from the home page easily BEFORE

New teacher homepage Design changes The text “My classes” clearly indicates that the buttons refer to courses taught by the professor Removed the idea of “adding a class”. Through Axess, the platform will be pre-populated with the courses taught by the professor. If a professor hasn’t created a feedback form for one of her classes, a default form will be used. Can navigate to the bookmarked feedback page right from the landing page by clicking on the text at the top right corner AFTER

Teacher’s view class feedback page Design feedback Binary response to the class useful question or skills is not useful Need to have responses which have a benchmark (Did you understand X) instead of just a numerical answer (scale of 1-5) Need to have more than 1 category of pin to categorise feedback into 2 or more groups BEFORE

Teacher’s view class feedback page Design changes Upon clicking on the class code or searching it, the teacher will first land on this page from where they can go to the edit feedback form page if they feel the need to do so They can see the filters open by default so that can see the feedback only for specific iterations of a course Instead of pinning, we have added a happy and sad face bookmarks which automatically feedback into groups depending on the user interaction AFTER

Teacher’s create class page Design changes It is not clear for which iteration they are editing the skills in the feedback form Also, there is no way to preview the feedback form BEFORE

Removed: Teacher’s create class page Design changes Teachers edit the feedback form directly on the “view feedback” page for their class It is clear from the drop down for quarter and year which form they are editing Teachers can preview the feedback form by clicking on the preview button next to the save button However, teachers can only edit the skills AFTER

Added: Teacher’s view pinned feedback page Design Our users indicated that a feature to save interesting feedback would be useful. Moreover, they wanted to differentiate feedback to act on vs. positive feedback about what they’re already doing well We added a page that displays the teacher’s bookmarked feedback in “positive” and “negative”columns, which can be filtered according to skill and class iteration NEW

Task flows

Explore classes storyboard

Explore classes storyboard (cont.) Drop down menu includes option to go to bookmarked classes

Give feedback storyboard

Give feedback storyboard (cont.)

Teacher browse feedback storyboard

Teacher browse feedback storyboard (cont.)

Teacher browse feedback storyboard (cont.)

Prototype Overview

Sketch app for designing the UI screens Prototyping tools What worked? Easily create layouts Create components Looks aesthetic What didn’t? Difficult to collaborate with team members Doesn’t work on Windows Sketch app for designing the UI screens

Marvel for creating the UI Interactions Prototyping tools What worked? Covers most interactions for web interfaces What didn’t? Not realistic enough Difficult to create interaction for every hyperlink, drop down menus Marvel for creating the UI Interactions

Limitations of the current prototype Graph visualization in the homepage difficult to realistically show through the prototyping tools Contains no real information ‘Static’ forms Why? It’s not possible to implement these features in Marvel

Wizard of Oz Techniques Search functionality, graph interactions, and login/logout on the website are currently hard coded

Hard coded features Search functionality Courses Course Skills User Ratings

Prototype Screenshots

Thank you!