TrainedIn Landging Page preview
Preview of platform on mac pro


#webapplication

TrainedIn Logo

Fully functional Front-end and Backend Web Application. Learn & Connect with experts that you need.

PROJECT OVERVIEW

Appify Digital“ wanted to develop the project only in its initial MVP phase, containing a reduced number of features to satisfy early customers and gather information on how to improve in the future. The duration of development for the initial phase was 3 and a half months, from beginning of January, to mid April 2020.

Our client's product is “TrainedIn”, a web based platform for connecting training providers with consumers interested in enrolling into courses or applying for teaching jobs. In the never-ending search for new skills and knowledge, our client envisioned making an all-encompassing corpus of training related jobs and courses, designed to satisfy everyone's wishes.

The courses and jobs offered on the platform range from business to personal development and will in the initial MVP phase cover only Ireland and the UK with the intention of covering courses and jobs for trainers all over the world.

WHO IS THE APP MADE FOR?

TrainedIn web app is made for any Training company and trainers wishing to sell on-line, but also on-site courses, as well as freelance trainers who are interested in applying for one of the positions as a teacher of a course. The consumers can freely browse through the whole website to find the course which suits them best, and after finding the best fit for them open an account to be able to apply.

THERE ARE 4 MAIN USER GROUPS IN THIS APP:

TrainedIn administrators are responsible for managing logistics, course and job applications, and payments for other stakeholders.

Freelance trainers can also run private or public training courses, and make themselves available for companies to hire for a teaching job.

Training companies can run private or public training courses. This platform allows them to publicize, advertise and market courses of any type: online courses, in-house courses, location-based courses.

Consumers are a user group that can browse training courses and book them. They can browse courses without making an official account, but if they decide to book a course, they will need to make one, editable by the administrator, with some information they can edit themselves.

WHAT ARE THE MAIN FEATURES OF THE WEBSITE?

The website is based on offering two major services: courses and jobs.

In the MVP stage, we developed necessary features to help customers easily use the platform, bearing in mind to make only the features designed to build trust with customers.


After finishing the course, each attendee can leave a review on the course page, which is visible to everyone, but most importantly, new possible attendees.

Freelance trainers have the possibility to apply for a teaching position on TrainedIn. As every course and job have categories to be filtered by on the website, so do the freelance trainers. Based on the categories they chose, they can apply for a job including the same categories.

JOBS

REVIEWS

COURSES

Project Management Graphic

PROJECT MANAGEMENT

Development Graphic

DEVELOPMENT

Design Graphic

DESIGN

1

PROJECT MANAGEMENT

PROJECT MANAGEMENT OVERVIEW

TECHNICAL DOCUMENTATION

Technical documentation describes the feature set and the system behind Appify’s TrainedIn Web Application. It is intended for use by the project manager, technical lead, and the rest of the team to help guide the development process. With it we could not only estimate the time and cost of the project, but also stay close to the agreed brief with the clients during the development, making sure we deliver on schedule and on budget.

It includes main components of all website features, UI/UX design, and actual development of the MVP project: product scope and website complexity.

Lottie blue circle animation
Project Management project sizing

AGILE SCRUM METHODOLOGY AND PROJECT SIZING

Using the Agile Scrum Methodology the team followed through all iterations in the scheduled time. This methodology relies on incremental development, and promotes effective communication between the team members and the client.

Applying the method of “sizing“ and using the Fibonacci scale, the team broke down the whole project into manageable tasks. Our project consisted of 6 two-week sprints, and each of them consisted of 50 story points on average.

Afterwards, we grouped the user stories together and divided them into 5 epics. Alongside the epics, we managed tasks that were regarded as a foundation for development, including setting up the app architecture, managing content creation with the client and setting up for the deployment of the application, among other tasks.

MEETINGS

Daily meetings of 15 minutes on average were rudimentary for the internal team every morning to be able to keep up-to-date on the tasks finished the day before, plans for that day and possible blockers.

In addition to the internal meeting, in the mornings we would also check in with the client to fill them in on our progress, as well as receive some important information from them.

Design meetings were regularly held in the beginning stages, as well as throughout the development process, to make sure we were on the same page as the client.

Showcase meetings - at the end of each print, our client, project manager and technical lead would set aside a time for an hour long meeting in which we showcased our progress. These meetings were not only important to keep the client up-to-date, but also to build trust and good communication between everyone involved in the project.

Sprint planning - After each of the sprints, the internal team would look at the remaining user stories and tasks, count the story points left to complete and divide them into manageable increments for the next two-week period.

An hour of sprint planning meeting was always followed by a sprint review. We shared everything we thought was an issue in the last sprint and could be improved in the next one. This approach enhanced our workflow.

Project Management Meetings
Lottie animation arrow rotating

CHANGES OF THE FEATURES

As in any project, changes are not a rare occurrence and they are oftentimes welcome. However, if a client doesn't have a technical background, they might ask for some alterations which can turn out to be foundational. These changes would require a structural modification and therefore couldn`t be applied. Nonetheless, we always tried to find the alternative ways to approach every inquiry from the client.

The biggest issue with modifying the initial structure of the web application according to the clients` inputs later in the development, is the so-called „triple constraint“. This model represents the dependency level of three points: budget, cost, scope. If one of the three points ”suffers“, the two others will directly be affected. Project manager and the tech lead had to understand how to assess the possible alteration while communicating with the client, present it to the team and together reach a decision on which action to take.

2

DEVELOPMENT

DEVELOPMENT OVERVIEW

The beginning stages of our project development consisted of making the WBS, work breakdown structure, using Agile methodology and Jira tool.

After creating the infrastructure of the app as well as UML Diagrams, we could start backend and frontend coding.

1

#A wireframe is a visual representation of a user interface.

2

To better understand the flow of this web application in its MVP phase, according to which the developers would code, the designer made a wireframe.

3

According to technical documentation, the team put to paper the logistics behind the project, focusing on implementing good user experience and user interface practices.

4

The production of the wireframe was created in great detail, including specifications for each user group.

5

For example: Training Company is the second user group with the most responsibilities.

6

After signing up, which had to be approved by the admin manually via email, logging in/logging out and resetting the password if forgotten, the Training Company had a couple of options.

7

They could:

1. Post a course and edit the majority of the information on it
2. Search trainers, show profiles of freelance trainers, show courses
3. View profiles and edit them
4. Post jobs
5. View jobs on the job board
6. View Training Companies with their booking information
7. Delete accounts

8

Furthermore, the wireframe included the payment method - direction Consumer to TrainedIn and Training Company to TrainedIn.

1

UML Diagrams and the user flow:

Unified Modelling Language Diagram, short UML Diagram, is a digital modelling scheme that represents the flow of the app, which the team used to visually outline all actions each of the 4 user groups can take in this app.

This is a very concise representation of the web app, which allows designers, developers, and the rest of the team to have a very clear and easily accessible referral scheme. The actions are separated by user type and show all the options each group has in a very abstract way.

TrainedIn UML diagaram example

1

Database modeling:

We created a logical structure of the database including the relationships and restrictions of the entities.

For example, the connection between the course and the users - what is the relationship between the course entity and the user entity. This method has proven to be very useful as we could not only refer to it whenever needed, but also make later decisions on whether to implement a new feature or not.

2

Technologies used for backend development:

The API was written in Typescript using Node.js environment and Express.js framework. We followed SOLID principles and custom onion architectural approach in writing reliable code.

Database of our choice was MongoDB and Mongoose object modeling. To keep track of all the model relationships, we have made several diagrams in various tools, and to keep track of all the requests that were created, we used Postman collections.

3

Technologies used for frontend development:

The website was made with React.JS library, and we used Redux library for managing and handling a couple of different user entities, as well as Bootstrap as our main UI library.

Features are implemented with REST API.

We used MERN stack for this app, and special attention was given to the mobile version of the website.

3

DESIGN

DESIGN PROCESS

 TrainedIn Login
Macbook preview

Since we worked in agile methodology, we added several changes both in wireframes and visual design guide during the process of developement. However, looking at the bigger picture, this method saved us a lot of time both for designers and developers.

After developers implemented design on the actual website, we ran tests and did the design review. The designer then communicated with the developers how to adjusted the fixes accordingly and the project was completed.

TECHNOLOGIES USED FOR FRONTEND DEVELOPMENT

The website was made with React.JS library, and we used Redux library for managing and handling a couple of different user entities, as well as Bootstrap as our main UI library.

We implemented the features using REST API and MERN stack.

HANDLING MULTIPLE TYPE USERS

We made one website, one URL, but 3 different versions of the website, which depend on the user identity/user type. In accordance with different user identities we have made different features.

Commonality for all users types is the process of authorization. Registration differs from user type to user type, and some users have to submit more details upon registration. After finishing the registration process, and logging in as a specific user type, users have access to specific pages and set of actions and features.

TrainedIn Courses preview
Macbook preview
TrainedIn Terms Of Service Page
Macbook preview

By creating two seperate design files, we made a system which provides the developers with outlines to code according to. This way, developers didn't have to wait for the completion of the visual design in order to start building the app.


In the file for visual design, the developers could easily extract files they needed (such as for a look of a specific button), and download all assets that exist in design for this app.

TRAINEDIN RESULTS

We made an intuitive web-based platform in its MVP phase, which the clients and the development team love.

The consumers now have a place where they can easily find and apply for any course or training job they are interested in.

Our client has the possibility to communicate with the consumers through the review system, allowing them to implement customers wishes in the next stage of development.

THE TEAM

K7 Tech frontend development

Milutin Pešikan

FRONTEND DEVELOPER

K7 Tech backend development

Nikola Milić

BACKEND DEVELOPER

K7 Tech design

Uroš Jakovljević

UI/UX DESIGNER

K7 Tech leadership

Petar Lukić

TECH LEAD

K7 Tech product ownership

Miloš Mitrović

PRODUCT OWNER

K7 Tech project management

Jana Škobić

PROJECT MANAGER