top of page

Emvee - Timesheet App

How the design for a timesheet app saved time for people while reducing user errors. 
A preview of the Emvee app and an illustration of a person using the app at night.

Time Savings

50%

Deduction in time spent completing tasks. 

Project Overview

During some time off from work in 2020, I enrolled in Google's UX Design Professional Certification Program through a scholarship through Coursera. The course's first project was focused on developing design skills to create a user-centric solution for the prompt that was generated for me: 

 

"A Timesheet App for a Music Venue."

 

While studying the fundamentals of design thinking, I was able to put what I learned into the development of delightful journeys within a fictional app called Emvee. 

 

This study examines the steps and processes to a final design for 7 identified processes required by potential users of the app.

👋 My Role 

  • User Experience (UX) Design Student

  • Responsibilities: research, wireframing, graphic design, prototyping, testing 
     

Problems

  • Users need a quick and easy way to manage work hours. 
     

Goal

  • Let users spend less time managing their timesheets, which will affect team members by syncing schedules to an editable timesheet. Effectiveness will be measured by analyzing the number of manual adjustments made to automatic entries.

1. Empathizing With Users

Observing the behaviors wants, and needs of people, as well as designs and feedback around existing products, provided the opportunity to empathize with potential users as a precursor to the design process.
 

  • Research 
     

📋 Plan 
 
The research plan for the Emvee Timesheet App aims to understand the usability and understandability of the app's timer and manual entry functions, as well as identify any challenges or errors users may encounter while tracking and submitting their work hours. The plan outlines the research goals, research questions, and key performance indicators that will be used to assess the study's success. The methodology includes an unmoderated usability study with five participants who track and submit work hours regularly and consists of a series of tasks and a questionnaire to gather data on the participants' experiences. The participants are a diverse group of individuals of varying ages and backgrounds, and the study will be conducted remotely over two days. The survey results will be used to improve the design of the Emvee Timesheet app and make it easier for users to use. (view plan

🗣️ Interviews​ 

Interviews with four people provided insight into needs and pain points which helped empathize, using detailed personas and journey maps. A diverse group of participants was selected, including two males, two females, and one nonbinary individual, ranging in age from 19 to 55. One participant had a visual impairment. All interviews were conducted remotely, with each participant completing the tasks and questionnaire in their own home. The interviews lasted approximately 45 minutes and were recorded using audio and video. The participants were asked a series of basic questions about their work environment and their current method of tracking and submitting work hours. At the end of the interview, participants were asked to complete a questionnaire about their overall experience with the app. The user interview scripts were carefully designed to gather valuable insights about the app's usability and to identify any challenges or areas for improvement. (view interview script)
 

🔬 Competitive Audits

The audit process involved thoroughly reviewing critical competitors, Toggl Track and Hubstaff, to assess their user experience (UX) and user interface (UI). This included analyzing user reviews and feedback, testing the usability tools, and identifying areas for improvement. Data were analyzed to compare types, qualities, market positions, and tones of existing products. Findings were synthesized to determine their design's strengths, weaknesses, gaps, and opportunities for improvement. 
 

  • What I found:
     

📌 Edge Cases

Patterns and themes discovered from insights helped to identify three common user pain points:
 


  1. Fear of mistakes
    Many users feared that errors in their timesheets could severely impact their lives.


  2. Difficulty 
    Several users expressed frustration with the complexity of the timesheet tools.


  3. Time wasted
    Several users noted that managing timesheets took time away from more meaningful work.
     

💁‍♀️ Personas

I used this information to create detailed profiles for each persona, including their age, occupation, location, personal details, and quotes that summed up their attitudes and motivations. I used random content-generating software to create names and photos for each persona to ensure that the personas were as realistic and unbiased as possible. Frida and Miller represented the app's end users and their goals.

  • Miller is a 25-year-old IT student living in his parent's apartment in Baltimore, MD. While attending college classes, he works as a barback at a piano bar in the evenings. He is motivated to consolidate his daily tasks using a mobile device and graduate to become an IT professional. However, he has experienced frustrations with writing emails to explain mistakes on his timecard and finds the online timecard awkward to use on a mobile device. He believes that there are apps that would make the time-tracking process more accessible, but he is convinced that his management needs to be more current to transition in that direction.
     

  • Frida is a 33-year-old business school graduate and event manager who lives in Washington, DC, with her husband and dog. She prioritizes meeting deadlines and maximizing her earnings. However, she is frustrated by her time on tasks outside her job duties and coworkers who are paid equally for non-work related activities. She hopes to streamline her time management using the app and avoid any potential mistakes that could impact her performance.

🚀 User Journeys

To create user journeys for Frida and Miller, I first referred to the personas I had previously developed to understand their specific pain points and goals. Using this information, I created detailed scenarios that outlined the steps Frida and Miller would take as they interacted with the Emvee Timesheet app. These scenarios were designed to address the pain points and frustrations Frida and Miller had identified and help them achieve their goals. Using personas as a reference during the user journey development process, I created more intuitive and realistic journeys grounded in real people's experiences and motivations. This helped me better understand my end users' needs and design an app that would be more useful and effective.

🗺️ Conversion Map

I used the information from their personas to identify key moments in their experience with the app and mapped out the steps they would take to accomplish their goals. I then created a flowchart, or conversion map, to visualize the user journeys and communicate the design plan and list of screens to stakeholders for feedback and collaboration. This allowed me to understand the end user's needs and motivations and create a design that addresses their pain points and helps them achieve their goals seamlessly and intuitively.

Screenshot 2023-01-04 at 7.33.48 AM.png
Screenshot 2023-01-04 at 7.34.13 AM.png
Screenshot 2023-01-04 at 7.34.30 AM.png
Screenshot 2023-01-04 at 7.33.58 AM.png

2. Starting the Design

To begin the design process for the Emvee Timesheet app, I used a combination of traditional and digital design techniques. I started by sketching out quick wireframes on paper, which allowed me to quickly explore multiple layout ideas for each screen. I then tested these paper wireframes with real users to identify the most intuitive and user-friendly layouts.

Next, I selected the most effective layouts and converted them into digital wireframes using Figma. These digital wireframes provided a more organized and polished interface for the app. Finally, to further improve the design, I conducted user testing with the digital wireframes to identify any areas of the experience that users needed clarification on.

Finally, I used Figma's prototype features to program the digital wireframes into a low-fidelity prototype. This allowed me to observe users interacting with the design and provided valuable insights into the overall user experience. 

The prototype allowed me to test the following tasks:

  1. Start timer to record work hours 

  2. End timer to save work hours

  3. View the timesheet to verify recorded hours 

  4. Add work hours manually 

  5. Save manually added work hours 

  6. Submit 16.34 hours 

  7. Undo submit action

Screenshot 2023-01-04 at 7.35.10 AM.png

A photo of my visual space used to design with empathy.

3. Usability Study

To improve the usability of the Emvee Timesheet app, I conducted user testing with five participants. I asked each participant to complete a series of tasks using the prototype and recorded their thoughts, feelings, and emotions as they completed each job. I also recorded quantitative data about their click paths to understand how they navigated through the app. Through this process, I could identify specific areas of the app that were causing difficulty or frustration for participants.

Some key findings included the need for the end-time function to be quicker, fewer visual options, and for the start-timer role to be more identifiable. Participants also emphasized the importance of considering accessibility in the design process and the need for a clearer understanding of the 'add' button functionality.

4. Refining the Design

Based on the insights gained from the user testing, along with an alignment with industry-leading guidelines, I made necessary changes to the low-fidelity prototype and developed mockups and iterations of mockups. These iterations were refined based on additional feedback until the final design was complete. To ensure that the app was accessible to all users, I also considered various possible accessibility issues. The final design, which included a graphical user interface with defined colors, layouts, and content for each screen, served as the foundation for the high-fidelity version of the app.

I started by gathering feedback on the mockups from my peers and design professionals. This collaborative process helped me to identify areas of improvement in the design. I then worked on iterating the design, making changes based on the feedback I received. Each iteration was followed by additional input from my peers and design professionals to ensure that the user experience was as strong as possible.

To develop the component library for the EMVEE Timesheet App, I first identified the key elements that would be consistently used throughout the product, such as buttons, icons, and graphic themes. I then used design software to create a library of these components, ensuring that they were all consistent in style and aligned with the app's overall aesthetic. This library served as a reference for the design team as we worked on the various screens and flows of the product, helping to ensure a cohesive and consistent user interface. In addition, by creating the component library early in the design process, we could streamline our work and efficiently implement design decisions throughout the development of the Emvee Timesheet App.

To create the high-fidelity design, I reviewed the usability insights and feedback gathered from the user testing and iteration stages. I used these insights to improve the structure, focusing on creating a user-centric experience that was quick, intuitive, and accessible. I also made a component library, which included a collection of icons, graphics, and themes to help keep the user interface cohesive throughout the product. Once these changes were made, I created a refined design ready for developmental reference. This design was carefully crafted to ensure that it would be easy for users to navigate and complete their tasks efficiently.

Screenshot 2023-01-04 at 7.35.37 AM.png
Screenshot 2023-01-04 at 7.35.49 AM.png

5. Final Design

Screenshot 2022-12-31 at 12.47.12 PM.png

For the final design of the Emvee Timesheet App, I used the insights and feedback gathered from the user testing and feedback sessions to create a user-centric design that addressed the pain points and challenges identified during the research phase. This included streamlining the end-time function and reducing the number of visual options to make the app easier to use. I also focused on making the start-timer function more identifiable and ensuring that the app was accessible to all users.

6. Going Forward

While preparing to launch, it is important to usability is important to optimize the design for P2 iterations such as:

  • Group navigation menus to the top of the user interface.

  • Continued usability testing will provide opportunities to improve the design over time. 

If you have any further questions about the Emvee Timesheet App case study or would like to discuss potential collaboration opportunities, please feel free to contact me at bradyux@gmail.com

bottom of page