Mobile Timesheet

Design a mobile app to record work time

Date: December 2022
Role: UX Designer, Researcher, Visual Designer

The Goal

A light, performant, standalone mobile timesheet app that minimizes cognitive load for users.

The Result

An intuitive mobile timesheet prototype that satisfies the primary goal and provides a solid foundation for further refinement and additional features.

Project Overview

Find improvement opportunities for recording employee work time using a mobile device that performs core functions without pay restrictions. This project was completed as part of an educational program.

Research Summary

Survey, interview, and usability research reveal that challenges in recording time accurately were not exclusive to technical limitations and potential user frustrations therein, but could be categorized as one of the three pain points:

User Pain Points

Technical

Timekeeping solutions can be unintuitive and may not include features users want or be overly complex.

Environmental

Current recording solutions do not always account for environmental or situational use cases.

Mental

Recording time accurately requires energy and typically places low in terms of priority.

How might we...

How might we alleviate user frustration by making an intuitive timekeeping app that’s easy to use?

Design Approach

Initial Mockup

After establishing a list of features, maintaining an uncluttered interface was priority in my approach toward an intuitive experience that reduces user effort.

Wireframe view of a time tracking app.
Home screen: Low Fidelity Mockup
Early design iterations reveal a home screen with large buttons, minimal type, and negative space as a promising solution to meet the design goals.
Time tracking mobile app home screen overlayed with left thumb reach area map.
Left Thumb
Time tracking mobile app home screen overlayed with left and right thumb reach area map.
Both Thumbs
Time tracking mobile app home screen overlayed with right thumb reach area map.
Right Thumb
Particular attention afforded to the main buttons and features on the home screen being accessible with one hand. See above design overlayed with thumb accessibility mapping.
‍(Smashing Magazine 2016)

User Testing

”Even though I haven't used it before, it was obvious how to do certain things.”
- Study Participant 3

Key Findings

  • Usability Testing data shows that users perform core timekeeping functions perfectly.
  • The process for manual time entry for a date in the past requires streamlining.
  • Participants do not easily identify or make use of the share icon in the top left.

Insights

  • App design should accommodate user’s preferred pathway to complete tasks.
  • App interaction feedback should be clarified.
  • Core timekeeping features of the home screen are effective.

Final Design

Design Changes

Insights from testing data were used to refine the app and produce the final design.
Time tracking app menu drawer with a dedicated line for sharing timesheets added.
Include share option in menu drawer.
Log updated snack bar with higher contrasting colors to increase visibility to user.
Increase prominence of app feedback notifications.
A sample of app icons and their names centered in a 4x4 grid.
Label icons to increase effectiveness.

Final Design

See the process to add a manual entry to the timekeeping record.

Outcome & Next Steps

Outcome

The app offers users a flexible, intuitive, and easy way to record their time in the most efficient way for them.

Metrics

Data shows that users performed core timekeeping features perfectly across all usability studies and a 50% increase in the number of users able to successfully make an edit to their logbook after implementing design changes.

Lessons Learned

Allow room for user data to guide your design and accommodate their preferred navigation.

Next Steps

Measure app performance and chart progress. Apply user driven data to discover and design additional features.

Case Studies

Mobile phone with timekeeping app floating above an orange and violet background.

Want to know more?

Check out the about page, reach out on social, or drop me a message. Thanks!

About

Steve Carlton

Digital Designer

Work
|
About
|
Contact
Copyright © 2023 Steve Carlton