Classi

Manage courses and workshops in the Classi app.

Whatever you like to do, manage it with Classi! Classi is a simple but effective app that gives you all the necessary class information and a direct way to stay connected with your instructor. Lesson updates, messages, payments, registrations and many more in two simple apps; the Classi Instructor app that instructors use to manage and create classes and the regular Classi app for students.

The main challenge in creating this app was to design a system that could easily be used by all kinds of users and for every kind of course. The Classi team came to us with the wish to completely redesign their current app; they wanted us to enhance the customer flow, make it futureproof and ofcourse make it look cool and nice.

ROLE
Interface Designer

CLIENT
Classi

TYPE OF WORK
Concept, Branding, Interface Design

divider-wavedivider-wave
big image2@2xbig image2@2x

Student

For students we made the app as simple but still accessible as possible. The information is displayed in summary chunks that display the most important information. Ofcourse there's the possibility to dive deeper. Down below we highlight some features.

CALENDER

One calendar for all your courses

When you open the app, the first thing you see is your week calendar. Swipe to the left to see your lessons for next week. Give up your attendance before the start of every lesson and check in with the easy QR code when you're there.

LESSON INFORMATION

Simple and accessible lesson information

When you click on a lesson, you will see a compact overview of the most important information like date, time, location, your attendance, free spots and notifications. In case you haven’t set your attendance yet you will get a notification 24 hours before the start of the lesson. This way we made sure you will never forget your lessons!

NOTIFICATIONS & MESSAGES

Stay in touch with your instructor

No calls, emails or searching for contact information. With Classi you receive direct messages and course updates from your instructor. You can also send messages about your progress or if you have any questions.

img divider@2ximg divider@2x

Instructor

The instructor can manage and create new courses right in the app. He has one overview of all attendance and received payments. All this information and features can result in an app that's full of clutter, but by defining a good userflow and divide the information in chunks we made the app feel light and easy.

STUDENTS

Get to know your students

It’s important to get to know your students. Everything you need to know about them is shown in the app; when is their birthday? Are they injured? Did they already pay for all of their lessons? All this information is displayed around the person's photo.

CREATE

Create courses right in the app

No need to sit behind a desktop to create and manage your courses. With Classi you have one easy-to- use platform to create new lessons and courses, give updates and stay in touch with your students. Even setting up pricing and changing the way you want payment to be done is adjustable in the app.

CLASS CARDS

Manage class cards and receive payments

You can independently create class cards. With a class card you can set the amount of lessons, the price and the lead time. You can connect this class cards to one or more courses. The student can buy the class card when enrolling for the course. With the class card you also have an overview of the progress of the student.

img divider 2@2ximg divider 2@2x

Design details

The overall design of the app is clean and accessible. It has to work as a platform to present the wide variety of courses. With clear colours and dynamic interface element the design is always consistent.

Bright colours
Give the app clarity and direction. The colours have a soft touch witch work well with all kinds of photography.

Clear buttons
The buttons are big and consistent. They appear in several sizes and colours that suite the action.

Information cards
All information is displayed in cards. The design of the cards is dynamic but is always shown as an hierarchy.

Student lay-out
All course information is given in a square lay-out. All student informationis displayed in round cards.

Rows
We use three text colours to display the hierarchy in a row. These colours are opacity variants to match the surrounding.

Icons
The icons used in the app are smooth and subtle. They can be used as a line or as a filled version depending on the purpose.

Try or download the app

Click through the prototypes below or download the application in your store. 

Student app

Prototype of the student app.

DOWNLOAD FOR APPLE    |    DOWNLOAD FOR ANDROID

Instructor app

Prototype of the instructor app.

DOWNLOAD FOR APPLE    |    DOWNLOAD FOR ANDROID

Branding concept

Because we liked Classi so much we attempted to give it a suitable branding. The ‘Moves You’ branding concept gives us direction to create a new logo, campaign material and a visual way to play with the slogan. The branding is not implemented directly but can still be in the near future.