The design thinking process for the UX design of our innovative time-tracking app

Our Requirement

Time logging is hardly a new concept for most companies, and it wasn’t for ours either. It’s a business-critical function that needs to be timely and accurate. Our project teams are multidisciplinary, with each team member often working on multiple projects in tandem. Reporting how much time they spend on each project is an important task, helping project leaders keep their teams efficient and maintain budgets. All of this is possible only when employees log their actual hours, at the end of each workday.

  • It allowed people to efficiently add time to one or more projects per day.
  • It provided a means to map the time worked to individual tasks in JIRA
  • Users could view the time totals for a daily basis across the month.
  • It allowed pre-planned leaves to be entered and managed
  • A key complaint from our operations managers was that time entry was not timely. Some of our staff got busy or lazy and tended to report in bulk every three or so days. This had implications for our day-to-day management.
  • The solution worked only from a desktop browser
  • The solution didn’t have the capability to remind users about their missing entries.

Our Charter For A Better User Experience

To address some of these issues, we decided to improve our time tracking system. Our charter was to holistically improve the time-entry user experience (UX) to meet these objectives:

  • More consistency and timeliness of daily entries
  • Removing barriers to ensure the process doesn’t feel like a huge burden to employees.
  • Remind users to update missing entries with a direct call to action
  • Build on initial capabilities to improve the experience by integrating calendar and predictive AI capabilities.

Understanding the user needs

In a typical design-thinking manner, we needed to balance what the business wanted with an empathy-based approach. What were the barriers for employees and were they real or imagined? We wanted to address them through clever use of technology.

First, the business needs

We had a series of interviews and brainstorming sessions with the product owner. We understood the criticality of the tool to making informed business decisions and the pain points. The product owner had put in quite some thought into this, including ideas and near terms as well as longer-term capabilities that they wanted. Overarchingly, the product owner wanted to provide accuracy, convenience, ease of use, rapid entries, and delight.

Next, we understood real users’ usage patterns

Analyzing data

Through interviews and observations, we outlined the patterns of how the previously existing tool was being used. A percentage of users:

  • Updated time multiple times a day.
  • Waited till the end of the day.
  • Many updated time only on being reminded.
  • Users liked to be informed about gaps in their time entries so they could easily address those.

Gaining first-hand knowledge

The UX team used the previously existing tool extensively to obtain first-hand impressions and knowledge.

Conducting an employee survey

With all employees working from home, user observations could not be made. So, we decided to run a company-wide survey to get an idea of the barriers, benefits, and reasons for user behavior.

  • 50% of users record their time at the end of the workday.
  • Two out of three use the tool to check for company holidays.
  • A third of all users go back to history to check the time they spent on previous projects.
  • 77% of users take more than a minute to log time (contrary to our original assumption that the system supported sub-minute entries)
  • 36% of users log time after they have wrapped up their work for the day, i.e. in after work hours.
  • 75% of people are familiar with and prefer the interface of Google Calendar.

Our UX Design Approach and Process

Based on the product owner’s inputs and user-centric analysis, a clearer picture of what we needed to create began to emerge:

  • A mobile app that enables people to update time from anywhere, anytime, even during their downtime.
  • Fast operation so users can be in-and-out in seconds.
  • Reminders with a call to action and targeted ways to accomplish the actions.
  • Drawing the user’s attention on missing or incomplete time entries.
  • Allowing people to plan and report future leaves (again, critical for business resource planning) as well as seeing their own historical data.

UX Design principles applied

To ensure that we would incorporate all our findings into our UX design, we laid down a set of principles:

  • Design a smart and futuristic platform that enables clear visibility of projects and time.
  • Create a seamless experience to log time.
  • Automate repetitive tasks.
  • Innovate new interactions to reduce steps and clicks.
  • Support the use of gestures and swipes to minimize the clutter.

User and Industry Research

We studied the design and efficacy of other time-entry tools and calendar apps including Google’s and Apple’s, and contemporary UX design patterns. We found that existing time-entry patterns fall in one of two approaches:

  • Select the project from a list then select the date and the time spent.
  • Select the date from a calendar and then select the project and time logged.

Initial UI Sketches

Armed with this information and a concept in our minds, we sketched an initial UX design on paper. Our first concept was a free-scrolling interface, with a callout of your current status on the initial screen and a call to action for the day that requires your time entry.

UX Design iterations

With the early designs, we conducted some usability and feedback sessions with the product owner and a few users. We brought in our technical team to understand the feasibility and complexity of some of the ideas. We also engaged other designers from our UX team to provide their input. The designs evolved through multiple rapid iterations.

Final UX Designs

UX design decisions made along the way

We made some inclusions for the benefit of users as we went:

  • A dark mode design for users entering time at the end of the day or after-hours, making the app easier on the eyes for nighttime usage.
  • A high-contrast call to action button to draw attention to the task at hand.
  • Use of color to easily differentiate between projects at a glance.
  • Custom design and interaction systems were developed.
  • Reduced visual noise (through the subtle use of fonts and text colors). This way, only the pertinent information is immediately visible, though a lot more info is visible with slightly more focused attention.
  • Only company holidays (and the user’s personal planned leaves) are visible for future dates.

Innovations and Optimizations

There were a few components and design elements that we iterated through until we got an optimal design.

Duration picker

A component that is used almost every time is the duration picker that indicates how much time the user spent on a specific task. Our original concept was a dial. In the actual design, we initially went with a jog dial.

The layout of a day’s project entries

We iterated a few times on the layout of a day and the entries for that day. Our initial design was to put each entry as a card under the day.

Future Iterations

We plan to keep tinkering with the holistic approach to efficient time recording. We already have Slack and JIRA integrations for the system. We’re also toying with the idea of including elements like birthday indicators and simpler leave balance views. We also intend to use machine learning to predict and pre-populate suggestions on what the employee may have worked on. Some fun additions — like specific icons for holidays (a Christmas tree for Christmas, firecrackers for Diwali, and so on) — are also on the cards.

Conclusion

This project gives us an understanding of the thought process and the hard work in introducing even small new innovative features and interactions for any tool.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ignite Solutions

Ignite Solutions

Our thoughts and practices on design, technology, culture. We help startups design and build their technology. https://ignitesol.com.