App With Courses For Holistic Nutritionists

How we developed a mobile application on React, including the capabilities of the web version of the platform, which is implemented on Moodle.

Client

Akademie der Naturheilkunde is a distance learning institute, where people are trained to become holistic nutritionists.

Thousands of students learn more about the connections between body, nutrition and health.

By this time, the client already had a web version of the platform on Moodle.

Сhallenge

The difficulty was to make it easy to navigate between the large and different levels of nesting in each course.

The client also expected to replace the existing PDF with SCORM in the future and we needed to provide for all the nuances of functionality.

Solution

Our User Experience experts have developed an Information Architecture for each course, as well as clickable prototypes for course flow approval and nesting with the client.

Course Architecture

In the web version of the Moodle platform, the client already had some courses. Additionally the client planned to run other courses with different levels of nesting and content. We created a nesting architecture for clear separation. The courses could consist of Modules, Chapters that consisted of a SCORM package, Units, PDF books, and audio.

Low-Fidelity Wireframes

The development of the application wireframes with structure and functionality helped the client to better understand the idea of the project structure and all possibilities. This made it easier to perceive the future structure of the app and coordinate blocks and content with the client.

Introduction of new features

We have carefully approached the user’s pain and created new features that solve all the problems and simplify and speed up their work.

PDF Notes

In order to leave notes while reading the training material in the pdf file, we have implemented a functionality to add notes in any part of the pdf file. As well as a compact list of all notes in a separate page with information on what page it was left and the ability to sort and filter. Sorting is possible by date and by page. Filtering by specific pages on which notes were left. If a note is no longer needed, it can be deleted.

PDF Bookmarks

To be able to save a specific page, we have added the ability to save it to a bookmark page. In this case, the user can qUIckly go to the saved page from the list. It is also possible to delete the bookmark if it is no longer needed.

Search within PDF

To quickly find the necessary material, we have implemented a separate search by content within the pdf. The search indicates which page the query was found on and how many search matches were found on the page.

Downloading for offline mode

Since the target audience of the course may not have a stable Internet connection, the ability to download files has been added. The download can be an entire list of audio, chapters, or individual files.

Key Application Screens

As soon as we chose the structure and UI kit, we implemented the screens and showed it to the client. After the approval of the stylistics, we continued working on the remaining pages.

Development Of The System Design

Since the app was developed in React, we departed from the familiar patterns in HIG and Google Material GUIdlines, leaving the familiar behavior for the user. We developed custom illustrations that convey a sense of naturalness and nature. The illustrations consist of plants and abstract colors with a grainy effect.

Feedback And Communication

We have built close and transparent communication with our clients in order to better understand the details of the project and speed up the whole process.

Status, Regular calls, and correspondence

Our collaboration with the client began with setting the timeline and time estimate. In the process of work, we always discussed updates, as well as approved all stages of work with the client through calls in Zoom and correspondence via Skype.

Results

The client wanted to create modern natural style in the app with user friendly flows for students. The main functionality was ability to use files without internet connection.

Deliverables

Creating an online and offline learning app with clear and user-friendly interface
Integration with Moodle web learning platform
Development for IOS and Android devices
Downloading SCORM packages for training
Convenient functionality of notes and bookmarks in pdf textbooks

Project in figures (impact created)

People

1600 +

Hours

55 +

Design layouts

Tools Used

React Native, PHP, Moodle, MySQL, SCORM, PDF, Figma, Miro.

Ready to start?

Contact our CTO or fill out the form

Sergei Porfenovich