GR2 - Designs

1. Scenario

Meet Ashton, he is a professional actor and a dashing, smart young fellow. Ashton is often travelling and has a strict schedule, but loves learning. So even though he would love to attend university classes because of his career he is unable to do so. Being that it is the 21st century everywhere Ashton goes he has his Macbook Air with him along with a wifi connection, and so online courses are perfect for him. He runs a google search for "online courses", he stumbles upon such sites as Coursera, MIT EdX, and a handful of others. He sees lots of potentially interesting courses but does not know where to start and doesn't have a lot of time to sort through all the details of the courses. Not only this, because of his strict schedule he has very specific requirements for the course: < 7 hours of work per week, intermediate difficulty, few assignments, and lots of networking opportunities. There is no information about this, and he is mad and disheartened.... until he comes across rethinkED, champagne falls from the heavens and velvet ropes part. From the first screen he sees a very visual and intuitive representation of each course, with ratings based on content, instructor, and community. He types in a search for photography, a search results page shows. He then filters on time commitment, then difficulty, and finally settles upon a course with a high community rating. He selects the course and sees a intuitive video introduction by the professor, and some brief reviews. He decides he doesn't like the instructors accent, goes back to the search results and chooses the second highest rated course. He again selects it, sees the video introduction, reads some reviews and ratings, finally checks out the forum, finally he knows this is the right course for him, is super exited and begins learning more about photography amidst his busy schedule. 

Scenario Storyboard 

1

2

3

2. Designs and Storyboards

2.1 Design Group 1

1 - Ultra Efficient

Our user analysis indicated that most users are interested in getting the reviews the fastest way possible. They want to see the ratings of a lot of classes at once so that they can compare different courses. Efficient users would like the option of an advanced search to filter the results.

2 - Rating

When a user clicks on a particular review to see it in more detail, the following page comes up. The page shows a quick summary of the review along with similar courses and prerequisites. A forum to discuss the course and the review is an important element of this design. Moreover, this design is also more friendly towards sharing the review by providing social media share buttons. The UI is easily learnable by all users.

3 - Survey

This design uses a tiled approach to show the reviews. When a user clicks on a review to rate, a dialog box asking for the users feedback pops up. This is one of the possible designs to collect user data that may be combined with the other UIs. While a tiled pattern is easy to learn, it is less efficient than the first design.
 

2.2 Design Group 2

1 - Discussion

The UI is focussed on making the website more interactive. The focus of the design are the reviews and comments following the reviews. It is easily learnable, and efficient for users who would prefer reading reviews and comments from other users much more than review summaries in terms of scores and stars.

2 - Rows

The UI is meant for efficient users who would like to see a snapshot of several courses at once, modify the search criteria, and get a sense of what the course is about via the course description. A highlight of this UI is the Compare option that allows users to compare several courses together.

3 - Mobile

This UI is designed for small screens (mobile phones). The UI takes advantage of the smartphone’s touch interface for easy navigation through the app, and presents the reviews in an efficient manner, again with the option of advanced search criteria.

2.3 Design Group 3

1 - Visual

The UI is focussed on making the website more visual. The focus of the design lies in the visual representation of the courses. The eye is directly brought to the images of the courses and the course ratings. Then when they hover over a course with their mouse, it will cycle through images in the courses and people can get a nice feel for the course. This interface is very intuitive and learnable, and also efficient for getting a quick over-view of courses. Then, if you want to go into more depth you can use the search and browse features which take you dynamically to another page. There is a hit to learnability since the UI is in a somewhat non-standard configuration 

2 - Video Intro

The UI is meant for when the site is new, and people don't know quite what to expect yet. There is a video introduction about what rethinkED is about, then directly under the video users can browse courses. This layout is easily learned since it follows all common conventions of playing videos and using web UI widgets. It's also efficient in conveying what someone would want to do what when first visiting a site such as this. 

3 - Detailed

This UI is somewhat more complicated than the first two but more can be accomplished. This configuration would be more useful for someone who knew what they wanted, this layout would allow them to get their faster than the first two, and so there is an rise in efficiency for these types of users. The learnability however is not affected, since it uses similar UI components that are standard across websites today.