UX research and UX/UI design process

Talenty, the recruitment solution

Image for post
Image for post

Alongside six months we have developed an end-to-end project, and now we want to share it with you. This is our story. A story made by a streaming team since the beginning in the frame of the 1st UX/UI Bootcamp at Nuclio Digital School.

The product

Many times team building is not easy. The project’s success isn’t because of people’s capabilities, but the misunderstanding of work cultures or their personal and business goals. If they don’t walk in the same direction, they won’t produce impactful relations.

Talenty proposes to solve the gap between business and applicants when it starts a new business relationship through an objective and qualitative analysis using AI. This way, Talenty reduces economical and time costs during recruitment processes offering their users a transparent, direct, and easy way to face during this critical process.

The problem

There’s an important digital divide that triggers a talent divide: there are more businesses searching for professionals than profiles that match their needs. Meanwhile, the recruitment department follows insufficient strategies to find this talent.

All that said, we decided to focus on the digital divide and how it could be inclusive with different kinds of profiles. On the one hand, we have applicants, employers, and students, and on the other hand recruiters, and training courses. How might we help them with their day-to-day?

The solution

We’ve created a service to match talent and business needs, a product that intends to solve the digital divide connecting people, business, and training courses through personality tests, a service where we can be inclusive with all our users and cover their needs.

The Team

As a team we would like to thank the master coordinators Coral Mena and Adrián Fernández, and our teachers, who were always there, contributing and sharing the best of their experiences and knowledge and helping us every day.

Image for post
Image for post
David (Madrid), Ivette (Barcelona), Beatriz (Barcelona), and Diego (Sevilla) were one of the streaming teams of the UX/UI Design master.

We are very grateful to Nuclio Digital School too for their constant support during this intense process.

UX research

How do we reach the problem-solution?

Design-Thinking and Lean strategies working for the user.

Desk Research

This methodology has gone along with us during the whole project. Although we started this project focusing only on education, the fact that we had to investigate, search, learn, observe… helped us to find more worrying user needs and iterate, informing each step and decision from the primary insight to the solution’s design.

Desk research
Desk research
Desk research (detail): includes statistics, articles, and publications, confirming the problem of the digital divide and the necessity to solve it

The importance of data-driven

We needed to generate data to find and be sure that we were providing a solution to a real problem.

To contrast this information we interview more than 20 people related to training and education to get qualitative data. As a second step, we registered more than 300 surveys generating quantitative data.

Image for post
Image for post
Results of interviews and survey: two research methods that provided us with qualitative and quantitative data. These were decisive for further research into the problem

We wanted to get significant information to start generating our first insights and user personas. We realized that by placing one user in the point of view of the others, and the same with all kinds of users, we were more inclusive and we were closing the circle to being more inclusive, and accurate.

Data-driven decisions were key in our process. Stepping apart our own mental models at this point, we let users be in the center of our process.

Insight

The process leads us to a point where the main question appeared clear:

There’s a gap between applicants and job offers and problems for the companies to acquire digital talent.

User personas

To empathize with our users we created three user personas. This allowed us to understand their gains and pains, and how to focus on affording them a service to benefit them.

User Personas
User Personas
User Personas: Martha (42), Daniel (37), and Lucía (17), guied us to find the solution through their needs and goals

UX Design

Value proposition canvas

This is the point where we could start talking about trying to find a product or service for our users.

We tried to define significant values through customer jobs, observing and analyzing their gains, and pains for those users.

Once defined, we thought about their gain creators and pain relievers to find the product or service we were looking for.

Image for post
Image for post
Value Proposition Canvas: allowed us define a product valued for users, and meets the requirements and expectations of the market.

MVP

To capture a design solution we used different UX techniques to define its appearance.

We defined different features we wanted to include in Talenty but we had to deal with the famous featuritis (excess of features) so we had to reduce them until we got, strictly, our minimum viable product.

Once we had our MVP to develop Talenty, we concreted in a user story mapping which of them have to be on our next releases.

Customer journeys and user flows

We investigated the different journeys of our competitors and tried to focus on their pains to improve them. We also defined our three different user flows, from downloading Talenty to they got their tasks or goals.

Customer journey
Customer journey
Martha’s Customer Journey: we were able to analyze the user’s journey and focus on their frustrations. In order to create a more satisfying user experience

We realized that, for our applicants, the strong point was the test. And, for our recruiters or training courses, the strong point was the matching that we got with the applicant test results.

User flow hints
User flow hints
User flow: the improvements proposed for the customer journey were reflected in the user flow and the IA (information architecture)

First sketches: Structuring our AI and our first wireframes

Once we organized all our features, MVP, and user flows, we began to define the design of the app. To start this process we began to sketch several of the app’s main screens as well the architecture information. This allowed us to quickly explore several concepts for the app layout.

Based on some tests between the team and personal insights, we learned from the sketching phase so we began to design our first wireframes. We made sure to prioritize the features that would best address the needs of the users throughout the app.

Lo-Fi Wireframes
Lo-Fi Wireframes
Medium-fidelity wireframes: provide us a picture of what the final design looks like. So we can get better feedback from partners and developers

UI Design

Inspiration board

Before getting started with the visual design and defining our design system we created an inspiration board. The purpose was to learn about the visual world and gather inspiration from other professional networking and career development platforms.

Moodboard
Moodboard
Inspiration board: looking for what identifies us with the values and personalities of the team

Naming

We connect talent with the future so the word ‘Talent’ should be in the name, the suffix ‘ty’ means ‘the quality of’. We felt this suits the app’s vision and therefore we chose Talenty that also works in other languages like Spanish.

Logo

We wanted the logo to be simple, reflecting how effortless it is to use the app. We chose a paper airplane as a symbol that combines the complexity of origami and taking flight as a symbol of starting a new professional career.

Color palette

Purple color is often associated with power and ambition; and represents meanings of creativity, dignity, grandeur, and independence. We chose it for championing a young and restless spirit in a new technologies context.

Typography

For this project, we choose Intertype by Rasmus Andersson. It is a Sans Serif typeface carefully crafted, and designed for computer screens.

Design System
Design System
The color palette, typography, logo, and icons: we tried to show, through these resources, formality with the friendliest and closest touch.

Icons and illustrations

We iterated several times in the use of icons until we decided the style, shapes, stroke weight… that defined our look and feel. For onboarding, we used illustrations that broke with the formal character of the application to make the experience more user-friendly. They are an important part of the design. They communicate ideas and concepts that should not, and sometimes cannot be communicated with words.

Illustrations
Illustrations
Talenty illustrations complement the message and make the user’s journey more enjoyable

Likewise, we designed the Tests section as a graphic playground to answer all the questions in a challenging way.

Hi-fidelity wireframes

We applied our design system to every single page of Talenty. Each member of the team designed a different section, then we gathered all the designs and edited them to get a homogenous look and feel and achieve the consistency of all the visual aesthetics, providing an optimal experience to the user.

Hi-Fi Wireframes
Hi-Fi Wireframes
High-fidelity wireframes

One of the most challenging parts of the process was to iterate the Information Architecture once we started to design. We had a lot of work to do not missing any information but eliminating all elements that are not helping our users and simplifying our flows in the fewest steps.

Test

Creating a prototype to test Talenty we collected all the designed screens and launched two types of tests: one for applicants and the other for recruiters. On every test, they had to face different tasks such as completing different typologies of the test or apply for a job for applicants, and publish an offer or change an applicant status for recruiters.

We learned the importance of the tests, and with a significant sample, we could study the behavior of our personas. We might reformulate some paths and actions that we considered valid before. Overall we had very good answers, users expect us to develop the application to be able to use it in their jobs as soon as possible.

Image for post
Image for post
Talenty’s prototype detail: allows us to have a real image of what the product looks like not being developed

Conclusions

Conducting user testing and evaluating users’ feedback at various stages helped us to discover and eliminate pain points and iterate the Information Architecture at early stages.

We couldn’t have designed a service for our users without understanding their needs and mental models. UX research helped us to gather all that data to generate an insight to seduce and cover a real problem.

Image for post
Image for post

Emphase creating user personas was really powerful. Understanding their gains and pains helped us to create better experiences.

Users are always right. After analyzing our prototypes with real users we discovered some issues we had to iterate to provide a successful and enjoyable solution.

We hope you enjoyed this article as we’ve enjoyed sharing it.

The seed of a seed.

Thank you!

www.talenty.eu

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