Redesign the punch in/out app for Nowsta to enhance UX and ensure UI consistency across all Nowsta products

Team

End to end Product Designer under leadership of Senior Designer

Client

Nowsta workforce management Software

My role

End to end Product Designer

Project duration

4 months

Background

Nowsta is a workforce management platform designed to streamline scheduling, time tracking, payroll, and communication processes for businesses with hourly workers.

What does Timeclock app do?

It's an app developed by Nowsta that allows workers to punch in/out for their shifts, manage breaks, view shift instructions, and access relevant information about their shifts. The app is typically set up by event coordinators at the required location, enabling employees to clock in/out for their shifts and take breaks. This app is part of a software suite that syncs with workforce management systems to monitor employee time and attendance.

Defining clear project goals:

  • provide good usability (requiring no prior training to use the product)
  • maintain UI consistency across Nowsta products
  • maintain consistent and accurate records of punch-in/out and break activities for a worker's shift
  • disseminate instructions at clock-in moments
  • ensure the speed of the action process and accuracy of identity verification

Solutions provided by competitors are good, but they do not have features that make Nowsta stand out

To understand the problem scope better, I conducted a competitive research analysis on similar apps. I focused on their features and solutions they offer to their users.

Immersing myself in the user's perspective

To familiarize myself with the App, I started using it as if I were an end-user. This approach quickly revealed several noticeable aspects of the application's usability and functionality. Moreover, I performed a heuristic evaluation and looked into the app reviews on both the App Store and Play Store. In addition to this I engaged with the customer success team, discussing what complaints and suggestions they usually receive. Through these efforts, common patterns emerged.

App flow with research insights

Narrowing down UX parameters

Utilizing insights from usability testing and research, I crafted 2 personas: a catering manager who needs to set up a time clock, and an on-call hotel housekeeper who needs to clock in for her occasional shifts:

  1. John, staffing manager at a catering company, requires a fast and efficient time clock solution for employees to clock in/out and take breaks. It needs to be easy to set up and use, as well as fast and accurate.
  2. July needs a simple, quick method to clock in/out for her shifts and wants to ensure she gets paid accurately and on time for the hours she worked.

Coming up with a solution

Before diving into design, I decided to create a Story Journey Mapto het more insights into user behavior. With a focus on anticipating the thoughts and questions that workers might have during their journey, I commenced the design process. Mindful of the discussions with the team regarding product vision, goals, and requirements, I shaped the design to align seamlessly with our shared objectives:

  • How can we make the app more intuitive, that eliminates mistakes and need for prior training
  • Can we automate any part of the flow?
  • How can we speed up action process?
  • How to disseminate instructions at the right moment without ruining the experience?

Exploring some ideas

With the personas and products requirements in place, I initiated the ideation phase by sketching various concepts on paper. During this stage, I maintained open communication with the Senior designer and key stakeholders, incorporating internal feedback to ensure alignment with their expectations and branding guidelines. Here are some examples of sketches and the key screens:

Low fidelity wireframes

Soft wireframes depicting the selected solution, which integrates the existing app logic while exploring enhancements based on insights derived from research.

Ideation while going into high fidelity space

Defining success

In this project, the team opted for a conservative approach, avoiding the risk of developing an entirely new product with a new logic and flow. Instead, our focus was on enhancing the app's visual aesthetics and functionality while ensuring improved usability. The challenge lay in discerning whether this redesign truly elevated the user experience, transcending a mere cosmetic facelift. So how do we know that this redesign is an actual UX improvement rather then a new modern look?

  • 100% task success rate
  • task completion time (clock in Time-on-task , with health screening survey - 30 sec)/(without health screening survey- 15 sec, start/end break 15 sec , clock out - 15 secSUS score - 90close to 0 error rate
  • 5 positive statements from CS team

Other Projects

Read case study
Read case study