Welcome to my project! My name is Álvaro and today I’ll introduce you “TimeOff” my project during the 7th week of the Ironhack bootcamp.

My project is going to be about creating a HR Website that will resolve some existing problems in holidays organization.

As I always said, please, do not hesitate to leave your thoughts and comments. Everything will be more than welcome.

Introduction

As I previously said we were assigned HR as a main topic and we had to narrow down to a more specific topic. That’s why I started with some previous interviews to do so during the first week.

My weapons during the project:

· Affinity Diagram

· Empathy map & User persona

· Competitive & Comparative Analysis

· Survey Lean Canvas

· Interviews + Survey

· Google doc & slides

· Crazy 8’s

· Sketch to design my prototype

· inVision / Principle to animate

Once you know my weapons let’s work!

Research Process

While I was working on the interviews I created a survey to help me get some more information about holidays organization in companies.

Competitive and Comparative Analysis

  • What are they missing?
  • What features they don’t have that the users need?

Also comparing with some other companies that do similar activities and that I thought can be helpful for me to have a better understanding of how they work.

This are some companies that I had a look that provide solutions to vacation organization inside companies:

And this are some other companies that can be helpful for me in the future:

After doing some research I started realizing that all the product the companies mentioned above to solve vacation organization work in 2 steps.

  1. User makes a request
  2. Manager approves or denies the request.

This way of doing it can be tricky for the employees because they don’t know if another colleague has chosen the same date as him.

They also provide control about their employees knowing when their are working or not, how many days the have to choose according to the company agreement, absences…

Gathering the results

1. How do you organize your holidays in the company you are working for? — From the survey

Only the 21,4% of the people that replied to the survey uses a Saas to organize their holidays at work and 35,7% think the company they work for don’t have the right tools to organize their holidays.

“We use a paper calendar, I know, sounds outdated.”

“When there are disagreements between us, our boss decide the dates.”

“There is no way to control/know when two people in the same job post take vacation at the same time. The system doesn’t allow to have an overview of all team members, so you can distribute according to who is on vacation and who is not.”

The people I interviewed and also some answers of the survey said that Saas are tricky to use sometimes because most of them are used using a request in the beginning from the person that is choosing the dates and in between they argue with each other. When they agree with each other the supervisor accepts it. Also, when there are coincidences between colleagues the supervisor needs to cancel so they can make a new request.

Using paper calendar can be tedious, “when you put a wrong date you need to use a new one” said Daniel. And it also can be tedious for the supervisor to see all the different paper calendars (using different pen colours) and put all of them in one to see if there are coincidences or not.

“It could be good to see when others have holidays instead of waiting for my boss to tell me.” Answer from the survey.

Creating a User Persona

An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. It externalizes knowledge about users in order to 1) create a shared understanding of user needs, and 2) aid in decision making. (https://www.nngroup.com/articles/empathy-mapping/)

Considering what I’ve got from the empathy map and the information I gathered from my research results I decided to create Tom.

Tom is a passionate Bartender currently working in a 5 stars hotel in Amsterdam. He loves his profession as much as traveling and every time his job gives him a chance he loves to go to a different place to discover new cultures and people.

Tom is an honest and a hard worker person, he always wants to provide the best experience he can to his customers. He is really good managing his finances and he has a great salary so he always has money to travel.

Tom Grey — Employee

Problem Statement

  • SME’s use paper calendars and/or Saas to organize employees holidays.
  • SME’s employees don’t like the way the company they work for organize their holidays.

Looking to my discoveries we can rephrase the problem statement following the formula:

user need a way to goals because research insights

“Employees need a fast and organized way to receive holiday approvals because the existing methods take longer and their preferred dates may coincide with other coworkers.”

Until that point everything was fine but, while thinking about the problem statement I realize that I would probably need a second user persona to also suit managers need because until know I was focusing on the employees because on interviews most people were employees...

Creating the second user persona

Elsa is a professional Food & Beverage Manager currently working in a 5 stars hotel in Amsterdam. She loves taking care of herself, working out, eating healthy and organize her life in the best way possible.

Elsa wants to treat their employees nice because of some bad experiences she had previously and give the customer the best experience in Amsterdam. She is very organized and she hates when she has to work at home.

Elsa Wint — Manager

After defining the second user persona it was time to create a new problem statement for Elsa which can be rephrase:

“Managers need an efficient way to organize their employees holidays because they have to gather the information from different channels and manually sort it.”

Fine, now breakpoint, should I focus on the manager or the employee? Should I focus on both? Of course on both…

Features Brainstorming

  • Calendar overview. (both)
  • Holidays left & holidays they choose, colleagues holidays
  • See in real time what the users are doing in the calendar (Google drive) (both)
  • Create and erase request (Tom) — Create, edit and erase (Elsa)
  • Chat (both)
  • Notifications & emails (both)
  • Team working hours
  • Connection with other calendars (both)
  • Birthday reminder (both)
  • Team creation (Elsa)
  • Signing at work (Tom)
  • Document control (Elsa)
  • Deadline for employees (Elsa)

After thinking about TimeOff features was time to create a Scenario.

Scenario

Imagine the following situation for a moment:

Is January and Elsa wants to start organizing her employees holidays as soon as possible so they can start booking everything they need or just deciding what they will do. The company introduced a new tool called “TimeOff” so she needs to start using it. She needs to enter in the app and let their employees know they need to enter the dates they want before the day 15 of the month.

Tom just realize he has a notification from Elsa in “TimeOff” so he enters and need to make a request from 10/02 to 23/02 for the moment because he planned to go to Barcelona.

And after creating the scenario it was easy to define the user flow that needed to be done…

User flow

  1. Create a new period to introduce holidays and notify employees (Manager)
  2. Notifications for Manager and Employee
  3. Choose dates on the calendar

Paper Prototype

The idea is to generate as many ideas as possible within a short timeframe, focusing on quantity of ideas not quality, and then once you’ve got a bunch of divergent thinking on one topic, to begin converging on some winning ideas by voting on the favourites.

Manager view

You will se how my design changed after testing it. For example the two options on the Managers Option Menu.

Once I had the manager view according to the user flow I started creating the employee view.

Calendar and Messages view for the employee

After testing the first version of my prototype I realized that the employee view was super easy during the testing but the manager view was difficult. So UX Writing problems, and some options weren’t clear enought.

I made some changes and I started creating the Mid-fi version on Sketch.

Mid-fi to High-fi

A group critique, according to the Nielsen Norman Group, refers to “analyzing a design, and giving feedback on whether it meets its objectives.

The feedback from my group made me realize that the messaging tool (chat) was out of the Scope, so I decided to included in the 3 month roadmap and also “See in real time what users are doing in the calendar (Google drive)” wasn’t really helpful for the users so I decided to get rid of that one.

Mid-Fi to High-Fi

I decided to add some filters to make the flow easier for the users and decided to erase the messages feature and because of that, there was no point to keep the calendar icon since there was only that option.

High-Fidelity

The Define team holidays button didn’t look clickable for the users, for them it looked like a category and the images on the categories were distracting for some of them and for others looked like a profile picture.

UI Iterations

After some changes the users could perform the task and it was time to move to the inVision Prototype and animations.

inVision Prototype

Is January and Elsa wants to start organizing her employees holidays as soon as possible so they can start booking everything they need or just deciding what they will do. The company introduced a new tool called “TimeOff” so she needs to start using it. She needs to enter in the app and let their employees know they need to enter the dates they want before the day 15 of the month.

Tom just realize he has a notification from Elsa in “TimeOff” so he enters and need to make a request from 10/02 to 23/02 for the moment because he planned to go to Barcelona.

CLICK HERE TO GO TO THE PROTOTYPE

inVision Prototype

Animations

Principle uses names to create animation, so if you have more than one layer call rectangle, or group on your Sketch file, witch is possible when you export it to Principle will be a mess.

Here is an example of how animations will work on TimeOff:

Animation created with Principle

Insights translated into features

Insights to features
  • Calendar overview, so both users can see and choose dates on it.
  • See in real time what users are doing in the calendar (Google drive), so both can see what dates other people are choosing.
  • Messages (chat), so they can argue with each other when choosing the same dates.
  • Create and erase request for employees — Create, edit and erase for manager, so they can have the desired dates.
  • Notifications & emails for both, to keep users informed about news and changes.
  • Deadline for employees (Elsa), so she can set up a date and have holidays always organized.

And after listing all the features needed for the personas it was time to create a long period roadmap to focus on personas needs and prioritize because of my scope.

The hole roadmap was created according to my research findings except in the case of messages. During a group critiques that I mentioned before we agreed that this feature was out of the scope according to my deadline so I decided to add it in the 3 months roadmap.

3 Months Roadmap

  • Messages
  • Manage, create and edit teams
  • Connection with other calendars
  • Signing at work for employees (requires APP creation)

6 Months Roadmap

  • Birthday reminder
  • Document control for managers
  • Team working hours

Conclusion & key learnings

The project was presented in front of two UX/UI experts at Ironhack with Nevan and Elise, my teachers that I want to thank for the help and support. I have got a really good feedback that I will try to show in the next project.

As a key learnings I will have to say three words; Scope, Prioritize, Organization. In the beginning my idea was too broad and I needed to be organize and prioritize the features that my app needed to have to deliver a good MVP within the scope.

Thanks for reading!

UX Designer & Entrepreneur

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store