SmartJen

Sophisticated open-source learning management system to organize student and educators’ learning processes just in a few clicks.

Deliverables: UX, UI

Country: Singapore

Brief & Overview

SmartJen empowers students to go through their learning journeys easily, check results, and track their achievements via a customizable dashboard. Teachers can create and manage students’ lists, groups, and worksheets with assignments, track course completion, and compliance. With a collaborative approach, parents are granted access to have control over their children’s learning processes.

Challange

SmartJen came to Northell to improve their existing web platform by suggesting new and advanced features to make the user experience more seamless. Furthermore, SmartJen’s existing website was required to be updated and redesigned according to new design trends and best practices.

Design Process

We were equipped with a clear vision of SmartJen’s unique value proposition thanks to versatile users and market research. Evaluating the problems of the existing platform we realized how to make customers’ journeys more convenient and smooth and improve user flows. Considering the challenges of students and teachers in their remote learning management operations we embodied the vision leveraging the following steps:

Research

Understanding the client’s needs
In-depth interviews of  the target audience

Analyze

Evaluating the business logic of the web application and customers’ needs

Prototype

High-level wireframes
Sitemap
Web app UI design
Website redesign

Deploy

Web design deployment and presentation
Improvement of the UI/UX design features based on performance metrics and user feedback.

Investigation

It seemed a real challenge to consolidate the learning management solution from different users’ roles. Once user interviews were conducted we obtained an in-depth understanding of how the platform had to deliver value to tutors, students, and their parents. Based on business logic evaluation of the existing platform and market research insights we were empowered to transform the learning platform into accurate and simple system with solid learning and assessment opportunities. To cover the challenges of students and tutors we walked through their journeys and came up with a comprehensive real-world learning management system.

The first step was to create high-level wireframes to visualize concepts from both the students’ and tutors’ perspectives. The next phase covered UI/UX design for web applications leveraging the mobile-first approach, thanks to which the service is easy-to-use on each device. Apart from tight collaboration with the SmartJen team we also were involved in the ongoing support for the developers’ team in the case, there were any additional queries to clarify users’ next movements. Therefore, we were asked to prepare additional designs for a better understanding of the process, thereby, preventing future misconceptions between developers.

Sitemap

Student Flow

Based on business logic evaluation of the existing platform and market research insights we were empowered to transform the learning platform into accurate and simple system with solid learning and assessment opportunities.

Tutor Flow

Parent Flow

Wireframes

Branding

Colors

#333482

#4DBEFB

#312675

#24B1F5

Source Sans Pro

Light

Regular

Semi Bold

Bold

Development part

At this stage, we used a standardized and recognized development model to develop and implement new features gradually. We used Agile methodology and Jira for task management.

In fact, the product development process is divided into 5 main stages. Our developers wrote code for all product components using the documentation and architecture. The tasks were divided between the team members according to their area of specialization.

Stage 1. Product Technical Documentation

During this stage, we collected all the relevant information from our client to develop a product as per his expectation and requirements. We wrote technical documentation and chose technical stacks: React.js and Node.js.

At this stage, we defined the requirements for functionality (requirements for the admin panel) and user roles (admin and super admin). We also finalized the estimate and scope of work.

Stage 2. Development

Our front-end developers were responsible for the client side of the application. Back-end developers were responsible for API and database development. We tested every new feature released. The DevOps team worked on the CI/CD process.

Stage 3. Testing

QA engineers tested all delivered code and carried out manual testing for developed components.

Stage 4. Product Deployment and Integration

After the development and regression testing from the QA team, we switched to production deployment and integration. The tested version of the product was delivered to the users for beta testing. The team collected user feedback, fixed all the bugs, and implemented some improvements.

Stage 5. Maintenance

After deploying a SmartJen product on the production environment, if any issue comes up and needs to be fixed or any improvements are to be done is taken care of by the Northell development team.

Results

To inspire learning among students and simplify tutors’ efforts to optimize learning processes, we were aimed to create user-friendly and smart UX solution with human-centered essence. So we designed a responsive web app paying special attention to convenience while creating and managing assignments for students. We were asked to design the following features for the web app:

Individual and group performance page.

This feature streamlines assessment processes where teachers can evaluate students’ progress by the worksheet, by topic, by ability.

Dashboard with categorized data

The users are able to fastly view and make changes to the main information by the categorization method switching between tabs in list and grid views.

Leaderboard.

Teachers can see students’ achievements and filter by timelines.

Messenger.

All members of the learning process can communicate and keep in touch anywhere and anytime without the need to use additional message applications.

Customizable Worksheet Generator

SmartJen helps educators create and assign comprehensive tasks for their students in quizzes mode, exam mode, practice mode, and interactive mode. Everything is tailored to teachers’ and students’ needs.