This is TIMETENT
Did you know employers lose 17% of new hires in 90 days? and pre-onboarding increases retention 50%?
TimeTent is a new HR web app improving pre-onbaording and onboarding creation. A way to help HR workers in companies by giving them a toolkit to create content through a timeline.
My brief this time, as the solo ux product designer, was developing an On-boarding App for Human Resources within 10 days. It was a generative design process so I had the opportunity to explore what as out there.
The steps I followed…
Now, let’s get into it.
RESEARCH
DEFINING
Once I had the research results everything boiled down to the pain points to find struggles people were facing.
PAIN POINTS
Considering the summary and the full research my main pain points were:
🧗🏻 Employees feel disconnected due to the lack of on-boarding.
👣 Employees feel lost because they don’t know what’s going to happen until last minute.
🙆🏻♂️ Employees feel alone due to the lack of social guidance during the first days.
👨🏻⚖️ HR managers would like to do more, but they are doing other things and lack the time to organise the whole process.
🌪 HR managers lack a clear organisation of the process.
🕐 Stakeholders don’t have time to be part of the on-boarding.
PROBLEM STATEMENTS
The process was putting together multiple possible statements and swapping parts of them. In this case I am trying to create a new Minimum Viable Product (MVP) which can be managed by new hires and HR managers. Therefore, I created two problem statements:
”New hires need a way to seamlessly integrate into their new role because they feel isolated and disconnected in the work environment”
“HR Managers need a fast way to support new employees so that they feel connected and integrated in the work environment.”
PERSONA
Personas are a very nice way to understand your problem by getting to know who you design for. I wanted to create a persona for each problem, matching the characteristics of my interviewees and desk research. Now, let me introduce you…
IDEATING SOLUTIONS
During this part I used the following three tools, which led to defining the MVP solution.
1. Task Analysis (black box in the picture below)
This analysis is to think of all the possible features for the user needs to solve the problem statement. I came up with different features based on every pain point, this way I had a bunch of them to combine or prioritize.
Value matrix (matrix in picture below)
This is very useful for me as designer to see what has more potential and value for both the user and business. Once I finished the task analysis, I positioned each of the tasks according to their value. Here, I was considering what people during the research had pointed, as well as, what could be an optimal solution.
MoSCoW method (colored lines in picture below)
It helps to ultimately prioritize all the things in the matrix into must-should-could-won’t do. I separated things into value lines for both sides, business and user, then every thing in the top right is what you should focus on. The rest can be things to add in a future roadmap.
2. Solution
The prior analysis of possible features was the base for the finale solution statement…
“Organised Toolkit to send relevant content to the employees. It is easy to make, simple to understand, and fast to handle”
This feature allows Núria (HR Manager) to add text, upload images, videos or links into a timeline. This timeline of content then is shown to new hires as their first contact after signing the contract to create a proper onboarding.
In the app it would be possible to introduce the team, send documentation, add the first days calendar, or whatever you needed. Everything focused on making the on-boarding easier and smoother for both parties.
On the one hand, It makes the new employee feel already part of the company and It reduces anxiety. On the other hand, It reduces the time invested for HR Managers during the first weeks guiding the employee, as well as a new opportunity to integrate them with the company culture.
For this idea, I decided to create the flow based on the HR side of things, as it is were all the action happens to create the onboarding process. Having two personas and problems statements has been very useful to get to this point.
PROTOTYPE
In the next link you can find the prototype. What Núria wants to do here is to create a new on-boarding process for Laura, a new junior marketing manager in the company.
She wants to create a two step process, first adding a welcoming text and a video introducing the team, and second, adding text and a calendar link for the first days.
Once she makes the on-boarding she sends it to Laura.
When creating the web app prototype I used three main tools.
1. Interface competitors
I looked for companies that weren’t necessarily direct competitors, but that had user friendly content creation interfaces. For those I chose three web apps that are very intuitive and easy to use which are Canvas Design, Figma Software, and Notion. They were a nice starting point for me to think of possible flows and inspiration for the crazy8s.
2. Designing Paper Prototype
Possible initial layouts I came up with the Crazy8s based on the interface competitors.
3. Concept
The layout is very important, but we also need our colours to shape our web app. I started by creating brand attributes the MVP should transmit: save, professional and cohesive. The three brand attributes were something I wanted the new hire and HR team to feel.
Based on the attributes I created the concept “Coffee shops”. Then I played around with mood-boards, colours and typographies to make the following style tile…
The Style Tile is the compilation of the concept, where you can see the chosen font family “Source Sans Regular and Bold”, the main and secondary colors, and the pictures where I got the inspiration from.
In this part I also created the theme TimeTent, which comes from time management and content, united into the word TimeTent. As the name sounds like tend and it is about time, this was the resulting logo which looks like a sun clock as well:
4. Iterations
The last part of this case were the iterations, there were many, but I will only show the main ones. This is one of the most important steps in creating an MVP, it is where I see in real time how it works in action with users and their interactions. This is how I see where they feel lost and confused to fix my prototype design.
Mid/High-Fidelity Iteration
Mid/High Fidelity to High-Fidelity Comparison Iteration
LOOKING FORWARD
It has been an intense project where I learnt a lot. It challenged my creative perspective, which is one of the best things that can happen to us as professionals. The main learnings for me were:
→ 👑 Reviewing market trends, competitors, and internet layouts is one of the best practices to train your eye for design.
→ 🙆🏻♂️ The more I do this the more I learn from interviewing.
→ ☕️ Coffee breaks work really well to come back with a fresh view.
→ ✅ Designing for multiple personas and problem statements.
Thank you very much for reading this far. I would like to know your thoughts on it? Do you have any recommendations or different approaches?
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
Here I leave the link to the full report.
