Got not enough time to read the long Case-Study?
No Worries, Watch this 6 minutes chapter-wise Video to save your time
Project Overview
Co-Learn is a group project made by me and 2 friends in 14 days hackathon. We designed different sections of the app as Individuals. Here, I'll show-case my work about how I tackled the Peer-to-Peer learning issues, why Co-Learn is needed, & all those major decisions I took while designing & also How Figma Variables came as a help to me.
Research behind Co-Learn
Co-Learn Prototype Video
Problem Statement:-
Online learning offers endless resources and traditional study methods make students feel isolated, unmotivated, and lacking focus and direction, making it more challenging for them to prepare for competitive exams or upskilling, while they seek a more engaging online learning experience that allows them to connect with peers and discuss academic goals.
What's the story behind of Co-Learn?
One day, when we 3 friends were talking on a voice call, we did realize that due to overload of information available online, we were actually struggling to understand from where to start or how to upskill as a web-designer and it made us to rethink how easy it was to talk to peers while we were in school and now it has become soo challenging for us to cope-up with everything. So, that’s How Co-Learn come into existence!!
So, What is Co-Learn?
Co-Learn is your go-to app, if you are facing difficulty in preparation of competitive exams or learning new skills, and you find it overwhelming with the endless resources available online which makes you feel stuck and you are in need of peer to get help.
There comes the savior, Co-Learn app which helps you to find peer online with just a few questions, you get personalized recommendations of peers in the app itself with whom now you connect, can do 1-on-1 meeting ask doubts or solve questions as well, also you get points as you learn, and so much to-do.
• User Control & Freedom • Flexibility • Visibility of System Status • Consistency & Standards • Error Prevention
My main focus was to give peers more usability, flexibility, & make it more meaningful by giving them- safety and security, more functionalities, seamless user experience, starting first with optimizing the On-boarding experience.
On-boarding of Co-Learn-
On-Boarding was a challenge to conquer!!
The Process that I took to understand How On-boarding-
I downloaded 10+ apps- Alyke, Hunch, Bumble, Tinder, Quizlet, StudyStream, Studybuddysco, Flipd, Brainly, Hellotalk, Badoo & Hinge (Educational apps, friends app, dating apps). Yes, Dating apps, But why?
(In Dating apps, their main focus in to recommend those people who would be more interested to talk to them, so that's why I downloaded these apps to understand how and what kind of questions these apps ask during on-boarding) + leveraged Bard (Google AI) on an extensive level!!
Screenshots of Apps & Some Insights from Bard (Google AI)-
Insights from those apps-
• On-boarding Process with unclear message: In most of these educational/co-learning apps, the on-boarding process doesn't talk about the app purpose properly or highlight its benefits indirectly.
• Trust & Choice: Permission requests, like location/mic access are not asked majorly in these apps besides those dating and make friend online apps.
• Absence or Focused majorly on Individual of Learning: These Co-Learn apps are actually self-focused on Individual rather than having an option to with whom to connect, discuss questions, etc.
• Lack of clear message: Co-learning apps' duringOn-boarding lacks in conveying a clear purpose, while these dating make it very clear during on-boarding and it helps those people to what to expect from these apps.
• Unclear Interaction: Most of the times, It is unclear about how to communicate with peers as there is no clear CTAs (Just a home-feed where some doubts are there with answers and that's a not a Co-learning app.
I understood that, I need more context apart from basic details, So I designed these questions where I ask them about what they are preparing for and what skills they are looking forward and etc. (Image below).
How do these questions helps us and peers also?
• Preferred study timing, What are you preparing for, & their skills tells us what skills/competitive exams they are preparing for and that helps us to give them recommended peers.
• Asking about hobbies & any specific topic they are passionate tells us in which topics they are more interested to more talk about/discuss with peers.
• How Co-Learn can help you- It sets the clear intentions & expectation- We might know what peers are looking for more from this.
During On-boarding, I saw that several apps don't ask or take care of security and privacy. So I got the inspirations of how to ask for safety & security and that's how I made it clear to Co-Learn peers.
Show-casing the real Figma Power through Figma Variables
By Using Figma Variables, I was able to save 8+ Screens, which could've made On-boarding design look more difficult, longer and Old-Style prototyping
Quick Actions & Focus Mode in Co-Learn-
Why Focus Mode?
Through Competitive research & users pain points, I saw that very few of these apps do have focus mode which helps them to stay focused & motivated. Co-Learn offers Focus Mode to minimize distractions & maximize peer experience with usability. Peers can customize notifications and set timers for a focused learning environment.
Why Quick Actions?
My main focus was to minimize distraction, as I analyzed apps, their core-usability weren't clear, but If the message of an app is not clear, that means that app has failed to do the job. That's When I introduced Quick Actions that has 4 core-functionalities (Instant Meeting, Ask a Question, Focus Mode, To-Do List), when you open Co-Learn app.
But Focus Mode & Quick actions are really needed? For that, I did some secondary desk research on that!!
Effective online learning strategies include setting goals, establishing routines, and creating dedicated study spaces to promote focus and productivity (source: Coursera blog).
Maximizing online learning effectiveness involves utilizing interactive tools, fostering a sense of community through peer interaction, and providing timely feedback to enhance the learning experience (source: Raccoon Gang blog).
Factors influencing students' online learning experiences include technology proficiency, peer collaboration, highlighting the importance of addressing these elements to optimize learning outcomes (source: ResearchGate publication).
Meeting Flow in Co-Learn:
After analyzing these apps (G-meet, Zoom & Discord), I understood that, Design should be alike these apps with same usability & flexibility. But, I'd some concerns over here-
• Security and Safety (mic and camera access), as a clear permission ask is justified for peers safety.
• The flexibility and Usability (like- Mute Audio/Camera off, share-screen/white-boarding) should be optimized for their overall experience, so that peers can actually focus more towards discussing/talking with peers.
• The details of any upcoming meeting should be there to both peers before getting in to meeting and also the understanding of Ask to Join/Invite now should be clear to them.
• If both peers want to book a meeting, flexible options (like- (Instant/Scheduled/A meeting link) should be there.
• A rating system which tells us about their experience related to the meeting.
So yeah, that's how I came up while designing Meeting Flow
Designing Own & Peers Connections List in Co-Learn app:
For that I started to gather inspirations of our own & our peers profile, & also what was common and uncommon in that.
After Analyzing some of these social apps, I saw a pattern-
In thee apps, there is a short bio about them with Follow/Connect button & with followers/following in the profile header section and same for their peers.
Designing Own & Peers Connection List with these points-
Profile header of an educational/Co-Learning app shouldn't have a social media feeling.
For Co-Learn app, it should be about their degree, what they are preparing for, and where do they live with total number of connections, yes Connections, but why? As, Connections is just feel more like an app for friends other than follow.Edit Profile & More (these options gives user more flexibility to edit their profile or change their account settings.
Send message is there in your peers peers' connection list, when you are connected with them, other-wise connect make more sense, & Send message in their own connection list works more efficient, as a direct way to start talking/discussing.
Designing Deactivate account & Logout Flow in Co-Learn app:
I got insights from existing apps about the both flows & how do these apps make it very clear about deactivate/delete.
In Logout Flow
The visibility should be there when someone is actually logging out from there account, visibility means here- when you try to logout from your account, you should a confirmation dialog before logging out and while you logging out, the loading screen has to be there, so user can sense it that process is happening.
And, After logged-out from his account, he should jump back to 1st on-boarding screen where if he wants to login again after a time, he can easily do that.
In Deactivate Flow
The main focus was on visibility that what happens when you deactivate your account, and what data they will lose.
Through that- Learn More they (users) can understand about whole context about the information (that if they login again within next 30 days after deactivating, they still have the full access to their account, and if they don't login back within next 30 days, then their account is permanently deactivated) and the guidance of instead deactivating, they should take a break and etc.
I wanted to give them proper visibility and control, so password verification actually keeps your account safe from accidentally clicking on deactivation by others, and also entering your password is a confirmation step, that yes you want to deactivate your account.
And, After deactivating the account, he should jump back to 1st on-boarding screen where he gets a small prompt to login again in next 30 days to re-activate his/her account.
Designing Discussion Forum in Co-Learn app:
But is it Needed?
During the research in (Reddit/Quora/Facebook)- I saw that peers look forward for discussions forums/groups where they can do discussions and these apps does have some kind of groups where peers can connect and start discussing.
Some insights after secondary desk research-
• Online discussion forums promote collaborative learning by enabling students to engage in discussions, share ideas, and construct knowledge collectively, enhancing their understanding and learning experience in a virtual setting.
• The research highlights that online discussion forums support collaborative learning by fostering student interaction and knowledge exchange. Using social network analysis, it demonstrates how these forums help build learning communities, enhancing student engagement and collective understanding.
• Online forums help by promoting social interaction, critical thinking, and deeper understanding, allowing students to discuss and engage with content collaboratively, which improves learning outcomes.
Designing Discussion Forums Cards and Detail Page-
My main focus was that peers understand about the context of the discussion forums and how it is helpful for them.
Discussion forum cards on Home-Feed has the option to Join, & also the small details (like- Header Photo, Background Photo, Small Bio with Name) which helps peer to understand and make their decision.
When a peer click on discussion forum card, they jump to the detail page & On About Section, they can see a lot of important information, like- Name, How many people have joined, & the Join forum button is also there, (if a peer wants to join, they can join, or if not they can cancel the request) and if peers wants to know how much this forum is active (they can get the context from Posts & Questions Sections).
Designing Answer & Questions Flow-
While designing Answer flow, I'd a doubt-
Co-Learn use gamification (with different levels), to motivate engagement, & with higher levels new features unlock, starting from level 1, but If they're not on level 1, it can be demotivating. So with alert dialog box, I set context clear with right action, & for proper conduct, (Guidance) tooltips sets the context clear to how to answer a question/post a question.
For the same, I leveraged Bard, google material, did some more secondary desk research & took inspirations from Duolingo app, Quora, Reddit, Facebook, to understand about it properly and set the context right for peers.
Designing Answer Flow in Co-Learn app-
Home feed shows questions, clicking on one gives peers more options, in the answer screen, like- Public (Answer publicly or send directly to a peer (private). In answer screen, peers can see Question itself above it with some suggestions (tooltips) sets the context clear to how to answer a question/post a question and then After a second, a pop-up appears (alert dialog box) explaining when/how to answer. I tried to motivate them, so I used informal language there.
Designing Question Flow in Co-Learn app-
In Home-Feed, One can see- Ask a question through Quick actions-
The Question screen gives peers some options, like- Post a question as Public or Anonymous, Add any attachment, emojis, Add button, with some suggestions (tooltips) sets the context clear to how to answer a question/post a question
I did 5 Second Testing (It helps you to understand users’ first impressions of a design in 5 seconds) through a platform called- Lyssna , where I asked 10 questions with 10 screens from my target audience (18-30 years of age).
Test Findings are-
8 out of 11 responses were able to understand the meeting screens.
9 out of 11 responses were able to understand the Peer's page & Connections list.
10 out of 11 responses were able to understand the Message Page.
6 out of 11 responses were able to understand the To-Do List flow.
7 out of 11 responses were able to understand the Focus Mode flow.
8 out of 11 responses were able to understand the Answer Mode flow.
10 out of 11 responses were able to understand the purpose of On-boarding Questions.
Future Scope
In Future scope, as we knew that it is an amazing app for peers, we'd some thoughts about making some premium features-
Time Limited meetings (60 minutes/meeting), with only 10 meetings in a month.
Send Connections request upto 50/month, because we don't need peers to spam others and do engage with others when needed the most.
Paid Discussion Forums, where they get the real commitment from others as well.
Giving them more flexibility and usability- During meetings, more people can join them and in Profile Settings more flexibility to choose for more recommended peers.
Learnings
It's all about taking care of Consistencies in- Design system, UI, Building prototypes from scratch for the whole app, learning google design system (snackbar, toolbox, alert dialog box, and soo much), when & why even is there a requirement of User Personas, User-Flow, Value Proposition. And One More- Don't just get into making screens, but understand about the app UX also and getting real inspiration from existing apps UX (not just UI).
And, It's a Wrap!!!!!