Jammin’
You can just discover your learning community.
How can we create a tool to connect like-minded learners with each other?
Jammin' Prototype
Jammin' Prototype
Try Jammin’.
How can we create a tool to connect like-minded learners with each other?
As a UX/UI Designer, I had the opportunity to research the online student space and prototype an app that could fit into student workflows! This project spanned 4 months from research to final prototyping.
Overview
Jammin’ was a personal project I crafted as part of the UI/UX specialization course at Careerfoundry to demonstrate my mastery of UI Figma skills.
Purpose and Context
Lots of interesting things came up when researching! The main thing was that it does take a village to help students reach their academic goals. While school and family are important factors, they aren’t the only things that affect a student’s motivation to study and learn. The home environment, goal management skills, and stress management tools are also important things a student needs to feel empowered to learn and study well.
Speaking to other students, I also found that a common form of study would be “body doubling”. According to Psych Central, doubling is a psychological tool used especially with those diagnosed with ADHD. In this scenario, having a body double helps someone with ADHD focus better on tasks (Lovering 2022). Of course, this also works for anyone! I considered this when designing the product.
As I approached user research, I hypothesized that students would want to streamline their peer-study efforts into one place. I spoke to a few students and did some background research on what factors affect a student’s motivation to keep learning and studying. I compiled my research into an illustration below!
Research
I created How Might We (HMW) questions and brainstormed ideas. Some key questions included:
How might we foster a sense of a safe online learning community?
How might we match users based on common interests and study goals?
How might we make communication easy and accessible?
I looked at existing study products and platforms that were popular for students. I found two platforms called Discord, and Study Together.
Brainstorming
Through ideation and competitive analysis, I narrowed down my questions to:
How might we safely connect learners for effective online study sessions, matching them by compatible interests, learning styles, and goals?
Students need a way to connect with other students to find community and collaborate to reach their academic goals.
The Problem
Design a mobile app that connects students to like-minded peers and provides them a platform to communicate. The main features will be:
Set up a profile with subjects, interests, and level of education.
Find friends based on subject, mutual friends, and location.
Chat with connections.
The Solution
Study Flow
User stories to user flows
Story 1: As a student, Alex needs a way to customize his experience on the app to meet other like-minded peers he can study and stay motivated with.
It begins with Alex. Based on the students I spoke to for user research, I came up with a proto-persona, Alex.
I synthesized three user stories.
From the user stories, I developed three user flows that our app will address:
Story 2: As a student, Alex needs a way to find other peers with whom to build a supportive learning community.
Flow 2: Search for peers based on areas of similarities and interests.
Story 3: As a student, Alex needs a way to easily communicate with his peers.
Flow 3: Chat with existing connections
Flow 1: Create and customize a user profile in the onboarding process.
Prototyping and Collaboration
Once I had the mechanics of each feature outlined, I started to prototype the app.
For each flow and feature, I conducted a round of usability testing and did the following:
Hypothesize
Prototype
Test with user or mentor
Debrief what worked, what didn’t
Iterate
It takes practice
Just like a master artist, a professional boxer, or a talented dance crew took years to perfect their practices, it also takes more than a few tries to get this initial design right. It took me many tries and reconsiderations to get the low-fidelity wireframes to a place I was satisfied with. I went through many iterations of each flow.
Round 1: Onboarding and profile building
Hypothesis: Creating a personal profile will help make the app feel more customized to the user.
Prototype: I wanted the app to feel friendly and safe, so I added more animation to the splash screen. Then, I included 3 simple questions for the onboarding. I decided to have no more than 3 questions to reduce the friction of creating a profile.
Test: One thing that came up was that my user wanted more transparency in what the questions were for. Another point in their feedback was to include a question regarding what the user wanted to use the app for, which could customize the app further.
Iterate: For future iterations, I would include a little blurb or transition screen that lets the user know these questions help customize their experience of the app. I could also think of including goal-setting questions.
Round 2: Finding and adding friends
Hypothesis: Having friends suggested to you based on your answers to onboarding could encourage users to connect with like-minded peers.
Prototype: How do I make it easy for users to find a community of learners to help them reach their goals? I decided one thing that could help was to derive a simple navigation menu. The “Home” page is where a user can find an existing study group to join (right). The “Friends” page is where they can find specific people they may already know via friend code or mutual friends(left).
Test: First, users expressed that having a face to the suggested friends and groups helped a lot in feeling trust that the suggested friend would be a good match. They also mentioned they would want features that could filter suggested friends by interest, study styles, and study goals.
Iterate: For future iterations, I would add a filter to the main page to help narrow down suggested study groups and friends. I would also add things like a friend profile page that would display information like hobbies, music interests, and other information that humanizes the
Round 3: Message Friends
Hypothesis: Providing a messaging feature would allow users to connect with friends and organize study sessions.
Prototype: Last, a place for users to communicate would be essential to build relationships with their study peers. Here I incorporated a navigation rail that would appear and show each of their chatrooms without overwhelming the original bottom navigation bar. Users can keep track of their conversations, have a direct message thread with one friend, or create a group chat with more friends.
Test: Users expressed they would want a way to video chat or voice chat with a friend so they could apply doubling.
Iterate: I would add multiple modalities for communication, while also having safety rules and regulations to ensure that the space is safe. Perhaps having an easy-to-find report button in the chat would ensure more safe behaviors for everyone.
Mood boards and more
I knew who Alex was and what he needed, and he wouldn’t be the last student who needed support in finding peers. I brainstormed a couple of mood boards based on who our client base: Our clients are students who wanted to find a community of peers to make awesome things with. I came up with a few ideas, Act 1 and Act 2. Act 1 had a more exciting, gamified, and teamwork vibe, whereas Act 2 appealed to a more calm and mature audience. Ultimately, I combined the two acts: have a friendly logo with a face while having greens and oranges to welcome students.
Typography
As an app that needs to support students of all kinds of needs, I aimed to make the typography to be accessible and easy to read. I went with Open Sans and Cooper Hewitt at varying weights.
Let’s keep it growing
Using what I knew about color theory, I decided to go with a color palette that signaled growth (green) and enthusiasm (oranges). Later on, I adjusted the colors to have more contrast for accessibility standards.
Final Designs
New Beginnings
Jammin’ was first imagined as a solution to a real need for present-day students. The pandemic was a challenging time, disrupting the social activities of students and adults alike. According to an article, social interactions and friendships have been greatly disrupted, and friendships contribute positively to overall mental health (Larivière-Bastien D, 2022). How do students connect with others post-pandemic, and ultimately find others who want to achieve the same things? To address this question, we came up with a clean app design, interactions, brand design, and a connection platform for students.
High fidelity mock-up: Onboarding flow.
High fidelity mock-up: Home and finding friends.
High fidelity mock up: Message friends