SOLVING THE PREVIOUS DESIGN ISSUES

After the four usability testings, I was not satisfied with the findings, so I reverted back to drawing low-fidelity wireframes to synthesize better solutions faster.

I used a different approach to designing the Weekly and Monthly Scheduler, but the problem was to "How can I organize the data" within a narrow vertical screen when most calendars are presented in a horizontal format.

The solution was making multiple scrollable horizontal lists.

DAILY SCHEDULER

I used cards to convey and organize each employee's information.

The horizontal cards are used on the Daily Scheduler. This is to present more information in a more focused list such as the Daily Scheduler.

Another card I synthesized is the Daily Info Card. This card communicates vital information in a day at a glance—so comparing each day can be easier.

WEEKLY SCHEDULER

The vertical employee cards will allow me to arrange the employee list on a horizontal scroll, saving me space to create a horizontal list for employees for the more extensive Weekly and Monthly Scheduler.

MONTHLY SCHEDULER

The most challenging Scheduler to design was the Monthly Scheduler. Stacking all 30 days on a vertical list seems too extensive for me, so I used a 30-day monthly calendar as a Date Picker to give users the choice of how extensive they want the list to be. This can be also used to compare different dates regardless of how far apart the days are.

BRANDING

SCHEDULER v3

EMPLOYEE PROFILE

One of the first interactions of the user when viewing the Scheduler is to interact with the employee cards.

Once tapped, a dialogue box will appear with 4 action buttons: Contact, Swap, Availability, and Timesheet. an expanded dialogue box can be seen on a tap to "see more" avoiding the user to leave the Scheduler page.

For complete information regarding the Employee, the user can tap the profile picture and jump into the Profile Page. It consists of more comprehensive information about the employee and can interact with the same action buttons that were in the dialogue box along with recently approved requests, upcoming schedules, and availability.

For confidentiality reasons, the timesheet page is only accessible by managers and the employee's own--same as the employee's pay rate on their cards.

Availability and Requests, however, are information everyone can access. This is so users can interact with updated schedules and changes. These are presented via horizontal cards for visual hierarchy and organization.

SEND REQUEST

Prior to the previous iteration of the Request prototypes, I segregated it into three actions: Leave, Cover, and Swap. This is to better communicate what the users want to change.

The Leave request consists of a Date Picker and comment bar to communicate "when" and "why" the user needs the leave.

The Cover request consists of 2 sub-categories: Ask Cover and Need Cover.

Ask Cover consists of the upcoming shifts of the employee. Once selected, the request will be sent out to employees who are qualified and available to cover the shift.

Need Cover shows pending requests from Ask Covers. If the user wants to cover for that shift, he/she can tap it then the request will be sent to the manager for approval.

The Swap request has a Date Picker and List of Available Employees. This is to specify "when" and "who" will make the request. Once the date has been picked, available and qualified employees will appear on the bottom half of the screen to be picked. The request will be sent first to the swapping employee and then to the manager for approval.

APPROVE REQUEST

Once employees have submitted their requests, the manager will review the request and has three options: Deny, Approve or Revise.

Accept and Deny will have a straightforward action to comment and approve then update the revised schedule.

Revise will have the manager pick the desired date, shift or employee for the request and then send back to the requester for review and approval.

MESSAGING

I took inspiration from Facebook Messenger and Google Material Design’s Messenger for the Messaging page. The messaging task should feel as easy as texting and should not be over complicated. One common denominator of Facebook and Material Design is the Floating Action Button on the Inbox page. I implemented the button to promote the primary action, which is to start a chat.

TIME LOG

The time log wireframes are somewhat a departure from my theme. I opted for an image background in place of the primary color for a more organic and welcoming feel. The image also changes throughout the day to demonstrate the time of the day.

In contrast to the Scheduler and Dashboard, the Time Log page has lesser content. Thus, giving the page more room to breathe.

The primary action button is the Clock In and Clock Out buttons. This is placed alongside the time and current shift. To avoid accidentally tapping the Clock In and Out buttons, there will be a security Pin/password code for every time log.

While the shift is in progress, announcements, tasks, and notifications will be shown on the bottom part of the screen for a reminder. The shift progress will also be shown as the shift goes on.

Once clocked out, there will be a summary page which consists of the timesheet of the day. This timesheet will be the same numbers sent to the managers.

ONBOARDING

This task was broken down into answering five questions to properly set up the Scheduler:

What’s the Users’ basic info?

What is your Business type?

What are the roles and positions in your business?

How many shifts do you have?

How much is your budget?

These questions are directly correlated to the scheduling process of the three managers shared during the interviews. Going back to the interview, the managers were particular of the budget limits and roles. Tailoring the roles based on the nature of the business and allowing customization will give versatility and diversity when scheduling.

ADD/INVITE EMPLOYEES

Most data gathered in these wireframes are text field input, especially from the basic info pages. However, I implemented a different approach to setting up the Availability. These data are more manageable when using a calendar date picker to pick dates and with drop-down lists to pick a time.

HIGH-FIDELITY INTERACTIVE PROTOTYPES

Before proceeding with the Usability testing, I've constructed high-fidelity digital prototypes for better user experience.

USABILITY TESTING

third ITERATION

USABILITY TESTING SESSION 3

I wanted to make sure I fix the prototyping interactions or the lack thereof in the previous iterations. Figma has very basic prototyping tools, but lacks some interactions to give users a proper experience.

Since Invision does not support Figma files for prototyping, and Figma Mirror was buggy most of the time—I figured this would give users a bad experience. Thus, I used Principle for a more fluid animation and prototyping.

The purpose of the tests was to assess the usability of the application interface design, information flow, and information architecture.

Two of three participants are full-time supervisors and one is an owner of a fast food chain company. The tests have three similar tasks to ensure stable results. Each individual session finished within approximately 15 minutes.

During the session, I explained the test session and asked the participant to read the task scenarios. After each task, I asked the participants to rate the interface on a 5-point Likert scale with measures from Strongly Disagree to Strongly Agree.

• Ease of use

• Learnability - how easy it would be for most users to learn to use the prototype

• Information facilitation – how quickly participant could find information

• Look & feel appeal – application’s content makes me want to explore it further

• How easy it was to find the information from the screen.

• Ability to keep track of their location in the screen

• Accurateness of predicting which section of the application contained the information.

 In addition, I asked the participants the following overall questions:

• What the participant liked most.

• What the participant liked least.

• Recommendations for improvement.

Message an employee on the Daily Schedule screen

TASK 1

Participants are in the Daily Scheduler screen and was asked to navigate from Daily Scheduler screen to Chat Box screen to message John Appleseed.

Participant 2 made a critical error by not tapping the contact icon. Thinking it was going to initiate a phone call instead. Participant 1 and 2 made a non-critical error of navigating directly the menu to send a message.

Request a trade shift

TASK 2

Participants are asked to request a swap (trade shift) on September 1 shift for John Appleseed’s September 2 shift

Participant 2 made a critical error by tapping to a pending swap request instead of tapping a date in calendar. Participants 1 and 3 clicked the following month instead of dates in calendar. Participant 3 did not know the employee cards were horizontally scrollable. All participants didn’t see the list of employees underneath the calendar, and thus, pausing and think what to do next.

Create and post a shift

TASK 3

Participants are asked to create a morning shift roster for September 1 and select the following employees:

Manager—John Appleseed

Cashier—Joyce Jimenez

Back End—Maui Taylor and Diana Zubiri

After selecting the roster, participants must Review, save and post the created template.

Participant 3 made a non-critical error dragging the employee icon towards the calendar instead of clicking.

SUMMARY OF DATA

The table below displays a summary of the test data. Low completion rates and satisfaction ratings and high errors and time on tasks are highlighted in red. 

REFLECTIONS AND WHAT’S NEXT

All participants found Sundial to be straightforward, easy to use and has an appealing look, but have its own share of interface design flaws. Presenting essential information in a well-categorized manner is key to many if not all of the participants. The recommendations below are driven by the participant success rate, behaviors, and comments.

• Change Contact action buttons, add Ellipsis menu icon on top of Horizontal Menus

• Add additional Instructional text on Create and post shifts and Swap Requests

• Add a Catalog page for saved templates, add a Floating Action Button on Scheduler screens

• Add a transition when a date has been picked on Date Picker to show employee lists on Templates, Scheduler and Swap Requests screens

By implementing these recommendations and counting to work with users, it will ensure an improved user-centered product.