Alecia Vogel
Developer & Digital Product Designer
dashboard.png

Cybera Timesheet Redesign

Over Spring and Summer 2019, I refactored, redesigned, and Dockerized Cybera’s timesheet system. I used Semantic UI, Isotope.js, Select2, and FontAwesome in order to create a reactive, minimal, and intuitive user interface. The application’s backend was built using PHP7.

Old Dashboard

Old Dashboard

The older version of the system was migrated from Drupal and had minimal CSS formatting. The entire application used a table layout, reminiscent of 90s web design conventions.

While it was simple and got the job done, many employees felt that the overall look and feel of the website did not adequately reflect what Cybera was all about. Plus, there was very limited functionality. For many employees, it was difficult to fill in missing hours at the end of the month since there were no shortcuts or filters, just the long list of plain-text dates at the top of the page to guide you.

Old Login Page

Old Login Page

The previous version of the login page was also quite plain. Navigation links listed on the left side were unusable for users that are logged out.

The forgotten password workflow resulted in a lot of confusion. In lieu of an extra “Forgot Your Password” page, the previous developer had employees enter their username in the Login form before having them click the “Forgotten Password” button below.

New login page

New login page

I have simplified the login page so that it only contains the login page - no more unusable navigation links.

New page: Forgot Your Password

New page: Forgot Your Password

The “Forgot Your Password” workflow now follows conventions with a separate form on a separate page in order to reduce confusion.

New Dashboard Layout

New Dashboard Layout

The dashboard now uses a card layout to display all timesheet entries in descending order. The default filter includes all days up until the current date. Any day with missing hours will have a red banner in the top right to inform users of how many hours they’ve yet to fill out for that particular date.

My hope with this design is that employees will feel motivated to eliminate all red banners from the homepage, reducing the number of people that the Finance department needs to pester at the end of every month.

New Feature: Responsive filters

New Feature: Responsive filters

With just one click, employees can view all of the dates that have missing hours for a particular month. This replaces the plain-text list of dates that previously appeared at the top of the page.

New Feature: Search by string

New Feature: Search by string

Users may now search all of their monthly timesheet entries for a particular word or phrase.

New way of entering hours

New way of entering hours

Instead of opening a separate page to fill in your hours, a modal window now fades into view. It contains a reminder about how many hours are left to fill out and displays the entries you’ve already added for that day at the bottom. I’ve also added the ability to autocomplete the “Account” selection dropdown.

New Fixed Header

New Fixed Header

Previously, there was a sidebar that appeared on all pages (including Administrative report pages) which included your hour totals for the current date as well as the total number of available vacation and overtime hours. It took up a lot of screen real estate.

I have reworked it into a less intrusive header that stays at the top of the page when you scroll. The “Submit Hours” button displays an indicator for the number of hours are missing for today.