UX Case Study: Helping gymnasium pupil stay connected
Why I accepted this challenge?
In short, this is a very hot topic right now that I didn’t know anything about, so it was an interesting exercise for me. I wanted to gain more knowledge and try to find a solution for this one while experimenting with some UI screens as well. The challenge was timeboxed, so I had one week to complete as much as I could.
My Process
1. Discovery
I started the research to gain a broader understanding of the problem at hand and to have a solid starting point for my product. I found lots of research papers and articles about online schooling, during the pandemic situation.
My audience is formed by pupils in the gymnasium, so I knew that I wanted to create something really fun, a way for them to interact with each other in a different manner than the classical chat tools.
They are between 10 –13 years old. This means they are both pre-adolescents and adolescents. From the psychologic point of view, they can be both introverts and extroverts, so their idea of fun interactions will differ.
I wasn’t aware of the struggle that parents have to keep their kids entertained, so I started reading articles.
“This situation may make parents feel differently about social media than we did in the past, when we cast a jaundiced eye on it,” says clinical psychologist- Lisa Damour
Since I don’t have access right now to gymnasium pupils to have user interviews, I found an alternative way. I started looking at vlogs on Youtube and find out from the kids, how they are experiencing this situation.
“I don’t like being away from school because there is really nothing to do, but with my friends there is FaceTime and stuff.”
My key findings:
- The majority of kids spend more than 6 hours/day online;
- Some parents don’t have help/sitters and work from the office and they don’t know how to keep the adolescents entertained;
- Negative side effects of online schooling include: irritability, irascibility, feeling isolated, feeling inferior, low self-esteem;
- Most used platforms of communication between pupils are Whatsapp, Facebook, and Facetime;
- There are far more websites supporting professors and teaching them how to hold online classes, then websites supporting pupils;
2. Define the problem
I usually use this step to fully understand the goal of my product and to articulate the main problem(s), and provide a clear objective to work towards.
I used the empathy map method to capture and synthesize my findings. The map has four major areas in which to focus my attention and this exercise provided me an overview of a persona’s experience that I created later.
At the end of this exercise, I knew that I wanted to create a different “get to know each other” experience for the pupils. They already have a lot of chat platforms, so I needed to think about an alternative solution that will engage them to interact. So, What brings people together? Common interests of course! Creating a “club or group” of people sharing the same interests like reading, sports, and gaming, was the idea that I gravitated around.
3. Persona
I wanted to understand the users, their motivations, their requirements, and build a user-centered product. That’s where personas help to keep in check the concerns of a user at the forefront of every design decision.
I created two different personas, based on the findings I have:
4. Ideate
The Nielsen Norman Group defines ideation as “the process of generating a broad set of ideas on a given topic, with no attempt to judge or evaluate them.”
In the ideation phase, I came up with as many ideas as I could. Some of those transformed into solutions for my design challenge. At that stage, the focus was on quantity of ideas rather than quality.
There are a lot of methods of ideation, I chose two of them: First, I used the How-Might-We exercise as a way to frame my ideation, and to help launch a brainstorming session. The idea here is to create questions that inspire meaningful and relevant ideas.
After this, I continued the ideation process by playing around with the Brain Dump exercise. This forces you to think outside the box and it empowers innovation.
I continued my process by defining the features, so I would have a clear vision before starting to sketch the wireframes. Here is a list of the main features I thought about:
I wanted to deliver the most effective result, so I focused on building a user flow, and I placed the user needs in the heart of the design process. While providing clarity, user flows also provide a suitable structure and hierarchy. Some of my features are TBD at this point, but in the given time this is the main flow I came up with:
5. Prototype
Next, I created low fidelity screens. I sketched my ideas with a pen on paper first, and then I moved on to digital wireframes.
This step brings me clarity: Creating a wireframe helps in the execution of concepts and ideas into a solid layout. This step helped me brainstorm and explore alternative possibilities. I focused on adjustments for the essential information and navigation elements on the page without getting distracted by visual appeal and aesthetics.
6. Test
Since this was a time-boxed challenge and we have the pandemic context going on, I did not have enough time or proper audience to test my designs, so even if this is a very important step, this is something that will remain a work in progress.
7. High fidelity screens — The UI
I wanted to explore some styles so I came up with a light and a dark theme for the UI. I knew I wanted to create something that will be clear, consistent, simple, and user-oriented, so I started playing around.
The dark themes are super popular with adolescents and also they minimize eye strain, so for a pupil that spends most of the time online looking on a device, this will be a good thing.
What I learned while exploring is: avoiding pure black and white text. This contrast can be painful to look at. Instead, I played around with dark and light greys.
My second finding was that colors are actually perceived differently depending on their background. Finding some colors that work well on both white and dark theme was a challenge. I needed to test the contrasts for both backgrounds a few times before deciding on a color palette that worked.
This is a sneak peek of the UI:
Next steps:
- I have to schedule a few usability sessions to determine what issues people are encountering while interacting with the prototype, to gather unbiased feedback, and get insights that will help me create a better overall user experience for my audience. There is still plenty to iterate on and improve the usability of this concept.
- Now I’m working on creating the “Coach” feature.
- I’ll update this post with my findings after the sessions.
If you want to get involved in the usability sessions, or if you have any ideas on how to improve this concept, or if you just want to say hi, let’s chat.
