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

2. 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.

3. Tasks

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

5. Revised Interface Design

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

7. 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

8. 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

9. New homepage design detail
Careers
Skills
Classes

10. 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

11. 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

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

13. 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

14. 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

15. 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

16. 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

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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. Task flows

26. Explore classes storyboard

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

28. Give feedback storyboard

29. Give feedback storyboard (cont.)

30. Teacher browse feedback storyboard

31. Teacher browse feedback storyboard (cont.)

32. Teacher browse feedback storyboard (cont.)

33. Prototype Overview

34. 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

35. 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

36. 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

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

38. Hard coded features Search functionality Courses Course Skills
User Ratings

39. Prototype Screenshots

40. Thank you!