CHATREE
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.
TASK
Lo-fi, usability report, Hi-fi
​
DATE
Jan 2020 - May 2020
TOOLS
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.
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'
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
Ideas
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.
