Final product
Let’s start at the end of the story. Here you can find a teaser of the final product. The entire process from Lo-Fi to clickable prototype can be found below. Thank you for considering reading it.
Initial thoughts
A system that manages all your vacations is a thing which can be improved in many ways. On functional level there is a lot done, but when in comes to User Experience the landscape is not so bright.
This example reminds me of the times when we installed Windows 95 copies on 333MhZ PC’s equipped with CD-ROM device which was so loud that the neighbours weren’t that happy about. And this product is worldwide used by millions of users. Not to mention that the company created it and supporting it is the biggest European company by market share.
Deliverables and functionalities
- Creating/editing/removing holiday that would affect all the employees together.
- Assigning specific holidays to specific employees.
- Setup the days/hours/minutes for each holiday.
- Searching field by holiday/employee name.
Time was limited – up to 3 days!
By Design
Lo-Fi ideas to start with
In the beginning I needed some basic building blocks to start with. Selected medium will be tablet – it has same aspect ratio as desktop and it is easily scalable to smartphone. It also implies touch-functionality which is something we have to be always conscious of. In order to create time management system I will need a calendar and events blocks. The structure of the app will be divided in three columns.
In the second iteration I thought more about the calendar and how to make it more usable. First it should contain 2 months and a hint to previous ones so the user will know that she can scroll with her finger up and down. It also has to indicate the today-date and probably to show current, past and future events.
Because the user must be able to interact with the employees also I first decided to make a separate tab for them but afterwards I moved it to the main navigation.
And now comes the most important part of the project – holidays column. First I put an avatar for each event (which can be modified but by default is generic). Then comes the title and the dates. Because of touch-device constrains (no hover event) I hat to think of a way to edit and delete each holiday. After few more iteration I decided to add some color 🙂 .
Hi-Fi prototype
Creation of an event
Obviously the first thing to do with this app is to add some holidays to work with. First way of doing this is by tapping on the plus icon next to the heading of the Holidays screen. The user gets an overlay where she can enter everything needed.
Then I thought – If we have calendar, why not adding the posibility to create a holiday directly from it by tapping on certain date. And even further the date you clicked on will be already fulfilled – brilliant thought. So I added this option to the picture:
Next step was to manage the holidays already created.
Link between events list and the calendar
Meanwhile I came to the conclusion: If we have two columns with events and calendar – Why not connect them? Even just differentiating only by color (which is not good at all for the Accessibility) I linked each event with a date from the calendar by highlighting the period with same color on the the holidays list:
In order to manipulate each entry in the list the user has to tap on it. Then the item gets highlighted with the same color on the calendar. And other events get transparent. The user can edit and delete the holiday by tapping on the buttons below (they are there, because we are working on a tablet and this is the hot zone of the heat map of thumb – clever, isn’t it? ). She can also assign/remove employees from this event by tapping on the plus sign:
Edit screen is presented on an overlay combined with an option to have a better overview of the employees:
When the user taps on “Edit list” – button she gets nice table filled with the employees. Here she can sort them based on demographics and easily relate each employee with his religion or nationality (of course if she shared this information):
One thing that comes to my mind now is that here in that table I can add a checkbox to each country/religion. If the user taps on it all employees from this country/religion are automatically selected.
Problems I ran into
Of course I had moments when I needed to stop and go back. One of these was the edge case if two or more events start on the same date. How should I mark them on the calendar. I decided to stack them. First the longest at the bottom then second longest and so on. If there are two or more holidays which are starting on the same day and have the same duration then I will randomly stack them and if the user highlight one of them it will appear at the top.
Because I wanted the functionality to start an event by tapping on the calendar I had to scratch the possibility to tap on an already created event on the calendar and select it, because if the user tap on a certain date on the calendar she creates a new holiday. The selection from the calendar of already created events was also not possible, because of the previous problem with overlapping holidays.
That was it. If you want to play a bit with the actual prototype in Figma you have the pleasure here
Thank you for reading and watching!
Ivan