Innovation Center - My New App for my School

During the summer holidays, I have decided to redesign my BCIS Notification app (see this post), so that it looks more professional. After I finished my summer camp study on software interface design and user experience, I realized how important it is to design a good GUI for the user to navigate on. I have categories on the leftmost column (which is editable), message titles in the second column, and the message content (downloadable) in the rightmost content view. The message itself, as you can see, is much more interesting to read because images can be added in, as well as attributed text (fonts, colors, text sizes, etc). The idea is that my school could potentially use my app in replacement for the "Student Bulletin", which is a mediocrely designed webpage that students rarely visit because you have to click at least 6 links to navigate to the bulletin, and the formats look tedious to read:

I think pushing the bulletin messages to the students' computers is a much more interactive way of announcing the news of BCIS.

When you move your mouse over the notification, two buttons appear:

When the user clicks, Innovation Center is launched, and the user can view the message:

Apart from the main function of receiving notifications, I also worked on providing the best user experience to users, by taking care of every minor detail, from Innovation Center's own self-update server to tracking the movement of the mouse across the graphical user interface; from a right-click menu to customizable categories (columns) which helps to filter messages and announcements by their genres.

For example, when the user's mouse hovers on a message (that is, the user does not click onto the message cell), a delete button automatically appears, with a gradient of the same color as the highlight color. To make this effect work, I actually created a gradient image and embedded it in the app interface.

When the user clicks on the message cell, a dark blue gradient will appear near the delete button:

Furthermore, when the user unfocused the cell, a grey gradient must be applied:

It took me a LONG time to program how exactly the gradients work, and to make sure that each gradient (light blue, dark blue, and grey) appears in the correct circumstances. It involves a mouse tracking chunk of code, where I use the location of the cursor on the screen to determine which cell the mouse is hovering on. I also need to take into account of a variety of situations, such as the user launching another program and loses focus on the window, user types into the search bar, and user deleting a message.

I also spent a lot of time to work on detecting right click, and assigning functions to the right click menu programmatically: