Embedded Files
I worked on a project for a hospital management app that would allow hospital managers to communicate with hospital staff, assign tasks to staff, create teams within the app, create events and announcements, and more.
One major area of functionality for this app was the task management system, where team managers can create tasks to assign to team members, or where members can create their own personal tasks. The design team I worked with had already created some preliminary designs to start with when I was tasked with completing and redesigning the task system. To do this, I needed to demonstrate the complete flow of interactions for this system, which involved implementing more functionality into the feature.
I started by creating a requirements list:
Ability to create personal tasks
Ability to see tasks assigned to the user
Needs to see when the task is due
User should know if they need to submit something to complete the task
Ability to edit or delete personal tasks
Needs to be able to see any attached documents
Ability to easily mark tasks as complete
User should be able to intuitively prioritize tasks in their task list
With these requirements in mind, I was able to determine what new features needed design work, and what features had already been implemented by the preliminary designs. This gave me a good starting point for organizing what features I should focus on.
The Overview Page
The Overview Page
The overview page shows the user all of the tasks that are assigned to them. This page needed to tell the user at a glance what tasks they need to work on, when they are due, whether there are requirements, whether it is a team task or a personal task, and the level of priority they should assign to each task.
To accomplish this, I thought it was necessary for each task to display a title, so the user has a reference for what the task entails. Each task also shows two lines of description, which allows the user to see more detailed information about the task without taking up too much space.
Each task also displays the date the task was created, the due date, and any attached documents.
Users can also create tasks on the overview page, which is indicated to them through the button fixed to the bottom of the screen.
When created, tasks can be given badges, which communicate to the user what kind of task it is. The "required action" badge communicates that they must fulfill a requirement to complete the task, the "urgent" badge helps the user mentally prioritize the tasks based on importance, and the "team task" badge tells the user that the task was assigned to them by a team manager.
Tasks are divided into sections depending on their due date, which further assists users in making decisions on priorities and shows an intuitive timeline of tasks they will complete throughout the week. The filter icon allows users to group tasks differently, giving them control over how they view their tasks.
I utilized color for "past due" tasks to indicate to the user that a task has not been completed in time, which users would generally want to avoid to stay on schedule. This helps draw attention to them, which may help the user make decisions on which task they should focus on.
Similarly, the "due today" tasks have the due date in yellow, which is a less severe indicator than the red used in "past due", but still helps draw attention to tasks that need to be completed soon.
Most tasks can be completed by tapping the box to the left, however, tasks that require action are not able to be completed this way. To clarify this to the user, the box for these tasks is grayed out and cannot be interacted with. This way, users cannot accidentally mark a task as complete if they have not fulfilled the requirements for it.
For increased ease of use and control, the user can delete tasks through this page without needing to enter the detailed task screen. This is done through a swipe.
As an error prevention measure, this can be undone through the pop up that occurs after deletion.
Detailed Task Page
Detailed Task Page
The detailed task page shows the user a more comprehensive look at their task. Through this page, they are able to read the full description, as well as view any attached documents.
This page can also be used to edit and delete personal tasks, or to complete tasks.
For tasks that do not require action, the user can mark it as complete with the press of a button.
If the task is a team task, any other members of the team assigned to the task are displayed by icons in the top left.
Tapping on this shows the user a list of each member, which allows them to message them through a different feature of the app.
The team manager who assigned the task is displayed in the top right. Selecting the manager's avatar allows the user to see their smart card (a summary of contact information used throughout the greater app), and gives them the option to message them.
If messaged through the task management system, the app will automatically link the manager to the task the user initiated contact on. This helps with ease of communication on both sides, giving the manager context about the message and allowing the user to easily communicate about the task.
As users can be part of multiple teams, the team that the task originated from is displayed next to the manager as an icon for clarity. Tapping this takes the user to the main team page.
Tasks can be navigated through the detailed task page by swiping left or right, enabling more flexibility in how the user navigates through the app.
Required Actions
Required Actions
For tasks that require action, the user can view what action is needed through this page.
For the purposes of being used in a hospital setting, the two actions a task can require are a document upload or a signature.
It was very important to communicate to users what actions they need to accomplish in order to complete a task with required actions. I communicated this through iconography and color, demonstrated by the alert icon in red. This clarifies to the user which documents need a signature. This is also used in the upload file section to indicate the user needs to upload a file.
Once the actions have been fulfilled, I wanted to communicate to the user that they have completed all the required actions and are able to submit the task. The mark as complete button is no longer grayed out, and the alert icon is replaced by a checkmark.
Signing a Document
Signing a Document
One of the app's planned features is the ability to sign documents. I needed to map out how this interaction would work, especially in the context of the task management system. For this, I focused on providing the user with several options of signature, as well as the ability to redo or remove their signature for error prevention.
To sign a document, the user needs to tap on the document they wish to sign from the detailed task view.
The user can then view the document and select the sign document button.
The user is given several options to sign the document.
Completed Tasks
Completed Tasks
Once a task is complete, it is moved to the "completed tasks" section of the overview page. The user can tap to view a detailed view of completed tasks, which shows any attached documents, any signed documents, any files the user needed to upload, the due date, other assigned members, and the team manager/team.
The user can restore the task, which will return it to an incomplete state, or they can delete the task. Completed tasks can also be marked as incomplete from the overview page by unchecking the box.
Creating and Editing Personal Tasks
Creating and Editing Personal Tasks
Users needed the ability to not only be assigned tasks by a manager, but also to make their own personal tasks. By pressing the "Create Task" button on the overview page, users are presented with the following to input their own information to make a task.
When viewing a task's detailed page, the user can press the edit icon in the top right to change the title, description, due date, or upload more files to their created task.
Page updated
Google Sites
Report abuse