eLarium — learning management system

E-learning platform with advanced functionality providing excellent user experience for teachers, students, and business owners.
Let's talk

About the Client

Neobank is a fintech app startup with a new approach to banking services. The service can help users to view finance flows, make payments, control the balance on all cards, and see expense analytics. 

Client name
John Smith, The Co-Founder
Industry
Fintech
Location
USA

eLarium — learning management system

E-learning platform with advanced functionality providing excellent user experience for teachers, students, and business owners.

NeoBank needed help with design and iOS development for the new fintech app. They wanted to provide potential customers not only with easy banking service, but also with a great tool for making new good habits on users' way to financial independence.

UX Research
UI Design
Branding
Development
Usability testing
QA
Challenge #1
NeoBank should provide the best UX design that can satisfy users with different demographics and lifestyles.
Challenge #2
NeoBank was seeking a new vision of banking services. It should not be too formal but not too fancy either.
Challenge #3
The Client had a limited timeframe and scheduled investors pitch also, so deadlines were really important.

About the Client

eLarium is a learning management platform. It gives a lot of opportunities for teachers to manage their work and for learners to get new knowledge easily. The COVID-19 pandemic has brought about great changes in the educational niche. But our Client was ready for new challenges, so he decided to open an online school. We filled in the brief together, because it was a really new solution for the market, and there were no products we could use for inspiration.

We really appreciated the opportunity to work with one of such innovative fintech startups. They were open to new ideas and paid a lot of attention to the UX design stage for mobile devices.

Client name
Alissa Clark
Industry
E-learning
Location
USA
Challenge #1
eLarium did not have its own product team, so they needed help with all stages of product development.
Challenge #2
The product had to be created from scratch for several platforms and eLarium employees had to be trained to use it.
Challenge #3
At that time, it was an innovative product on the market, because educational companies were just testing online learning.

Solutions

1
Quality UX research
NeoBank was looking for innovative solutions for future customers. In order to solve their needs and pains, we had to collect and analyze as much information about them as possible.
2
Design process
The product had to be created from scratch. The founders came to ANODA only with an idea. We clearly structured all processes and discussed the scope of tasks.
3
Modern Interface
We were challenged to provide a simple and user-friendly interface making people's life easier. This financial app should not look too formal like most competitors' designs.

Neobank — award-winning fintech app design

Mobile application design that became Top #1 fintech app design on Behance with thousands of appreciations.

NeoBank needed help with design and iOS development for the new fintech app. They wanted to provide potential customers not only with easy banking service, but also with a great tool for making new good habits on users' way to financial independence.

UX Research
UI Design
Branding
Development
Usability testing
QA

Solutions

1
Top-notch team
Our team has a lot of experience working with educational products and was ready for new challenges.
2
Design process
Thanks to a well-structured design process, we can efficiently and quickly develop products from scratch.
3
Full-cycle development
eLarium management wanted to find a team that can close all the necessary tasks.

Scope of Work

The Client wanted not only to provide all the features of his learning process but also to add solutions to manage the business effectively. For example, we have developed an attendance tracker. It helped not only to monitor the progress of students but also to check the workload of teachers.

Platforms
Desktop
Mobile Web
Tablet
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Features
Mobile App
Landing page
Corporate website
Saas Platform
CMS
Admin panel

Filling out a brief

The first stage of the work was an acquaintance with the project. To do this, we asked the Client to fill out a brief and tell in detail about the educational processes at the private professional school.

Project Scoping

After the Scoping session, we developed a detailed roadmap of how we plan to work on the project. Meeting deadlines was important to the Client, as they wanted to resume the educational process as soon as possible.

Product Design

At this stage, we talked a lot with learners and teachers to understand their needs and study habits. This information allowed us to find the best design solutions for the platform. We also paid a lot of attention to creating a beautiful interface.

Back-end & Front-end Development

The platform had to provide convenient access to all necessary information to different types of users — students, teachers, and business managers.

Native Mobile Development

We understood that modern students want to have access to the online learning platform 24/7, wherever they are. Therefore, we immediately started developing a mobile application too.

Scope of Work

eLarium is a learning management platform. It gives a lot of opportunities for teachers to manage their work and for learners to get new knowledge easily.
The COVID-19 pandemic has brought about great changes in the educational niche. But our Client was ready for new challenges, so he decided to open an online school. We filled in the brief together, because it was a really new solution for the market, and there were no products we could use for inspiration.
Platforms
Desktop
Tablet
Mobile Web
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Design Tools
Landing page
Mobile App
Corporate website
Saas Platform
Admin panel
CMS

Scope of Work

The founders of NeoBank spent more than a year looking for an agency that would help them with design and development. They understood that they were too busy with other projects and would not be able to devote much time to NeoBank. They needed a team that would also be inspired by their idea and work on it independently enough.

Platforms
Desktop
Mobile Web
Tablet
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Features
Mobile App
Landing page
Corporate website
Saas Platform
CMS
Admin panel

Brief filling

First of all, we asked NeoBank to fill out a brief. In it, the founders write in detail about their vision of the future product, its main competitors, its mission and values, and also provided examples of services that inspired them.

Project Scoping

We also realized that there is a very large scope of work ahead. We had to develop the product from scratch. Therefore, we started with clear planning, structuring of tasks, and estimation by time.

Product Design

The main advantage of NeoBank is the emphasis on outstanding user experience. In order to achieve the best deliverables, we had to find out all the needs of the target audience to provide the best product solutions.

Back-end & Front-end Development

The platform had to quickly process a large amount of data, deliver a variety of financial features and allow users to easily access any necessary information.

Native Mobile Development

Since NeoBank wanted to offer its users the most convenient fintech solutions, its founders immediately decided to start with an application.

Result

640h
of ANODA’s team working
94 screens
for Web & Mobile app
4 platforms
for a new fintech product
Alissa Clark
"We had a really huge scope of work. But ANODA did an excellent job and completed all the tasks even before the deadline. Their designers and developers are first-rate professionals. Also, we want to notice the high level of communication between our teams and the initiative of ANODA in proposing creative ideas."
This image is a 3D rendering of a man in a suit presenting a chart on a flip chart stand. The man is wearing a blue suit with a white shirt and a blue tie. The man is holding a gray tablet in his right hand. The man’s face is blurred out. The flip chart stand is orange and blue in color. The chart on the flip chart stand is a bar graph and a pie chart. The bar graph is orange in color and the pie chart is blue and orange in color. The background is white. This image could be used to represent a business presentation, a data analysis, a report, or a proposal.

Product Design

1

Ideation & Evaluation

Our main goal while working with eLarium was to transfer all educational processes of the private school to an online format. But it was also important to create features so that the business could effectively manage teacher schedules and student attendance. Therefore, we asked eLarium to fill out the brief in detail and tell us about all the necessary options.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Let's talk
03
Estimation
02
Intro call
01
Brief filling
2

UX Research

The platform was created for different types of users, so we conducted a series of user interviews with all of them. We also researched the experience of competitors and looked for similar solutions in other categories.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

3

User flow

The User Journey Map helps us better understand how users interact with the eLarium app. We can not only follow their path from registration to achieving some goals but also learn more about the emotions of using the product.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

4

Wireframes

At this stage, we place all the necessary interface elements on the page. This is a sketch with minimal detail, which will help to make accents in the design. We usually create such a prototype in Figma and discuss it with the Client.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

5

Moodboard

The Client described in detail his vision of the project and its aesthetics in the brief. They wanted to combine the traditions of the private school with a more modern approach to education. The app was supposed to convey the idea that online learning can be interesting and fun.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

6

3 styles option

Our design team has created three variants of visual style for the e learning app. For this, they designed several main pages of the future application. The Client could choose the option that he liked the most.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

7

Final version

After discussing three variants of visual style with the Client, we settled on one of the options. The Client also liked a few elements from another variant, so we added them to the e learning app design as well.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

8

UI Design

We chose a restrained color palette because the platform was supposed to motivate users to focus on learning. Also, there were people of very different ages and fields of activity among the students, so we tried to maintain a neutral and informative style. But still adding a little color is always a good idea!

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

9

UI Design

Typography & Colors

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

10

All screens

After we received the Client's approval of the design for the main pages, we started working on the other pages. Since we were developing Web and Mobile platforms, in total we designed more than 75 screens.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Product Design

01
Estimate Update
02
Project planning
03
Zero sprint

We deliver in iterations

We designed the development process in such a way that the Client can always see the deliverables of a certain stage and understand what the ANODA team is currently working on. We also follow the Agile methodology.
Several developers, the project manager, and the QA specialist worked on the development of the app for eLarium.
Tech Tools:

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Result
430h
of ANODA’s team working
94 screens
for Web & Mobile app
4 platforms
for a new martech product
Alissa Clark

We had a really huge scope of work. But ANODA did an excellent job and completed all the tasks even before the deadline. Their designers and developers are first-rate professionals. Also, we want to notice the high level of communication between our teams and the initiative of ANODA in proposing creative ideas.

This image is a 3D rendering of a man in a suit presenting a chart on a flip chart stand. The man is wearing a blue suit with a white shirt and a blue tie. The man is holding a gray tablet in his right hand. The man’s face is blurred out. The flip chart stand is orange and blue in color. The chart on the flip chart stand is a bar graph and a pie chart. The bar graph is orange in color and the pie chart is blue and orange in color. The background is white. This image could be used to represent a business presentation, a data analysis, a report, or a proposal.

Product Design

1

Ideation & Evaluation

Our main goal while working with eLarium was to transfer all educational processes of the private school to an online format. But it was also important to create features so that the business could effectively manage teacher schedules and student attendance.

Therefore, we asked eLarium to fill out the brief in detail and tell us about all the necessary options.

03
Estimation
02
Intro call
01
Brief filling
2

UX Research

The platform was created for different types of users, so we conducted a series of user interviews with all of them. We also researched the experience of competitors and looked for similar solutions in other categories.

3

User flow

The User Journey Map helps us better understand how users interact with the eLarium app. We can not only follow their path from registration to achieving some goals but also learn more about the emotions of using the product.

The next steps were wireframing and UI design. We are also big fans of Pixel Perfect Design, so our UI elements fit perfectly into Wireframes. At this stage, it was time for one more meeting with the Client to approve the way customers use different features on the platform.

neobank sitemap
4

Wireframes

At this stage, we place all the necessary interface elements on the page. This is a sketch with minimal detail, which will help to make accents in the design. We usually create such a prototype in Figma and discuss it with the Client.

This step is necessary so that when developing, we do not think about whether something should be added. We will already have a finished UI/UX design, which we will follow.

neobank-ipad-screen-wireframesneobank-ipad-screen-wireframes
5

Moodboard

The Client described in detail his vision of the project and its aesthetics in the brief. They wanted to combine the traditions of the private school with a more modern approach to education. The app was supposed to convey the idea that online learning can be interesting and fun.
neobank app home screen dashboard
6

3 styles option

Our design team has created three variants of visual style for the e learning app. For this, they designed several main pages of the future application. The Client could choose the option that he liked the most.
7

Final version

After discussing three variants of visual style with the Client, we settled on one of the options. The Client also liked a few elements from another variant, so we added them to the e learning app design as well.
neobank portfolio screen
neobank investing screen
8

UI Design

We chose a restrained color palette because the platform was supposed to motivate users to focus on learning. Also, there were people of very different ages and fields of activity among the students, so we tried to maintain a neutral and informative style. But still adding a little color is always a good idea!
9

UI KIT

Typography & Colors

Project planning & Zero sprint

Before starting work, our development team always needs time to discuss the project in detail and choose the best technical solutions.

Web & Mobile Development

We used Swift to build the app. For the web platform, we chose such languages as Node.js for the back end, and React.js for the front end. The development was based on 2-week sprints. There were several developers, the project manager, and the QA specialist on the project.

Final QA / Testing

Each feature is tested to identify flaws in its operation. We also conduct final QA to ensure high-quality development.

Feature #1
Dark-mode communication
It is very important for teachers and students to stay in touch. Especially when the lessons take place online in a virtual classroom. Therefore, we worked out in detail the features that provided these options.
Users can not only send messages to each other directly on the e-learning platform but also structure chats by groups. For example, teachers can separate chats with colleagues and school management from chats with students.
Let's talk
Feature #2
Schedule and Reminders
Learners are faced with the need not only to memorize a large amount of information but also to adhere to the educational process. In order for them not to forget anything, we have created convenient scheduling options.
Teachers can also use these features to monitor their workload and schedule classes. Dates of all tests, lectures, important meetings, and practical education tasks can be added to the calendar on the app.
Feature #3
Data visualization in operational dashboards
eLarium helps teachers manage the e learning process and make the class schedule. For this, a convenient "My Course" tab has been created. Tutors can see all the groups in which they teach.
Also, here they can get detailed information about each education course, add new groups or check at which stage of the curriculum the learners group is now.
Feature #4
Audience segmentation
eLarium was created not only for students and teachers but also for business owners. One of our goals was to develop features that will help management get data about educational processes and receive all the necessary analytics.
For this, we have developed convenient dashboards that display such app data as the number of students, total/planned revenue, revenue forecast, tutors' workload, gross profit margin, profit level between course attendees and tutors' salaries, and much more.
10

All screens

After we received the Client's approval of the design for the main pages, we started working on the other pages. Since we were developing Web and Mobile platforms, in total we designed more than 75 screens.
Software Development
01
Estimate Update
02
Project planning
03
Zero sprint

We deliver in iterations

We designed the development process in such a way that the Client can always see the deliverables of a certain stage and understand what the ANODA team is currently working on. We also follow the Agile methodology.

Several developers, the project manager, and the QA specialist worked on the development of the app for eLarium.

Tech Tools:

Project planning & Zero sprint

Before starting work, our development team always needs time to discuss the project in detail and choose the best technical solutions.

Web & Mobile Development

We used Swift to build the app. For the web platform, we chose such languages as Node.js for the back end, and React.js for the front end. The development was based on 2-week sprints. There were several developers, the project manager, and the QA specialist on the project.

Final QA / Testing

Each feature is tested to identify flaws in its operation. We also conduct final QA to ensure high-quality development.

Want to create an application?
Let's talk
FEATURE #1

Real-time communication

It is very important for teachers and students to stay in touch. Especially when the lessons take place online in a virtual classroom. Therefore, we worked out in detail the features that provided these options.

Users can not only send messages to each other directly on the e-learning platform but also structure chats by groups. For example, teachers can separate chats with colleagues and school management from chats with students.
Let's talk
FEATURE #2

Schedule and Reminders

Learners are faced with the need not only to memorize a large amount of information but also to adhere to the educational process. In order for them not to forget anything, we have created convenient scheduling options.

Teachers can also use these features to monitor their workload and schedule classes. Dates of all tests, lectures, important meetings, and practical education tasks can be added to the calendar on the app.
FEATURE #3

Courses

eLarium helps teachers manage the e learning process and make the class schedule. For this, a convenient "My Course" tab has been created. Tutors can see all the groups in which they teach.

Also, here they can get detailed information about each education course, add new groups or check at which stage of the curriculum the learners group is now.
Let's talk
FEATURE #4

Management of the private school

eLarium was created not only for students and teachers but also for business owners. One of our goals was to develop features that will help management get data about educational processes and receive all the necessary analytics.

For this, we have developed convenient dashboards that display such app data as the number of students, total/planned revenue, revenue forecast, tutors' workload, gross profit margin, profit level between course attendees and tutors' salaries, and much more.

Project planning & Zero sprint

After the design was completed, we took time for new planning in the development team. Developers also needed to discuss the technical requirements for the project and choose technological solutions.

Web & Mobile Development

Our team recommended using React.js on the front end, Node.js on the backend, and Swift to build the app. The development was based on 2-week sprints to ensure the right level of flexibility, maximum value, and a constant feedback loop.

Final QA / Testing

Each stage of development is tested, so we are confident in the quality of the delivered product. After we finish working on it, we also do Final QA to make sure it's perfect.

Delivery & Deployment

This was the last stage in our work on the creation of NeoBank. Now a fintech application has become available to users from all over the world and we were waiting for the first reviews.

Want to create an application?
Let's talk

Contact us

Share the details of your project – like scope, timeframes, or business challenges you’d like to solve. Our team will carefully study them, and then we’ll figure out the next move together.

Project inquiries
HQ:

Kaupmehe 7-120,
10114 Tallinn, Estonia

Got a project on mind?

By sending this form I confirm that I have read and accept the Privacy Policy

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.