Repository navigation
4. Application Walkthrough
Navigation
The collaborative web application tool for interface design, Figma, was used to design mock-ups for each page, highlighting the functionality that was planned to be implemented.
Figure 3 (a) and 3 (b): Mockup and Final Dashboard Page.
In Figure 3 (a), the mockup for the dashboard is displayed. The design was intended to display all urgent information required by a prospective user. Unread emails, teams, todos and meetings are presented at the forefront of the page. Initially, a section for the time and weather was also planned, but later moved to the chatbot, as the team considered the information distracting from the main aspects of the interface. The Least Effort principle[47] was used to determine the functionality of the tiles. For example, the user would want the option of adding/deleting their Todos. In the "What have you missed?" and "Teams" tiles, only unread emails and the teams of the user show. A natural reflex of the user would be to click the tiles to see all their emails and teams. So this redirects them to the overview page, discussed in the section below.
Figure 4 (a) and 4 (b): Mockup and Final Overview Page.
Figure 4 (a) shows the initial mock-up design for the overview page. The overview page was planned to act as a hub point for multiple Microsoft apps such as Outlook, Teams and the Calendar. Initially, all of this information was displayed on one screen. To allow users to focus on one aspect of overview at a time, this was revised into several in-screen tabs which could be easily moved between, providing more flexibility for the user.
Figure 5 (a) and 5 (b): Mockup and Final Calendar Page.
Figure 5 (a) shows the initial design of the calendar page. It was aimed to present all events grouped together on one page. However, after developing a pre-release version of this page, it was decided that, from a UX perspective, it would be too tedious to hover over each event to see further details. Replacing this and consolidating the Principle of Least effort[47], a separate events section was made, where if the user were to click a tile with a circle (notification), the events for the day are presented. The events are categorised into meetings (outlined in green) and non-meetings (no outline) to make it easier for users to find what they are looking for. In case of no attendance, the user can click on either the pen icon ("Summarise") which will open a dialog box with the summary of the meeting. The user has the option to store the summary directly into their onedrive OneNote, by clicking on the "OneNote" button.
Figure 6 (a) and 6 (b): Mockup and Final Application Tracker Page.
Figure 6 (a) shows the application trackers initial design. A date-wise sorted table would be presented to the users, so they could see their upcoming applications and associated readings/assessments. However, it was then decided to display them as a dashboard instead, where the different application types and their progress are categorised by colour. This was more aesthetically pleasing (The Principle of Beauty[47]) and a novel interface which would encourage users to interact more with the page.
Figure 7 (a) and 7 (b): Mockup and Final SmartScribePage.
Figure 7 (a) shows the summarised notes page. The layout easily informs the user of the steps they need to take to summarise their notes. The UI was later improved by introducing the “Write to OneNote button” and making the summary section larger. The user first uploads their files and then clicks on either the ”Summarise” or ”Write to OneNote” button.