Assignment Scheduler (Mobile Application)

I created an assignment scheduler last semester for my Mobile User Interface Design and Development course. The purpose of this project was to design an application with at least two views: one for entering course assignments for specific courses, and one to present the user with a list of the upcoming assignments with the ability to access their relevant information.

I created my basic wireframes in Adobe XD using Material icons and Android GUI elements to represent UI elements.  

Wireframe Views 1

Wireframe Views 2

My two wireframe designs were based on the sketches as seen below.

Sketches

I also included additional screens in my sets of wireframes for StEM testing (Storyboard-Based

Empirical Modelling) such as the ones below. I included wireframes for each step of the process such as using the keyboard, menus, selecting items from dropdowns, etc.

What I considered prior to designing the wireframes:

Context	·       1440 x 2560 (360 x 640 viewport) ·        Should support other dimensions with the use of guidelines in development
Platform	·        Android
Tasks	1.      Add an assignment for a specific course 2.      Find a specific assignment on the list, and update its details 3.      Navigate between the two views 4.      Enable notifications 5.      Update notification settings

According to StEM testing for both scenarios of adding an assignment and updating an assignment (two tasks for this project), Wireframe Views 2 (Scenario 2) was predicted to take a slightly longer time than Wireframe Views 1 (Scenario 1), therefore being less efficient. 

Wireframe Views 1 - Adding an Assignment

Wireframe Views 2 - Adding an Assignment

As can be seen in the graphs above in comparison to Wireframe Views 1, Wireframe Views 2 took ~2000ms longer for the fastest 10%, >500ms longer for the slowest 10%, and ~800ms longer overall. Therefore, Wireframe Views 1 offers better user performance to complete this task. Similar results are found for updating an assignment as seen in the graph below.

Wireframe Views 1 and 2 Comparison - Updating an Assignment

Limitations could however include the visual ease of interpretation for the two wireframed designs. Because the StEM predictive modeling of alternatives is computer generated, it lacks the human aspect of understanding a user interface (i.e. grouping similar elements together on forms). Therefore, while Wireframe Views 1 is the “winning” design in terms of offering better user performance, it is still important to consider improving the organization of the interface while keeping the same interactions.

From this result, I developed the mobile application following Wireframe Views 1 design in Android Studio (Java). A demo video will be uploaded and linked below.