Contents

    Client

    We were approached by the world’s largest manufacturing and trading business. It has been on the market since 1911 and has over 10,000 employees worldwide. We can’t share the name under the terms of the NDA.

    Project Idea

    Creating an enterprise application

    The client needed something beyond the simple enterprise social network or intranet. The management had ambitious goals:

    • boosting the computer skills of every single employee,
    • increasing their engagement in business processes,
    • inspiring employees to generate ideas for digital transformation,
    • giving weight to the HR brand.

    Challenge

    Creating a versatile tool for over 10 thousand employees

    In a large business, it’s hard to keep an eye on every process and read the atmosphere in the office. The client needed a versatile environment that would feel equally comfortable to both people in production and office staff.

    About 80% of employees work in production and have little understanding of computer technologies. The remaining 20%, by contrast, are pretty tech savvy and may potentially help their colleagues to catch up. Hence, one of the goals for the new solution is to bridge the gap between the office staff and production.

    Team up the employees and encourage them to generate ideas

    What the company had in mind was more than a mere infrastructure for personnel training. They wanted to give their employees a chance to be proactive and suggest ways to improve the in-house business processes. Ideas for digital transformation had to take center stage. 

    We implemented a user-friendly UI, where any member of staff could easily submit their ideas online. All moderated ideas were transferred to management for review.

    Change the way employees perceive corporate training

    Continuous training is a crucial part of working for a large business. No sooner had the staff passed one performance review than the next one was just around the corner. This can wear you down both physically and mentally. Employees start associating training with excessive stress and extra strain. Besides, a great number of employees have no access to a computer at work.

    The client was looking for a simple training tool that could easily be used by anyone, be it a merchandiser on a business trip, a filler in a production unit, or a manager in an office. 

    The task before us was to change the way employees perceive training and to create a simple and friendly training platform with a clean design that keeps you focused on the most important thing—personal growth. 

    Solutions

    The concept of an app that brings all the employees together originated back when the general manager came up with the idea of a corporate athletic challenge. That was supported by a lot of people in the company and, consequently, brought forward the need for a common platform where everyone could explore and suggest ideas on how to help the business grow.

    In the course of the many brainstorming sessions with the client’s team, the concept evolved into something even larger — in the end, we decided to put all the corporate activities into the app. 

    Backend

    We were tasked with building the entire project from top to bottom. This made our job simpler and more structured right from the start. The analysts put together technical specifications and handed them in to our backend team. The data on employees was all taken from the FTP file provided by the client’s IT unit.

    To build the backend, we chose Kotlin and used a standard set of tools typical for the microservice architecture: the Spring Boot framework and JWT token for authorization. Since the deadlines were pretty tight, we took these tools and built a monolithic architecture virtually split into microservices. 

    When we designed the app, we laid the groundwork in a way that would allow us to easily split it into microservices further down the road. We “packaged” the structure and only then implemented the logic we needed in the isolated parts. Thanks to this approach, you can easily “split” the structure into microservices when needed. 

    Besides that, we kept in mind that the system could potentially expand; for example, there would be new employees who would also need access to it.

    Admin dashboard

    To help the client manage content, we built a custom web app with React and Ant Design.

    Types of authorization

    Even though anyone can download the app from a store, you must be a member of staff listed in the common database to be able to log in. We implemented 2 authorization pathways: via email and a phone number. 

    The Configs tab is only available to a super administrator who can assign and delete administrators. 

    Assigning roles in the web app

    UI/UX design

    We built the concept from scratch. The idea was to make the app look simple and free of overly complicated details, but informative nonetheless. We picked complementary colors of moderate contrast, and the client approved the layout right off the reel.

    The idea behind the app, which is to immerse the employees in an educational element, is supported by the design. We had to make sure that users don’t just read the news and scroll through the feed, but take an active hand in improving the app. The design is structured in a way that helps users move forward in their training and, at the same time, earn bonus points in a gamified process and spend them on workplace improvements and books.

    Interactions with the app are a crucial part of the concept you notice from the very beginning, i.e. onboarding. For this part of the app, we designed and drew characters that show users around the app and set the general tone of it.

    The choice of Flutter

    For the app itself, we suggested using a cross-platform technology called Flutter. It suits mobile apps with high performance and native design, which is exactly what we needed to build a custom enterprise system. Given that, with a cross-platform framework, we can create apps for two operating systems — iOS and Android — on just a single code base, we can cut the time and money spent on development by about 30% compared to native apps.

    Function-wise, a Flutter app is in no way inferior to a native one, which means we could implement all the features that the client was expecting to find in the app.

    A wide range of activities

    Training

    Administrators. To add a course, administrators need to click a plus button in the “Courses” tab of the admin dashboard — the app will add an entity inside of which they will have to add lessons. The editing page contains “Name”, “Description”, and “Text” fields that need to be filled out for each lesson.

    To create vivid and engaging lessons, admins can insert links or the YouTube player, where users can play a video in a minimized window. Flutter has a dedicated library to provide this type of integration. The files attached to a lesson are downloadable; they will go to the Downloads folder on the user’s smartphone.

    Students. We based the training process on game mechanics. Users scroll through the thread, press the plus button to pick courses, and then simply go to the tab called “My training” and study the courses they chose. In addition to that, users can delete the courses they have completed or lost interest in. Each course costs a specific number of bonus points that users can earn once they have successfully completed it.

    Tests

    All courses can have tests added to them. Admins can add a counter of questions and tweak the test. For example, they can specify the number of questions they want shown: say, 8 random ones out of 20.

    The “Start” button is active if a user has never taken the test before, while the “Repeat” button is active if a user has failed the test earlier. A test is considered passed if a user gets over 80% of the answers right.

    The questions are given at random: once you come back to take the test again, the app generates a different sequence of questions. 

    Points are only granted when a course is complete. 

    Articles

    A news thread is a great tool to keep employees up to speed with the life of your company as well as to get feedback. We made it a must for an article to be accompanied by an image. That way, the look of it goes along the lines of the ever so familiar news feeds on social media.

    Each article page has a familiar “Like” button, which, when clicked, also grants points to the reader.

    In this block, users provide feedback via an option called “Suggest a topic”. Any employee may send a brief description of an event or submit an article. It then goes to the administrator and, once validated, gets published and earns its author the well-deserved points.

    Store

    An enterprise app is not a classic e-commerce app. Here, you can’t literally “buy” an item. Essentially, it’s a window display of material incentives with assumed prices.

    With the bonus points earned in the app, employees can pick the items they like and make an order. The list of items is curated by the administrator, who sets the names, prices (points), and quantities (in stock at the warehouse) and uploads images. 

    In order to get an item, users have to press “Order”; the administrator will receive the request, check the details, and give the item to the addressee, while the corresponding number of bonus points will be written off.

    Share progress

    Here’s another way of user interaction. Needless to say, it’s remunerable. Whenever employees do something useful offline, such as helping carry a box of cookies, they are eligible for more bonus points. All they have to do is click “Share progress”, write a short description, and attach a photo. The administrator will look into it and grant points.

    Leader borards

    Nothing motivates you to seek new challenges like healthy competition. The client thought it—we put it into action. The app has a multi-layer rating system: users can view person-wise, department-wise, and company-wise ratings. All ratings are graphic — each user is given a tier in accordance with their position in the list.

    Here, users can also view their points balance, updated daily, and information about the scoring system. Further down the road, the section is meant to include a vacation countdown and a vacation request form.

    Results

    We built an app that has the potential to bridge the gap between the back office and production. It boosted computer skills and motivation to learn. Today, the mandatory training is no longer a burden but a fun gamified experience. Game mechanics help lure employees into the common digital environment. 

    One of the key features that drives both personal and corporate growth is suggestions. The management fosters openness and creativity, and the employees no longer feel left out. Instead, they now have a sense of belonging and know they are working for a common cause. Such HR initiatives have the potential to initiate and develop a common business strategy. 

    We believe that enterprise applications are essential to the HR culture of a large company, and such an app can be tweaked to the needs of your business.

    Contact us
    Let’s discuss your project together
    CEO photo white

    Vladi Makeew

    CEO of Surf
    Drop a file here or click to upload
      Hidden span