MyTime Portals and iOS App
A Time Management System for ESB Networks
The Problem
ESB Network Technicians were using a paper based, labour intensive process to log their time worked, allowances, and overtime. These paper timesheets were scanned, checked by the payroll technician, sent to their supervisor, and finally approved. Often, there were discrepancies due to illegible handwriting etc.
ESB approached Arekibo to digitise this process to speed it up, save money by cutting out manual checking of the timesheets, and give them better analytics.
The Network Technicians are all supplied with an iPhone with many other apps we had designed and built in order to complete various tasks during their regular working day so an iOS app was the natural fit. In addition to the iOS app the client required a desktop portal with the same capabilities and experience as the app for the Network Technicians, a separate portal for the Approvers as well as an admin portal with more functionality around assigning technicians to teams etc.
The Process
There was a team of three working on this project, a UX designer focused on the iOS app, another UX designer focused on the desktop portals, and myself working as the UI designer ensuring that the experience and styling was consistent throughout the entire ecosystem. The UX designers would carry out user research such as interviews and observations before creating low fidelity wireframes. I would then take these low fidelity wireframes and ensure that the experience across the portals and iOS app was consistent and create visual components and screens.
To illustrate the process of designing across the devices I'll go through how I designed the day display component.
Day Display Component
The day display component was one of the most challenging components in this app. At a glance, the user needed to see the day of the week, the date, their progress on completing each day, and what day they were currently looking at while in the day view. After sketching and prototyping different options I decided to keep the component as simple as possible, a circle with the date inside and the letter of the day on top.
To highlight the progress made on completing each day I decided to use a colour based system, the blue border and white fill signifying a day with no entries, the blue border with a opaque blue fill to show a day with some Normal Time added and a green circle to show a complete day once the user has added their 8 hours of Normal Time. I had considered making one day larger than the others to highlight the day you are currently looking at but decided to use a dot underneath the circle as the component wasn’t consistent in the week view with none of the circles larger.
Day Display Component - Portal - Wireframes
The day display component was a vital piece in the user’s flow as well as in the look and feel of the portal. I quickly mocked up different options on paper before selecting options to design and present to the client. The client selected the tab design. The “Back to Week View” call to action was competing for attention with the add time and submit call to actions when it was above the day component so I began mocking up options to integrate this into the day display component.
Rough sketches like the ones on the right are a key part of my design process, allowing me to quickly visualise varying ideas to explain them to clients. Being able to create crude paper prototypes in meetings and workshops allows me to test assumptions early and have clearer conversations.
Day Display Component - Portal - Design
After mocking up various options to allow the user to navigate back and forth between the week review and individual day views I user tested two different options. The design on the right was selected as the clearest option so I began working on designing the component with a style that would both complement the existing portals and the iOS app.
In order to keep consistency with the other portal designs I designed this portal using the same navigation style, background colour and curved corners. I used the colour coding of the day status in each tab as well as the blue bar at the side of each type of entry and general white and blue colours of the iOS app to link this component to the app while keeping the grey background from the other portals.
