Social Features
Linity App

Context

Linity is a social learning platform designed to address the growing shortage of experts in STEM (Science, Technology, Engineering, Mathematics) fields.

Linity ...

makes STEM learning easy by providing a personalized learning experience tailored to each user’s needs, ensuring that they receive the most relevant and challenging content to help them progress.
combines content created by everyday users and expert-reviewed materials.
collects data about skills, motivation, retention and development.
helps users find jobs by matching their skills with vacant jobs of potential employers.

Connecting learners with real job opportunities & making it easier for companies to find qualified candidates.

Challenge

Friends Page

The Friends feature is designed to help users connect with their friends through invitations - both sent and received. This feature not only creates a learning network among users but also adds motivation to their learning journey. By displaying scores, users can see how active their friends are, encouraging friendly competition and mutual motivation. How this site looks right now:

My Task:

Develop a user story and flow, considering the potential needs and expectations of users for this menu. Brainstorm possible features and explore how they could be implemented effectively.

Final Design.

My design consists of three components to remain consistent with Linity's design framework.

Workflow

1 / Identify the Users Pain Points

2 / Get inspiration & UX Best Practices

3 / Ideation

4 / User Journey Map, Wireframes & Sketches

5 / Design Requirements

6 / Prototyping with Figma

(Get inspiration & UX Best Practices from the Linity App)

7/ End Result & Next Steps

"I don’t have a study group, but I’d love to learn together with others."
"During long exam periods, I often feel overwhelmed and isolated. I’d like to connect and share experiences with others."
"I don’t know many people, but I’d love to build a professional network and meet new people."

I really like the idea of challenges & groups

... and in this example, love the Friends List! However, I need to stick to the Design of Linity, so I can`t copy paste components.

"I don’t have a study group, but I’d love to learn together with others."

See your Friends Learning Plans
Planned Community Study Sessions
Groups on different university subjects

"During long exam periods, I often feel overwhelmed and isolated. I’d like to connect and share experiences with others."

Interaction with other Users (Option to share thoughts, Chat)
See who`s online

"I don’t know many people, but I’d love to build a professional network and meet new people."

Get the contact information of your Friends (LinkedIn, Email, Location)

User Feelings: Unmotivated, Frustrated, Lonely, Curious (how to get new contacts)

Action: User clicks in the app menu on "Friends"

Sketch of the users first view

The first element the user notices is a clearly visible search bar for finding new contacts, with an option to send connection requests.

Below, they see an organized overview of their friends, structured as follows: pending connection requests, current friends, and recommended users with similar learning profiles. Additionally, they can filter by "Online" status and "Current Study Topics" to refine their network.

Action: User clicked in the contacts component on a friend

In this detailed view, the user can directly connect with their friends via email, LinkedIn, or a call. Additionally, they can track their friend’s current progress and identify potential overlapping study topics, fostering collaboration and engagement.

User Tradeoffs & Feelings:

The group feature, along with messaging and the online status of friends, fosters a sense of community, making the user feel more connected and less isolated.
Seeing which friends are currently studying the same topics and tracking their progress serves as a powerful motivator. Additionally, participating in a challenge enhances engagement and maximizes learning motivation.
The user enjoys visiting this page, as it consistently encourages them to stay engaged with Linity without causing distractions - unlike other apps. Over time, this leads to significant academic success, reinforcing long-term usage and satisfaction with the platform.

Further down, the user finds an overview of their study groups, categorized by university subjects, with the option to join more.

Lastly, the Community Challenges section provides an overview of available challenges, the option to participate, and insights into who else has joined.

Since the user is currently focused on their network or expanding it, the view adapts accordingly - the main component enlarges, displaying detailed information about the selected friend on the right. Meanwhile, the second component, "Groups," and the third component, "Community Challenges," shrink and move out of focus.

The design of the Linity app is intentionally minimalistic - free from clutter and unnecessary information. Content is presented in clean, structured cards, ensuring clarity and ease of use.

My main challenge lies in translating my ideas into a seamless and effective design.

Other features of the Linity App

I also need to consider the AI chat icon in the bottom right corner, along with the expanding chat window. Since these elements are also present on the Friends page, I will need to seamlessly integrate them into my design.

Creation of 3 components

(1. Contacts, 2. Groups, 3. Community Challenges)

A rough arrangement of the three components on the page, with color differentiation to visually clarify where each type of content will be placed.

First Component - Contacts

As expected, I encountered some challenges with the app's very minimalistic design. So, I first wanted to establish a rough structure and represent all components in a very raw version.

I took another look at other pages of the Linity app for inspiration before continuing to refine the design of the components.

I really liked the idea of connecting the components with a line. So far, my components don’t have a logical connection, but I still want to create a visual link. I will incorporate this.

I also like the idea of displaying one component in a darker style, so I will incorporate it. I have two options:

A component turns dark when clicked (active status).
A component is in dark mode from the start.

Right now:

Second Component - Groups

First, I experimented with different ways to display individual groups. The goal was a minimalist and simple design that still looks more modern than my default version.

FALSE

The focus should be on the "Add Group" button rather than on new messages. I want this page to encourage networking without constantly drawing attention to new messages, which could be distracting. Therefore, I chose a more subtle way of displaying messages, without using Linity’s signal color.

RIGHT

In the end, I decided on this light and dark variant of my Group component.

I adjusted the color of the "Add Group" button in the light version to maintain a consistent design throughout the app. I will follow this principle for the upcoming components as well.

Third Component - Community Challenges

At first, I thought I could adopt the same design as the groups to keep things consistent. But that turned out to be a mistake. It didn’t look good, as the two elements serve different purposes. Additionally, I no longer liked the idea of vertical scrolling for the challenges.

I replaced scrolling with left and right arrows, which I found more visually appealing. In the second step, I removed the borders around the challenges and added only lines as a design element for support.

Right now:

Now back to the first component:

I reviewed the entire Linity app again and couldn’t find any components with both dark and light design. As a result, I separated "Learners with similar subjects" from the rest of the component. Additionally, I changed the list design and gave the individual user profiles more content, like their current Learning Points, so that everyone sees the progress. And as before, a small green dot indicates whether friends are online.

Next, I added filter options that allow users to see if their friends are learning the same subject.

"I don’t have a study group, but I’d love to learn together with others."

See your Friends Learning Plans
Planned Community Study Sessions
Groups on different university subjects

"During long exam periods, I often feel overwhelmed and isolated. I’d like to connect and share experiences with others."

Interaction with other Users (Option to share thoughts, Chat)
See who`s online

"I don’t know many people, but I’d love to build a professional network and meet new people."

Get the contact information of your Friends (LinkedIn, Email, Location)

Next steps will be:

Contacts (Component 1): I’ve decided that, instead of moving all the components on the page as initially planned, I will make it so that when a friend is clicked in the friend list, their profile opens with more information, such as email, LinkedIn, ...

Groups (Component 2): I want the group component to switch to a chat window when a group is clicked. Alternatively, the user would be directed to another page with the full-size chat window. I will need to consult with the Linity startup to see how feasible this feature is and what the scope of its implementation would be (from a small interactive newsfeed to a large chat feature with multiple groups/users).

Challenges (Component 3): There is currently no option to view completed challenges. Badges that could be earned through challenges should also be displayed.

General: Design animations for the entire site.

Reflection & Takeaways

The biggest challenge was adhering to a predefined design. I also had to revisit the Linity app frequently because I didn't do enough research to begin with, so I had to constantly compare the design. Next time I will prioritize this much higher at the beginning. I'm excited to see how the project progresses! Stay tuned :)