HCI

The HCI research helped us envision the future design of our tool by identifying and addressing weaknesses in our initial sketches and prototypes.

Sketches

Having finished the initial research and conceptualization phase, we produced a few sketches to visualize and outline the key design elements and structural components of our project.

Image 4
User Interface Sketch 1
Image 5
User Interface Sketch 2
Image 6
User Interface Sketch 3

Following user feedback, it was determined that the 1st version (Sketches 1 and 2) was preferred due to its ease of navigation between pages. As a result, we focused on sketch 1 and improved it by making it clearer and more presentable to produce the second set of sketches.

This version would maintain most features, but would also now have the user suggestions feature (which can be used by users to enter a topic they would like an episode to cover). We also improved the navigattion, making it clearer and easier to use.

Image 1
User Interface Sketch 4
Image 2
User Interface Sketch 5
Image 3
User Interface Sketch 6

Prototype

After we drew some sketches, we produced the first version of our prototype. We took the best things out of the sketches and produced a more detailed version of our future product. We focused on making it functional, but also keeping the user interface simple and not overloaded with too much content. We added the login page to address user accounts, added the play, pause, forward, etc buttons and improved the design of some other buttons and tabs.

Image 1
User Interface Prototype 1
Image 2
User Interface Prototype 2
Image 3
User Interface Prototype 1

Evaluation of Prototype

We then proceeded to carry out heuristics evaluation in order to locate problems in a fast and low-cost way to help us improve our prototype.

Image 1
Heuristics Evaluation

The first problem located was the absence of the FAQ block, which would help the users navigate the tool. Another issue was that the search feature was not easily accessible. Finally, it was not very clear that the users could browse episodes by categories.

Improved Prototype

We then asked for feedback and improved our prototype, modifying the interface and adding new elements such as categories tab and filter feature.

Image 1
User Interface Improved Prototype 1
Image 2
User Interface Improved Prototype 2