The challenge

The challenge was to propose a solution to help connect young people from Brazilian low-income neighborhoods to their first job.

This challenge was chosen due to the relevance of the theme and its potential to propose a positive social impact. As a result, we developed a prototype of a website that focuses on improving the qualification of young people by sharing job opportunities and offering personalized suggestions for free courses.

Current scenario

With an unemployment rate of 22,8% among Brazilians with 18–24 years old, (Much higher than the national unemployment rate of 11,1%) (PODER 360), the challenge proposed can be classified as a wicked problem, because it involves many factors and stakeholders, so it’s not possible to find one single solution that can solve all aspects of the problem at once (ALINE MELO).

We also need to consider that when we talk about young people and people from low-income neighborhoods, there are a lot of matters and types of discrimination that can make the process of finding a first job even harder. We identified some of those with primary and secondary research, and they are:

• Lack of experience
• Lack of qualification
• Lack of indication
• Difficulty to access computers and appropriate equipment
• Discrimination of race, sexuality, and location (if they live in a neighborhood far from the workplace)

Facing this complex theme and a short schedule, we had to focus our project and research on a single aspect of the problem and main target. Details about the criteria used for choosing and prioritization are addressed in the next sections.

Users

We decided to keep young people from Brazilian low-income neighborhoods who are looking for a job as our main users, because, at this stage, our biggest concern was to ensure the solution would have the potential to help those people assure their goals.

For that reason, we focused initially on understanding what are those goals exactly and in which contexts they are inserted.

Getting to know our users

Our first approach to getting to know the theme was to perform desk research to look for some of the main problems young people from low-income neighborhoods in Brazil might face while trying to get their first job. Through this method, we found several articles mentioning issues of structural discrimination (PT); low levels of schooling (NA PRÁTICA), and difficulty accessing the internet at home (PORTAL APRENDIZ).

However, we still had a lot of doubts, mainly about how those problems manifest themselves in the lives of our public, therefore we decided to ask those questions directly to some possible users with the aid of techniques of primary research.

Quantitative research

To recruit people to answer our questions, we shared a questionary via social media (WhatsApp, Facebook, and Instagram). The questionary was divided into sections with open and closed questions, and, in the end, we also asked people to leave their cell phone numbers if they were willing to be contacted to answer more questions.

In the first section of the formulary, we made a few questions to filter the people who corresponded to our main target:

How old are you? — We want young people. This question was also meant to help us determine what’s the exact age range we’ll work with.

Do you live in a low-income neighborhood? — We want people from low-income neighborhoods.

What’s your professional status? — We want people who are looking for a first job. However, we didn’t discard the answers of those who have already gotten a job. In this case, we directed those people to a different section of the formulary, in which we asked about the main difficulties they have faced in that prior experience, and what has helped them succeed.

Also in the first section, we asked some questions regarding their race, gender, schooling, and access to the internet. With this information, we meant to confirm if there was a relationship between that data and the difficulty of getting the first job, as pointed out by our prior research.

These are some of the questions we made for those who have already gotten a job:

In your opinion, what helped you to get your first job? — Identify pain reliefs and aid us with ideas for our solution.

How long did it take for you to find your first job? — A possible metric to measure the difficulty to find a first job and relate to other data.

These are some of the questions we made for those who are still trying to get a job:

In your opinion, what’s hindering you from getting a first job? — Identify the user’s pain points.

Usually, where do you hear about or search for Jobs opportunities? — Identify the channels users have access to.

We received a total of 23 responses, from which 6 passed through all 3 filters. It wasn’t the amount we expected, but among the answers we were able to collect, the data that caught up our attention the most were:

The first graph shows that an online solution might still be viable, despite our concerns, especially regarding mobile interfaces associated with social media (graph 4).

Besides, on the second graph, we identified that most of those who answered believe that indication and qualification are the main contributors to their success in getting the first job, even if the people who have not found a job yet blame the cause of their struggle to external factors, such as lack of opportunities, and few vacancies (graphic 3 3).

The rest of our doubts were answered by possible users via individual interviews. In that sense, the questionary was very useful as a source of information to help us elaborate on questions for the interview and to recruit people for qualitative research.

Qualitative research

From the people who answered our questionary, we were able to schedule individual interviews with 3 of them.

The interviews were held through virtual meetings after we’ve elaborated a semi-structured script divided into 5 sections:

• Introduction: Introductory questions to break the ice: where they live, if they are studying, etc.
• Motivation: Understand the pains the person tends to relieve with a job, their goals in the short and long term, and what kind of job they are looking for.
• Tasks: Discover the user’s journey and the role of digital solutions in their process.
• Pains: Identify the users’ perception about what they believe it’s hindering them from getting a job and which preventive measures they have already tried.
• Qualification: Qualification was pointed out as a possible pain reliever in the quantitative research. For that reason, we decided to explore this subject asking about the requirements of the job opportunities they’ve been applying to and what they do when they don’t meet one of those requirements.

We recorded all those meetings with the consent of the people we interviewed, then, we grouped their quotes into clusters, by subject. We used that technique to identify similar ideas in their discourses and also as a way to help us organize and summarize all the information collected at this stage.

These are some of the main discoveries the qualitative research provided:

• The people we interviewed tended to start looking for their first job at the end of High School or right after finishing High School.
• They look for a job to help support their families financially or to have some money left to spend on transportation and leisure activities.
• At this stage of their lives, they are not worried about building a career, but they want a job to attend to their short-term needs.
• They give preference to jobs for which they meet the qualifications (for example, if they speak English, they’ll look first for jobs with that requirement. If they don’t speak English, they might look for other options).
• When we asked them about their pains, they kept blaming external factors, but when we asked what they could do to increase their chances of getting a job, the only thing that was mentioned was to take courses, but this was said with a dispirited tone of voice because they believe courses are very expensive. Some people actually get to search for free courses and free content, but others just assume that it doesn’t exist or it won’t be accessible to them.
• They tend to prefer looking for jobs via social media, they mentioned Facebook groups and job sharing pages on Twitter.
• Being able to access the internet is not really an issue for them, but it might be hard to access computers.

With that information, we could determine the profile of our ideal user and summarize it on the persona map below. In the next steps, we used what we learned in the user research to justify our choices in the generation and prioritization of ideas and the development of the product.

Opportunities and generation of ideas

Based on the results obtained with user research, we determined 5 project opportunities from the pains we identified:

• How can we connect young people from low-income neighborhoods to technical qualifications, so they meet all requirements of the job opportunities they desire?
• How can we provide access to computers so people from low-income neighborhoods can use them to practice and get certain qualifications?
• How can we lower the cost of transportation so young people from low-income neighborhoods may be approved more often on the first steps of the selection processes?
• How can we connect young people from low-income neighborhoods to those who may indicate them for job opportunities so they can have an advantage in the selection processes?
• How can we make young people from low-income neighborhoods gain experience so they can have an advantage in the selection processes?

After making that list, we organized a session of brainstorming, in which each member of the group contributed with ideas for one or more of the opportunities identified. With this technique, we aimed to open our range of ideas for the project and stimulate the involvement of all group members in the building of the solution.

To decide which of the listed ideas was the most appropriate for our public (and for us) we used an impact effort matrix (picture below). To assemble it, we’ve considered the potential of each idea to help the user get a job (vertical), and the difficulty of execution (horizontal).

The solution

We decided to go with the idea that required the least amount of effort and could proportion the highest biggest impact (upper right corner of the graph):

A job platform that offers suggestions of free courses according to the job opportunities the users interact on the platform.

We decided to call it Qualificaí, from the word “Qualification”, theme which inspired our product.

User flow and wireframes

To assure the ideas of all the members of the group were aligned, we’ve started to make decisions from the most general and abstract plan to the most detailed and concrete. It means, for example, that before drawing the interfaces, we made a scheme to define the user flow in the website and determine which screens we had to make.

At that moment, we didn’t need to make all the pages, but only those of the main flow to present as an MVP.

Those pages were designed starting with their wireframes so that we could, as a group, focus on deciding the elements present on each page, their position, and their hierarchy on the screen.

For the flow and the wireframes, we’ve opted to use digital tools that favored long-distance collaboration and allowed everyone to edit the documents simultaneously (Figma).

Main flow and pages to be made:

• The user finds a post on social media sharing a job opportunity (with a link to our website).
• The link redirects the user to the page that contains a description and details about the job opportunity.
• By selecting the button with the call to action to apply, the website requires an initial login, that can be filled quickly so that we can acquire leads.
• After the person is redirected to apply for the job, our website presents a page that we call the congratulations page.
• Now the user may want to use the functionality to search for job opportunities. On this page, there are some suggestions for searches with filters inspired by the results we obtained during user research (e.g.: jobs for people underage, jobs close to their address, jobs based on their qualifications…)
• After typing something on the search bar or selecting one of the buttons of search with filters, the user is redirected to the page with the results of the search, which shows a correspondent list of job opportunities and also suggestions of free courses based on the requirements of the jobs listed on the results of the search.
• By selecting a job opportunity, the user is redirected to the page with details about the job opportunity, and by selecting a course, they are redirected to the page with details of the course.

An interesting note about the page of initial login is that we called it initial login because, eventually, it would be interesting if users filled up more information about themselves so we could offer personalized suggestions of jobs and courses, but we didn’t want to exhaust them with a long formulary at this moment when they just got to the website.

Still, from the business perspective, it was very important for us to acquire leads, so, we decided to have an initial login that requires the most important information and is very fast to fill, and left the option of getting personalized filters and suggestions as an optional resource for heavy users willing to take the time to fill a longer formulary. After applying to their first job via the site, new users start receiving popups calling them to finish filling their profiles.

Now, about the lessons we obtained during the making of the flow and the wireframes, it’s interesting to mention that it was during that step that we acknowledged it would be more interesting if the final project were a mobile website instead of an app. The reason is that we wanted to take advantage of the usual behavior of our public to search for jobs via social media, using Facebook groups and Twitter pages to redirect them to our product.

Think, a mobile app would represent a huge interruption of the flow, because, on the first use, the user would have to verify if they have enough space on their phones and wait for the download, which takes some time and may result in the loss of interest for the job. With a website, however, we can make this step of the flow faster and more natural.

It’s also important to clarify that we call the attention of the users with job opportunities and not courses. After all, as demonstrated by our research, our main target doesn’t usually look for courses, because, at first, they don’t think it’s suited for their reality. For this reason, it was more interesting to present courses within a context, aligned with job opportunities, so they can: seem more interesting, serve as a guide to those who are lost trying to get into the job market, and show that free courses do exist!

Style guide

Colors

Before designing the interface in high fidelity, we defined our brand and its base colors.

The color blue was chosen because it is neutral and can communicate to all genders, transmitting seriousness and safety. On the other hand, orange was chosen as the accent color because it is connected to the idea of youth (our public) and joy. Besides, these are complementary colors, which bring harmony and contrast. To use them on the UI, we created different variations of tone.

Now, for the background and some other elements of the interface, we assembled a grayscale.

There are also colors specified for texts. Despite its name black text, this color is not 100% black, so it doesn’t compromise the readability level of the interface.

Furthermore, we also established helper colors, that are used mostly to provide users with visual feedback. Red gives de idea of danger, therefore most serious mistakes are easily understood by the use of this color. Green is usually associated with the idea of correctness or something positive, so we used it to communicate messages of success. Yellow, on the other hand, was chosen for messages of attention.

Typography

Poppins font Family was chosen because it is sans-serif, modern, and legible and it provides a good range of weight variation, which helps to form a good typography hierarchy on the interface.

Poppins is a Google font, therefore it comes pre-loaded on most browsers, which helps with the performance of web applications.

In the style guide, we defined Headings from 1 to 3, font size, and line spacing for desktop and mobile.

Buttons

While making the buttons, we made sure they all had a good contrast to improve legibility and enough spacing for an accessible clickable area.

The buttons were made in Figma using one single component with combos of variants. This is a good way to organize and use the component in the main layout. Besides, these variants were made using auto layout with the new functionality of Figma of component property. With those resources, we defined the properties of content, instance swap, and boolean. In content we can change the text layer; in instance swap we can change the auxiliary icons of the button and with boolean we can choose if the icon appears on the left, right or if it doesn’t appear at all.

Formulary and its components

So far, input text was the only formulary component used. Therefore, that’s the only one we created, but we included variants. We used the concept of atomic design to the o .Base input, where all separate components are located, but, by assembling all of its instances, we can create many variations of the component input text.

In this component, we can see the title, the input (with the placeholder), and a message of feedback or support in the bottom right corner. By editing the properties of this component, it’s possible to choose when each element appears. This arrangement aims to speed up the capacity of scalability and consistency in developing a design system.

Design System and Scalability

The style guide was made and edited in Figma as the principle of a design system. That’s why we used the concept of atomic design and organized all buttons, formularies, colors, typography, headings, pictures, icons, cards… into components.

With those measures, we were able to achieve a very consistent and practical method for the creation of new pages and screens, and future developments of our interface.

High-fidelity prototype

Next steps

In this case, we showed how the work of research and user knowledge provided the assembling of a solution with great experience in the shape of interfaces and a website.

For the conclusion of this MVP, the first obvious step is to test the prototype with people representative of the main target we chose, so we can assure elementary patterns of usability and interaction. After that, we can start thinking about building the remaining pages and tools (that were not part of the main flow), such as helping someone assemble their own curriculum, etc.

Furthermore, in the future, we would also like to consider the contact points of other stakeholders with the platform, such as recruiters and beneficent institutions.

But since we’re talking about expanding our audience, it’s important to mention that it’s fundamental to follow the maturation of users and leads we collect. Look, today their goal is to get their first job, which we expect to happen eventually, especially with the aid of our solution. After that, they will have other needs, and that’s where we have an opportunity to offer them new products and services.

If you have a question or if you’re interested in contacting us, please send me a message via Linkedin or email:

Amanda Carvalho Monteiro:

amandalha@gmail.com

www.linkedin.com/in/amanda-carvalho-monteiro-86384520a