Web Application
Office World - Website
This page works as home page of the system where we provide user with office world android application download button, simple explanation how the system works, support link, about link and various social network button.
Office World - Login Page
This page works as login page for manager to access office world manager page. The system only use email address and password that administrator use when they register their company in office world.
Office World - Registration Page
This page works as the registration page for any company or organization that interested to use the system. Basic information like full name, email and password is needed before registering their company detail. On the company detail we use map to register their company location instead of address like any other system, by clicking any point on the map, the system will register their latitude and longitude point to database and use that as location for the company.
Office World - Main Page
This page works as main page for the manager to see their employee’s activities. There is two column, first column is summary where office world will list latest activity of employee’s, activities like check-in and check-out where the list is listed based on the activity time. The second column is where the system reported employee’s that located outside of the office. There is also various features that listed as main menu in the navigation bar, first is home button, where the manager can access this page from any other page. Second is employee, where the manager can see employee list and also employee location. Third is Social button, where manager can see any activities and statuses that employee’s may posted on private social network of the office. The last one is Support pages where manager can ask office world administrator about office world system. There is also small boxes button under the company name, where clicking employee will be directed to employee list page, map will be directed to employee location page, performance will directed to performance page, and settings will directed to settings page.
Office World – Employee List Page
This page works as employee list page, where manager can see all the employees of the company. There is also two button under employee list where the first button with title “Add new employee” where manager can add employee by entering their employee’s detail. The second button with title “Allow employee to register form Office World app” is button to generate authentication code, by having this code, employees can register themselves through their smartphone to the office world system. There is also second table where office world will list any activities in last 24 hours.
Office World – Add Employee – Step One
This page works as employee registration page step one, where manager can enter their employee credentials like email and password. After entering that, the manager can click next button.
Office World – Add Employee – Step Two
This page works as employee registration page step two, where manager can enter the employee name and also uploading their employee profile picture. After that, the manager can click send registration button.
Office World – Generate Authentication Code Page
This page works as Authentication generation page, on this page, manager can see the authentication code where and also the expired date of the authentication code.
Office World – Employee Location Page
This page works as employee location page, where manager can see their employee location. Every single red pin in the map represent one employee. So for example in this page, there is two employee located in the center of the map.
Office World – Settings Page
This page works as settings page, where manager can change their name,
and password. They also can change the time zone that suit their location. With this time zone, every pages that use time and generated by office world will refer to this time zone settings.
Office World – Employee Profile Page
This page works as employee profile page. Manager can see various information such as name, email, latest activity, and latest location of the employee. On the map, office world will list all check in location of the employee. The latest location will be represented by the green pin, second to latest is red pin, and third to latest pin is yellow pin, and other location after three latest is represented by gray pin.
Office World – Employee Report Page
This page works as report page, where manager can see their employee performance throughout the month. There is simple statistics listed under statistics tab. Statistics like, workings hours and average working hours and also number of check-in during the months. Below the statistics, there is gannt chart, where the manager can see what date that employee working. And the last one is the detail table, of all the employee activities. What time their check-in and check-out and how long they working for that particular check-in will listed here. All the time listed here will use the time zone that manager selected in settings page.
Office World – Employee Report Page
This page works as performance page. Where manager can see their employee statistics and also their employee performance. And the unique data like employee’s coming early, check-out late, check-in late also listed on this page.
Android Application
Office World Android App – Splash Page
This view works as splash view. Every time the application opened, the view like this will be displayed, the view only contain office world logo and smartphone attendance system text.
Office World Android App – Login Page
This page works as Login view. On this view, user can login with email and password that they got from their manager. Or if they previously register themselves on office world android application they can use that credentials to login.
Office World Android App – Sign-up Page
This view is Signup page. On this view any individual or employee can register themselves to the office world. Basic information like profile picture, name, email and password is needed for the registration. Authentication code input form also available for employee that want to register themselves. On this page, the profile picture will be uploaded to Amazon S3 and the link to the profile picture will saved in user table in office world database.
Office World Android App – Check-in Page
This view is Check-in page, on this page the location of user will be displayed and represented with blue dot in the middle of the map. If the user is individual, the individual title will be displayed under the map, otherwise the company name of the user belong to will be displayed here. For example on this page, “Thsico.de Corporation” is a name of the company that users belong to. Below that is address of the location. And the accuracy of the location also displayed below the address.
Office World Android App – Main Page
This view is Profile view, on this view user able to see their own profile picture, their name, email address, and current status. This view is mainly used to replace id badges that usually employee use to check-in and check-out in other system.
Office World Android App – Performance Page
This view works as performance view, on this view user can generate their own report, and see their own performance during the day and the month. First button from left in action bar is Generate report button, and button after that is refresh button, where user can refresh the data displayed in performance tab. Statistic on this table divided based on the time first is today and this month data. Information like how long you already checked-in, how long to meet minimum working hours, and previous check-in data. Below this month tab, information like number of check-in, minimum working hours in a month, and working hours in a month will be displayed.
Office World Android App – Social Page
This view is Social feed view, on this view use can access their private social network or if they are individual, the data will use location to find any user that may also use Office World Android Application. Office world will use latitude and longitude point to query the database in MongoDB. Profile picture for every employee or individual user will be displayed. The number of the comment of every activities also displayed on every item.
Office World Android App – Update Status Page
This view is Update status view. On this view, user can post their status to the private social network of their company. If it's individual the status will be posted to the office world network, which can only accessed by anyone in the area with office
world android application.
Office World Android App – Social Comment Page
This view is social detail view, on this view user can see and delete their status. They can also access the comment for particular status may have. User can delete their status by tapping trash icon in right corner of the view.
Office World Android App – About Page
This view is about and setting view, on this page, user can change their minimum target working hours in a day and a month. Other than that, the user can also contact developer open the office world website, and see the privacy policy.
Office World Development Visualization (Animated wtih Gource)
