How a simple conversation with a client about time-keeping led to some late nights, reflection on project tracking & a simple progressive web app…
Good morning/afternoon/evening (delete as appropriate)!
My name is Bryce Wilson; Lead UI developer for the UK Design Team based in Edinburgh. I currently work across multiple projects and platforms and it can be hard to track what I work on and for whom. For the client, it can be frustrating
when they can’t get a fixed timeline on my availability.
Around the same time I was coming to the end of ‘yet-another-notepad’ scribble of loose time keeping, I had a chat with one of the project managers for a fantastic client I work with.
He was concerned that he wasn’t able to have a visible overview of all the contractors and consultants in his team. This is primarily down to the flexibility the project offers to the team; early starts, late finishes, working from home on occasions etc.
This screamed out an opportunity to fill a few needs with one deed:
- Upskill myself on a few new technologies I’ve been itching to try
- Get rid of my legion of notepads with illegible cave drawings and scribbles
- Supply a very cool and awesome client with a solution that will enable them to continue providing us with a flexible working environment
- Demonstrate to the wider community a landslide of user-centered design approaches being developed daily within the UK Design Team (headed up by Luke Jeavons) such as:
- User Journeys – A visual representation of a path a user may take to reach their goal when using a particular product or service.
- Usability Testing – To validate the effectiveness of the design and the way the user interacts with the system. This can highlight potential inconsistencies and issues with the product or service.
- Wireframes – A visual guide that represents the page structure, as well as its hierarchy and key elements.
- Interactive Prototypes – To show how interactive elements will work. Enables the product or service to be visualised, tested and validated before further development.
- + much more
After speaking with some fellow upstanding colleagues, I took it upon myself to define an MVP backlog of simple requirements:
- Allow access to a ‘clock-in’ system via any device and bypass any requirements for an installation
- Login with work email
- Allow manual entries of working hours
- Allow a clock in/out feature
- Keep it simple, avoid that (points in horror at existing time reporting tools in the market)
Given this was a pet project I didn’t want to overreach and take focus away from day-to-day within the Compass project and the Design Team so I gathered my weapons of choice and began.
Frameworks & Services
In order to maximize the time and effort spent getting this from farm to fork:
- Contentful – an AMAZING headless CMS that has insane API control and access. I have utilized this to store and retrieve data in a fully secure environment
- Vue.js – The MacDaddy of JS frameworks. I work with Angular, React, Node, etc and Vue.js slays them all dead. End of.
- Element.io – A clean and simple Vue.js orientated components library for all the basic needs
- Azure – The Sopra Steria single sign-on application front
- Heroku – Free and simple app hosting with CD/CI Pipelines
- Custom Node.js API Service – I have developed a customised API service to enable continuity of other applications I have created (regardless of framework) to knit together user and information
It started with a few hours in the evenings while my expectant wife lay on the couch binge watching Forensic Files (If I suddenly disappear, you know who to point the finger at!) I melted into my coding chair and got to work.
A few nights in and it begins to take shape; implementing simple features such as project and team control which is operated in the Contentful Dashboard. This allows me to add additional projects as they come up.
The first release of the app to my inner circle highlighted some interesting results:
- Observation: One user found it difficult to navigate their way back to the current week & also found it time consuming to try to get to December for example, to input time
- Implement a ‘jump-to’ week selector where it displays the week information; allowing the user to easily jump forward or backwards in time
- Always have ‘current week’ at the top of list to highlight the current week
- Observation: Initial
version did not allow for non-project codes such as holidays, training or meetings to be logged
- Allow time to be logged to ‘non-project’ codes through the same interface
- Allow team leaders to see these days on the team leader view. This allows the project leader to see upcoming days where we might not be utilized. It’s no fun for the client sifting emails and syncing calendars to see why ‘Dave’ hasn’t
shown up today!
Reaping the Hard Miles
A few seasons into Forensic Files (my wife at this point now knows how to dispose of a body in 50 different ways, just saying) and we start to have something testable!
As the app is cloud based I fired out a link to a few trusted amigo’s and it seemed we were pretty close to the mark!
With the intended users now having something tangible in their hands, the next goal was to give the client the keys to the kingdom – an external (or internal) team leader view.
A non Sopra Steria user can be set up within the system to retrieve all entries which are assigned to their project, including holidays, sickness etc.
Given that a lot of our teams are also internal, a Sopra Steria employee can also have a team control panel if they are assigned a team leader role.
After picking a handful of users to test the app, we took a period of 1 week to collect initial feedback and log any issues.
Each user was asked to carry out specific tasks and report back, for example:
- Successful and unsuccessful clock-in/clock-out experiences
- Test on different devices and networks (firewall etc)
- Log upcoming holidays
The feedback from actual ‘live’ usage resulted as:
- Request ability to add ‘half-day’ non-project events
- Improve performance for older Android phones (now complete)
- Return to same week that a logging was added to (now complete)
The client is very happy with the outcome so far and has adopted this very early MVP into the projects daily routine!
There is still A LOT to add to Hourglass but given its been about 40 hours of development from a single developer and some fantastic sound advice and guidance from the UK Design Team – I reckon it’s not half bad!