Have an idea?

Core Developer – the platform for learning how to program

Core Developer – the platform for learning how to program - Website Development - Photo 1
Overview

The platform that helps people learn different programming languages

Core Developer teaches development basics from scratch: Swift, C/C++, HTML, CSS, PHP, and JavaScript. There are also introductory blocks on React/Redux, data visualization, and a bit on the backend. There is an organic combination of “video” and tasks in one platform: as if the teacher was sitting next to you and showing what he was doing in the editor.

Client

Core Developer

Services
  • Research
  • Wireframing
  • UI design
  • Development
Business needs

Client request

The client’s request implied a lot of work, which began with the Discovery phase and continued with various tasks.

The Core Developer team tasked us with designing a convenient and easy-to-use learning platform with two different sets of functionality for students and teachers as well as a promo website design.

Our role

Our responsibility  was not only the implementation of some solutions but also finding them. The main point was to find these solutions during the UX research, competitors, and business analysis. Solutions such as choosing the best technologies, integrations, and even a better way for internal fees to be paid for additional monetization of the platform were incorporated.

Project
Problems & solutions
Problems
1

Most learning platforms provide only theory lessons. To practice tasks, you need to use additional specialized platforms.

2

Often people who have never coded in their lives don't know which programming language they would like to use the most. It's hard for them to choose and buy any particular course among the huge market options.

3

When buying online courses where the lectures are recorded, and there is no eye-to-eye communication with the teacher, there is no way to ask for help when something does not work out.

Solutions
1

On our platform, students can watch theory videos and practice their skills in a designated area for writing code.

2

Users don't have to pay for each course separately. Users can sign up for a trial subscription, take an introductory course, and then decide on the one that suits them best. There's also motivation to complete courses faster, so you can get as many classes as possible for a monthly fee.

3

Support and feedback are very important in any endeavor. Students can always contact the teacher via live chat and get an answer within 24 hours. There is also online support, which answers any questions within 20 minutes.

Research stages

Research process

We analyzed the best competitors in the education field using a SWOT analysis. Additionally, a business analysis was conducted to find the best way to implement features correctly and bring profit to the product.

Stages
  • SWOT analysis
  • Business analysis
  • Map
  • User Flow
Core Developer – the platform for learning how to program - Website Development - Photo 6
Stage 1
SWOT Analysis

The main goal of this platform’s SWOT analysis was to identify competing platforms’ weaknesses and transform them into our strengths.

What we did 

During the SWOT analysis, we found the following problems:

  • Limited social interaction between students and teachers
  • Lack of discipline on the part of students
  • Scattered and unorganized teaching tools

So, we were able to optimize online learning and add such key  features as all the necessary tools for learning in one place, new methods of motivation for students through setting goals and tracking their progress, as well as online support and communication with teachers.

Core Developer – the platform for learning how to program - Website Development - Photo 7
Stage 2
Business Analysis

The main goal of the BA for this platform was to describe the functionality through the user story and documentation of each function through

  • Analysis of the subject area
  • Identification of current problems and their solutions
  • Recommendations and advice on solution implementation
  • Prioritized feature list
What we did

During the BA, we explained to the client the characteristics of the solutions we collected, outlining their benefits and risks.

  • The priority feature was integrating coding tools with our platform, a unique feature. During the analysis, we encountered the problem that full integration is not yet possible, and therefore we did an estimate to add basic functionality. Initially, our team integrated three tools: Swift, HTML, and CSS. We did it as an MVP to make the platform known in the market and gain the minimum audience.
  • Uploading content was decided to be made in the form of a constructor so that course owners can conveniently customize it for themselves. It was decided to divide the process into steps and estimate each step separately since each has distinctive characteristics and nuances.
  • Monetization of the MVP initially consisted of only two options: subscription and one-time purchase. However, two more payment methods were added (free and payment plan) after collecting feedback from the first users. Also, in the beginning, there was an estimation only for payment by card. Later we added payment through cryptocurrency, as well as a referral program.
  • We decided to work with the analytics mechanisms built into the platform to obtain data on user activity. To do this, we created our graphs with student performance statistics, goal setting, and conversion analysis for course owners and their student localization.
Stage 3
Map

Based on the data from our client and the results obtained during the research, we created an Informational Architecture for the platform.

Through a series of iterations and diving deep into the exploration sessions, we clarified the vision for the platform, allowing us to work through the details together. This included adding the integration of software tools for writing code of various programming languages together with our platform, built-in messenger, and an online chat with technical support, flexible daily, weekly and monthly goal builder, as well as separate functionality for two types of users. As a result, we arrived at seven main flows. We continued to evolve: authorization, uploading a course / taking a course, checking/doing homework, analyzing and viewing statistics, communication via chat, writing and passing skill tests, and payment options were added.

Core Developer – the platform for learning how to program - Website Development - Photo 8
Stage 4
User flow

User flow is a visual representation of the sequence of actions the user performs to achieve his goal. Our team built future steps and further worked on the interface to determine how users achieve the goal, calculating positive and negative scenarios. The diagram below is an example that shows how we were able to simplify the process of handing in homework. During homework, students can leave comments, the answers to which will be received within 1 working day. They can also move on to the next lesson to save time while waiting for an answer to their questions.

Core Developer – the platform for learning how to program - Website Development - Photo 9
Design stages

Design

Turn the analysis results into a user-friendly interface that complies with generally accepted usability rules, solves users’ needs, and makes their journey as smooth as possible.

Stages
  • Wireframe
  • Moodboard
  • Design Concept
  • UI Design
Stage 1
Wireframes

We created wireframes and clickable prototypes, which are integral to working on the design structure, testing, and improving the user journey before proceeding to the final mockup design.

This stage helped us understand the logic and structure of the future service. We created and approved prototypes for each flow, where we worked out all possible states for each screen, decided on the size and number of containers for illustrations, and checked the convenience and clarity of each flow.

Core Developer – the platform for learning how to program - Website Development - Photo 10
Core Developer – the platform for learning how to program - Website Development - Photo 11
Stage 2
Moodboard & Design Concept

To determine the visual direction and style of the interface, our team created a moodboard and coordinated it with the client. It allowed us to choose the most suitable solution in the earlier stages.

Based on the research and the direction chosen in the moodboard, our team created the first visual concept of the site, which demonstrated the chosen style in real conditions before creating the finished UI design. The moodboard helped us decide that the platform should be in dark colors, emphasizing typography and bright gradients, to stand out from competitors who mainly use light/blue tones and calmer, more restrained fonts.

Stage 3
UI Design

Our initial take was a more subdued concept with flat illustrations and a blue accent. Still, we noticed a similarity to Facebook’s design and decided to drastically change the concept to use bright green and abstract line illustrations as an accent. The green color is considered quite calm, does not irritate the eyes, and symbolizes prosperity and new beginnings. Bright gradients and minimalistic illustrations complement and dilute the interface.

Core Developer – the platform for learning how to program - Website Development - Photo 14
Project
Features we implemented
Working area

The ability to adjust the desired and comfortable size of the workspace, settings, and choice of programming language for a specific course or lesson allows the platform to be flexible and comfortable for learning. When viewing educational materials, the user can simultaneously code and pry the shortcuts he needs for faster typing. The special slider in the middle separates the area with training materials and the working area for writing code.

Core Developer – the platform for learning how to program - Website Development - Photo 15
Testing the code on a real device

When doing homework, the student can see and test his code on the platform. For example, if a student is taking a course on developing an application for iOS, he can choose the iPhone model he needs and see how his code works on an actual device.

Core Developer – the platform for learning how to program - Website Development - Photo 16
Content uploading

The course uploading process consists of 5 steps: type, basic information, content, price, and view. The material uploading functionality has a constructor form where the course owner can create topics and lessons, upload materials, and drag and drop training blocks in the order he needs.

Core Developer – the platform for learning how to program - Website Development - Photo 17
Subscription

Users do not need to pay for each course separately. On the platform, it is possible to sign up for a trial subscription, take an introductory course, and then choose one that suits them best. When uploading a course, an owner can choose one of four payment options: free, one-time purchase, payment plan, or subscription. Thus, the platform is as flexible as possible in terms of payment for both students and teachers.

Core Developer – the platform for learning how to program - Website Development - Photo 18
Dashboard

Both types of users can view their analytics and statistics on the Dashboard tab. Only the data will be different. The course owner can track the conversion of views and purchases of their courses, homework to be checked, and course statistics, including localization. The student can track their activity, set a goal, view progress, and jump directly to the lesson he started.

Core Developer – the platform for learning how to program - Website Development - Photo 19
Functional
Work continues on new functionality
Additional programming languages

We are currently working on adding courses in Python, Java, and Kotlin.

Portal for finding internships

Our team is also developing a built-in portal where students who have completed courses can find internships for practical training.

Adding design topics to courses

We plan to add a new direction in education — design courses to increase the audience and functionality of the platform.

Offer pages for the platform

The platform's development continues. We're preparing many new pages focusing on the customers' products.

Conclusion
Results

The team created a splendiferous design that helped clients boost their profile in the online education market.

  • The platform acquired more than 100K users in less than a year.
  • 27% percent of students say that the learning process on the Core Developer platform is more effective than other platforms.
  • The company has already received more than $1M in investments due to recognition and rapid growth in the market.
  • Clients and our team are getting a lot of positive feedback from the audience about the platform’s Visual Style and functionality.
Our cases
More cases
We work with both small startups and large corporations.
Eduwerks – E-learning platform - Website Development - Photo

Eduwerks helps schools move education online.

UVER – Universities Aggregator mobile app - Website Development - Photo

Mobile application that makes enrollees’ lives better. It helps future students to search for colleges or universities easily and send applications at the right time.

Contact us

Ready to bring

your idea to life?
Ready to
bring
 your
idea to life?

You can upload maximum 5 files
Some of your file not loaded, because maximum file size - 5 mb
What is your budget for this project?
How did you hear about us? (optional)
Project Talk - Kseniia Shalia
Account Executive
Partnership - Polina Chebanova
Co-Founder