eLOG: A time-tracking software developed based on user-research

Design Thinking Approach — Case Study

Having reached more than 3/4 of the course at Ironhack, we were assigned a third personal challenge, that consisted in developing a desktop web app, using a user-based research approach. The project was spread onto 2 weeks, one dedicated to primary research, and the second one dedicated to getting down to the real business: prototyping, testing, iterating and delivering.

SCOPE

For this project we were asked to put ourselves in the shoes of a startup employee, which was looking to launch a software as a service (SaaS) desktop web app for companies to use internally. Therefore, I conducted some market research and met with some employees from different companies and positions, in order to determine the needs and then develop an MVP based upon my findings.

So far, I have been designing for customers as end user, but for this project I had to consider multiple kinds of users:

  • Businesses —decision-makers, convince them that I was proposing a valuable service
  • Employees — primary users of the potential new service

My first round of interviews done, I was able to identify one major issue: time tracking. So, in order to gather more insights on that topic, I ran a second round of interviews allowing me to gather more detailed feedback based on which I was able to define the main features I was going to incorporate in my web app: automation, project statistics, and an easy and accurate invoicing system. I first designed paper prototypes and then mid-fidelity screens, that I have tested among users. Then I moved on to high-fidelity screens to create my final MVP, which I made interactive using InVision.

PROCESS

In order to stay organized and on track for this project, I have used the Design Thinking Framework, guiding me throughout the whole design process, and thus followed 4 main steps: Discover, Define, Develop, Deliver.

1-DISCOVER: RESEARCHES & INSIGHTS

As mentioned previously, I first conducted some research in order to identify the needs. To do so, I have ran about 6 interviews with people from different positions and companies. This helped me in gathering rich insights from various points of views.

From there, I already had a clearer understanding of what were the issues people were facing on a daily basis at work. Turns out people struggle a lot with time-tracking. Indeed, most of the interviewees stated that it was a time-consuming, error-prone and inefficient/inaccurate process. They even confessed that they were often forgetting to log-in their hours, leading toward misestimations. On top of that, the interviewees also claimed that they were tired of using multiple and complex softwares, and that they would like more visibility on projects progresses.

User Insights & Features (yellow)

That in mind, I stepped back and started thinking about what features could address these multiple issues. That is when I realized that people actually needed a more automated process, combined with a reporting view, and finally, an easy and accurate invoicing system.

2-DEFINE: USER PERSONA & PROBLEM STATEMENT

All this information allowed me to create two user personas characterizing my target groups. One primary, from the point of view of managers, and a secondary, from the point of view of the employees.

So I created John, an eConsulting Manager, and Elsa an eConsultant. Both very conscious about their clients, and willing to better organize themselves (their weeks and workload) to deliver quality, accuracy and transparency to their clients. They both feel overwhelmed by the current manual time-tracking process, which often leads to inaccuracy and inefficiency. Indeed, on the one hand, John often has to remind his team to log-in its hours, while on the other hand, Elsa often under- or overestimates her hours because she keeps track of it manually and non-thoroughly.

Then I was able to formulate two clear problem statements related to each’s situation.

  • Problem statement (John)

Consulting Managers need a more global automated way to track and manage their team’s time, because they want to deliver quality, accuracy and transparency to their clients.

  • Problem statement (Elsa)

Consultants need a more automated way to track and manage their time, because the current manual processes are time-consuming and error-prone.

3-DEVELOP: SOLUTION, PROTOTYPE & TESTING

I was now fully aware and had a clear view of what I could offer to these types of persons and jumped into ideating and sketching. And I came up with eLOG: a semi-automated time-tracking software, offering projects overviews/progresses along with an easy invoicing system.

In order to make valid design decisions, I took a look at existing softwares on the market, to see how they were organized, and what services/features were they offering. This allowed me to decide and prioritize on what primary feature should be designed first on my page. Also, it helped me figure out what layout/navigation I was going to give the users.

I have decided to give each feature its dedicated tab on a side navigation bar, in order to ease the flow for the user and at the same time to leave more room for content in the center of the screen. On top of that, in order for my new software to have an added value, I decided to add a plug-in, which would allow the users to record/track their time, even if they are not in the web app.

I first made some low-fidelity paper prototypes, which I tested and then quickly moved onto creating mid-fidelity prototypes in order to gather more valuable and realistic feedback. I tested them and iterated before moving onto high-fidelity screens.

Below you can see some iterations of the Timesheet page, I played around with the layout, changing the place of the buttons, and ultimately decided to go for a more visually option, adding a call to action button for adding a new time entry.

Mid-Fidelity — Timesheet Tab Iterations

Regarding the statistics tab, I first decided to go for a more simplistic screen, which was in fact forcing the users to use the filters in order to generate any the stats. The feedback from the testing led me to introduce an intermediary page, showing a preview of each ongoing project and giving quick stats at the same time. Indeed, by clicking on the stats tab, the users expected to see stats, while my first design really was not showing any stats at the first glance.

Mid-Fidelity — Statistics Tab Iterations

Then, after clicking on a specific project, you would get a deeper overview of its stats and progress, where the users would also have the ability to share theses results with the clients in order to maximize transparency, which was a very important aspect as well for the interviewees.

High Fidelity — Statistics Tab Flow

For the last tab, the invoices tab, I had followed the same structure as the stats tab, again, forcing the users to use the filters to generate their invoices. After testing, I decided to show the latest time entries, where the users would have to filter in order to find the entries related to a specific client, project and timeframe to then export their invoices.

Mid-Fidelity — Invoices Tab Iterations

So as to have consistency in my design, I have created a style tile, gathering all the main buttons, colors, and text styles. I have chosen a more or less pastel color palette for the main elements of the screen, using a stronger color (coral/red) for all the clickable elements to introduce some contrast. I went for a rather minimalist design to keep a sense of clarity on the interface.

eLOG — Style Tile

4-DELIVER: THE FINAL SOFTWARE

After testing and iterating a couple of times, I was able to come up with a final high-fidelity prototype (see below).

The scenario used to develop the flow of the prototype is the following:

You are a Consulting Manager and you are busy working, when your coworker reminds you to write an important email to your client, so you jump to gmail but forgot to start timing you task. That’s okay because you have the plug-in in the tool bar of your computer, allowing you to start the time at any moment. Then after sending the email and adding your new time entry, you are redirected to the software, where you can see your latest time entry. Then you want to check the progress of one of your project (Carrefour-Product Launch), so you go in the stats tab where you have to choose for the right project. And lastly, you want to send an invoice to one of you client so you go into the invoices tab to generate that invoice.

TAKEWAYS

Considering the short amount of time for this project, I have tried to stick to designing the main features, but I am aware that the software will need further implementations to be complete. Below, I have listed some future features I would like to build:

  • Add Weekly/Monthly view option in timesheet — Only daily at the moment
  • Develop a Profitability Calculations (ROI) tab to allow resources allocation assessment
  • Develop a Predictions and Estimations tab to allow better predictions for future projects, and scenario testing
  • Add Computer Time Tracking to measure efficiency and attendances of the employees
  • Develop the app version of the software allowing people to log in their hours from anywhere

To wrap this up, this project allowed me to further grow my design skills, by being confronted to a different scenario and having to consider multiple stakeholders at the same time. Indeed, I had to think about each one’s flow and ensure there were some added value for both. And of course, I also had to make sure to develop a visually pleasing interface.

Thanks to Elise Mateu

Charlotte Botermans

Written by

UX/UI Designer, previously e-Business Analyst in a Data Driven Digital Media Agency

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade