International Finance Corporation

Washington D.C.

Image

Time Recording System

Time Recording System [TRS], is an internal application of International Financial Corporation [IFC] of the World Bank Groups. TRS provides time recording functionality to the IFC staff. The staff records the number of hours for projects for which they work. It also provides the capability to do overtime, stand by, and cross charge hours for eligible staff.
The upgrade project includes the creation and development of a new system design for IFC TRS (Time Recording System), including some functionality upgrades. The upgrade project includes improving the look and feel of the application, improving the usability, reducing ambiguities in system usage, implementing a user-friendly design, and implementing a responsive design for major functionalities in the application.

My role

  • UX Design and Research
  • Prototypes
  • Icons

View Wireframes

Tasks and mission

  • Design a responsive application for recording time of all the employees
  • Allows employers to browse through all categories and their details, filtering with year/month/week/day classifications.
  • Make it easy for employers to get approvals for all overtime and inter department works

Research Goals

  • Meet the employees from different departments and determine the working of the exisiting app.
  • Research existing time recording systems in the industry to gain insight into what type of features can be implemented.
  • From those results, determine who would be useful to the IFC employees. Using current time recording system as a starting point, find out what users’ pain points are when getting overtime approvals.
  • Determine how the reports will be accessed and will be easily available to employees to use this in the mobile browsers.



Low Fidelity Wireframes

These low fidelity wireframes take everything up to this point and organizes the information architecture into something more visual. I used the card sorting and the site map artifacts to help with this task to map out the main screens. I started with the desktop version. The numbers show annotations where interactions that are not obvious require some explanation. View the full size low fidelity wireframes.

Image
Image
Image
Image
Image



Prototypes

After finishing the design,we updated the look and feel along with my low fi mockups to put together the high fidelity mockups you see here. These are just a few sample screens. Interact with the prototype.

Image
Image