UX and Wire-framing | UI and Visual Language | Prototyping and Animating
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.
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.
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.
User header: Post type icon and matching color for better affordance assignment due date, student name, photo, student class
Picture of homework assignment
When it was posted
Comments and reactions
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
Picture representing the event, comment about the event and date
Comments within comments
Feed background darkens
Class title and photo
List of classmates you can select