HR Project — UX/UI Case Study

Álvaro Alcaraz Delgado
Feb 26 · 11 min read

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

I had to work during 2 weeks in this project, this time instead of days or a week like previously we had two weeks! Why? Because the first week was to find some companies to start the research process and schedule some interviews and the second was to actually work on the project.

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

After two interviews I discover the topic I wanted to base my research. The employees I interviewed told me that companies had big issues when it comes to organize their employees holidays and that needed to be solve.

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

I decided to make a research about the competition, how their products work and what can I make different.

  • 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

Interviews and the survey showed that most part of the employees have problems when organizing their holidays at work. Some companies do it by using paper calendars, other companies are owners of their self developed Saas or they pay for this service to other companies.

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

To help me creating a user persona my favorite tool is the empathy map.

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

After the research, having Tom in mind and all the data obtained I came out with this conclusions about Small-to-Medium Enterprises (SME’s):

  • 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

I only interviewed two managers during my research process so I had to schedule new interviews to understand a bit more about the problems that the manager may have and after that I created Elsa.

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

So, what features do I need to include to accomplish Elsa’s and Tom’s needs? This are some ideas

  • 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

According to what I have learned through my research process I decided to create a scenario to be used in the followings test and iterations with my prototype.

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

We it comes to start ideating and prototyping the most useful tool is the Crazy eights.

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

Step by step I was getting close to the final version of my MVP (Minimum Viable Product) but after finishing my Mid-fi prototype and testing it we normally do “Group critiques”.

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

More iteration was done in some buttons that didn’t look clickable, for example the one on the manager options and the pictures on “My holidays and Next holidays” were changed for icons.

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

Now I am ready to show you my prototype but going to the prototype remember the Scenario introduced before:

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, made for the devil was used to make this animations, as I already said on previous posts. Why I am saying that?

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

I am really proud of the work I have done during this week and the MVP that was delivered.

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!

Thanks to Héctor Rebollo Bollullo

Álvaro Alcaraz Delgado

Written by

UX/UI Designer / Tourism background.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade