Class.Me.

UX and Wire-framing | UI and Visual Language | Prototyping and Animating

About Class.Me.

Class.Me is a mobile app that enables real-time social communication, learning and sharing with students in the same class. This includes all classroom learning - from homework assignment sharing and preparation to studying for tests and even consulting with their teacher. Class.Me helps them organize their assignments and prepare for them in a timely manner. The app encourages children to complete assignments by giving them a safe place to ask and answer questions.

Scope of the project

We were approached by Class Me to create a MVP (minimal viable product). I received a technical spec from the Product Manager, specifying the scope of the project.
Because we had 3-4 weeks to deliver, I created a high-fidelity wireframe, and laid out a visual language on it at the end. We drew inspiration from Snapchat, Facebook and WhatsApp to appeal to teen users.
After specs were sent to development, I created a three-scenario video that was presented to stakeholders during pitches to explain the functionality and flow of the app.

Prototyping

We used Snapchat and Facebook models to help us filter data, lay it out properly and allow the young users to interact in an intuitive manner.

Students are a part of different class groups.
Selecting a group allows the user to post different types of data such as: exams, problems, birthdays, chats, comments and quick replies. We use these categories to help filter and search for them easily.

Students and teachers can comment, react and share posts.
Posts may contain photo uploads.

Tags could may be added to posts to enhance searchability.

Wireframes & Design

Homework Post Structure

User header: Post type icon and matching color for better affordance assignment due date, student name, photo, student class

Post comment

Picture of homework assignment

When it was posted

Comments and reactions

Problem Post Structure

App header: relevant class selected displaying the possible comment choices

Post comment and photo

Post time and reaction count

Quick Reply: add photo, leave comment

Exam Post Structure

Picture representing the event, comment about the event and date

Comments within comments

Reactions

Share Post Structure

Feed background darkens

Class title and photo

List of classmates you can select

Send button