Nov 25, 2019
ClassHub: Design Excercise: Classroom App for teachers, parents, and students
As part of my portfolio, I wanted to describe my design process on solving a problem that I have experience with, as I worked in a school environment. I figured the best way to do this is to design it from ideation to creation, explaining things and why I did certain solutions and decisions.
I needed approximately: 14 hours ~ this includes the case study as well
But first… Research
First, I did a brainstorm, wrote down my assumptions and analyzed already existing solutions and potential competitors.
I checked out the common usages, of the already existing designs.
Finding the problem
As I worked in a school, I can closely relate to the given problems. I used my experience and asked practicing teachers how they like to communicate with their class.
- Teachers: “We used to have a Whatsapp class chat, which was very unpractical and unsafe.”
- Teachers: “I would like to have a solution that lets me communicate quickly. Many parents don’t check their emails I’ve sent.”
- Students: “I would love to have a chat which is distracting and gives me the most simple information like what the homework for next week would be.”
To help the students and teachers make their communication simpler, we need to focus on those 3 goals.
- Market the product to schools who are willing to hand out our licenses to their teachers, instead of using private chat tools like Whatsapp.
- Highlighting the 1-on-1 communication with the other party, to make sure there is no distraction and interference by classmates.
- Saver communication and a lot of information provided
Sketches and Wireframes
There are two parties involved: The student (and their parents) and the teacher. In this case study, I will only cover the student side.
As I did my interview earlier, with two teachers and a student, I could already gather great insights.
As I’m guided by the input of people who work in this field, it’s time to generate great ideas:
Information Architecture: I have already listed and assigned pieces of information on the picture above. I then organized them by importance.
- User flow: I categorized the information and divided them into 4 main parts.
- Persona: This was hard to pinpoint. But I eventually found the right personas.
👨🏾🎓Fred the “high schooler”
He visits a high school, is 14 years old and is an average student, a little forgettable and often misses certain deadlines but still wants to keep track of his homework.
👨👩👧Cindy from the “supportive family”
Cindy is 17, goes to a gymnasium and her parents keep close track of her education. She’s eager to strive and be the best in class. Her parents often check on her progress and occasionally ask the teacher questions regarding her education.
👩💼 Layla the ”university student”
Layla 21, goes to college and her lecturer assigns many essays. So many, she can’t even count them. She wished her teachers would use some calendar sharing tool to not get overwhelmed by information.
Despite all their differences, they both grew up in the age of technology and they would like to have everything on their tablet or smartphone as they can perceive the information better this way.
- Wireframes: I jumped into Figma and designed some low fidelity mockups to get a good feeling of the general usability. (Not included here)
I got inspired by already existing apps, such as:
- WhatsApp: Simple texting overview
- Google Calendar: Colorful and easy dividable information blocks to quickly see open tasks.
The Solution
The navbar has four items: A Chat, Information, Calendar, and Profile.
I will describe the four different navigation parts separately, as they are the main focus of the app.
Calendar: The calendar, as it’s named keeps track of all upcoming information, such as homework, holidays or school events. They can also sync their calendar with Apple’s Calendar or Google Calendar. The dates that will be added by the teacher who chooses, which class of his receives what.
Information: For the calendar, only the upcoming items in the active month will show. If the user proceeds to the information screen, he has a list of all upcoming events, which he can enter and has access to files that have been attached by the teacher.
Chat: The chat is basically where the important stuff gets exchanged. Either between student and teacher if a question or terms of notice arises, as well as for parents, to communicate. The chat is WhatsApp-like to only display a simple chat tool (no photos exchange, status, etc.)
Profile: The profile acts as an overview of assigned classes for the student, as well as an Avatar, a cover photo and of course the settings. To enter a new class, the teacher provides a generated QR code, which the student can access by tapping on the plus icon, scan the code and enter the shared class information.
Moving forward
If I had more time and resources, I would:
- Create a clickable prototype, make thorough user tests, and iterate.
People ignore design that ignores people. — Frank Chimero
