top of page


A School Project for Human computer Interaction

Project Context

Many existing collaboration platforms (e.g. email, SMS, WhatsApp) support asynchronous communication. However, they usually come in the form of "posts". Very often, a participant may want to refer to earlier points in the discussion but this is usually implemented in a linear manner in current platforms. 

Hence, we are tasked to prototype a user interface for a new collaborative discussion platform that easily facilitates discussions. This can evolve in a general graph structure in which each new post can easily reference to multiple past posts.


Lo-fi, usability report, Hi-fi


Jan 2020 - May 2020


Microsoft PowerPoint

Lo-fi Sketch

I wanted the design to be easy to understand yet comprises all the required features. Hence, I made sure the interface was simple without adding too many extra features, yet fulfil all the functionalities needed to create a collaborative platform. The sketch below includes the specific locations I applied the 8 golden rules of interface design by Ben Shneiderman.

Lo-fi Page 1.jpg

Cater to universal usability

Customisable shortcuts for advanced users

Strive for consistency

Consistent headers for each screen

Offer informative feedback

User clicks 'tick' button, a pop-up message shows successful creation of post

Permit easy reversal of actions

Undo button to reverse any immediate actions

Summary of how the interface works:

1. User clicks on a topic of interest (E.g. COVID-19)

2. Adds a new post by clicking '+' in the toolbar on the right

3. To reply to a previous post, highlight the portion of the post. Then, type in your own reply.

4. Place your newly created post near to the referred post with an arrow connecting both posts together.

Permit easy reversal of actions

Every screen has a back button

Support internal locus of control

User can decide not to add a new post by clicking on 'No' 

Lo-fi Page 2.jpg

Design dialogs to yield closure 

Step-by-step instructions with step number indicating the sequence of actions

Reduce short term memory load

When help button is within the user's sight, it reduces anxiety if they are not sure how to proceed.

Hi-fi prototype

We were tasked to use only Microsoft PowerPoint to transform our Lo-fi sketches into Hi-fi mock-ups without using any macros or any code. This was what I came up with.

Learning points

This was the first project I did that made me realise the design of any interface is so important to create a better user experience. And the first step to come up with the design idea was the most challenging part. I drew so many designs out but only 1 made it in the end. What was more difficult was that there was no existing platform created that I could refer to and hence I could only rely on my own imagination and creativity.

Ideas to reality

Having ideas was one challenge to consider, another was translating that idea in my head to a prototype. I wasn't train in design school or had the best drawings but turning those ideas in my head to a lo-fi prototype took me awhile. But I learnt that as long as I did not give up, with my mind focused on creating better experiences, the lack of drawing skills cannot deter me.

Reality to experience

I learnt that my ideas and prototypes might seem so outstanding in my head but when presented in front of a user who has no idea how to use the application, all those ideas would be meaningless. Hence, interactive tutorials always help the user to learn how to navigate through this new form of collaborative platform.

bottom of page