Redesigning the
UI and UX of knct, a Student Networking App 

CASE STUDY

Design an experience that brings together students from across the world with similar passions

Rohit Menon (cofounder)
Louis Regis (cofounder)
Giulio Tricchilio (developer)
Aviv Lo (developer)
Me (product designer)

User Interviews
Personas
Opportunity Ranking
Prototyping
Usability Testing

TEAM

METHODS

THE PROMPT

MY PROCESS

The general process I used to solve this design challenge is to begin with brainstorming and researching to learn more about users, before prototyping different ideas and evaluating them with potential users. The process was not entirely linear and I continuously interviewed users throughout the process to understand their pain points even more. However, these are all of the elements I covered to reach my solution. 

knct is a Swiss startup that helps students around the world level up their local network through spontaneous group chats based on passions. As their lead product designer I redesigned their platform to make it more accessible to students and allow knct to gain more users. 

THE PROBLEM + GOAL

New students are finding it difficult to make meaningful connections with their new peers
 

More often than not, students feel very alone despite social media friends, as they are not able to connect with people based on deeper topics such as their passions and desires.

As someone who grew up abroad and studied at an international school, every year I got to meet new students from all across the world. I got to see and experience first hand how difficult it was for them and myself to make new friends and make meaningful connections when conversations were so shallow. 

The goal of knct is to be a platform that connects students in different universities from across the world based on mutual passions. It is to make students feel more included and part of a bigger purpose.

I redesigned the knct app to have a more exciting and playful environment that would allow users to feel comfortable to express their passions and interests. I used bright and contrasting colours to make the app feel vibrant and fun while maintaining a professional and minimalist look.


GOALS

1) increased number of users
2) increased engagement among users
3) ability to generate revenue from sponsored ads

SOLUTION

Business Goals: 

User Goals: 

1) to have a safe space to share their passions
2) to interact on a user friendly platform
3) to meet new people with similar passions

One of the main point points with knct is that it had turned into just another chat platform and had nothing to differentiate itself from Facebook or Discord. knct had lost it's vision of connecting people based on their passions. 

Hence, the main purpose of my brainstorm was to think of all the different ways people can be connected based on passions and not get distracted by the chat feature. This would also allow knct to stop competing from existing giants.

01. BRAINSTORM

Brainstorming how to reposition knct as connecting people based on passions instead of being just another chat platform

•  instead of people connecting in chats, have them connect through passion activities (ice-breaker)
•  having a user flow that takes into account the comfort level of introverts and extraverts
•  make the platform on desktop first to differentiate it from other apps (study focus)

KEY FINDINGS

Although brainstorming activities such as Crazy 8's are often done after talking to users and understanding their needs better, for knct this had to be done before talking to users because of a funding deadline. However, because knct already has users, I still had a general idea of what users want and their current pain points with the current product.

02. RESEARCH

Findings from user surveys, user interviews, market research and opportunity mapping

User Surveys

Although I had a general idea of the pain points knct was solving and the wants of it's users, I sent out a survey to find out more about want users wanted. 

It was so clear from our survey that was filled out by 48 people, that almost every single user wants to feel part of something bigger, like they belong and that they're welcome. I wanted to learn more about what the exact pain points users felt were that were stopping them from achieving this goal.

These are the questions I asked:

User Interviews + Pain Points

Personas

reflected that they don't discuss their passions with their current friends, but would like to

found that it is overwhelming to find similar people to them in university

said they want to be part of a community in which they feel they matter and can make change

58%

42%

75%

KEY FINDINGS

Although a lot of the people I was interviewing had such different personalities (some where really extraverted or introverted), what united them was their desire to feel connected, especially to those who are passionate about the same things as them. What this means for the flow and design of knct is that it should be simple and welcoming to use, and also attractive to people of all genders, cultures, and interests, Most importantly, it should be an exciting and accepting environment that allows them to express their passions.

Market Research

User Stories + Opportunity Ranking

Based on the user pain points and needs from the user interviews and market research, I mapped out the different user stories on an opportunity ranking matrix, mapping the importance of the problem against the availability of alternatives. This would help me find where the greatest opportunity for knct lies. 

Takeaways, Constraints and Tradeoffs

Based on user surveys and interviews, market research, and mapping user needs and finding opportunities, these are the key takeaways, constraints and tradeoffs identified. 

03. PROTOTYPE

Creating a final product that meets all three goals

Original User Flow 

From my analysis above, I found that most of the user flow would remain the same. However, the part that needed an update because it was difficult to use (according to users), and also a feature I was looking to change was the creating conversations portion. This is because as mentioned before, I found that it would be better for users to change this to creating activities, with an option to open a chat alongside the activity for additional conversations. 

WHAT WORKED WELL

what needs to change

•  The onboarding process was simple and secure and users understood it
•  The profile section considered all necessary features
•  The functionality within individual and group chats is solid

•  There was an over complication with the different types of chat and chat features
•  If you are introverted and don't want to initiate a conversation, theres not much to do
•  There is no sign of activities

New User Flow 

1) knct has simply just turned into another chat platform and is competing against too many giants. They have no differentiating factor that would make people move to knct. The value of group chats comes from the number of members in the chat and that is not something that knct can compete with. It must shift away from being known as a chat platform and must find another USP. 

2) Many people mentioned that they would like to meet new people through participating in common activities. Although this is an extension of our scope for developing, other features had to be sacrificed in order to implement activities because it is essential to move the focus away from chats.

3. In order to keep the chat mechanism which has already been developed, each activity can have a chat created with it incase people want to communicate about the activity beforehand. This is a great option for extraverts to meet new people, but does not force introverts to join if they are not comfortable. This ensures that knct is welcoming for people of all personality types. 

Example of an activity card

Initial Wireframes

•  title of activity
•  description of activity
•  time

This is the option to add a conversation to an activity to facilitate any communication. It is ideal for extraverted people who want to meet others but does not force communication for introverted persons who don't want to rely on virtual chatting to make friends.

•  date
•  location 
•  price

The first screen that I began to prototype was the Explore page because of its importance and significance. In the current version on the platform, this is the screen at which most people were confused or disengaged, and so perfecting this screen was essential 

For the explore page, the criteria I was given included having a featured activity, and the ability to navigate layers of conversation

04. PROTOTYPE

Findings from user surveys, user interviews, market research and opportunity mapping

Moodboard

knct currently has a whale as its logo and the cofounders wanted the platform to have an underwater theme. 

I wanted to include a lot of coral reefs and underwater resources throughout the platform to have a feeling that you are surrounded by abundant resources that are waiting to be untapped. I think that this aligns very well with knct's mission and vision

For the moodboard I decided to find images that were bright, bold and contrasting because that is the type of vibe users are looking for. I wanted to ensure that look is playful and fun because users said that would make them feel like they belong and inspire them to share their passions. 

Takeaways, Constraints and Tradeoffs

Based on my low fidelity mockups and the feedback from my users, as well as from instructions the knct team, these are the key takeaways, constraints and tradeoffs identified

1) After meeting with the developers, I was very disappointed to find out that knct currently is not able to allow users to set their own activity images. This is because they currently do not have the technology to prevent inappropriate images from being posted. This means that I would need to find a way to keep the activity cards looking exciting and different without them having images. 

2) The founders of knct encouraged me to use the second mockup of the explore page which really emphasizes the 'featured activity' because they want to use this as a way to get sponsorship money for posting activities there. 

3) In order to keep the chat mechanism which has already been developed, each activity can have a chat created with it incase people want to communicate about the activity. This is a great option for extraverts who enjoy and feel comfortable meeting people in chats, but also doesn't force introverts to only make connections this way, taking into account different personality types. 

Medium fidelity mockups based on feedback

Creating an Accessible Stylesheet

Design Iterations

Before & After

My goal was to redesign the knct app to have a more exciting and playful environment that would allow users to feel comfortable to express their passions and interests, and find a sense of belonging. Here are some before and after transformations.


The landing page is now simple and clean but also immediately gives the user an idea of knct's aesthetic and vibe. I ensured it was very simple so that they are not distracted and are more likely to either join or login. I also envision the graphic on the right to be animated.

Final Prototype

LANDING PAGE

Upon logging in a user will be met with their weekly schedule full of activities they have signed up for. In order to encourage them to apply for more activities, the sidebar on the right shows activities coming up and also encourages them toe explore for more. 

DASHBOARD

The explore page is the most essential page on knct as its purpose is to keep users engaged and encourage them to come back. On the left is the featured activity which companies can pay to appear in. On the right are bright activity cards to attract users. Overall the page is simple so that users do not find it difficult to navigate. 

EXPLORE PAGE

If a user is interested in an activity and clicks on it, the activity card opens up in a modal. The modal allows the user to focus on the contents of the activity. The secondary button is one I thought would be perfect for introverts and extraverts. It allows users the option to join a chat about the activity without forcing them to.

ACTIVITY CARDS

The chat page on knct is simple and easy to use and was designed in pastel colours, as to not be overwhelming. Every conversation shows a preview of the last message. Moreover, the ocean theme is incorporated through the footer of the conversation titles.

ACTIVITY CONVERSATIONS

Throughout the platform information such as 'terms and conditions' or screens such as 'forgot your password' are presented in modals. This is so that once the simple task of the modal is completed, the user is right back where they left off and not distracted. The modal has a very dark background so that it contrasts from the content below.

MODALS

Since users creating activities is essential for the success of knct, I decided to make the experience of creating activities exciting and unique. Because the theme of knct is underwater, when creating an activity you are taken to the 'creator zone'. The light blue background resembles being underwater.

CREATING ACTIVITIES

Creating Responsive Designs

Although we had decided to initially only release the platform on desktop to test it, I was also designing with responsiveness in mind so that not only are the designs visible on different screen sizes and tablets, but also eventually for mobile screens as well.

There are many advantages to creating responsive designs. The first and foremost is a better user experience for all users, but it also has secondary benefits such as better SEO and Google ratings.

05. REFLECTION

Results, Reflection & Next Steps

If I were to do this task again, I think that I would spend more time on making the low fidelity wireframes for my application. I found that I did not account for all small details such as the settings page or edit profile page. I often get excited by the design side of things and start imagining how each page will look like, instead of ensuring that I have accounted for all required features or functionality. 

I would also spend more time looking at applications that do something similar, and learning from them. The most important thing that I would want to see is how to minimize the number of taps and clicks to get users to their required screen.

Lastly, I would also consider how to gamify the application in more detail, and how to encourage students to stay on the app. I think knct has a very interesting underwater theme, and that gamifying it would be a very interesting avenue to explore. However, this is something I would want to consider more carefully, to ensure that I am not designing knct to become another addicting social media platform.