Home / Case Studies / SecureFlag

SecureFlag

An advanced training platform for developers and DevOps engineers

Client Overview

SecureFlag helps developers and DevOps engineers master new skills with hands-on exercises and real-world scenarios in real development environments. Users have access to a continuously updated library of labs based on real-world vulnerabilities.

Services

Discovery UI/UX Design User Testing Front-end

Northell is staffed with exceptionally talented professionals who are committed to delivering projects on time

Andrea Scaduto | Co-Founder & Director, SecureFlag

The challenge

An advanced training platform that helps developers and DevOps engineers enhance their professional expertise

SecureFlag needed a redesign and optimization of their platform. The deadlines for all tasks were pretty short and we had to save almost everything by changing the visual part of the product.

The strategy

Based on the concept of the application and its designs, we prepared a roadmap to start the development in an agile manner.

Discovery

  • Business & user goals
  • Stakeholder & user interviews
  • Market research
  • Personas
  • CJM

UX Design

  • Information architecture
  • Wireframes

UI Design

  • Design system
  • UI Design

User Testing

  • Clickable design
  • Testing on users

Front-End

  • Design layout implementation
  • Testing on users

The Target audience

The main target audience of Secure Flag are companies that buy in-app subscriptions and create training programs for their employees, namely for developers.

User-flow

Our team worked on the user persona. A user is a person who is being trained to improve skills in safe and secure programming.

Here is the user flow:

On the sidebar, the user has Dashboard

(all statistics)

Achievements

(general place where all the
achievements are collected)

Exercises, Learning Path

(it's like a library where you can get training
on certain topics to complete the task)

Team

(all team members and their
metrics are shown here)

Tournaments

(various competitions to improve skills)

Wireframes

Design System

Secure Flag had its own design system. Our task was to modernize it and make it attractive for users. We worked on basic elements such as Text, Buttons, Forms/Inputs, Cards, Header, Footer, Colors and Icons. The main colors we used were blue and its shades. To make accents, we used bright colors such as red, green and orange. We made each element of the system design in one style to make everything look organic.

UI Design

Onboarding

In the onboarding section, users answer certain questions so that we can customize the experience. Then they move on to interactive onboarding where they can see how the platform works.

Dashboard

This is the essential part of the platform where all statistics, information about active tournaments, exercises, level of progress, etc., are collected. From here, the user can go to other sections of the platform. The most crucial goal of the dashboard is to show users their most important statistics and results.

Exercises page

On this page, users get a list of exercises to perform. They can also view detailed documentation on these exercises.

Learning path

In this section, users choose which programming language they want to learn. They can choose courses of any level (beginner, intermediate and advanced) and read more about them or watch videos.

Tournaments

Here users can see a list of active tournaments and a list of completed tournaments. In the active tournament, the user sees all the information about it and the leaderboard.

Achievements

In addition to statistics, users can see all their awards, certificates, and best results in this section.

Team leaderboard

On this page, users see all the actions that take place in the team, who is in what place, who has done how many exercises, who has how many points. Also, here are team metrics.

Help

This is a help center where all important information is divided into blocks. Here the user can ask any question about the platform.

Development part

We worked on the frontend part of this platform. Secure Flag came to us with a ready backend and we only had to do the layout. We have turned the entire platform into a full-fledged product that meets the needs of the client.

Implementation

Our software developers wrote code for the components using the documentation and architecture from previous steps the Northell team worked on. The SecureFlag project’s tasks were divided between the team members according to their area of specialization. Our front-end developers were responsible for the client side of the SecureFlag platform.

Testing

Our QA engineers worked on testing all delivered code and wrote automated tests for developed components.

Product Deployment and Integration

After the development and testing stages, there was a production deployment and integration. We delivered the tested version of the platform to the users for beta testing. Our team collected feedback from the users, and fixed all the bugs, and implemented some improvements. As a result, we have turned the entire platform into a full-fledged product that meets the client's needs.

Maintenance

After the deployment of a SecureFlag product on the production environment, if any issue comes up and needs to be fixed or any improvements are to be done is taken care of by the Northell development team.

Results

Northell team managed to improve the appearance of the platform, simplify it, and also upgrade. Thus, the platform has become better and more user-friendly. After creating the design, developers worked on the platform and turned the design into a full-fledged product.

launch 1 1
Cover MeetAlfred 1536x1200 1
smartjen 1 1

Do you like it? Wanna have yours done?

Let’s do it

Ready to start? We look forward to welcoming you!

    Subscribe to our newsletter

    Become a part of a community with more than
    2000 Entrepreneurs who want to create
    valuable products.