We decided to implement the Tests and Quizzes page, which is similar to the Homework Planner page. This section of the app was originally not planned for in our Trello Board, because the implementation is very similar to the homework planner and we thought it would not be worth doing as we wouldn't learn anything new. However, we felt that the minimum viable product would be more complete if we added this in. Anyway it's good that we did it, because we had the opportunity to rethink our GUI design.
L-R: Test and Quizzes and the expanded Event view
So why did we even think of redesigning in the first place?
Our first idea was to make something similar to the original design in our mock-up, which allows all events to be manipulated on the page itself without further navigation. Then we decided to do away with the "box" design so that we can utilize more screen real estate. This also made the layout look neater (in our opinion). We then tried to put the date and time on the same line as the event title, but it didn't look very nice because of the arrow at the side. Thus we opted for the two-line format, similar to the View All page of the Homework Planner. The click-to-expand feature stayed, but we made changes. The location header is a simple "@ " while the description header is gone. Also, the buttons have been pushed to the corners.
There are still a few kinks to iron out from this design. The date and time display line could be improved by finding a better place to put the time field. I think that it's a little out of place right now. However, if the time is placed on a new line, each event box would take up extra height. We might simply just encode the date and time as one string, similar to the homework page.
Also the delete and edit buttons could use a redesign themselves. The default button style does not suit the context very well. The placement of the buttons could be improved too, as I find that there is a lot of empty space wasted in the middle, but if the buttons are close together it doesn't look good either. Maybe's it's really down to the button style.
Lastly, to prevent clogging up of the page, we might only show at most two (or just one?) events, with a "see more" expander to show the rest if needed. While this is excellent at saving screen space, it reduces the "bird's eye view" advantage, which is our main selling point. Also, this is very similar to the View All feature in the current Homework Planner page.
Comparison of the Tests vs Homework pages. Click to enlarge.
L-R: Tests and Quizzes page, Homework Page, Viewing All Homework of a module.
So what do you think? Is this design better, or would you rather the one from the Homework Planner? I personally like this one better, and if we both continue to like it then we will refactor our homework planner page (and likely the other pages also) to look like this.
Anyway I'll be off Serving The Nation until the 21st, and Jiawei is involved in FSC too, so we're gonna be inactive for the most part of next week. Hopefully we don't fall too far behind!
