The Banking Offer

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

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.
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.
Dashboard redesign

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.
Dashboard redesign

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.
Design of other platform 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.

Artwork illustrations
Illustrated Course Progress

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.

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.
Redesign of the selling landing page

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.

Vimeo video module
Stripe integration plugin

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)
10
People
1200
Hours
100 +
Design layouts
Tools Used
Figma, AWS, Stripe, Apache, PHP, MySQL, Moodle, JS, jQuery, scss, Mustache, Grunt
Get Started