rewisoft

The Secure Coding Education Platform

SecureFlag is an educational training platform for developers to learn modern secure coding practices through hands-on labs.
Industry

eLearning Software & LMS

Country
UK

UK

Company Size
flag

21 employees

general overview

SecureFlag is a training platform for developers and DevOps engineers. Its main goal is to provide a place to learn and practice modern secure coding techniques through hands-on exercises.

Business Challenges

To develop a leading, highly engaging, educational platform that revolutionizes secure coding training and effectively meets market demands.

To Become the Leading Platform in Coding Education

Our goal was to revolutionize the approach to coding training. We developed an architecture of an educational platform that enables software developers to write secure code and helps organizations minimize vulnerabilities in their software applications.
As a result, SecureFlag now offers thousands of hands-on labs for over 45 technologies, covering more than 150 security vulnerabilities and distinguishing itself from competitors.

To Increase Platform Engagement through Highly Adaptive Learning

Since our client already had a design framework, our task was to modernize it by incorporating new features and refining the application's visual aesthetics. Consequently, the platform became more appealing and engaging for users, motivating them to study more dynamically and interactively.

To Create an Easy and Intuitive UI for a Seamless UX

The challenge was to design a user experience that meets market requirements and training specifics. To address this, we developed an interactive onboarding process and created an intuitive information architecture. As a result, the platform received positive online reviews and referrals, with most users noting that the UI/UX is exceptionally smooth.

START THE JOURNEY TO WEB & APP SUCCESS

Contact us

Services We Provided

service
Product Discovery
service
Front-end Development
service
User Testing
service
UI/UX Design

Values we delivered

Real working environments for higher user engagement
Students can learn in virtual environments using familiar tools. The platform seamlessly fits into the software development lifecycle, enabling developers to train with the same IDE and tools they use at their workplace.
Training content for all needs to broaden the target audience
DevOps engineers, developers, technical managers, cloud engineers, QA engineers – anyone involved in the software development lifecycle can use the platform as it provides hands-on training for all these technical profiles.
Highly adaptive learning to achieve customer loyalty
Companies can automatically assign training to participants in the areas they need most by adapting topics and difficulty levels based on each individual's previous results. Companies can also implement iterative and individualized training, filling competence gaps and ensuring they retain the most skilled workforce to achieve their business goals.

The Exceptional Lifecycle of the Product we delivered

01. Discovery and planning

  • Formalize business and user goals
  • Perform market research
  • Perform competitive analysis
  • Describe web-platform persona
  • Create a customer journey map to outline the steps each user must take to achieve a specific goal while using the platform
  • Define functionality for different trader accounts
  • Set tech requirements
  • Determine the scope of work for designers and developers
  • Set project timeline, schedule, and milestones
  • Plan resources and gather a team
  • Conduct discovery workshops with stakeholders to finalize the platform concept

02. UX/UI design

  • Conduct regular internal and customer design workshops to prioritize tasks and agree on design concepts
  • Create design system from scratch
  • Create the platform’s own UI kit from scratch
  • Create an information architecture to highlight relevant design principles for visuals, functionality, interaction, and navigation
  • Create wireframes based on new design system elements
  • Сreate clickable design (hi-fi prototypes)
  • Conduct user testing to collect feedback and make improvements

03. Development

  • Implement web-platform functionality feature by feature according to design and SRS documentation
  • Conduct regular team meetings to fine-tune the product
  • API integration
  • SCORM integration
  • Conduct code and QA peer review
  • Conduct delivery presentations for our customer and other project stakeholders

04. Testing

  • Test platform functionality on all devices
  • Test for compliance with the technical documentation
  • Test platform features
  • Conduct usability testing
  • Conduct users’ acceptance testing
  • Check platform integration
  • Test product’s security and performance

05. Deployment and integration

  • Start gradual deployment of platform features once they are tested
  • Collect early user feedback
  • Make code fixes and improvements

06. Maintenance

  • Handle issues reported by end users
  • Provide ongoing platform maintenance and support
  • Troubleshoot and fix bugs if needed
  • Support platform upgrades

CREATE PLATFORM & APP
That Increase Your Business

Contact Us
cta-img

Personalized approach and technical details

Product requirements
Discovery workshops
Discovery workshops
Project and task management
Jira
tech-stack
Design and prototypes
Figma
tech-stack
Project duration
6 Month
Team
5 adjust specialists:
1 Project manager, 1 Front-end developer, 1 QA engineer, 1 Tech lead, 1 UX/UI designer

Wireframes

case

Design System

The main goal was to modernize SecureFlag's current design system.
Our primary focus was to make the platform more visually appealing for our users, with their needs and preferences taking the lead in our design decisions. We wanted to ensure that every design element resonates with users, making their experience more enjoyable and intuitive.
We designed each platform element consistently to create a cohesive and organic look.
We enhanced essential learning management systems elements: text, buttons, forms/inputs, cards, headers, footers, colors, and icons.
The primary site colors we chose are shades of blue, creating a light and airy feel.
The accent colors to draw attention are red, green, and orange.
We included accent buttons and softened shapes with rounded cards, adding subtle patterns in the background to support the product's concept visually.
design
design

Features

01. UI Design

For the SecureFlag project, we designed a simple yet multifunctional user interface. We organized all the content into convenient modules, making it easy for users to navigate and quickly find the needed materials. The platform’s user interface resembles an online library where all the topics and resources necessary for learning are collected.

case
02. Onboarding

In the onboarding section, users answer specific questions to help us tailor their experience. Then, they proceed to interactive onboarding to see how the online education platform works.

case
03. Exercises Page

The exercises page is essential for employee training. Here, users receive a list of exercises to complete and can view detailed documentation on each exercise.

case
04. Dashboard

The dashboard is a key part of the platform. It gathers statistics, information about active tournaments, exercises, progress tracking, and more. From here, users can access other sections of the platform. The main goal of the dashboard is to show users their most important statistics and results.

 

case
05. Learning Path

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

case
06. Tournaments

Here, users can see lists of both active and completed tournaments. The active tournaments section shows all relevant information, including the leaderboard.

case
07. Achievements

This section includes statistics and a list of users’ awards, certificates, and best results.

case
08. Team Leaderboard

On this page, users can see all team activities: ranking, exercises, points earned, and team metrics.

case
09. Help

The help center organizes important information into blocks. Here, users can ask any questions they have about the platform.

case

Results:

Developed a Secure Educational Coding Platform

We developed SecureFlag, an educational training platform tailored for developers, DevOps, cloud engineers, and QA engineers.

 

We identified two core directions through thorough discovery: front-end development and UI/UX design. Here are the results:

 

  • The platform now supports over 45 technologies and covers more than 150 security vulnerabilities. Users benefit from training in familiar virtual environments with the same IDE and tools they use at their workplace, making the learning process exciting and engaging. 
  • SecureFlag seamlessly fits into the software development lifecycle, enabling developers to train effectively within their existing workflows. This integration ensures that the training is practical and relevant, enhancing the skills and capabilities of its users. 
  • Our UX team modernized the platform by incorporating new features and refining the application’s visual aesthetics, creating an intuitive UI for a seamless user experience. Review blogs show that most users find the UI/UX exceptionally smooth.