TimeWorks

TimeWorks

TimeWorks, a product of SwipeClock, is the system that Bartha uses for employees to clock in and out of work and request time off right in the app on their phones. In theory, the idea is fantastic but in practice, the existing app is extremely slow and unintuitive. Simple actions take far too many taps and every button-press triggers a 1-3 second loading screen. Overall, the app feels like it was programed by developers with no regard for UI/UX. I decided to take this on as a personal project,  both to see what better solution I could come up with, and also to give a little insight into my process when approaching an interface design project.

THE CURRENT STATE OF THE APP

As you can see in the image below, the UI is completely bare-bones.  It's extremely cluttered and there's no consideration for the SwipeClock brand or creating a unique visual experience for the users. Essentially, they've created a moderately functional wireframe and released it as their final product. I think they can do better!

TimeWorksOld
FIRST THINGS FIRST

So the first thing I did was take stock of everything in the existing app. There are many items that are either unnecessary or redundant. I stripped out all the superfluous information and assigned values to what remained. The most important, and highest-value feature of TimeWorks should obviously be the ability to quickly and easily clock in and out. Second to that would be the ability to see and edit time card information, and then lastly, request time off. Going through this process helps me assign an intuitive heirarchy to the elements in my layout.

Once I had each element laid out the way I wanted, my wireframes looked like this...

TimeWorks_Wireframe
BASIC INTERACTIONS

With my basic layout complete, it was time to start thinking about how users would interact with this app. Would I need a hamburger menu? Where should I store some of that extra info that couldn't make it to the home screen? What sorts of animations would increase the user experience? Ultimately I decided to have a simple Slide animation triggered by clocking in and out. The animation is quick, doesn't get in the way, but is a pleasant little interaction that makes the app feel that much friendlier to use. Once that was done I used a Slide the other direction to reveal the profile information that used to be hidden under a My Info button. 

BRINGING IT ALL TOGETHER

My last step was to assign the SwipeClock brand to the elements. Unfortunately, their brand has not been fleshed out as much as I would like, so I took some liberties introducing new colors and textures as needed in order to create a full-featured user interface. I also added pleasant little touches here and there, such as a greeting message that changes depending on the time of day and emojis to the clock in/clock out screens. All of those steps combined create a much more usable app that does its job well and is a joy to use at the same time.

Below you can see a few quick Invision mockups of the final app being interacted with.

ClockInClockOut
Profile