Klik Onboarding Redesign

HMW trigger the students emotions and activate them to fill their profile with rich information?

Long story short:
This was a 10 week-long project in which I redesigned a part KLIK. During this project I worked by myself. The platform helps the students come into contact with experts. The challenge was to activate students to fill their KLIK profile with “rich” personal information. The students are often still searching for who they are and what they want to become. The process, in which valuable information about the user is collected, was redesigned.

My notes and reflections will go here.

The problem

Studio Tast encourages a new perspective on our way of learning and working. To introduce this new perspective into the world Studio Tast designed a networking platform called klik. Klik brings people together by making the local network of high school (consisting of parents, alumni, companies and experts) visible and active with a self-created community. The platform can inspire high school students and help them make decisions around the continuation of their studies.

The main challenge that students have when using KLIK, lies in filling in their profiles with “rich” information. Students are often searching for who they are and what they want to become. This also makes it difficult to find the right person in the community network. The process, in which valuable information about the user is collected, needs to be redesigned.

Previously, the klik website looked like this. In order for students to make an account they had to go through this whole process of filling in their information.

When entered “gitaar spelen” as a hobby/experience the student needs to enter “leergebied”. In this situation this doesn’t make a lot of sense in my opion.

This was my first project working with a real client. I learned during the first client meeting that I needed to ask more questions to get more informed about the problem.

Initial explorations & research

We had a month to explore and research our target group. During the research I tried to find answers to the following research questions:

1. How do people experience filling in their interest and experiences on the Klik platform?

2. How do students define their interest regarding their career path?

3. How do students experience social networking related to the professional field?

The following exploration and research methods were conducted:

The semi-structured interviews were most insightful, because I was still able to guide the conversation while also anticipating the answers.

Another issue is that the students can fill in their profile by writing something themselves. The students fill their profile with disturbing or irrelevant words.

Data analysis

All the findings were combined into an affinity diagram to be able to find patterns. All clusters have a brief description and this makes it easier to create different user insights.

Key insights

During high school students don’t get enough opportunity to develop themselves and therefore they have trouble making decisions about their career path. Also, career tests can’t help students who are fickle minded. Being part of a strong community helps students to discover who they are as a person, because it pushes them to develop their own opinion and to stick with it.

Students don’t feel inclined to add personal information when the questions are too broad and vague. Questions need to be specific to trigger students to add personal information.

Students find it difficult to network with people who they haven’t met in person and they can’t form strong connections with people who are too keen on promoting their company.

Students don’t like sharing bad traits on a public profile, because they believe that having bad traits doesn’t necessarily mean you wouldn’t be good at a certain profession.

Study advisors and experts can be biased when it comes to their opinion on certain professions. The reason for this could be that it is believed that some jobs are higher on the social ladder than other jobs. It can also be the case that they have a strong preference for their own career field. This can have an influence on the students career path, because students are very sensitive to other people’s opinions.

Students believe that having meaningful and deep conversations about mind-set and personality traits would be more helpful than talking about hobbies.

Making a profile on Klik is not exciting enough for the students, therefore they don’t take it seriously and they don’t put much effort to add personal information.

I printed out all the insights from interviews and desk research. I think that working with physical materials makes it easier to have an overview and create connections.

I felt stuck during the ideation phase. I think because I already had the image in my head of the current onboarding process. Working with other designers helped a lot to get the creativity flowing again.

I found it hard to narrow down all the insights and put the most important things on the persona.

The onboarding needs to be more engaging so the students put more effort into adding information.

Persona

Design direction

Students need to feel related to a strong community through deep and meaningful conversations about mindset and personality traits, in order to help them discover who they are and who they want to become.

Ideation

After exploration and research, I started with the ideation phase. First, I did a round of brain writing with two other designers. We came up with many ideas, but they weren’t that crazy or surprising. So our next step was to use the technique worst possible idea. The idea is to purposefully think of the worst solutions. It tries to eliminate the fear of looking stupid by forcing everyone to look stupid right off the bad. Later we ran through them and flipped some into “good” ideas.

Next, I decided to try dot voting, because it is a good way of prioritizing and converging on a design solution.

Draft concepts

Based on the most promising ideas I created two draft concepts.

Klik community

The key to creating a strong community is making KLIK feel like something special, something that not everyone has access to. Make the platform feel like a club/society. Being part of a club gives a student acces to cool events such as city trips, sport events and movie/game nights and they could also get special discounts.

The school also needs a cozy place (their own place where teachers and parents are not welcome) for the students to relax, watch Netflix and play games (just like study associations they have at universities). The club needs to be led by a group of students and for the students to make it exciting it needs to feel like the teachers aren’t involved in the club. The leaders can organize nights to meet with experts and trips to open days at universities.

When a new class with students is going to join the club, they have to sign up on the klik platform but they don’t have to enter a lot of information just their name and a photo. They also have to think of a special group name for their class and an image. When they have joined the platform they can all individually choose a interesting/funny question from different categories and they can ask that specific question to one person in the class.

The questions aren’t the standard questions such as “what job experiences do you have?” but interesting questions about life experiences, the future, and things related to character traits. A question could be: “If you could live anyone else’s life, whose would it be?”. When both people answer the question, the answers are revealed on their profiles.

This way the students fill in their profile with rich information in a exciting way without even realizing it. Based on their profile they can get matched to an expert. The student has to accept the expert match before the personal information on the profile is shared with the expert.

By giving the students a chance to get to know each other and form a strong community (this allows for deep and meaningful conversations), it will also be easier for them to develop themselves and find out who they are and what they are interested in.

This description is too long? I know right 😂

It’s basically a game in which the students ask each other funny / interesting questions and vote on the best answers.

Game that reveals personality traits

On the KLIK platform students can sign up as a group with a special group name. During the sign up process the students play a game to help them fill the profile with rich information. Just like Kahoot the game needs to be played on a bigger display and every needs to enter the game code on their phone. Everyone can pick one category that they like such as movies or vacation. Everyone needs to match the players to a role within the category. For example when someone chooses movies (specific movie title), you need match everyone to a specific movie character and everyone has to write a short description why they choose that person. After a few rounds get a special title that describes their personality. This way good and bad character traits are revealed. So for example, the crazy creative but also kind of lazy friend might be crowned “careless mad creative genius”. This title is shown on the profile and also the quotes of their friends. There is also an option to delete quotes if they are not fitting and the option to add extra comments. Because everyones personality traits are revealed it makes it easy to match an expert with the profile.

Iterate

For the final concept I combined both of my draft concepts. At first I wasn’t sure how to combine them and that’s why I asked multiple people for feedback. I came up with two options: to use the “personality titles” in the question game (first concept) or to have to separate games in the onboarding process. Most people advised me to create two separate games. The current onboarding process on klik is very repetitive and this doesn’t make it very engaging for the user. The two separate games will break up this repetitive pattern.

Final concept

Games as starting point of building a stronger community

The key to creating a strong community is making KLIK feel like something special, something that not everyone has access to. Make the platform feel like a club. Being part of a club gives a student access to cool events such as city trips, sport events and movie/game nights and they could also get special discounts. The school also needs a cozy place (their own place where teachers and parents are not welcome) for the students to relax, watch Netflix and play games (just like study associations they have at universities). The club needs to be led by a group of students and for the students to make it exciting it needs to feel like the teachers aren’t involved in the club. The leaders can organize nights to meet with experts and trips to open days at universities.

When a new class with students is going to join the club, they have to sign up on the Klik platform but they don’t have to enter a lot of information just their name and a photo. When they have joined the platform they can all individually choose an interesting/funny question from different categories and they can ask that specific question to one person in the class. The questions aren’t the standard questions such as “what job experiences do you have?” but interesting questions about life experiences, the future, and things related to character traits.

Questions could be …

“If you could live anyone else’s life, whose would it be?”.
“Tell me about a disagreement we had and how we resolved it. Has it made us stronger?”
“if we were dying of thirst, how would we ration the last bottle of water between all of us?”
“What is your greatest style-related regret?”
“You suddenly become very wealthy. What do you do with the rest of your life?”
“What’s the weirdest compliment you’ve ever gotten?”
“If I killed somebody, would you help me cover it up?”

When both people answer the question, the answers are revealed on their profiles. The other students can vote which answer is the best and who wins the round. This way the students fill in their profile with rich information in an exciting way without even realizing it.

During second part of the sign up process the students play another game to help them fill the profile with rich information. Everyone can vote for one category that they like such as movies or vacation. Everyone needs to match the players to a role within the category. For example when someone chooses movies (specific movie title), you need match everyone to a specific movie character and everyone has to write a short description why they choose that person. After a few rounds everyone gets a special title that describes their personality. This character traits are revealed. So for example, the crazy creative but also kind of lazy friend might be crowned “careless mad creative genius”. This title is shown on the profile and also the quotes of their friends. There is also an option to delete quotes if they are not fitting and the option to add extra comments. During the game everyones personality traits are revealed in a fun and engaging way.

Based on their profile (the questions and answers and the assigned title) they can get matched to an expert. The student has to accept the expert match before the personal information on the profile is shared with the expert.

By giving the students a chance to get to know each other and form a strong community (this allows for deep and meaningful conversations), it will also be easier for them to develop themselves and find out who they are and what they are interested in.

“There is no quick fix for students to find out what they want to become. It takes time and experiences. You can get these experiences by feeling part of a strong community. .”

I gathered the participants at my old high school. Because of covid it was quite a hassle and I did most of the testing online.

In short, this game is about assigning each other character roles. Everyone gets a special title at the end that shows on their profile.

I was inspired by some drinking games that are also based on asking each other questions and getting to know each other better.

Dot voting is one of the first converging techniques that we learned. It’s still one of my favorites since it’s democratic, quick and efficient.

These were very quick wireframes I made to get my idea down.

This is one of the things I realized along the way of this project.

I always feel way more connected to the other students in real life classes than in online classes. The participants agreed that a real life experience would make it easier to connect.

Wireframes

Feedback

I tested the wireframes with 3 participants. Overall, the participants liked the experience and were engaged. However, there were some aspects that needed improvement.

Interesting insights from testing

• It makes more sense to have a welcome screen first before showing the games.

• I need to add a short description of the games to introduce and explain them.

• The descriptions at the top of the screen such as category and results aren’t clear enough. I need to describe the steps better.

• It needs to include rounds and also show the amounts of votes to make it more clear.

• The 60 seconds to match everyone to a role is too long. The participants gave feedback that thought half of the time would be enough.

• It needs better connections between the pages with clear navigation.

• Show the game on a digital board and let students participate on their phones.

Lo-fi prototype

After testing I made improvements based on the insights and I also incorporated the idea of letting everyone participate on their phone. The students would have to use a game pin to enter the game room (and at the same time they join klik). This way it’s easier to share the results of the games with everyone in the group. It also creates more opportunities of forming a community, because the students need to be together in real life to play the games. This triggers in real life conversations about the topics. For example, when someone finds out through the question game that they shares a common interest. It also creates a special ambience, because they can laugh together about the answers.

Take a look here

  • Welcome screen

  • Enter the game

  • Game descriptions

  • Big talk - question

    Big talk - question

  • Big talk - voting results

  • Big talk - winner revealed

    Big talk - winner revealed

  • Big talk - app part 1

  • Big talk - app part 2

  • Leading roles - categories

    Leading roles - categories

  • Leading roles - category chosen

  • Leading roles - matching

  • Leading roles - matching results

  • Leading roles - final title reveal

  • Leading roles - app

  • Filled profile

Feedback

I tested the digital wireframes with the same participants as the wireframes sketches. I used the results and feedback to improve the concept and make a better final prototype.

Insights from testing

• It’s not clear that the squares on the second screen are all the people that entered the game pin and joined klik.

• Someone suggested adding pictures to the game descriptions, because they were curious what the game would look like.

• A participant suggested that it would be more fun to show the disney character results (when everyone finds out what role they are matched to) per person. So to show just one person at a time instead of showing everyone on the same page.

• Everyone liked the structure of the title page (the last page). I asked them if they missed a header at the top of the screen with for example “assigned titles” but they said that it was clear and that it wasn’t necessary.

• The participants enthusiastic about the idea of putting Big Talk and the title on the profile page.

During this project I did a lot of testing and it helped me a lot making design decisions.

Final design

For the final design I made it more clear when people join klik by making their photos pop up after they enter the game pin. I also added two pictures to the screen where you can see both game. When the user hovers over one of the games the description shows. The title results are shown one at the time instead of all at once.

Let’s check out the final design of Big Talk together.

Big Talk

It’s hard to show with pictures but if you want to see the interaction between the phone and larger screen you should watch the video. 😁

The focus wasn’t the visual design but the concept itself. It was more about getting the students to enter their information in a playful way.

Watch the video to see the full experience including the second game.

I send some of the questions to the participants via Whatsapp and used the answers for my final design.

I wish I had more time to optimize the usability and improve the visual design.

Results and takeaways

Overall, the participants were enthusiastic about the design and especially about the questions. Most people that I asked to answer one question, replied very quickly and they gave pretty long and interesting answers. They clearly didn’t have trouble answering the questions. Some participants even answered multiple questions while I just asked them to answer one question. Even people who I have never talked to gave interesting personal answers to the questions and they didn’t mind that I would include them in the prototype.


My first struggle was during the ideation process. I felt stuck and I couldn’t come up with original ideas. That’s when I decided to ask fellow students for help. Together we came up with a lot more ideas. This made me realise that it’s so much easier to ideate with a design partner or in a team. Talking and seeing each other’s ideas is really inspiring. Next time I would plan a brain storming session with a bigger group, because it could have saved me some time being stuck.

The design could be more consistent and the font of the question list could be bigger to make it more readable and the categories should be more specified, because that would make it more interesting. For example, movies is still too vague.


Did the design meet the client’s expectations?

I was a little nervous how the client would react to my final prototype because it was so different from everyone else’s prototypes. At the beginning of this project, I thought that solving the usability problems of the klik onboarding process and making the questions more specific would be enough to solve the problems. But during the research I found out that that wasn’t the main problem and that the problem is that the students just don’t know who they are and what they like. When I interviewed one of my participants, and she explained that she found herself during the gazing of her sorority. I gained an interesting insight that sense of community is the key to finding out who you are. That’s why I decided I need to change the onboarding process completely and try something different. I was relieved when the client said that he could see my concept work. I learned that it’s sometimes good to take a risk but that I also need to ask more feedback from the client. This way I could have known his opinion about it earlier and I could have made the changes that he suggested during the presentations.

More projects.