UI/UX design for a time tracking web application
Tymewise is a simple yet smart and user-friendly web app developed to help solo-entrepreneurs, small and large teams manage their working time and get insightful reports.
A typical working day lasts nine hours. Do you believe that all this time you or your team spend productively? How many hours per day are you really busy with your work? And has a freelancer worked accurately that time I have to pay for? Are you confident your time is not thoughtlessly wasted on things that don’t make you closer to the goals you want to achieve?
Web App design
To answer those questions, humanity invented time tracking apps, which are gaining more traction recently. Inspired to contribute to people’s productivity, we were excited to create our time-tracker using the best (of course!) design practices.
“First and foremost, a tool designed to track time should value customers’ time they spend to figure out how the tool works,” we thought and aimed to design our product in the most transparent and easy-to-use way.
We didn’t sacrifice important features to achieve the design’s simplicity. On the contrary, we skillfully integrated the most crucial functionality into the user interface, leaving the breathing room and keeping the design light.
The app has tracking, analysis, and team & project management capabilities.
In-depth research underlies any successful project. We analyzed the time tracking apps niche to find out what offerings our competitors bring to the market. Clockify, Toggl, TimeDoctor...The list can count a dozen time tracking products we had checked before tackling our project. And what did we realize? Well...We can do better!
To create the visually compelling and easy-to-use app, which has only crucial functions, our designers’ team went through the important workflow steps.
We intended to cover all these features while not overwhelming the interface. In a nutshell, we wanted to let design breathe.
As a first step, we conducted meticulous UX research to understand users’ needs and identify how our product can satisfy them. We gathered users’ insights through interviews and observations of how people interact with similar products. Based on the UX research data, we built a user flow describing what steps users should take within the products to successfully achieve their goals.
To make the design visually appealing, we collected a mood board of colors and styles that matched the best our idea of a breathing interface that conveys the feeling of freedom. And here is what we’ve done.
Tymewise app consists of Timer, Reports, Teams, Clients, Projects, and Tags sections
The chart shows how much time you devoted to each project within a week. And for more details, you can also check the daily statistics dashboard.
We kept Team, Client, and Project tabs self-explanatory and not visually overloaded.
On the home page, you can note what task you are working on, tag which project or client this part of work belongs to, and switch a toggle button in a Billable or Nonbillable position depending on the job type. You can simply start a timer or add a time entry manually.
On the Reports tab, we found it useful to demonstrate a summary with a more detailed breakdown of time worked and the amount earned.