The Banking Offer

How we created an online education platform with a user-friendly design and Stripe payment system

Education & E-learning Web & Software development UX/UI Design

The Banking Offer

How we created an online education platform with a user-friendly design and Stripe payment system

Client

The Banking Offer is an online education and mentorship program in the field of finance.

Their primary goal is to provide financial education and prepare prospective students to build their careers on Wall Street.

Сhallenge

The client wanted to redesign an existing training platform as it was not user-friendly. The platform had superfluous hierarchy and unnecessary pages, which made it impossible for the user to start learning immediately. The main parts of the program — videos and quizzes — were located in different places. The links to the videos were immediately visible, while the quiz’s existence was not obvious.

The client requested to develop a dashboard that would contain all program parts without hiding the needed content from the user.

Solution

Our team created the dashboard where the user doesn’t have to wade through unnecessary pages. He can see all the training parts, including the benefits that go out-of-the-platform: ability to join the Slack Community, schedule the call with a personal trainer and buy tickets to the upcoming summits.

A student can also track his learning progress: the steps made, the point he is at, the learning path to go, and the bonuses provided.

Logo improvements

While we were working on the dashboard, we tried to use the client’s logo. However, in the process we came to the conclusion that small formats are difficult to read. The user would not be able to read the main image underlying the logo — the Empire State Building. This metaphor reflects the corporate spirit of the company, so it was important to emphasize this. We tried to make the image visually expressive and the logo more informative.

Dashboard redesign

We started work with redesigning the most important part — the user dashboard with video and quizzes. We’ve simplified the user flow so that he has immediate access to the learning materials. We also worked on the UX of the course progress, making it more obvious for the user.

Design of the page with quiz results

All quizzes have 4 types of questions: True or False, Fill in, Sorting and Multiple-choice Questions. We worked out an easy way to understand the type of questions and how to interact with them.

A tooltip with useful information is displayed under each answer, both the correct and wrong ones. We have made the complex quiz results system convenient and really useful for prospective students.

Design of other platform pages

While working on the project, we created many design layouts: registration flow screens, (includes Sign In, Sign Up and Forgot Password screens), the video pop-up, choose a plan flow. Our team created the design of the user profile and some small pages: 404 page and Privacy Policy Pages.

Main visual features

The existing client’s project already had a bright style, which we decided to support. We made it look cleaner and more professional by adding artwork elements to emphasize the uniqueness of our client’s business.

Artwork illustrations

We made the existing illustrations more interesting and detailed. We also created many new images for the Selling Landing page, registration flow, and 404 page.

Illustrated Course Progress

We have inserted an illustrated overall course progress to help the student navigate through the training. With this progress bar with bonuses, the user will have more fun interacting with the learning system.

By the client’s request, we used the image of a New York cab taking a student to Wall Street as a metaphor for progress.

Custom loading icon

Maintaining the visual language of all the system elements, we made the loading icon non-standard. Unlike the usual icons in the form of a circle, we based it on the logo, making the project unique.

Redesign of the selling landing page

We have redesigned the main sales page using the project’s bright stylistic feature — illustrations and icons. The page tells a consistent story of how a newbie can get a great job at a Wall Street bank with the help of The Banking Offer’s professional team.

Main development points

Our team was responsible not only for the design, but also for the full Moodle-based development cycle and payment system integration.

Vimeo video module

A module for watching videos from Vimeo. We easily embedded videos from Vimeo into the right course modules.

Stripe integration plugin

We have developed a custom plugin to integrate with the Stripe payment system. Thanks to the plugin, students are able to pay for the training program.

Our 100% remote collaboration

A large team worked on the project, which consisted of a manager, designer, developers, QA engineer. We also constantly communicated with our client’s team, who left point-by-point comments in Figma. This accelerated our design and development process. Thanks to this communication, we didn’t skip any good idea and always stayed in focus.

Results

The client wanted to create a large-scale project with several thousand students accessing the platform simultaneously. Their main goal was to create a strong, modern user interface. We have created a bright, easy-to-understand, user-friendly interface that fits the spirit of the target audience.

Deliverables

An online learning platform for future bankers
An online learning platform for future bankers
Gamification and interactive display of the student's overall course progress
Module for viewing video from Vimeo service
Convenient payment system
Custom plugin for Stripe payment system integration
Sales landing page with artwork illustrations

Project in figures (impact created)

People

1200

Hours

100 +

Design layouts

Tools Used

Figma, AWS, Stripe, Apache, PHP, MySQL, Moodle, JS, jQuery, scss, Mustache, Grunt

The Banking Offer

The Banking Offer

Client

The Banking Offer is an online education and mentorship program in the field of finance.

Their primary goal is to provide financial education and prepare prospective students to build their careers on Wall Street.

Сhallenge

The client requested to develop a dashboard that would contain all program parts without hiding the needed content from the user.

Solution

A student can also track his learning progress: the steps made, the point he is at, the learning path to go, and the bonuses provided.

Logo improvements

Dashboard redesign

We started work with redesigning the most important part — the user dashboard with video and quizzes. We’ve simplified the user flow so that he has immediate access to the learning materials. We also worked on the UX of the course progress, making it more obvious for the user.

Design of the page with quiz results

All quizzes have 4 types of questions: True or False, Fill in, Sorting and Multiple-choice Questions. We worked out an easy way to understand the type of questions and how to interact with them.

A tooltip with useful information is displayed under each answer, both the correct and wrong ones. We have made the complex quiz results system convenient and really useful for prospective students.

Design of other platform pages

While working on the project, we created many design layouts: registration flow screens, (includes Sign In, Sign Up and Forgot Password screens), the video pop-up, choose a plan flow. Our team created the design of the user profile and some small pages: 404 page and Privacy Policy Pages.

Main visual features

The existing client’s project already had a bright style, which we decided to support. We made it look cleaner and more professional by adding artwork elements to emphasize the uniqueness of our client’s business.

Artwork illustrations

Illustrated Course Progress

Custom loading icon

Redesign of the selling landing page

We have redesigned the main sales page using the project’s bright stylistic feature — illustrations and icons. The page tells a consistent story of how a newbie can get a great job at a Wall Street bank with the help of The Banking Offer’s professional team.

Main development points

Our team was responsible not only for the design, but also for the full Moodle-based development cycle and payment system integration.

Vimeo video module

Stripe integration plugin

Our 100% remote collaboration

Results

The client wanted to create a large-scale project with several thousand students accessing the platform simultaneously. Their main goal was to create a strong, modern user interface. We have created a bright, easy-to-understand, user-friendly interface that fits the spirit of the target audience.

Let us do the work for you!