top of page

Class

class-img5.png
logo_2.png

Class is a product built specifically for teachers and school staff, in special education schools. It's been operated for over 10 years in number of schools in Israel.

The main uses of the product are controlling information management and monitoring student development.

My Role

UX Designer (team of 3)

User Research, Wireframing, Prototyping & Testing

October - March 2020

Softwares used

Google_Forms_logo_(2014-2020).svg.png
1200px-Adobe_XD_CC_icon.svg.png
invision-logo.png

Kick-off Meeting

computer_zoom.png

The system entrepreneur and developer- Meni, provided us with the initial and essential information about the product. We asked him questions like: who are the users, what are the users' pain points with the product and how he would improve the product.

Below are some of the software screens.

old before login.PNG
old dosuments.PNG
old tihnun shvuiv milui.PNG

The Challenge

The biggest challenge with this complex system, is making a large amount of information accessible to the education staff. Most of the users are mature and should get as much information as possible with as little effort as possible.

 Gathering Information

The system operator did not use day-to-day statistics on the system, so we did not had real data showing problems from the past. The way to gather information about the users was a detailed questionnaire that we built and from which we could get accurate information about the day-to-day problems that the users are experiencing.

Question_3.jpg
Question_1.jpg
Question_4.jpg
Question_2.jpg

Research Methodology

To proceed the user research on the product, we conducted Zoom conversations with principals and school teachers using it, while navigating them in the software.

We wanted to understand how they work and perform tasks on a daily basis, how long the process take, whether they get complicated, etc. Some of the informations they shared with us didn't fit what the entrepreneur told us.

Competitor Analysis

Part of the product understanding, included in-depth competitor research, including products “around” our product, such as kindergarten and university management systems. I registered as a user where possible, built timetables and reports and read articles and feedback from real users about the systems.

Competitor_Class.jpg
com_2.jpg
com_1.jpg
maxresdefault.jpg

Arranging the insights

We created a document and wrote on small memo pages all the problems of our users in the product. We compared the problems to those that also exist in similar products on the market, while making initial sketch attempts to produce graphic solutions to these problems.

document_2.jpg
document_1.jpg
class_memo_4.jpg
class_memo_3.jpg
class_memo_2.jpg
class_memo_1.jpg

Feature Ranking

Understanding the data: The next step was to segment the users into three main groups and make the decision, together with the developer, which user group requires more attention. Next, we selected the five most important features for user development and prioritized these two data into one screen.

Feature_2.jpg

Data-Based Persona

With the help of the information from the questionnaire and the zoom conversations with the users, we were able to create a representative persona that would characterize our users, experience the difficulties and problems of the users in the system and accompany us throughout the characterization process. We chose to create a Teacher as a persona Following the fact that Teachers represent 64% of Class users.

Persona.png

UX Goals

Depending on the results of the research we did, these are the goals of the user experience we chose to focus on:

access-granted.png

making the system more accessible to the target audience

comprehension.png

making the system comprehensive, including all of the important features

communication.png

one place for communication between staff members

User Flow

We closed the list of features that are going to come up our new version, we knew what things are important for our users to see and mostly- we knew what the users don't want to see. We started sketching the information architecture - the screen tree that shows where the user moves within each click.

flow.jpg

Sketching

We began to scribble possible solutions on our sketchbooks, for problems that flooded the school principals and teachers before us. One of the solutions we went on with was to divide the page into three main sections: a header top with the sub-categories that mainly important to users, a left section specifically for the user which displays personal or system messages and a central section where the user can get information on his recent activities and create weekly curriculum.

WhatsApp Image 2020-12-23 at 14.38.08.jpeg

Part of thinking further on this sketch, was to give the user the option to also view recent documents he uploaded and delve into the planning of the weekly schedule.

WhatsApp Image 2020-12-22 at 20.33.12.jpeg

Next, we delved into the left part of the user in order to understand what the personal messages he will receive will look like and how he will be able to write his own message

WhatsApp Image 2020-12-22 at 21.06.12.jpeg

Next, we tried to see how to incorporate a search bar in the main section in addition to inserting text in the weekly planning section to deepen our understanding of this feature.

WhatsApp Image 2020-12-22 at 18.53.32.jpeg

The next screen pertaining to the students' personal curriculum, which is updated by the student's teachers. Each student in special education program, has a different curriculum, in which the educational staff defines areas and goals for each student. For example, a field of study, a field of motor, and so on.
Each field has goals and objectives and evaluation metrics. The hardships are usually built at the beginning of a year and the progress is monitored at the halfway mark and at the end of the year.

tala.jpg

The document upload screen was also upgraded and received special attention as a pop-up screen, on top of the interface itself. It will now be possible to drag documents directly from the computer to the software and associate it with people and classes.

documents.jpg

Mobile Adaptation

The purpose of creating a mobile version, which was highly requested by the users, was to simplify complex processes and be accessible both on the bus on the way to school and while sitting on the couch at home. We sat down in front of all the relevant features and decided what is important to be on the smartphone version and what is not.

mobile.jpg
mobile3.jpg
mobile2.jpg

Wireframing the Solution

Below is the home screen at the moment of connection.

After realizing from users that getting to a specific document can be cumbersome, require a lot of clicks and entering multiple categories- we have placed recent user actions as links, for them to resume excatly from where they left of.
Also, sometimes teachers work while in school and continue in the evening, so we wanted to make the last things they worked on- accessible for them.

The Common actions section from left, is a new, easy way of creating the most used documents in Class, according to our research.

The Messages section down left, is one place for all of the scool members to speak and send files, as an insight to help to improve the communication between them.

תמונה1.png

The bottom part includes the weekly planning system. By clicking on one of the days in the right part, an hourly detail opens with all classes details.

תמונה2.png

when choosing a specific hour, a menu appear, where a user can manually choose a lesson that he's teaching and associate it to a class, and add lesson topics. The data filled by the teacher here, will be updated in the system and will be avilable to everyone to see.

תמונה3.png

Just like the Sketch, the document upload screen designed as a pop-up screen, on top of the interface itself. It will now be possible to drag different types of documents directly from the computer to the software and associate it with people and classes.

תמונה1.png

The TLA screen (personal curriculum) had to be adapted to the regulatory restrictions of the Ministry of Education, we tried to centralize everything in the most convenient and familiar way to the user.

 

In this section:

- General details of the student with a brief background on his condition
- Associate staff attached to the TLA of this student
- Special documents upload to TLA
- Creating new profiles

Tala.jpg

The Mobile idea was to allow teachers to be up to date on the lessons they have during the day, without having to depend on a computer or print a curriculum of hours,
keep up to date with the lesson plan and even mark a classroom presence on the phone.

HOME_Mobile-(-640x360_-Most-Common-Samsung-Type)-–-2.png

Usability Testing

As a result of a feedback received from users on the first computer sketch we did, we cleaned up the upper part of "last activity" and turned it into links, creating a cleaner look and understanding that the last action would actually lead us to a certain place.


We changed the "lesson plan"section as well, and implemented the request to give the destinations the appearance of a writing text box.

תמונה2.jpg
3.png

Inspiration

The product is in fact a complex system, which includes a considerable number of features for the benefit of the users. As part of the market and competitor analysis I did earlier in the characterization process, it was necessary to observe successful complex systems in the market, employee dedicated, as well as design portals, see how their design behave and how all of these, can serve the users.

2560px-Asana_logo.svg.png
basecamp-logo.png
Monday.com-Logo.wine.png
Todoist_logo.png
zsdh1tldjg5pnbkjxz0c.png
proofhub-logo-2017.png

Prototyping

The last and final step after the final usability tests, was to pass on to users and the system developer the final prototype, where they can navigate and understand how the resolution works on their screen and whether the actions are as intuitive as in the usability tests.

Results

After passing on the new characterization to the management staff and the teaching staff in the schools with class software, we received some very good feedback. The project developer spoke to me in person and wanted to move on to the rest of the project and all the other screens that have not yet been characterized and eventually to the entire system- mobile and desktop.

 

I was very happy with the final result and the users reactions. Below is one of the feedbacks we received:

My Takeaways from Class project

1. Be open to a lot of opinions- After the kick-off conversation with the project developer, we already felt we could start working on the project, but we preferred to hear real users of the system - a decision that turned out to be right and very important, because users use the system more than the developer himself, and other things are important to them- things that the entrepreneur did not even think about.

2. Define roles in advance- Being part of a three-person team can be challenging.

It took us until the middle of the project to realize that role holders within the team needed to be defined. only when we did this we manage to move quickly ahead..

3. The best designs come from collaboration- It was inspiring to see how each person is able to bring to the table a different perspective during the drawing sessions. I have noticed that non-technical people are unlimited in their ideas because of their lack of technical knowledge; Whereas technical people are based on reality and can be a great glory board for what is possible.

Making the world a better place

Working in a small team for a short period of time can be challenging. Everyone comes with their own views and things do not always connect. In retrospect, I am very happy with the team I worked with on the current project, I received new tools from them that accompany me today and of course - I found new friends.

Feature_1.jpg

Made proudly with:

vlad.png

Vladimir Serjanin

inga.png

Inga Golovko

Mobile Experience for football fans and club managers

M.V.P App

Previous project

User Experience for payroll reporters SaaS platform

Clarity

Next project

bottom of page